carrent-front/pages_subpack/category/index.vue

<template>
	<view>
		<view class="se-flex se-bgc-white se-fs-26 se-h-80 se-b-b">
			<view class="se-flex-1 se-flex se-flex-h-c">
				<text class="se-mr-10">分类</text>
				<u-icon name="arrow-down-fill" color="#666666"></u-icon>
			</view>
			<view class="se-flex-1 se-b-l se-b-r  se-flex se-flex-h-c">
				<text class="se-mr-10">时间</text>
				<u-icon name="arrow-down-fill" color="#666666"></u-icon>
			</view>
			<view class="se-flex-1  se-flex se-flex-h-c">
				<text class="se-mr-10">公里数</text>
				<u-icon name="arrow-down-fill" color="#666666"></u-icon>
			</view>
		</view>
		<view class="se-grid-2">
			<view class="items-box se-br-5 se-px-10" v-for="(items,indexs) in 10" :key="indexs" @click="onDetail(items)">
				<image class="se-w-p-100 se-h-200  se-py-5" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode=""></image>
				<view class="se-c-black se-fs-24 se-fw-6 se-mt-10">
					HOUS环卫车
				</view>
				<view class="se-flex se-mt-10">
					<view class="se-tag">
						品牌名
					</view>
					<view class="se-tag">
						品牌名
					</view>
					<view class="se-tag">
						品牌名
					</view>
				</view>
				<view class="se-flex se-flex-h-sb se-w-p-100 se-pt-20" style="align-items: flex-end;">
					<view class="se-fs-24  se-flex se-flex-v-c" style="align-items: flex-start;">
						<text class="se-c-orange se-fs-30 se-fw-6 se-pb-10"><text class="se-fs-24">￥</text>6000<text class="se-fs-24">元</text></text>
						<text class="se-c-66">浏览量999+</text>
					</view>
					<view class="se-display-ib se-bgc-orange se-px-15 se-br-40 se-flex-h-c se-h-40 se-lh-40 se-ta-c se-fs-22 se-c-white se-b">
						<text>查看详情</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			onDetail(event){
				uni.navigateTo({
					url:"/pages_subpack/detail/index"
				})
			}
		}
	}
</script>

<style>
	.items-box{
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.05); 
		padding: 20rpx;
	}
	.se-tag{
		padding: 5rpx 10rpx;
		background: #fff2df;
		border-radius: 4rpx;
		border: 2rpx solid rgba(0,0,0,0.00);
		font-size: 16rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #fab143;
		margin-left: 10rpx;
	}
	
	.se-tag:first-child{
		margin-left: 0rpx;
	}
</style>