assess-app/page_task/credit/credit.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 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="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="property.data.certificate_img"-->
								<!--										mode="aspectFill">-->
								<!--									</image>-->
								<en-image @onShowImg="onPreviewImage" :img="creditData.credit_img"></en-image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</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 {
		name: 'credit-list',
		components: {
			EnBlank,
			EnImage
		},
		props: {
			height: {
				type: String,
				default: '100%'
			},
			creditData: {
				default: {
					'credit_img': []
				}
			},
			creditKey: {
				default: []
			}
		},
		data() {
			return {}
		},
		methods: {
			onPreviewImage(url) {
				this.$emit('onShowImg', url)
			},
			verifyKey(key) {
				return this.creditKey.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>