zhywpt-sp/subpackage/personal-center/baseMannager/car-change.vue

<template>

	<view class="content">
	
		<view class="picture-wrapper">
			<view class="bg">
				<view class="">
					<view class="name">
						行驶证主页
					</view>
					<view class="value">
						上传行驶证的主页
					</view>
					<view class="tip">
						<view class="tip-value">
							拍摄规范
						</view>
					</view>
				</view>
				<image class="icon" :src="`${$imgUrl}applyCard/car-zhu.png`"></image>
			</view>
		</view>
		<view class="picture-wrapper">
			<view class="bg">
				<view class="">
					<view class="name">
						行驶证副页
					</view>
					<view class="value">
						上传行驶证的副页
					</view>
					<view class="tip">
						<view class="tip-value">
							拍摄规范
						</view>
					</view>
				</view>
				<image class="icon" :src="`${$imgUrl}applyCard/car-fu.png`"></image>
			</view>
		</view>
		<view class="picture-wrapper">
			<view class="bg">
				<view class="">
					<view class="name">
						车头照
					</view>
					<view class="value">
						上传汽车的车头照片
					</view>
					<view class="tip">
						<view class="tip-value">
							拍摄规范
						</view>
					</view>
				</view>
				<image class="icon" :src="`${$imgUrl}applyCard/chetou.png`"></image>
			</view>
		</view>
		<view class="shibie-wrapper">
			<view class="title">
				车辆信息
			</view>
			<view class="">
				<u-field required labelWidth="180" v-model="state.ocrData.conmpany" input-align='right' label="车牌号码"
					disabled=true>
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="所有人">
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.card" input-align='right' label="车辆类型">

				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="住址">
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="使用性质">
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="品牌型号">
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="车辆识别代号">
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="发动机号码">
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="注册日期">
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="发证日期">
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="核定载人数">
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="整备质量">
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="外廓尺寸">
				</u-field>
				<u-field required labelWidth="180" v-model="state.ocrData.type" input-align='right' label="总质量">
				</u-field>
			</view>
		</view>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">确认修改</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive
	} from "vue";

	const savaHandle = () => {

	};
	const state = reactive({
		ocrData: {
			'conmpany': '贵州市空间加快速度公司',
			'type': '企业营业执照',
			'card': 'GZ2364174132894'

		},
		buchongData: {
			'conmpany': '李某一',
			'type': '居民身份证',
			'card': '23728347626342332',
			'phone': ''


		},
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 50rpx 30rpx 50rpx 30rpx;
		margin-top: -40rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 30rpx;
		position: relative;

		.img-pos {
			position: absolute;
			left: 270rpx;
			top: -38rpx;
			right: 50rpx;

			.img-flex {
				display: flex;
				justify-content: space-between;
				align-items: center;


				.car-img {
					width: 86rpx;
					height: 42rpx;
				}

				.flag-img {
					width: 30rpx;
					height: 35rpx;
				}
			}
		}

		.action {
			margin-top: 30rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-bottom: 30rpx;

			.button {
				height: 80rpx;
				background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80rpx;
			}
		}

		.item-tips {
			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 24rpx;
			}

			.tip {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
		}

		.picture-wrapper {
			margin-top: 40rpx;

			.bg {
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
				border-radius: 20rpx;
				padding: 40rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;

				.name {
					font-size: 34rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
					line-height: 34rpx
				}

				.value {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #999999;
					line-height: 24rpx;
				}

				.tip {
					margin-top: 20rpx;
					text-align: center;
					width: 110rpx;
					height: 40rpx;
					background: rgba(33, 190, 177, 0.2);
					border-radius: 6rpx;

					.tip-value {
						font-size: 20rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #0A8F8A;
						line-height: 40rpx;
						opacity: 1;
					}
				}
			}

			.icon {
				width: 294rpx;
				height: 188rpx;
			}
		}

		.shibie-wrapper {
			margin-top: 60rpx;

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
			}
		}

		.buchong-wrapper {
			margin-top: 60rpx;

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
			}
		}

		.green-tip {
			margin-top: 50rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #00B38B;
			line-height: 24rpx;
			margin-bottom: 60rpx;
		}
	}
</style>