<template>
	<!-- 完善信息最大盒子 -->
	<view class="modify_revise">
		<u-navbar title="风控解封" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color='#000'
			title-size='36' height='50' id="navbar">
		</u-navbar>
		<view class="upidcard" v-if="fengkongobj.submitType.some(item => item == 2)">
			<view class="uploadbox">
				<view class="box_tip">
					拍摄身份证要求：
				</view>
				<view class="uptip">
					<view class="uptipli">大陆公民持有的本人有效二代身份证；</view>
					<view class="uptipli">拍摄时确保身份证<span style="color:#E83535 ;"> 边框完整，字迹清晰，亮度均匀</span></view>
				</view>
				<view class="upimg">
					<view class="imgcont">
						<image
							src="https://api.ccttiot.com/smartmeter/img/static/uIzXWt2U6fF8XSjGsTJE"
							alt="" />
						标准
					</view>
					<view class="imgcont">
						<image
							src="https://api.ccttiot.com/smartmeter/img/static/uHoPnlf0YGy4gBuQlV6o"
							alt="" />
						边框缺失
					</view>
					<view class="imgcont">
						<image
							src="https://api.ccttiot.com/smartmeter/img/static/uzv6CeZPetvlU6KqdAQJ"
							alt="" />
						照片模糊
					</view>
					<view class="imgcont">
						<image
							src="https://api.ccttiot.com/smartmeter/img/static/uSIBao4SIoHs0QC2yws1"
							alt="" />
						闪光强烈
					</view>
				</view>
			</view>
			<view class="uploadbox">
				<view class="box_tip">
					请拍摄身份证正面与反面照片
				</view>
				<view class="img_boxs">
					<view class="img_box" @click.stop='uploadpicone'>
						<image :src="upLoadPositiveImg">
						</image>
						<view class="text">
							上传身份证人像面
						</view>
					</view>
					<view class="img_box" @click.stop='uploadpictwo'>
						<image :src="upLoadReverseImg">
						</image>
						<view class="text">
							上传身份证国徽面
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="uploadbox" style="box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0,0,0,0.08);">
				<view class="box_tip">
					请确认你的身份信息
				</view>
				<view class="iptbox">
					<view class="iptli">
						<view class="left">
							姓名
						</view>
						<input type="text" v-model="realName" placeholder="请输入姓名"/>
					</view>
					<view class="iptli">
						<view class="left">
							身份证号
						</view>
					    <input type="text" v-model="idcard" placeholder="请输入身份证号" />
					</view>
				</view>
			</view> -->
		</view>
		<view class="upidcard" v-if="fengkongobj.submitType.some(item => item == 3)">
			<view class="uploadbox" style="box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0,0,0,0.08);">
				<view class="box_tip">
					拍摄手持身份证要求：
				</view>
				<view class="uptip">
					<view class="uptipli">拍摄时，手持本人身份证，将持证的手臂和上半身整个拍进照片，头部和肩部要端正，头发不得遮挡脸部或造成阴影，<span
							style="color:#E83535 ;"> 要露出五官；</span></view>
					<view class="uptipli">确保身份证上的<span style="color:#E83535 ;"> 所有信息清晰可见、完整</span>（没有被遮挡或者被手指捏住）</view>
				</view>
				<view class="box_tip" style="margin-top: 26rpx;">
					如下方例图所示
				</view>
				<view class="showimg">
					<image
						src="https://api.ccttiot.com/smartmeter/img/static/uVd7crE1HFjwapTYTmMA"
						mode="aspectFit"></image>
				</view>
				<view class="upself" @click.stop='uploadpicthr'>
					<view class="box_tip">
						请拍摄手持身份证照片
					</view>
					<image :src="handIdCard " mode="aspectFit">
					</image>
				</view>
			</view>
		</view>
		<view class="upidcard" v-if="fengkongobj.submitType.some(item => item == 5)">
			<view class="uploadbox" style="box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0,0,0,0.08);">
				<view class="box_tip">
					拍摄营业执照要求：
				</view>
				<view class="uptip">
					<view class="uptipli">请上传证件的<span style="color:#E83535 ;">彩色数码拍摄件，不得添加无关水印</span></view>
					<view class="uptipli">需要提供证件的<span
							style="color:#E83535 ;">正面拍摄件，保证完整、照面信息清晰可见，</span>避免信息不清晰、扭曲、压缩变形、反光、不完整</view>
					<view class="uptipli">所提交证件照片<span style="color:#E83535 ;">不可二次裁剪、翻拍或PS</span></view>
				</view>
				<view class="box_tip" style="margin-top: 26rpx;">
					如下方例图所示
				</view>
				<view class="showimg">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uye2PD6AArvHrX5Vgcm7" mode="aspectFit">
					</image>
				</view>
				<view class="upself" @click.stop='uploadpicfor'>
					<view class="box_tip">
						请拍摄上传营业执照
					</view>
					<image :src="yingyezhizhao" mode="aspectFit">
					</image>
				</view>
			</view>
		</view>
		<view class="upidcard" v-if="fengkongobj.submitType.some(item => item == 4)">
			<view class="uploadbox" style="box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0,0,0,0.08);">
				<view class="box_tip">
					录制场景视频要求：
				</view>
				<view class="uptip">
					<view class="uptipli">录制时，<span style="color:#E83535 ;">视频全程不间断</span>，从门面开始拍摄，走到包厢，<span
							style="color:#E83535 ;">拍摄使用第三方手机扫描设备上的二维码进入小程序，完成下单使用该设备，第三方手机页面要清晰展示</span></view>
				</view>
				<view class="upself">
					<view class="box_tip" style="display: flex;justify-content: space-between;width: 100%;">
						<text>请拍摄使用场景视频</text> <text v-if="!changjingflag" style="color: blue;" @click.stop='uploadpicfiv'>重新拍摄</text>
					</view>
					<image @click.stop='uploadpicfiv' :src="changjing" v-if="changjingflag" mode="aspectFit"></image>
					<video :src="changjing" v-else></video>
				</view>
			</view>
		</view> 
		<view class="upidcard" v-if="fengkongobj.submitType.some(item => item == 6)">
			<view class="uploadbox" style="box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0,0,0,0.08);">
				<view class="box_tip">
					录制责任视频要求：
				</view>
				<view class="uptip">
					<view class="uptipli">录制时，手持本人身份证，将持证的手臂和上半身整个拍进照片，头部和肩部要端正，头发不得遮挡脸部或造成阴影，要<span
							style="color: #E83535;">露出五官</span>；</view>
					<view class="uptipli">确保身份证上的<span style="color: #E83535;">所有信息清晰可见、完整</span>（没有被遮挡或者被手指捏住）</view>
				</view>
				<view class="box_tip" style="margin-top: 26rpx;">
					进行录制时并阅读以下内容
				</view>
				<view class="yuedu" style="margin-top: 20rpx;margin-bottom: 20rpx;">
					{{fengkongobj.videoWords == undefined ? '--' : fengkongobj.videoWords}}
				</view>
				<view class="box_tip" style="margin-top: 26rpx;">
					如下方例图所示
				</view>
				<view class="showimg">
					<image
						src="https://api.ccttiot.com/smartmeter/img/static/uVd7crE1HFjwapTYTmMA"
						mode="aspectFit"></image>
				</view>
				<view class="upself">
					<view class="box_tip" style="display: flex;justify-content: space-between;width: 100%;">
						<text>请手持身份证照片录制责任视频</text> <text v-if="!zerenflag" style="color: blue;"
							@click.stop='uploadpicsex'>重新拍摄</text>
					</view>
					<image @click.stop='uploadpicsex' :src="zeren" v-if="zerenflag" mode="aspectFit">
						<video v-else :src="zeren"></video>
					</image>
				</view>
			</view>
		</view>
		<view class="rzpage" v-if="fengkongobj.submitType.some(item => item == 1)">
			<view class="topbox">
				<view class="text" style="font-weight: 500;font-size: 40rpx;" v-if="realNameId == null">
					为保障账户安全
				</view>
				<view class="text" v-if="realNameId == null">
					需采集你的人脸信息已核实身份
				</view>
				<image v-if="realNameId != null" style="width: 340rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uvwgP9wfD5HUkvNoiKvf" mode=""></image>
				<image v-else
					src="https://api.ccttiot.com/smartmeter/img/static/u13ZcGewJNaQNzAWbC7N"
					mode=""></image>
				<!-- <image style="width: 580rpx;" src="https://api.ccttiot.com/smartmeter/img/static/ufCvHE7ejdpvgSSZCB03" mode=""></image> -->
				<view class="text" v-if="realNameId == null">
					请保持正脸
				</view>
				<view class="text" v-if="realNameId == null">
					根据指示完成人脸认证
				</view>
			</view>
			<view class="uploadbox">
				<view class="box_tip" v-if="realNameId == null">
					人脸认证须知：
				</view>
				<view class="upimg" v-if="realNameId == null">
					<view class="imgcont">
						<image
							src="https://api.ccttiot.com/smartmeter/img/static/uAG1UzQne5rWumuCVcFQ"
							alt="" />
						<view class="botimg">
							
							标准拍摄
						</view>
					</view>
					<view class="imgcont">
						<image
							src="https://api.ccttiot.com/smartmeter/img/static/u8iNsmFanbeDYOcF4UBW"
							alt="" />
						<view class="botimg">
						
							遮挡面部
						</view>
					</view>
					<view class="imgcont">
						<image
							src="https://api.ccttiot.com/smartmeter/img/static/urnS21KzXE6I23deDNqS"
							alt="" />
						<view class="botimg">
							
							拍摄不全
						</view>
					</view>
					<view class="imgcont">
						<image
							src="https://api.ccttiot.com/smartmeter/img/static/uKu02Pws0Ut3rUPvfu8j"
							alt="" />
						<view class="botimg">
							
							光线不足
						</view>
					</view>
				</view>
				<view class="btnbox">
					<view class="btn" @click="readyTest" v-if="realNameId == null">
						开始认证
					</view>
					<view class="btn" @click="readyTest" v-else>
						提交审核
					</view>
				</view>
			</view>
		</view>
		<view class="btnbox" v-else>
			<view class="btn" @click="readyTests">
				提交审核
			</view>
		</view>
		<view class="mask" v-if="maskflag"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				upLoadPositiveImg: 'https://api.ccttiot.com/smartmeter/img/static/uDpOMQNOWDnVXihtSBs1', // 正面身份证
				reverseImg: '', //自己图片路径
				upLoadReverseImg: 'https://api.ccttiot.com/smartmeter/img/static/u67D7oM8SbLJbCafS6Jn', //反面
				handIdCard: 'https://api.ccttiot.com/smartmeter/img/static/uA50pbXjDMCUKo701X0T',
				yingyezhizhao: 'https://api.ccttiot.com/smartmeter/img/static/uCegvrAQrrSv42tiIXj3',
				changjing: 'https://api.ccttiot.com/smartmeter/img/static/u0QrCtJ9Dcs1lWRhL6eI',
				zeren: 'https://api.ccttiot.com/smartmeter/img/static/u2rQTjUKlQGVkv8QfaNS',
				realName: '', //真实姓名,
				idcard: '', //身份证号,
				timelimit: '',
				bgc: {
					backgroundColor: "#fff ",
				},
				riskid: '',
				token: '',
				changjingflag: true,
				zerenflag: true,
				infoId: '',
				fengkongobj: {},
				realNameId: null,
				maskflag:false
			}
		},
		onLoad(option) {
			if (option.infoId) {
				this.infoId = option.infoId
				console.log(this.infoId)
				this.getcailiao()
			} else {
				this.riskid = option.riskid
				this.getfkongxx()
			}
		},
		onShow() {
			this.getQiniuToken()
		},
		methods: {
			// 点击提交审核
			readyTests(){
				this.maskflag = true
				let data = {
					isSubmit: true,
					riskId: this.riskid,
					idCardFront: this.upLoadPositiveImg == 'https://api.yruibao.com/crmebimage/public/content/2024/03/12/dfca9b6e35e641b0be82dbddc7b244f18eixm72az5.png' ? '' : this.upLoadPositiveImg,
					idCardBack: this.upLoadReverseImg == 'https://api.yruibao.com/crmebimage/public/content/2024/03/12/81af97268d7c4687997f043ec46e038b3g6hzhanty.png' ? '' : this.upLoadReverseImg,
					idCardHand: this.handIdCard == 'https://api.ccttiot.com/smartmeter/img/static/uA50pbXjDMCUKo701X0T' ? '' : this.handIdCard,
					businessLicence: this.yingyezhizhao == 'https://api.ccttiot.com/smartmeter/img/static/uCegvrAQrrSv42tiIXj3' ? '' : this.yingyezhizhao,
					video: this.changjing == 'https://api.ccttiot.com/smartmeter/img/static/u0QrCtJ9Dcs1lWRhL6eI' ? '' : this.changjing,
					dutyVideo: this.zeren == 'https://api.ccttiot.com/smartmeter/img/static/u2rQTjUKlQGVkv8QfaNS' ? '' : this.zeren,
					infoId:this.infoId
				}
				this.$u.post("/app/riskInfo/", data).then((res) => {
					if (res.code == 200) {
							uni.showToast({
								title: '提交审核成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(()=>{
								this.maskflag = false
								uni.reLaunch({
									url:'/page_user/yetx'
								})
							},2000)
					} else {
						this.maskflag = false
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 点击开始人脸认证
			readyTest() {
				this.maskflag = true
				if(this.infoId == null || this.infoId == ''){
					let data = {
						isSubmit: this.realNameId == null ? false : true,
						riskId: this.riskid,
						idCardFront: this.upLoadPositiveImg == 'https://api.yruibao.com/crmebimage/public/content/2024/03/12/dfca9b6e35e641b0be82dbddc7b244f18eixm72az5.png' ? '' : this.upLoadPositiveImg,
						idCardBack: this.upLoadReverseImg == 'https://api.yruibao.com/crmebimage/public/content/2024/03/12/81af97268d7c4687997f043ec46e038b3g6hzhanty.png' ? '' : this.upLoadReverseImg,
						idCardHand: this.handIdCard == 'https://api.ccttiot.com/smartmeter/img/static/uA50pbXjDMCUKo701X0T' ? '' : this.handIdCard,
						businessLicence: this.yingyezhizhao == 'https://api.ccttiot.com/smartmeter/img/static/uCegvrAQrrSv42tiIXj3' ? '' : this.yingyezhizhao,
						video: this.changjing == 'https://api.ccttiot.com/smartmeter/img/static/u0QrCtJ9Dcs1lWRhL6eI' ? '' : this.changjing,
						dutyVideo: this.zeren == 'https://api.ccttiot.com/smartmeter/img/static/u2rQTjUKlQGVkv8QfaNS' ? '' : this.zeren,
					}
					this.$u.post("/app/riskInfo/", data).then((res) => {
						if (res.code == 200) {
							if (this.realNameId == null) {
								this.$u.put(`/app/user/riskRealName?riskInfoId=` + res.data).then(res => {
									if (res.code == 200) {
										this.maskflag = false
										let https = encodeURIComponent(res.data.jumpUrl)
										uni.navigateTo({
											url: '/pages/sjshiming?https=' + https
										})
									} else {
										this.maskflag = false
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										})
									}
								})
							}else{
								uni.showToast({
									title: 提交审核成功,
									icon: 'success',
									duration: 2000
								})
								setTimeout(()=>{
									this.maskflag = false
									uni.reLaunch({
										url:'/page_user/yetx'
									})
								},2000)
							}
						} else {
							this.maskflag = false
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}else{
					let data = {
						isSubmit: this.realNameId == null ? false : true,
						riskId: this.riskid,
						idCardFront: this.upLoadPositiveImg == 'https://api.yruibao.com/crmebimage/public/content/2024/03/12/dfca9b6e35e641b0be82dbddc7b244f18eixm72az5.png' ? '' : this.upLoadPositiveImg,
						idCardBack: this.upLoadReverseImg == 'https://api.yruibao.com/crmebimage/public/content/2024/03/12/81af97268d7c4687997f043ec46e038b3g6hzhanty.png' ? '' : this.upLoadReverseImg,
						idCardHand: this.handIdCard == 'https://api.ccttiot.com/smartmeter/img/static/uA50pbXjDMCUKo701X0T' ? '' : this.handIdCard,
						businessLicence: this.yingyezhizhao == 'https://api.ccttiot.com/smartmeter/img/static/uCegvrAQrrSv42tiIXj3' ? '' : this.yingyezhizhao,
						video: this.changjing == 'https://api.ccttiot.com/smartmeter/img/static/u0QrCtJ9Dcs1lWRhL6eI' ? '' : this.changjing,
						dutyVideo: this.zeren == 'https://api.ccttiot.com/smartmeter/img/static/u2rQTjUKlQGVkv8QfaNS' ? '' : this.zeren,
						infoId:this.infoId
					}
					this.$u.put("/app/riskInfo/", data).then((res) => {
						if (res.code == 200) {
							if (this.realNameId == null) {
								this.$u.put(`/app/user/riskRealName?riskInfoId=` + res.data).then(res => {
									if (res.code == 200) {
										this.maskflag = false
										let https = encodeURIComponent(res.data.jumpUrl)
										uni.navigateTo({
											url: '/pages/sjshiming?https=' + https
										})
									} else {
										this.maskflag = false
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										})
									}
								})
							}else{
								uni.showToast({
									title: '提交审核成功',
									icon: 'success',
									duration: 2000
								})
								setTimeout(()=>{
									this.maskflag = false
									uni.reLaunch({
										url:'/page_user/yetx'
									})
								},2000)
							}
						} else {
							this.maskflag = false
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			// 查询风控材料
			getcailiao() {
				this.$u.get(`/app/riskInfo/${this.infoId}`).then((res) => {
					if (res.code == 200) {
						this.riskid = res.data.riskId
						this.getfkongxx()
						this.realNameId = res.data.realNameId
						this.upLoadPositiveImg = res.data.idCardFront
						this.upLoadReverseImg = res.dataidCardBack
						this.handIdCard = res.data.idCardHand
						this.yingyezhizhao = res.data.businessLicence
						if (res.data.video == '' || res.data.video == null) {
							this.changjingflag = true
						} else {
							this.changjingflag = false
							this.changjing = res.data.video
						}
						if (res.data.dutyVideo == '' || res.data.dutyVideo == null) {
							this.zerenflag = true
						} else {
							this.zerenflag = false
							this.zeren = res.data.dutyVideo
						}
					}
				})
			},
			// 获取风控信息
			getfkongxx() {
				this.$u.get(`/app/risk/${this.riskid}`).then((res) => {
					if (res.code == 200) {
						this.fengkongobj = res.data
					}
				})
			},

			// 获取上传图片token
			getQiniuToken() {
				this.$u.get("/common/qiniu/uploadInfo").then((res) => {
					if (res.code == 200) {
						this.token = res.token
					}
				})
			},
			// 点击上传图片
			btnshangchuan(callback) {
				let _this = this;
				let math = 'static/' + _this.$u.guid(20);
				uni.chooseImage({
					count: 1,
					type: 'all',
					success(res) {
						const tempFilePaths = res.tempFiles;
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths[0].path,
							formData: {
								token: _this.token,
								key: 'smartmeter/img/' + math
							},
							success: function(uploadRes) {
								let str = JSON.parse(uploadRes.data)
								let finalUrl = 'https://api.ccttiot.com/' + str.key
								callback(finalUrl); // 调用回调函数，并传递 URL
							}
						})
					}
				})
			},
			// 上传身份证正面照
			uploadpicone() {
				this.btnshangchuan((url) => {
					this.upLoadPositiveImg = url
				})
			},
			// 上传身份证反面照
			uploadpictwo() {
				this.btnshangchuan((url) => {
					this.upLoadReverseImg = url
				})
			},
			// 上传手持身份证照
			uploadpicthr() {
				this.btnshangchuan((url) => {
					this.handIdCard = url
				})
			},
			// 上传营业执照
			uploadpicfor() {
				this.btnshangchuan((url) => {
					this.yingyezhizhao = url
				})
			},
			// 上传拍摄使用视频
			uploadpicfiv() {
				let _this = this;
				let math = 'static/' + _this.$u.guid(20);
				uni.chooseMedia({
					mediaType: ['video'],
					sourceType: ['camera','album'],
					maxDuration: 60,
					camera: 'back',
					success(res) {
						console.log(res, '101010');
						const tempFilePaths = res.tempFiles[0].tempFilePath
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths,
							formData: {
								token: _this.token,
								key: 'smartmeter/img/' + math
							},
							success: function(uploadRes) {
								let str = JSON.parse(uploadRes.data)
								_this.changjingflag = false
								_this.changjing = 'https://api.ccttiot.com/' + str.key
							}
						})
					}
				})
			},
			// 上传责任视频
			uploadpicsex() {
				let _this = this;
				let math = 'static/' + _this.$u.guid(20);
				uni.chooseMedia({
					mediaType: ['video'],
					sourceType: ['camera','album'],
					maxDuration: 60,
					camera: 'front',
					success(res) {
						console.log(res, '101010');
						const tempFilePaths = res.tempFiles[0].tempFilePath
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths,
							formData: {
								token: _this.token,
								key: 'smartmeter/img/' + math
							},
							success: function(uploadRes) {
								let str = JSON.parse(uploadRes.data)
								_this.zerenflag = false
								_this.zeren = 'https://api.ccttiot.com/' + str.key
							}
						})
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF !important;
	}
			.btnbox {
				margin-top: 100rpx;
				width: 100%;
				display: flex;
				justify-content: center;
                padding-bottom: 50rpx;
				box-sizing: border-box;
				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 500rpx;
					height: 82rpx;
					background: #409EFF;
					border-radius: 10rpx 10rpx 10rpx 10rpx;

					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
	.content {

		background: #ffffff;
		padding: 60px 0px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.imgbox {
			width: 100%;
			display: flex;
			justify-content: center;

			image {
				width: 280rpx;
				height: 160rpx;
				border-radius: 16rpx;
				border: 1px dashed;
			}
		}
	}
    .mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: .5;
	}
	.lxrlist {
		width: 100%;
		padding: 20rpx 30rpx !important;
		box-sizing: border-box;
		color: gray;

		view:hover {
			background-color: #fff;
			color: #000;
			font-size: 14px;
			font-weight: 700;
		}

		view {
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-bottom: 1px solid #ccc;
		}
	}

	.modify_revise {
		width: 100%;
		height: 100vh;
		background: #FFFFFF;

		// padding: 20rpx;
		box-sizing: border-box;
		font-size: 12px !important;

		.rzpage {
			.btnbox {
				margin-top: 100rpx;
				width: 100%;
				display: flex;
				justify-content: center;
                padding-bottom: 50rpx;
				box-sizing: border-box;
				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 500rpx;
					height: 82rpx;
					background: #409EFF;
					border-radius: 10rpx 10rpx 10rpx 10rpx;

					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}

			.topbox {
				padding-bottom: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				width: 750rpx;

				background: #FFFFFF;
				box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
				border-radius: 0rpx 0rpx 0rpx 0rpx;

				.text {
					margin-top: 24rpx;
					width: 100%;
					text-align: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 38rpx;
				}

				image {
					width: 374rpx;
					height: 376rpx;
					display: block;
				}
			}

			.uploadbox {
				padding: 0 46rpx;
				width: 750rpx;
				padding-bottom: 20rpx;
				background: #FFFFFF;

				.box_tip {
					width: 100%;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}

				border-radius: 0rpx 0rpx 0rpx 0rpx;

				.upimg {
					margin-top: 30rpx;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;

					.imgcont {
						width: 132rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;


						image {
							width: 132rpx;
							height: 78rpx;
						}

						.botimg {
							margin-top: 28rpx;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							font-weight: 400;
							font-size: 20rpx;
							color: #A19C9C;
							line-height: 28rpx;

							image {
								margin-right: 8rpx;
								width: 25.14rpx;
								height: 25.25rpx;
							}
						}
					}

				}
			}
		}

		.infopage {
			background: #fff;

			.btnbox {
				margin-top: 50rpx;
				width: 100%;
				display: flex;
				justify-content: center;

				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 500rpx;
					height: 82rpx;
					background: #409EFF;
					border-radius: 10rpx 10rpx 10rpx 10rpx;

					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}

			.info_box {
				margin-bottom: 24rpx;
				display: flex;
				flex-wrap: wrap;
				width: 748rpx;
				padding: 0 52rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);

				.info_li {
					width: 100%;
					height: 80rpx;

					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					border-bottom: 2rpx solid #F0F0F0;

					.text {
						margin-right: 56rpx;
						width: 154rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #212529;
						line-height: 36rpx;
					}

					.tips {
						font-weight: 400;
						font-size: 22rpx;
						color: #808080;
					}

					.input {}
				}
			}
		}

		.top {
			padding: 20rpx;
		}

		.upidcard {
			background-color: #fff;
			margin-top: 50rpx;
			border-bottom: 1px dashed #ccc;

			.btnbox {
				width: 100%;
				display: flex;
				justify-content: center;
				background: #fff;

				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 500rpx;
					height: 82rpx;
					background: #409EFF;
					border-radius: 10rpx 10rpx 10rpx 10rpx;

					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}

			.tip {
				display: flex;
				padding-left: 40rpx;
				align-items: center;
				width: 750rpx;
				height: 64rpx;
				background: #FFEBEB;
				border-radius: 0rpx 0rpx 0rpx 0rpx;

				font-weight: 400;
				font-size: 28rpx;
				color: #EB8989;

				image {
					margin-right: 6rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.uploadbox {
				padding: 0 46rpx;
				width: 750rpx;
				padding-bottom: 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 0rpx 0rpx 0rpx 0rpx;

				.showimg {
					margin-top: 40rpx;
					width: 100%;
					display: flex;
					justify-content: center;

					image {
						width: 572rpx;
						height: 314rpx;
					}
				}

				.uptip {
					display: flex;
					flex-wrap: wrap;

					.uptipli {
						margin-top: 24rpx;
						width: 100%;
						font-weight: 400;
						font-size: 24rpx;
						color: #A19C9C;
						line-height: 32rpx;
					}

				}

				.upself {
					margin-top: 30rpx;
					margin-bottom: 60rpx;
					padding: 36rpx 44rpx;
					width: 678rpx;
					height: 478rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
					border-radius: 30rpx 30rpx 30rpx 30rpx;

					.box_tip {
						width: 100%;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
					}

					image {
						margin-top: 24rpx;
						width: 578rpx;
						height: 330rpx;
						border-radius: 14rpx;
					}

					video {
						margin-top: 24rpx;
						width: 578rpx;
						height: 330rpx;
						border-radius: 14rpx;
					}
				}

				.upimg {
					margin-top: 30rpx;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;

					.imgcont {
						width: 132rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						font-weight: 400;
						font-size: 20rpx;
						color: #A19C9C;
						line-height: 28rpx;

						image {
							width: 132rpx;
							height: 91.25rpx;
						}
					}
				}

				.iptbox {
					display: flex;
					flex-wrap: wrap;

					.iptli {
						width: 100%;
						margin-top: 34rpx;
						display: flex;
						flex-wrap: nowrap;

						.left {
							margin-right: 78rpx;
							width: 112rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #A19C9C;
						}

						.right {
							font-weight: 400;
							font-size: 28rpx;
							color: #C8C7C7;
						}

						.act1 {
							color: #212529;
						}
					}
				}

				.box_tip {
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}

				.img_boxs {
					margin-top: 38rpx;
					margin-left: 24rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					.img_box {
						font-weight: 400;
						font-size: 24rpx;
						color: #C8C7C7;
						line-height: 32rpx;
						margin-right: 60rpx;
						width: 278rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						image {
							width: 278rpx;
							height: 188rpx;
						}
					}
				}
			}
		}
	}
</style>