v3-lab-xcx/pages_safetyExamine/views/patrolPlan/patrolPlanAdd.vue

<!-- 安全检查-发起巡查计划 -->
<template>
	<view class="examine">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="basics">
				<view class="title">
					<view class="title_t">计划标题</view>
					<textarea class="title_b" type="text" v-model="form.title" maxlength="200" placeholder="请输入检查计划标题"
						placeholder-style="color:#999999;font-size:30rpx;"></textarea>
				</view>
				<view class="type">
					<view class="type_l">检查组织</view>
					<input class="type_r" type="text" v-model="form.checkTypeName" placeholder="" disabled
						maxlength="20">
				</view>
				<view class="period">
					<view class="period_l">计划周期</view>
					<view class="period_r">
						<picker mode="date" @change="startChange(form,$event)">
							<input class="picker-text" disabled type="text" v-model="form.cycleStartTime"
								placeholder="开始时间">
						</picker>
						<view>至</view>
						<picker mode="date" @change="endChange(form,$event)">
							<input class="picker-text2" disabled type="text" v-model="form.cycleEndTime"
								placeholder="结束时间">
						</picker>
					</view>
				</view>
				<view class="tiem_quick">
					<view @click="tiemQuick(index)" :class="item.type?'tiem_quick_a':'tiem_quick_b'"
						v-for="(item,index) in tiemQuickList" :key="index">{{item.name}}</view>
				</view>
				<view class="scope">
					<view class="scope_l">检查范围</view>
					<picker @change="scopeChange" :value="scopeIndex" :range="scopeArray" class="scope_r">
						<view class="scope_r_n">
							<view>{{form.checkRange?(form.checkRange==1?'全校':(form.checkRange==2?'学院':'实验室')):'选择检查范围'}}
							</view>
							<img src="@/pages_safetyExamine/images/icon_06.png">
						</view>
					</picker>
				</view>
				<view class="scope_btn" v-if="scopeIndex==1 || scopeIndex==2" @click="collegeOrLab()">
					{{scopeIndex==1?'选择学院':'选择实验室'}}
				</view>
				<view class="scope_text" v-if="scopeIndex==0 || scopeIndex==1">
					已选择<text>{{form.collegeNum}}</text>个学院，共<text>{{form.subjectNum}}</text>间实验室</view>
				<view class="scope_text" v-if="scopeIndex==2">已选择<text>{{form.subjectNum}}</text>间实验室</view>
				<view class="scope">
					<view class="scope_l">检查类型</view>
					<picker @change="categoryChange" :value="categoryIndex" :range="categoryArray" class="scope_r">
						<view class="scope_r_n">
							<view>{{form.checkCategory==1?'综合检查':(form.checkCategory==2?'专项检查':'请选择检查类型')}}</view>
							<img src="@/pages_safetyExamine/images/icon_06.png">
						</view>
					</picker>
				</view>
				<view class="content" v-if="form.checkCategory==2">
					<view class="content_l">检查内容</view>
					<view class="content_r">
						<view class="content_r_l" @click="clickContent()">选择检查内容</view>
						<view class="content_r_r">已选择<text>{{form.hazardNum}}</text>种</view>
					</view>
				</view>
				<view class="title">
					<view class="title_t">检查要求</view>
					<textarea class="title_b" type="text" v-model="form.checkDemand" maxlength="100"
						placeholder="请输入检查要求" placeholder-style="color:#999999;font-size:30rpx;"></textarea>
				</view>
			</view>
			<view class="patrol_group" v-if="form.checkType==1">
				<view class="patrol">
					<view class="patrol_l">巡查组</view>
					<view class="patrol_r_n" @click="patrolChange">
						<view>{{form.checkGroupName?form.checkGroupName:'请选择巡查组'}}</view>
						<img src="@/pages_safetyExamine/images/icon_06.png">
					</view>
				</view>
				<view class="list">
					<view class="list_title"><img src="@/pages_safetyExamine/images/icon_jcjh_cy.png">成员</view>
					<view class="list_header"><text>工号</text><text>姓名</text></view>
					<view class="list_li" v-for="(item,index) in form.checkMemberDtoList" :key="index">
						<text>{{item.jobNum}}</text><text>{{item.name}}</text>
					</view>
					<view class="list_bottom" v-if="form.checkMemberDtoList.length==0">无数据</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom_btn" @click="submitForm()">保存</view>
		<!-- 选择学院-->
		<view class="shade" v-if="dialogVisible">
			<view class="null-box" @click="dialogClose()"></view>
			<view class="shade_n">
				<view class="shade_n_title"><text>选择学院</text><text @click="collegeConfirm">确定</text></view>
				<view class="shade_n_b">
					<view class="shade_n_b_li" v-for="(item,index) in  collegeList" :key="index"
						@click="collegeSelete(index)">
						<text :class="item.type?'color_B':'color_A'">{{item.deptName}}</text>
						<img v-if="item.type" src="@/pages_safetyExamine/images/icon_xzwt_xz.png">
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		checkPlanAdd,
		systemDeptDropList,
		getAllSubNum,
		isSCollege,
		laboratorySubRelInfoConditionCollegeInfo,
		laboratorySubRelInfoGetAllSubNum
	} from '@/pages_safetyExamine/api/index.js'
	export default {
		name: "rectifyList",
		components: {

		},
		data() {
			return {
				pageType: 0,
				//列表请求参数
				getData: {
					page: 1,
					pageSize: 20,
				},
				form: {
					title: '',
					checkType: '1', //1校院巡查 2实验室自查
					checkTypeName: '校院巡查', //1校院巡查 2实验室自查
					cycleStartTime: '',
					cycleEndTime: '',
					checkRange: '', //检查范围 1全校 2学院 3实验室
					checkLevel: '', //巡查组层级
					seleteListMember: [], //临时存储选中巡查组
					checkMemberDtoList: [], //巡查组成员
					collegeIds: '', //学院id组
					collegeNum: 0, //学院数量
					subIds: '', //实验室id组
					subjectNum: 0, //实验室数量
					hazardNum: 0, //检查设备数量
					checkDemand: '', //检查要求
					tiemQuickList: [],
					scopeIndex: '', //0 全校 1学院 2实验室
					seleteListLab: [],
					seleteListDevice: [],
					groupDataType: '', //巡查组状态 院级/校级
					checkCategory: '', //检查类型  1综合检查  2专项检查
				},
				tiemQuickList: [{
					name: '本月',
					type: false
				}, {
					name: '本季度',
					type: false
				}, {
					name: '全年',
					type: false
				}],
				scopeIndex: 0,
				scopeArray: ['全校', '学院', '实验室'],
				categoryIndex: 0,
				categoryArray: ['综合检查', '专项检查'],
				dialogVisible: false,
				collegeList: []

			}
		},
		onLoad(option) {
			if (option.pageType) {
				if (option.pageType == 1) { //校院巡查
					this.form.checkType = option.pageType;
					this.form.checkTypeName = '校院巡查';
					uni.setNavigationBarTitle({
						title: '发起巡查计划'
					})
				} else if (option.pageType == 2) { //实验室自查
					this.form.checkType = option.pageType;
					this.form.checkTypeName = '实验室自查';
					uni.setNavigationBarTitle({
						title: '发起自查计划'
					})
				}
			}
		},
		onShow(form) {
			if (form) {
				this.form = JSON.parse(decodeURIComponent(form));
				this.tiemQuickList = this.form.tiemQuickList //时间快捷
				this.scopeIndex = this.form.scopeIndex //检查范围
			}
		},
		mounted() {
			this.isSCollege();
		},
		methods: {
			//滚动事件
			scrollGet() {},
			//顶部tab点击
			tabClick(index) {
				this.curTab = index;
			},
			//开始时间选中事件
			startChange(form, e) {
				if (new Date(e.target.value).getTime() > new Date(form.cycleEndTime).getTime()) {
					uni.showToast({
						title: '结束时间不能小于开始时间',
						icon: "none",
						mask: true,
						duration: 2000
					});
				} else {
					form.cycleStartTime = e.target.value
					this.tiemQuickList.forEach(function(item) {
						item.type = false;
					})
				}
			},
			//结束时间选中事件
			endChange(form, e) {
				if (new Date(form.cycleStartTime).getTime() > new Date(e.target.value).getTime()) {
					uni.showToast({
						title: '结束时间不能小于开始时间',
						icon: "none",
						mask: true,
						duration: 2000
					});
				} else {
					form.cycleEndTime = e.target.value
					this.tiemQuickList.forEach(function(item) {
						item.type = false;
					})
				}
			},
			//检查周期快捷
			tiemQuick(index) {
				this.tiemQuickList[index].type = !this.tiemQuickList[index].type
				let self = this;
				if (self.tiemQuickList[index].type == true) {
					self.tiemQuickList.forEach(function(item2) {
						if (item2.name == self.tiemQuickList[index].name) {
							item2.type = true
						} else {
							item2.type = false
						}
					})
					//快捷本月-本季度-全年
					self.timeSlotChange(self.tiemQuickList[index].name)
				} else {
					console.log('取消选中')
					self.form.cycleStartTime = '';
					self.form.cycleEndTime = '';
				}

			},
			//查询当前用户是否是院级
			async isSCollege() {
				let self = this;
				const {
					data
				} = await isSCollege();
				if (data.code == 200) {
					if (data.data.userFlg) {
						// 院级
						this.$set(this, 'scopeArray', ['学院', '实验室']);
						this.form.groupDataType = 2;
					} else {
						// 校级
						this.$set(this, 'scopeArray', ['全校', '学院', '实验室']);
						this.form.groupDataType = 0;
					}
				}
			},
			//检查类型
			categoryChange(e) {
				let self = this;
				if (e.target.value == 0) {
					this.form.checkCategory = 1
				} else if (e.target.value == 1) {
					this.form.checkCategory = 2
				}
			},
			//检查内容
			clickContent() {

				if (!this.form.collegeNum && !this.form.subjectNum) {
					uni.showToast({
						title: '请先选择检查范围',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return;
				}
				this.form.tiemQuickList = this.tiemQuickList //检查周期快捷存储
				this.form.scopeIndex = this.scopeIndex //检查范围
				uni.navigateTo({
					url: '/pages_safetyExamine/views/patrolPlan/patrolPlanAddContent?form=' + encodeURIComponent(
						JSON.stringify(this.form)) + '&pageType=1'
				});
			},
			//检查范围
			scopeChange(e) {
				let self = this;
				if (this.scopeArray[e.target.value] == '全校') {
					self.scopeIndex = 0;
					self.form.checkRange = 1;
				} else if (this.scopeArray[e.target.value] == '学院') {
					self.scopeIndex = 1;
					self.form.checkRange = 2;
				} else if (this.scopeArray[e.target.value] == '实验室') {
					self.scopeIndex = 2;
					self.form.checkRange = 3;
				}
				if (this.form.subjectNum > 0) {
					uni.showModal({
						content: '重新选择会删除现有选择的实验室,是否重选?',
						cancelColor: "#999",
						confirmColor: "#0183FA",
						success: function(res) {
							if (res.confirm) {

								self.form.collegeIds = '';
								self.form.collegeNum = 0;
								self.form.subIds = '';
								self.form.subjectNum = 0;

								if (self.scopeIndex == 0) { //全校
									self.getAllSubNum();
								} else if (self.scopeIndex == 1) { //选择学院
									self.conditionCollegeInfo();
								} else if (self.scopeIndex == 2) {
									console.log('选择实验室')
								}

							} else if (res.cancel) {

							}
						}
					});
				} else {
					if (self.scopeIndex == 0) { //全校
						self.getAllSubNum();
					} else if (self.scopeIndex == 1) { //选择学院
						self.conditionCollegeInfo();
					} else if (self.scopeIndex == 2) {
						console.log('选择实验室')
					}
				}


			},
			timeSlotChange(val) {
				let self = this;
				let cycleStartTime, cycleEndTime;
				let now = new Date(); //当前日期
				let nowDayOfWeek = now.getDay(); //今天本周的第几天
				let nowDay = now.getDate(); //当前日
				let nowMonth = now.getMonth(); //当前月
				let nowYear = now.getFullYear(); //当前年
				let jd = Math.ceil((nowMonth + 1) / 3)
				switch (val) {
					case "本周":
						cycleStartTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
						cycleEndTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek)
						break;
					case "本月":
						cycleStartTime = new Date(nowYear, nowMonth, 1)
						cycleEndTime = new Date(nowYear, nowMonth + 1, 0)
						break;
					case "本季度":
						cycleStartTime = new Date(nowYear, (jd - 1) * 3, 1)
						cycleEndTime = new Date(nowYear, jd * 3, 0)
						break
					case "全年":
						cycleStartTime = new Date(nowYear, 0, 1)
						cycleEndTime = new Date(nowYear, 11, 31)
						break
				}
				self.form.cycleStartTime = self.formatDateTime(cycleStartTime)
				self.form.cycleEndTime = self.formatDateTime(cycleEndTime)
			},
			// 中国标准时间 转换成 年月日
			formatDateTime(date) {
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				var minute = date.getMinutes();
				minute = minute < 10 ? ('0' + minute) : minute;
				// return y + '-' + m + '-' + d+' '+h+':'+minute;
				return y + '-' + m + '-' + d
			},
			//巡查组
			patrolChange() {
				this.form.tiemQuickList = this.tiemQuickList //检查周期快捷存储
				this.form.scopeIndex = this.scopeIndex //检查范围
				uni.navigateTo({
					url: '/pages_safetyExamine/views/patrolPlan/patrolPlanAddMember?form=' + encodeURIComponent(
						JSON.stringify(this.form)) + '&pageType=1'
				});
			},
			//选择学院或者实验室
			collegeOrLab() {
				if (this.scopeIndex == 1) { //学院
					this.dialogVisible = true;
				} else if (this.scopeIndex == 2) { //实验室
					this.form.tiemQuickList = this.tiemQuickList //检查周期快捷存储
					this.form.scopeIndex = this.scopeIndex //检查范围
					uni.navigateTo({
						url: '/pages_safetyExamine/views/patrolPlan/patrolPlanAddLab?form=' + encodeURIComponent(
							JSON.stringify(this.form)) + '&pageType=1'
					});
				}
			},
			//选择学院弹窗关闭
			dialogClose() {
				this.dialogVisible = false;
			},

			//选择学院确定
			collegeConfirm() {
				let self = this;
				this.dialogVisible = false;
				let list = [];
				let collegeIds = [];
				let subjectNum = 0;
				self.collegeList.forEach(function(item) {
					if (item.type == true) {
						list.push(item)
						collegeIds.push(item.deptId);
						subjectNum += item.subNum;
					}
				})
				self.form.collegeIds = collegeIds.join(',');
				self.form.subjectNum = subjectNum;
				self.form.collegeNum = list.length;
			},
			//学院选择
			collegeSelete(index) {
				this.collegeList[index].type = !this.collegeList[index].type
			},
			//查询学院列表
			async conditionCollegeInfo() {
				let self = this;
				const {
					data
				} = await laboratorySubRelInfoConditionCollegeInfo({
					deptName: '',
					level: 2,
					deptType: 1
				});
				if (data.code == 200) {
					data.data.forEach(function(item) {
						item.type = false;
					})
					self.collegeList = data.data;
				}
			},
			//查询全校学院和实验室数量
			async getAllSubNum() {
				let self = this;
				const {
					data
				} = await laboratorySubRelInfoGetAllSubNum();
				if (data.code == 200) {
					this.form.collegeNum = data.data.collegeCount
					this.form.subjectNum = data.data.subCount
				}
			},

			handleClick(doType) {
				let self = this;

				if (doType == 'subBtn') { //

				}

			},
			//巡查计划-添加
			async submitForm() {
				let self = this;
				if (!self.form.title) {
					uni.showToast({
						title: '请输入计划标题',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return;
				}
				if (!self.form.cycleStartTime || !self.form.cycleEndTime) {
					uni.showToast({
						title: '请选择计划周期',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return;
				}
				if (!self.form.checkRange) {
					uni.showToast({
						title: '请选择检查范围',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return;
				}
				if (self.form.checkRange == 2 && self.form.subjectNum == 0) {
					uni.showToast({
						title: '请选择学院',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return;
				}
				if (self.form.checkRange == 3 && self.form.subjectNum == 0) {
					uni.showToast({
						title: '请选择实验室',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return;
				}
				if (self.form.checkType == 1 && self.form.checkMemberDtoList.length <= 0) {
					uni.showToast({
						title: '请选择巡查组',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return;
				}
				console.log(self.form.checkCategory)
				console.log(self.form.hazardNum)
				if (self.form.checkCategory == 2 && self.form.hazardNum == 0) {
					uni.showToast({
						title: '请选择检查内容!',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return;
				}


				const {
					data
				} = await checkPlanAdd(self.form);
				if (data.code == 200) {
					uni.showToast({
						title: '提交成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					uni.redirectTo({
						url: '/pages_safetyExamine/views/patrolPlan/patrolPlanList?pageType=' + this.form.checkType
					});

				}
			},



		}
	}
</script>

<style lang="stylus" scoped>
	.examine {
		height: 100%;
		display flex;
		// padding: 0 30rpx;
		// box-sizing: border-box;
		padding-bottom: 126rpx;
		box-sizing: border-box;

		.info-max-box {
			flex: 1;
			overflow: scroll;

			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.basics {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 60rpx 26rpx 32rpx;
			box-sizing: border-box;

			.title {
				.title_t {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
					margin-bottom: 12rpx;
				}

				.title_b {
					width: 636rpx;
					height: 150rpx;
					border-radius: 10rpx;
					opacity: 1;
					border: 1rpx solid #E0E0E0;
					padding: 26rpx 23rpx;
					box-sizing: border-box;
				}
			}

			.type {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 20rpx;

				.type_l {
					width: 146rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
				}

				.type_r {
					width: 490rpx;
					height: 80rpx;
					border-radius: 10rpx;
					padding-left: 22rpx;
					box-sizing: border-box;
					background: #F5F5F5;
				}
			}

			.period {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 26rpx;

				.period_l {
					width: 146rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
				}

				.period_r {
					width: 490rpx;
					height: 80rpx;
					border-radius: 10rpx;
					border: 1rpx solid #E0E0E0;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.picker-text {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 80rpx;
						width: 230rpx;
						text-align: center;
					}

					.picker-text2 {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 80rpx;
						width: 230rpx;
						text-align: center;
					}
				}
			}

			.tiem_quick {
				margin-left: 146rpx;
				display: flex;
				justify-content: flex-start;
				margin-top: 20rpx;

				>view {
					width: 130rpx;
					height: 80rpx;
					opacity: 1;
					border: 1rpx solid #E0E0E0;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					line-height: 80rpx;
					text-align: center;
				}

				>view:nth-of-type(1) {
					border-radius: 10rpx 0rpx 0rpx 10rpx;
				}

				>view:nth-of-type(3) {
					border-radius: 0rpx 10rpx 10rpx 0rpx;
				}

				.tiem_quick_a {
					background: #0183FA;
					color: #FFFFFF;

				}

				.tiem_quick_b {
					background: #F5F5F5;
					color: #333333;
				}
			}

			.scope {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 26rpx;

				.scope_l {
					width: 146rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
				}

				.scope_r {
					flex: 1;

					.scope_r_n {
						width: 490rpx;
						height: 80rpx;
						border-radius: 10rpx;
						border: 1rpx solid #E0E0E0;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						>view {
							flex: 1;
							line-height: 80rpx;
							margin-left: 20rpx;
							color: #999999;
							font-size: 28rpx;
						}

						>img {
							width: 14rpx;
							height: 8rpx;
							margin-right: 30rpx;
						}
					}
				}
			}

			.content {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 26rpx;

				.content_l {
					width: 146rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
				}

				.content_r {
					flex: 1;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.content_r_l {
						width: 220rpx;
						height: 80rpx;
						background: #0183FA;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						text-align: center;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 80rpx;
						margin-right: 26rpx;
					}

					.content_r_r {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 42rpx;

						>text {
							color: #0183FA;
						}
					}
				}
			}

			.scope_btn {
				display: inline-block;
				background: #0183FA;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				padding: 0 16rpx;
				box-sizing: border-box;
				margin-top: 40rpx;
				margin-left: 146rpx;
			}

			.scope_text {
				margin-left: 146rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-top: 32rpx;
				line-height: 42rpx;

				>text {
					color: #0183FA;
				}
			}
		}

		.patrol_group {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 40rpx 30rpx 64rpx;
			box-sizing: border-box;

			.patrol {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 26rpx;

				.patrol_l {
					width: 146rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
				}

				.patrol_r_n {
					width: 490rpx;
					height: 80rpx;
					border-radius: 10rpx;
					border: 1rpx solid #E0E0E0;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					>view {
						flex: 1;
						line-height: 80rpx;
						margin-left: 20rpx;
						color: #999999;
						font-size: 28rpx;
					}

					>img {
						width: 14rpx;
						height: 8rpx;
						margin-right: 30rpx;
					}
				}
			}

			.list {
				margin-top: 42rpx;

				.list_title {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					height: 80rpx;
					background: #F5F5F5;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;

					>img {
						width: 30rpx;
						height: 30rpx;
						margin: 0 20rpx;
					}
				}

				.list_header {
					display: flex;
					justify-content: flex-start;

					>text {
						flex: 1;
						height: 80rpx;
						background: #F5F5F5;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 80rpx;
						text-align: center;
						border: 1rpx solid #E0E0E0;
					}

					>text:nth-of-type(1) {
						border-right: none;
					}
				}

				.list_li {
					display: flex;
					justify-content: flex-start;

					>text {
						flex: 1;
						height: 80rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 80rpx;
						text-align: center;
						border: 1rpx solid #E0E0E0;
					}

					>text:nth-of-type(1) {
						border-right: none;
						border-top: none;
					}

					>text:nth-of-type(2) {
						border-top: none;
					}
				}

				.list_bottom {
					flex: 1;
					height: 80rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 80rpx;
					text-align: center;
					border: 1rpx solid #E0E0E0;
					border-top: none;
				}
			}
		}

		.bottom_btn {
			position: fixed;
			bottom: 26rpx;
			left: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 90rpx;
			width: 690rpx;
			height: 90rpx;
			background: #0183FA;
			border-radius: 20rpx;
			text-align: center;

		}

		/* 指纹采集 */
		.shade {
			height: 100%;
			width: 100%;
			position: fixed;
			display: flex;
			flex-direction: column;
			z-index: 10;
			background: rgba(0, 0, 0, 0.2);

			.null-box {
				flex: 1;
			}

			.shade_n {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 750rpx;
				height: 560rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 0rpx 0rpx;

				.shade_n_title {
					height: 100rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					border-bottom: 1rpx solid #E0E0E0;

					>text:nth-of-type(1) {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 100rpx;
					}

					>text:nth-of-type(2) {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #0183FA;
						line-height: 100rpx;

					}
				}

				.shade_n_b {
					height: 460rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					overflow-y: auto;

					.shade_n_b_li {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 80rpx;
						border-bottom: 1rpx solid #E0E0E0;

						>text {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							line-height: 80rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						>img {
							width: 24rpx;
							height: 16rpx;
							margin-right: 14rpx;
						}
					}

					.color_A {
						color: #333333;
					}

					.color_B {
						color: #0183FA;
					}


				}
			}
		}
	}
</style>