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

<template>
	<view class="text-color-333" style="position: relative;left: -15rpx;">
		<view class="property content p-30 sys-background-fff r-30" :style="{height}">
			<view v-for="(property,propertyKey) in propertyList" class=" 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="size-26 m-tb10">
							<text class="capsule" >{{property.house_city}}</text>
							<text class="capsule" >{{property.build_date}}年建</text>
							<text class="capsule">{{property.covered_area}}m²</text>
						</view>
						<view class="sys-background-fff r-20 p-20">
							<view class="" >
								<text class="text-color-666">房产证号</text>
								<text class="m-l10">{{property.deed_num}}</text>
							</view>
              <view class="" >
                <text class="text-color-666">评估价格</text>
                <text class="m-l10">{{property.currentPrice}}</text>
              </view>
              <view class="" >
                <text class="text-color-666">起拍价格</text>
                <text class="m-l10">{{property.startPrice}}</text>
              </view>

							<view class="row m-t20" >
								<image class="wh-30 m-r20 p-t6" src="/page_task/static/img/task-details/address-two.png"
									mode="aspectFill">
								</image>
								<view class="flex">
									<text	class="flex">{{property.house_city}}{{property.house_address}}</text>
								</view>
							</view>

							<view class="sys-from-background-color m-t20 p-20 r-20">
								<view class="m-b20">房产关联图片</view>
								<view class="row-c">
									<en-image @onShowImg="onPreviewImage" :img="property.property"></en-image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<en-blank v-if="propertyList.length<=0"></en-blank>
		</view>
	</view>
</template>

<script>
	import EnImage from "@/components/en-utils/en-image/en-image.vue";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

	export default {
		components: {
			EnBlank,
			EnImage
		},
		props: {
			height: {
				type: String,
				default: '100%'
			},
			propertyList: {
				default: []
			},
			propertyKey: {
				default: []
			}
		},
		data() {
			return {}
		},
		methods: {
			onPreviewImage(urls) {
        uni.previewImage({
          urls: urls,
        })
			},
			verifyKey(key) {
				return this.propertyKey.indexOf(key) >= 0
			}
		},
	}
</script>

<style lang="scss" scoped>
	.property {
		padding-top: 90rpx;
		background-image: url('/page_task/static/img/task-details/bg-four.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;

		.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>