epc/pages/mobile/SelectCarFour.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">选择车辆配置</view>
				<view class="zdyNavRight" @click="goOemSearch">OEM搜索</view>
				<!-- <view style="width: 10rpx;"></view> -->
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>

		<view class="top">{{title}}</view>

		<view @click="goSelectCarFive()" class="cangBox" v-for="(item,index) in cangList" :key="index">
			<view class="leftBox">
				<view class="cangTitle">这是市场</view>
				<view v-for="(item,index) in xingList" :key="index">
					<view class="xing">限制 I：这是限制这是限制</view>
				</view>
			</view>

			<image src="../../static/img/rightArrow.png" mode="" style="width: 12rpx; height: 20rpx"></image>


		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '大众 > 迈腾 > 2022',
				iStatusBarHeight: '',
				cangList: [1, 3, 4],
				xingList: [1, 2, 3, 4, 5],
			}
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;

		},
		methods: {
			goSelectCarFive(){
				uni.navigateTo({
					url: 'SelectCarFive'
				})
			},
			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;

	}

	.backImg {
		width: 44rpx;
		height: 44rpx;
		margin-left: 10rpx;
		margin-right: 20rpx;
	}

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

	}

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

	.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;
		margin-right: 24rpx;
	}

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

		background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
	}

	.cangBox {
		background: #FFFFFF;
		padding: 24rpx;
		border-bottom: 1rpx solid #eeeeee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.leftBox{
		width: 97%;
	}
	.cangTitle {
		padding-bottom: 10rpx;
		color: #333333;
		font-size: 26rpx;
		font-weight: bold;
	}

	.xing {
		font-size: 24rpx;
		color: #999999;
	}
</style>