assess-app/page_task/task_details/module/property.vue

<template>
	<view class="text-color-333">
		<view class="property">
			<image class="bg-box" src="/static/img/task-details/bg-four.png" mode=""></image>
			<view class="content p-30 sys-background-fff r-30 size-26">
				<!-- 房产信息 -->
				<view class="">
					<view class="row-c">
						<view class="dot"></view>
						<text class="sys-weight-600 m-l10">房产信息</text>
					</view>
					<view class="property-box-one r-20 m-t30 p-20">
						<view class="">
							<text class="size-32 color-11003B sys-weight-600">张三</text>
							<text class="size-24 color-6E6686 m-l10">产权人</text>
						</view>
						<view class="size-26 m-tb10">
							<text class="capsule">居住</text>
							<text class="capsule">2012年建</text>
							<text class="capsule">88m²</text>
						</view>
						<view class="sys-background-fff r-20 p-20">
							<view class="">
								<text class="text-color-666">房产证号</text>
								<text class="m-l10">XZ45564546</text>
							</view>
							<view class="row-c m-tb20">
								<image class="wh-30 m-r20" src="/static/img/task-details/money.png" mode="aspectFill">
								</image>
								<text>已支付材料费</text>
							</view>
							<view class="row m-t20">
								<image class="wh-30 m-r20 p-t6" src="/static/img/task-details/address-two.png"
									mode="aspectFill">
								</image>
								<view class="flex">
									<text class="flex">四川省 成都市 武侯区 置信南街 61 号 兰园5栋 2 单元 5楼这是俩排的地</text>
									<image class="card r-20 m-t20" src="/static/img/task-details/front.png"
										mode="aspectFill">
								</view>
							</view>
							</image>
						</view>
						<image class="property-icon wh-100" src="/static/img/task-details/property-one.png" mode="">
						</image>
					</view>
				</view>
				<!-- 保单信息 -->
				<view class="m-t30">
					<view class="row-c">
						<view class="dot"></view>
						<text class="sys-weight-600 m-l10">保单信息</text>
					</view>
					<view class="property-box-two r-20 m-t30 p-20">
						<view class="">
							<text class="size-32 color-11003B sys-weight-600">太平洋保险</text>
							<text class="size-24 color-6E6686 m-l10">公司</text>
						</view>
						<view class="size-26 m-tb10">
							<text class="capsule two-text">人寿</text>
							<text class="capsule two-text">8000元/年</text>
						</view>
						<view class="sys-background-fff r-20 p-20">
							<view class="">
								<text class="text-color-666">有效期</text>
								<text class="m-l10">2024.10.23</text>
							</view>
							<view class="row-c m-tb20">
								<image class="wh-30 m-r20" src="/static/img/task-details/money.png" mode="aspectFill">
								</image>
								<text>满足缴费情况</text>
							</view>
							<view class="sys-from-background-color m-t20 p-20 r-20">
								<view class="m-b20">保单照片</view>
								<view class="row-c">
									<image class="picture m-r20 r-10" src="/static/img/logo.png" mode="aspectFill"
										v-for="(item,index) in 3" :key="index">
									</image>
								</view>
							</view>
						</view>
						<image class="property-icon wh-100" src="/static/img/task-details/property-two.png" mode="">
						</image>
					</view>
				</view>

				<!-- 车辆信息 -->
				<view class="m-t30">
					<view class="row-c">
						<view class="dot"></view>
						<text class="sys-weight-600 m-l10">车辆信息</text>
					</view>
					<view class="property-box-three r-20 m-t30 p-20">
						<view class="">
							<text class="size-32 color-11003B sys-weight-600">奔驰</text>
							<text class="size-24 color-6E6686 m-l10">品牌</text>
						</view>
						<view class="size-26 m-tb10">
							<text class="capsule two-text">白色</text>
							<text class="capsule two-text">2020年登记</text>
							<text class="capsule two-text">30万元</text>
						</view>
						<view class="sys-background-fff r-20 p-20">
							<view class="">
								<text class="text-color-666">车牌号</text>
								<text class="m-l10">渝A88888</text>
							</view>
							<view class="m-tb16">
								<text class="text-color-666">车架号</text>
								<text class="m-l10">CX584564</text>
							</view>
							<view class="">
								<text class="text-color-666">车牌类型</text>
								<text class="m-l10">非运营车</text>
							</view>
							<view class="sys-from-background-color m-t20 p-20 r-20">
								<view class="row-c">
									<view class="">
										<text class="size-24">行驶证</text>
										<image class="picture m-t20 r-10" src="/static/img/logo.png" mode="aspectFill">
										</image>
									</view>
									<view class="m-l20">
										<text class="size-24">车辆登记证</text>
										<image class="picture m-r20 m-t20 r-10" src="/static/img/logo.png"
											mode="aspectFill">
										</image>
									</view>
								</view>
								<view class="row-c">
									<view class="">
										<view class="size-24 m-t20">车辆照片</view>
										<view class="row-c m-t10" style="flex-wrap: wrap;">
											<image class="picture m-r20 r-10 m-t10" src="/static/img/logo.png"
												mode="aspectFill" v-for="(item,index) in 5" :key="index">
											</image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<image class="property-icon wh-100" src="/static/img/task-details/property-three.png" mode="">
						</image>
					</view>
				</view>
				<!-- 企业信息 -->
				<view class="m-t30">
					<view class="row-c">
						<view class="dot"></view>
						<text class="sys-weight-600 m-l10">车辆信息</text>
					</view>
					<view class="property-box-four r-20 m-t30 p-20">
						<view class="">
							<text class="size-32 color-11003B sys-weight-600">春航科技有限责任公司</text>
						</view>
						<view class="size-26 m-tb10">
							<text class="capsule two-text">白色</text>
							<text class="capsule two-text">2020年登记</text>
							<text class="capsule two-text">30万元</text>
						</view>
						<view class="sys-background-fff r-20 p-20">
							<view class="">
								<text class="text-color-666">年交税额</text>
								<text class="m-l10">5000000元</text>
							</view>
							<view class="m-tb16">
								<text class="text-color-666">年开票额</text>
								<text class="m-l10">5000000元</text>
							</view>
							<view class="">
								<text class="text-color-666">税务登记</text>
								<text class="m-l10">A</text>
							</view>
							<view class="row-c m-tb20">
								<image class="wh-30 m-r20" src="/static/img/task-details/money.png" mode="aspectFill">
								</image>
								<text>无税务断缴情况</text>
							</view>
							<view class="row m-t20">
								<image class="wh-30 m-r20 p-t6" src="/static/img/task-details/address-two.png"
									mode="aspectFill">
								</image>
								<view class="flex">
									<text class="flex">四川省 成都市 武侯区 置信南街 61 号 兰园5栋 2 单元 5楼这是俩排的地</text>
									<image class="card r-20 m-t20" src="/static/img/task-details/front.png"
										mode="aspectFill">
								</view>
							</view>
							<view class="sys-from-background-color m-t20 p-20 r-20">
								<view class="size-24">企业照片</view>
								<view class="row-c m-t10" style="flex-wrap: wrap;">
									<image class="picture m-r20 r-10 m-t10" src="/static/img/logo.png" mode="aspectFill"
										v-for="(item,index) in 3" :key="index">
									</image>
								</view>
							</view>
						</view>
						<image class="property-icon wh-100" src="/static/img/task-details/property-four.png" mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {}
		},
	}
