epc/pages/mobile/SelectCarTwo.vue

<template>
	<view class="box">
		<!-- 自定义导航 -->
		<view class="zdyNavBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="zdyNav">
				<view class="zdyNavLeft">
					<image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback">
					</image>

				</view>
				<view class="zdyNavTitle">{{title}}</view>
				<view class="zdyNavRight" @click="goOemSearch">OEM搜索</view>
				
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>

		<!-- 搜索 -->
		<view class="searchBoxBg">
			<searchBox placeholder="搜索车型" @search='search($event)'></searchBox>
		</view>
		
		<view class="cangBox" v-for="(item,index) in cangList" :key="index">
			<view class="cangTitle">一汽大众</view>
			<view @click="goSelectCarThree()" class="xingBox" v-for="(item,index) in xingList" :key="index">
				<view class="xing">迈腾</view>
				<image src="../../static/img/rightArrow.png" mode="" style="width: 12rpx; height: 20rpx"></image>
			</view>
		</view>


	</view>
</template>

<script>
	import searchBox from '@/components/searchBox/searchBox.vue'
	export default {
		components: {
			searchBox
		},
		data() {
			return {
				title: '大众',
				iStatusBarHeight: '',
				searchValue: '',
				cangList: [1, 2],
				xingList: [1, 2, 3, 4, 5],
			}
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;

		},
		methods: {
			search(val) {
				// console.log(val);
				this.searchValue = val
			
			},
			goSelectCarThree(){
				uni.navigateTo({
					url: 'SelectCarThree'
				})
			},
			
			goOemSearch() {
				uni.navigateTo({
					url: 'OemSearch'
				})
			},
			goback() {
				console.log('返回');
				uni.navigateBack({})
			},
		}
	}
</script>

<style>
	.box {
		min-height: 100vh;
		background: #ffffff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.zdyNavBox {
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;
		

	}

	.zdyNav {
		height: 44px;
		display: flex;
		justify-content: space-between;

		align-items: center;
		padding: 0 24rpx;
	}

	.backImg {
		width: 22rpx;
		height: 40rpx;
		
	}

	.homeImg {
		width: 44rpx;
		height: 44rpx;

	}

	.zdyNavLeft {
		display: flex;
		align-items: center;
		width: 120rpx;
	}

	.zdyNavTitle {

		height: 44px;
		background: #FFFFFF;
		text-align: center;
		font-size: 34rpx;
		line-height: 44px;
	}

	.zdyNavRight {
		height: 44px;
		background: #FFFFFF;
		text-align: center;
		font-size: 28rpx;
		line-height: 44px;
		color: #3F90F7;
		width: 120rpx;
	}

	.top {
		color: #FFFFFF;
		font-size: 28rpx;
		padding: 24rpx;

		background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
	}
	.cangBox{
		background: #FFFFFF;
	}
	.cangTitle{
		padding: 10rpx 24rpx;
		background: #F4F5F7;
		color: #333333;
		font-size: 28rpx;
	}
	.xingBox{
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1rpx solid #eeeeee;
	}
</style>