zhapp/pages/quote/modules/carView.vue

<template>
	<view class="tab dis f-c">
		<view class="header-title" :style="headerStyle">{{title}}</view>
		<view class="items dis f-c ">
			<view class="item dis a-c j-s">
				<text>车牌号</text>
				<text>{{info.licenseNo}}</text>
			</view>
			<view class="item dis a-c j-s">
				<text>车架号</text>
				<text>{{info.vinNo}}</text>
			</view>
			<view class="item dis a-c j-s">
				<text>品牌型号</text>
				<text>{{info.brandName}}</text>
			</view>
			<view class="item dis a-c j-s">
				<text>发动机号</text>
				<text>{{info.engineNo}}</text>
			</view>
			<view class="item dis a-c j-s">
				<text>使用性质</text>
				<text>{{infoB.carNatureCode}}</text>
			</view>
			<view class="item dis a-c j-s">
				<text>车辆类型</text>
				<text>{{infoB.carTypeCode}} </text>
			</view>
			<view class="item dis a-c j-s">
				<text>车辆用途</text>
				<text>{{infoB.vehicleUseCode}} </text>
			</view>
			<view class="item dis a-c j-s">
				<text>车辆种类</text>
				<text> {{infoB.carKindCode}}</text>
			</view>
			<view class="item dis a-c j-s">
				<text>能源种类</text>
				<text>{{infoB.energyTypeCode}} </text>
			</view>
			<view class="item dis a-c j-s">
				<text>注册日期</text>
				<text>{{info.registerDate}} </text>
			</view>
			<view class="item dis a-c j-s">
				<text>发证日期</text>
				<text> {{info.issueDate}}</text>
			</view>
			<view class="item dis a-c j-s">
				<text>是否过户</text>
				<text> </text>
			</view>
			<view class="item dis a-c j-s">
				<text>商业险是否过户</text>
				<text> </text>
			</view>
			<view class="item dis a-c j-s">
				<text>年款</text>
				<text> {{info.carYear}}</text>
			</view>
			<view class="item dis a-c j-s">
				<text>座位数</text>
				<text> {{info.seatCount}}座</text>
			</view>
			<view class="item dis a-c j-s">
				<text>整备质量</text>
				<text> {{info.completeKerbMass}}</text>
			</view>
			<view class="item dis a-c j-s">
				<text>排量</text>
				<text>{{info.displacement}} </text>
			</view>
			<view class="item dis a-c j-s">
				<text>功率</text>
				<text> {{info.powerScale}}kw</text>
			</view>
			<view class="item dis a-c j-s">
				<text>新车购置价</text>
				<text>{{info.purchasePrice}}元 </text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'name', //插件名称
		props: {
			info: {
				type: Object,
				default: () => {
					return {};
				}
			},
			infoB: {
				type: Object,
				default: () => {
					return {};
				}
			},
			title: {
				type: String,
				default: '基本信息'
			},
			headerStyle: {
				type: Object,
				default: () => {
					return {};
				}
			},

		},
		watch: {
			info(newval) {
				this.info = newval;
			},
			infoB(newval) {
				this.infoB = newval;
			}
		},
		computed: {},
		data() {
			return {};
		},
		methods: {}
	};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
	.tab {
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 0 0 10rpx 10rpx;

		.header-title {
			background: linear-gradient(180deg, #FFFCEA 0%, #FFFFFF 100%);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.items {
			padding: 0 20rpx;
			box-sizing: border-box;

			.item {
				margin-bottom: 30rpx;

				text:first-child {
					font-size: 30rpx;
					color: #666;
				}

				text:last-child {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
				}
			}
		}

	}
</style>