assess-app/page_task/identity_upload/identity_upload.vue

<template>
	<view class="total-page page-env-160 page-box">
		<Nav :title="'身份证上传'" :is_fixed="true" :opacity="scrollTop">
			<view>
				<view class="sys-background-fff p-30 m-30 r-30">
					<text class="size-30 sys-weight-600">身份证上传认证照片</text>
					<view class="size-26 m-t10 text-color-999">仅用于公安网核实身份</view>
					<view class="row-justify-sb center size-28 p-b10 m-t40">
						<view class="picture-item">
							<image src="/static/img/information/identity-front.png" mode="aspectFill"></image>
							<view class="picture-text  button-background text-color-fff">
								拍摄人像面
							</view>
						</view>
						<view class="picture-item">
							<image src="/static/img/information/identity-verso.png" mode="aspectFill"></image>
							<view class="picture-text button-background text-color-fff">
								拍摄国徽面
							</view>
						</view>
					</view>
				</view>
				<view class="sys-background-fff p-30 m-lr30 m-t20 r-30">
					<text class="size-30 sys-weight-600">身份证上传认证照片</text>
					<view class="size-26 m-t10 text-color-999">仅用于公安网核实身份</view>
					<view class="row-justify-sb center size-26 m-t40">
						<view class="column-c" v-for="(item,index) in hintList" :key="index">
							<view class="picture-box">
								<image class="picture-hint" :src="`/static/img/information/${item.image}.png`"
									mode="aspectFill"></image>
								<image class="wh-30 picture-icon"
									:src="item.is_correct?'/static/img/information/hint-vector.png':'/static/img/information/hint-subtract.png'"
									mode="aspectFill"></image>
							</view>
							<view class="picture-text size-24 text-color-999 m-t20">
								{{item.name}}
							</view>

						</view>
					</view>
				</view>
				<EnButton :text="'完成'" @onSubmit="onSubmit">
				</EnButton>
			</view>
		</Nav>

	</view>
</template>
<!-- correct -->
<script>
	export default {
		components: {},
		data() {
			return {
				scrollTop: 0,
				hintList: [{
					name: '标准照片',
					image: 'hint-one',
					is_correct: true
				}, {
					name: '边框缺失',
					image: 'hint-two',
					is_correct: false
				}, {
					name: '照片模糊',
					image: 'hint-three',
					is_correct: false
				}, {
					name: '闪光强烈',
					image: 'hint-four',
					is_correct: false
				}, ]
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onLoad() {},
		methods: {
			// 完成
			onSubmit() {
				this.step = 4
			}
		}
	}
</script>

<style lang="scss" scoped>
	.picture-box {
		position: relative;
	}

	.picture-item {
		width: 300rpx;
		height: 250rpx;

		image {
			width: 100%;
			height: 170rpx;
		}

		.picture-text {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 0 0 30rpx 30rpx;
		}

	}

	.picture-icon {
		position: absolute;
		bottom: -6rpx;
		left: 45rpx;
		z-index: 10;
	}

	.picture-hint {
		width: 120rpx;
		height: 80rpx;
		background: #F7F9FE;
		border-radius: 10rpx 10rpx 10rpx 10rpx;

	}
</style>