dykj-outsource-12123/pages/index/components/myCar.vue

<template>
	<view style="background-color: #2c66a9; width: 100%; height: 5vh"
		:style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }">
		<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="van-nav-bar">
			<view class="van-nav-bar__content">
				<view class="page-icon" @click="gotoBack">
					<uni-icons color="#fff" type="back" size="26"></uni-icons>
					<view>返回</view>
				</view>
				<view class="page-navbar">我的机动车</view>
			</view>
		</view>
		<view class="content">
			<view class="card-car" v-if='true'>
				<view class="car-top">
					<image src="../../../static/R41.png" class="image"></image>
					<view class="car-top-text">
						<text style="font-size: 40rpx; font-weight: 600; color: ;">黑A00000</text>
						<text style="color: #808080;">*宇</text>
					</view>
				</view>
				<view class="car-center">
					<text style="margin-left: 40rpx; font-size: 38rpx; color: #3b3b3b;">机动车状态</text>
					<view class="car-center-tag">
						<text style="font-size: 20rpx;">正常</text>
					</view>
				</view>
				<view class="car-bottom">
					<uni-icons type="down" size="26" color="#b5b5b5"></uni-icons>
				</view>
			</view>
			<view class="noData" v-else>
				<view style="display: flex;flex-direction: column; align-items: center;">
					<image src="../../../static/wangban/oe.png" style="width:250rpx; height: 200rpx"></image>
					<text style="margin-top: 60rpx; font-weight: 600;">未查询到机动车信息</text>
				</view>
				<view class="warning" style="margin-top: 40rpx;">
					若车...<a href="#" style="color: #2d65a5;">反馈</a>
				</view>
			</view>
			<view class="warning" style="margin-top: 80rpx;">
				本人车辆信息缺失或有误，请点击<a href="#" style="color: #2d65a5;">此处反馈</a>
			</view>
		</view>
		<view class="van-nav-bar positionBottom">
			<view class="van-nav-bar__content" style="cursor: pointer;">
				<view class="page-navbar">备案非本人机动车</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync();
	const gotoBack = () => {
		uni.navigateBack({
			delta: 1,
		});
	};
	onLoad((option)=>{
		console.log(option)
	})
	const grade = ref(0);
</script>

<style lang="scss">
	.van-nav-bar__content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 3rem;
		background-color: #2c66a9;
		color: #fff;
		letter-spacing: 1.5px;
		position: relative;

		.page-icon {
			display: flex;
			align-items: center;
			position: absolute;
			left: 0;
		}

		.page-navbar {
			font-size: 1.1rem;
		}
	}

	.content {
		width: 689rpx;
		padding: 20rpx 30rpx;
		height: 85.7vh;
		background-color: #f5f9fa;

		.card-car {
			border-radius: 10rpx;
			background-color: #fff;

			.car-top {
				height: 160rpx;
				border-bottom: 1rpx solid #f3f3f3;
				display: flex;
				align-items: center;

				.car-top-text {
					display: flex;
					flex-direction: column;
				}
			}

			.car-center {
				height: 110rpx;
				border-bottom: 1rpx solid #f3f3f3;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.car-center-tag {
					width: 100rpx;
					height: 40rpx;
					background-color: #c8eedd;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 40rpx;
					color: #71d1a8;
					border-radius: 5rpx;
				}
			}

			.car-bottom {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.image {
		width: 120rpx;
		height: 80rpx;
		padding: 0 40rpx;
	}

	.warning {
		display: inline-block;
		font-size: 25rpx;
		color: #929196;
		width: 100%;
		text-align: center;
	}

	.noData {
		height: 85.7vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.positionBottom {
		position: fixed;
		bottom: 0;
		width: 100vw;
	}
</style>