carrent-front/pages/home/index.vue

<template>
	<view>
		<view class="se-pos se-pos-lt" style="z-index: -1;width: 750rpx;height: 388rpx;
		background: linear-gradient(168deg,#669a32 0%, #669a32 72%);
		border-radius: 0rpx 0rpx 80rpx 80rpx;">
		</view>
		<view class="se-flex se-flex-h-sb se-px-20 se-pb-10 se-pt-10 se-zi-s" style="background-color: transparent;">
			<view class="se-c-white se-fs-28">
				<view class="se-c-white se-py-5 se-px-10 se-fw-6 se-br-12 se-fs-28 se-display-ib">
					环保
				</view>
				<text class="se-ml-10 se-fw-6 se-fs-22">寻找你想要的</text>
			</view>
		</view>
		<view class="se-px-40 se-py-20">
			<view class=" se-br-50 se-c-black se-px-20 se-py-5 se-flex se-flex-h-sb se-fs-26">
				<view class="se-pl-10 se-pr-20 se-flex se-flex-h se-h-40 se-lh-40 " @click="handleAreaChange()">
					<text class="se-pr-20 se-c-white nobreak">{{city?city:'未知'}}</text>
					<u-icon name="arrow-down-fill" color="#ffffff"></u-icon>
				</view>
				<view class="se-ml-20 se-w-p-100">
					<u-search :disabled="true" @click="onSearch()" :showAction="false" bgColor="#ffffff" placeholder="搜索" v-model="keyword"></u-search>
				</view>
			</view>
		</view>
		<view class="se-pb-20 se-pt-40 se-zi-s">
			<view class="se-px-20">
				<u-swiper height="300rpx" style="background-color: transparent;height: 300rpx;" :list="list" @click="swiperClick"></u-swiper>
			</view>
			<!-- <view class="se-pt-10 se-bgc-white se-px-0 se-py-10 se-ta-l se-c-orange se-flex se-flex-ai-c se-fs-26">
				<image class="se-a-80" src="@/static/image/aed60x.png" mode=""></image>
				<text class="se-ml-10">今日有6个工作息新发布....</text>
			</view> -->
		</view>
		<view class="se-my-20 se-pt-20 se-bgc-white se-grid">
			<navigator :url="item.url" v-for="(item, index) in nav" :key="index" class="se-flex-v-c se-pt-10 se-mb-10">
				<image class="se-a-100 se-br-20" :src="item.img" mode=""></image>
				<text class="se-w-150 se-h-60 se-lh-30 se-c-black se-fs-22 se-ta-c se-mt-10 se-toe-2">{{item.name}}</text>
			</navigator>
		</view>
		<view class="se-px-30 se-py-30 se-bgc-white se-c-black">
			精品二手车
		</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">
					<view class="se-fs-24 se-display-ib">
						<text class="se-c-orange se-fs-30 se-fw-6"><text class="se-fs-24">￥</text>6000<text class="se-fs-24">元</text></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{
		components:{
			
		},
		data(){
			return {
				city:"",
				list: [
					"https://cdn.uviewui.com/uview/swiper/swiper1.png"
				],
				nav:[
					{
						img:"../../static/image/nav1.png",
						name:"新车商城",
						url:"/pages_subpack/category/index"
					},
					{
						img:"../../static/image/nav2.png",
						name:"二手车商城",
						url:"/pages_subpack/category/index"
					},
					{
						img:"../../static/image/nav3.png",
						name:"环卫设备及配件",
						url:"/pages_subpack/category/index"
					},
					{
						img:"../../static/image/nav4.png",
						name:"车辆租赁",
						url:"/pages_subpack/category/index"
					},
					{
						img:"../../static/image/nav5.png",
						name:"新闻资讯",
						url:"/pages_subpack/news/index"
					},
					{
						img:"../../static/image/nav6.png",
						name:"帮助寻车",
						url:"/pages_subpack/category/index"
					}
				],
			}
		},
		mounted() {
			
		},
		methods:{
			handleAreaChange(){
				console.info("获取地址")
			},
			swiperClick(event){
				console.info(event)
			},
			onDetail(event){
				uni.navigateTo({
					url:"/pages_subpack/detail/index"
				})
			}
		}
		
	}
</script>
<style>
	.nobreak {
	  white-space: nowrap;
	}
	page{
		background-color: #f5f5f5;
	}
	.enterprise{
		background: #ff7a31;
		border: 4rpx solid rgba(255,255,255,0.50);
		border-radius: 14rpx;
	}
	.master{
		background: #f0b744;
		border: 4rpx solid rgba(255,255,255,0.50);
		border-radius: 14rpx;
	}
	.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>