</script>

<style lang="scss" scoped>
	.property {
		position: relative;

		.bg-box {
			width: 710rpx;
			height: 80rpx;
		}

		.dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #0FB160;
		}
	}

	.property-box-one {
		position: relative;
		background: linear-gradient(161deg, #B0FDB3 0%, #5EDE9D 100%);

	}

	.property-box-two {
		position: relative;
		background: linear-gradient(161deg, #FFE2E2 0%, #FBCACA 100%);

		.two-text {
			background: #D06565;
		}

		.picture {
			width: 160rpx;
			height: 190rpx;
			display: block;
		}
	}

	.property-box-three {
		position: relative;
		background: linear-gradient(161deg, #CDE7FD 0%, #B6D2FB 100%);

		.two-text {
			background: #2E86F4;
		}

		.picture {
			width: 160rpx;
			height: 90rpx;
			display: block;
			border-radius: 10rpx;
		}
	}

	.property-box-four {
		position: relative;
		background: linear-gradient(161deg, #F4DCBD 0%, #EEC398 100%);

		.two-text {
			background: #C37929;
		}

		.picture {
			width: 160rpx;
			height: 90rpx;
			display: block;
			border-radius: 10rpx;
		}
	}

	.property-icon {
		position: absolute;
		right: 40rpx;
		top: 12rpx;
	}

	.capsule {
		color: #fff;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 99rpx;
		background: #0FB160;
		text-align: center;
		padding: 0 20rpx;
		margin-right: 10rpx;
	}

	.card {
		width: 160rpx;
		height: 90rpx;
		display: block;
	}
</style>