WashingCar-frontend-Ver3.0/pages/vehicle/vehicle.vue

<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="vehicle">
		<view class="tops"></view>
	<view class="maxBox" v-if="isShow===1">
		<view class="vehicle-title">
			您已添加2辆
		</view>
		<view class="box">
			<view class="box-top">
				<text>微信昵称</text><text class="color-b">浙A223PW</text>
			</view>
			<view class="box-center">
				<text>手机号：12312341234</text><img class="delete" src="" alt="" />
			</view>
		</view>
		<view class="box">
			<view class="box-top">
				<text>微信昵称</text><text class="color-g">浙A223PW1</text>
			</view>
			<view class="box-center">
				<text>手机号：12312341234</text><img class="delete" src="" alt="" />
			</view>
		</view>
	</view>
	<view class="maxBox1" v-if="isShow===0">
		<img class="maxBox1-i" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
		<view class="maxBox1-title">
			<view class="title-top">
				添加车辆
			</view>
			<view class="title-center">
				您尚未添加车辆，请您添加车辆信息
			</view>
		</view>
	</view>
		<view class="btns" @click="addValidate">
			添加车辆
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const titles = ref('我的车辆')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const isShow = ref(1)
	const addValidate = ()=>{
		uni.navigateTo({
			url:"/pages/addValidate/addValidate"
		})
	}
</script>

<style lang="scss">
	.vehicle{
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #f2f2f2;
		.tops{
			width: 100%;
			height: 11%;
		}
		.maxBox{
			width: 100%;
			.vehicle-title{
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				box-sizing:border-box;
				padding-left: 30rpx;
				padding-top: 20rpx;
				font-size: 28rpx;
				font-weight: 600;
			}
			.box{
				width: 90%;
				margin-left:50% ;
				transform: translateX(-50%);
				background-color: #fff;
				margin-top: 40rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				.box-top{
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding-left: 40rpx;
					padding-right: 40rpx;
					padding-top: 20rpx;
					font-size: 26rpx;
					.color-b{
						color: #009dd9;
					}
					.color-g{
						color: seagreen;
					}
				}
				.box-center{
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding-left: 40rpx;
					padding-right: 40rpx;
					font-size: 26rpx;
					.delete{
						width: 50rpx;
						height: 50rpx;
						border: 1rpx solid red;
					}
				}
			}
		}
		.maxBox1{
			width: 100%;
			.maxBox1-i{
				width: 100%;
				height: 500rpx;
			}
			.maxBox1-title{
				width: 100%;
				.title-top{
					font: 30rpx;
					text-align: center;
					font-weight: 700;
					margin-top: 30rpx;
				}
				.title-center{
					font: 26rpx;
					text-align: center;
					margin-top: 30rpx;
				}
			}
		}
		
		.btns{
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: white;
			text-align: center;
			background-color: #d9001b;
			margin-left: 50%;
			transform: translateX(-50%);
			margin-top: 80rpx;
			font-size:28rpx;
		
		}
	}
	       
</style>