<template>
	<view class="wrap_box">

		<view class="vio_list">

			<view class="reg_tip">
				<view v-if="datas.is_register!=1" class="reg_tip_cell edit">
					<text class="icon icon-icon-tianxiegenjin"></text>
					以下每一项都为必填项，请如实填写信息！ 如有疑问请咨询接待老师
				</view>
				<view v-else class="reg_tip_cell">
					<view class="icon">
						<image src="/static/imagesV2/stu_register/icon1.png"></image>
					</view>
					你已填写，如有疑问请咨询接待老师
				</view>
			</view>
			<view class="main_list">
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						姓名：
					</view>
					<view v-if="datas.is_register==1" class="vio_time" >
						{{stu_name}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="text" maxlength="10" placeholder="请填写姓名" v-model="stu_name">
				</view>
				<view  v-if="datas.is_register==1" class="vio_sx dis_flex aic ju_b">
					<view class=" vio_time label">
						性别：
					</view>
					<view  class="vio_time">
							
						{{sexList[sexNum]}}
					</view>
				</view>
				<picker v-else mode="selector" @change="sexChange" :range="sexList">
					<view class="vio_sx dis_flex aic ju_b">
						<view class=" vio_time label">
							性别：
						</view>
							
							<view  class="vio_time">
								{{sexNum===null?'请选择性别':sexList[sexNum]}}
							</view>
							
					</view>
				</picker>
				<view v-if="datas.is_register==1" class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						出生年月：
					</view>
					<view class="vio_time">
						{{birth?birth:'请选择出生年月'}}
					</view>
				</view>
				<picker v-else mode="date" :value="birth" @change="birthChange">
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						出生年月：
					</view>
					<view class="vio_time">
						{{birth?birth:'请选择出生年月'}}
					</view>
				</view>
				</picker>
				
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						学历：
					</view>
					<view v-if="datas.is_register==1" class="vio_time">
						{{xueli}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="text" placeholder="请填写学历" v-model="xueli">
				</view>
				
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						学位：
					</view>
					<view v-if="datas.is_register==1" class="vio_time">
						{{xuewei}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="text" placeholder="请填写学位" v-model="xuewei">
				</view>
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						籍贯：
					</view>
					<view class="vio_time" v-if="datas.is_register==1">
						{{native}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="text" placeholder="请填写籍贯" v-model="native">
				</view>
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						身份证号：
					</view>
					<view class="vio_time" v-if="datas.is_register==1">
						{{id_card}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="text" placeholder="请填写身份证号" v-model="id_card">
				</view>
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						家庭住址：
					</view>
					<view v-if="datas.is_register==1" class="vio_time">
						{{jtzz}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="text" placeholder="请填写家庭住址" v-model="jtzz">
				</view>
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						招生联系人：
					</view>
					<view v-if="datas.is_register==1" class="vio_time">
						{{zslxr}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="text" placeholder="请填写招生联系人" v-model="zslxr">
				</view>
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						是否脱产备考：
					</view>
					<!-- <view v-if="datas.is_register==1" class="vio_time">
						{{stu_name}}
					</view> -->
					<view v-if="datas.is_register==1" class="dis_flex aic ">
						<view v-for="(item,index) in tc_list" class="xz_li dis_flex aic">
							<view :class="{active:item.active}">
								<text class="icon-duigou icon"></text>
							</view>
							<text>{{item.title}}</text>
						</view>
					</view>
					<view v-else class="dis_flex aic ">
						<view v-for="(item,index) in tc_list" class="xz_li dis_flex aic" @click="setv(item)">
							<view :class="{active:item.active}">
								<text class="icon-duigou icon"></text>
							</view>
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						毕业/在读学校：
					</view>
					<view v-if="datas.is_register==1" class="vio_time">
						{{byxx}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="text" placeholder="请填写毕业/在读学校" v-model="byxx">
				</view>
				<view v-if="datas.is_register==1" class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						毕业时间：
					</view>
					<view class="vio_time">
						{{by_time?by_time:'请选择毕业时间'}}
					</view>
				</view>
				<picker  v-else mode="date" :value="by_time" @change="byChange">
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						毕业时间：
					</view>
					<view class="vio_time">
						{{by_time?by_time:'请选择毕业时间'}}
					</view>
				</view>
				</picker>
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						所学专业：
					</view>
					<view v-if="datas.is_register==1" class="vio_time">
						{{sxzy}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="text" placeholder="请填写所学专业" v-model="sxzy">
				</view>
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						民族：
					</view>
					<view class="vio_time" v-if="datas.is_register==1">
						{{nation}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="text" placeholder="请填写民族" v-model="nation">
				</view>
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						联系方式：
					</view>
					<view v-if="datas.is_register==1" class="vio_time">
						{{lxfs}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="number" placeholder="请填写联系方式" v-model="lxfs">
				</view>
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						家长姓名：
					</view>
					<view v-if="datas.is_register==1" class="vio_time">
						{{parent_name}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="text" placeholder="请填写家长姓名" v-model="parent_name">
				</view>
				<view class="vio_sx dis_flex aic ju_b">
					<view class="flex_1 vio_time label">
						家长手机号：
					</view>
					<view v-if="datas.is_register==1" class="vio_time">
						{{parent_phone}}
					</view>
					<input v-else class="vio_int" placeholder-class="vip_intpl" type="number" placeholder="请填写家长手机号" v-model="parent_phone">
				</view>
				
				
				<view  v-if="datas.is_register==1" class="vio_sx dis_flex aic ju_b" style="border-bottom: 0;">
					<view class=" vio_time label">
						学历性质：
					</view>
					<view  class="vio_time">
							
						{{xzList[xlxNum].title}}
					</view>
				</view>
				<picker v-else mode="selector" @change="xzChange" :range="xzList" range-key="title">
					<view class="vio_sx dis_flex aic ju_b" style="border-bottom: 0;">
						<view class=" vio_time label">
							学历性质：
						</view>
							
						<view  class="vio_time">
							{{xlxNum===null?'请选择学历性质':xzList[xlxNum].title}}
						</view>
							
					</view>
				</picker>
				
				
				
				
				
				
				
				
				
				


			</view>
			<view class="bz_add" v-if="datas.is_register!=1">
				<view class="" @click="save_fuc" data-url="/pagesA/stu_bz_edit/stu_bz_edit">
					提交
				</view>
			</view>
		</view>

		<!-- 阻止滑动 -->
		<!-- <view @touchmove.stop.prevent='test'></view> -->
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var that
	export default {
		data() {
			return {
				options: '',
				
				active: 0,
				index: 0,
				datas: '',
				sexList: ['男', '女'],
				sexNum: 0, //当前选择的index值
				
				stu_name:'',
				birth: '',
				native:'',
				nation:'',
				id_card:'',
				tc_list:[
					{
						title:'是',
						id:1
					},
					{
						title:'在职',
						id:2
					},
					{
						title:'自费',
						id:3
					},
				],
				xzList:[
					{
						title:'国民教育',
						id:1
					},
					{
						title:'普通招生计划(高考安排招生的全日制高等院校)',
						id:2
					},
				],
				
				
				
				xueli:'',  //学历
				xuewei:'', //学位
				jtzz:'', //家庭住址
				zslxr:'', //招生联系人
				tcbk:'', //脱产备考
				byxx:'', //毕业学校
				by_time:'', //毕业时间
				sxzy:'', //所学专业
				lxfs:'',//联系方式
				parent_name:'', //家长姓名
				parent_phone:'', //家长手机号
				xlxNum:0, //学历性质
			}
		},
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo', 'nowtime']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(e) {
			that = this
			that.options = e || {}
			console.log(e)
			// if(e.type==0){
			// 	uni.setNavigationBarTitle({
			// 		title:'公务员目标制定'
			// 	})
			// }
			// if(e.type==1){
			// 	uni.setNavigationBarTitle({
			// 		title:'事业单位目标制定'
			// 	})
			// }
			// if(e.type==2){
			// 	uni.setNavigationBarTitle({
			// 		title:'特岗教师目标制定'
			// 	})
			// }
			that.getdata()
		},
		onShow() {

		},
		methods: {
			// ...mapMutations(['wxshouquan','login']),
			test() {},
			setv(item){
				if(item.active){
					that.$set(item,'active',false)
				}else{
					that.$set(item,'active',true)
				}
			},
			xzChange(e) { //学历性质选择
				console.log(e.detail.value);
				this.xlxNum = e.detail.value
			},
			byChange(e){
				var by_time=e.detail.value
				// by_time=by_time.split('-').join('/')
				this.by_time=by_time
			},
			birthChange(e){
				var birth=e.detail.value
				// birth=birth.split('-').join('/')
				this.birth=birth
			},
			
			getdata() {
			
				var datas = {}
				var jkurl = '/study/register'
			
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						that.htmlReset = 0
						var datas = res.data
						console.log(typeof datas)
			
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
						console.log(res)
						that.datas=datas
						that.stu_name=datas.name
						that.sexNum=datas.sex==2?1:0
						that.birth=datas.birth
						that.native=datas.native
						that.nation=datas.nation
						that.id_card=datas.id_card
						
						that.xueli=datas.xueli
						that.xuewei=datas.xuewei
						that.jtzz=datas.jtzz
						that.zslxr=datas.zslxr
						that.lxfs=datas.lxfs
						that.parent_name=datas.parent_name
						that.parent_phone=datas.parent_phone
						that.byxx=datas.byxx
						that.by_time=datas.bysj
						that.sxzy=datas.sxzy
						if(datas.xlxz>0){
							
							that.xlxNum=datas.xlxz-1
						}
						if(datas.tcbk){
							for (var i = 0; i < that.tc_list.length; i++) {
								var id=that.tc_list[i].id
								if(datas.tcbk.indexOf(id)!=-1){
									that.$set(that.tc_list[i],'active',true)
								}
							}
						}
					} else {
			
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
				}).catch(e => {
					that.htmlReset = 1
					that.btnkg = 0
					// that.$refs.htmlLoading.htmlReset_fuc(1)
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
			},
			save_fuc() {
				
				if(!that.stu_name){
					uni.showToast({
						icon: 'none',
						title: '请输入您的姓名'
					})
					return
				}
				if(!that.birth){
					uni.showToast({
						icon: 'none',
						title: '请选择出生年月'
					})
					return
				}
				if(!that.xueli){
					uni.showToast({
						icon: 'none',
						title: '请输入您的学历'
					})
					return
				}
				if(!that.xuewei){
					uni.showToast({
						icon: 'none',
						title: '请输入您的学位'
					})
					return
				}
				if(!that.native){
					uni.showToast({
						icon: 'none',
						title: '请输入您的籍贯'
					})
					return
				}
				if(!that.id_card){
					uni.showToast({
						icon: 'none',
						title: '请输入您的身份证号'
					})
					return
				}
				if(!this.idCardVerification(that.id_card)){
					uni.showToast({
						icon: 'none',
						title: '请输入正确身份证号码'
					})
					return
				}
				if(!that.jtzz){
					uni.showToast({
						icon: 'none',
						title: '请输入您的家庭住址'
					})
					return
				}
				if(!that.zslxr){
					uni.showToast({
						icon: 'none',
						title: '请输入您的招生联系人'
					})
					return
				}
				var tcbk=[]
				for (var i = 0; i < that.tc_list.length; i++) {
					if(that.tc_list[i].active){
						tcbk.push(that.tc_list[i].id)
					}
				}
				if(tcbk.length==0){
					uni.showToast({
						icon: 'none',
						title: '请选择是否脱产备考'
					})
					return
				}
				tcbk=tcbk.join(',')
				
				if(!that.byxx){
					uni.showToast({
						icon: 'none',
						title: '请输入您的毕业学校'
					})
					return
				}
				if(!that.by_time){
					uni.showToast({
						icon: 'none',
						title: '请选择您的毕业时间'
					})
					return
				}
				if(!that.sxzy){
					uni.showToast({
						icon: 'none',
						title: '请输入您的所选专业'
					})
					return
				}
				if(!that.nation){
					uni.showToast({
						icon: 'none',
						title: '请输入您的民族'
					})
					return
				}
				if(!that.lxfs){
					uni.showToast({
						icon: 'none',
						title: '请输入您的联系方式'
					})
					return
				}
				if(!that.parent_name){
					uni.showToast({
						icon: 'none',
						title: '请输入家长姓名'
					})
					return
				}
				
				if(!that.parent_phone){
					uni.showToast({
						icon: 'none',
						title: '请输入家长手机号'
					})
					return
				}
				
				
				
				
				
				var datas = {
					name:that.stu_name,
					sex:that.sexNum==0?1:2,
					birth: that.birth,
					native:that.native,
					nation:that.nation,//民族
					id_card:that.id_card,
					
					xueli:that.xueli,  //学历
					xuewei:that.xuewei, //学位
					jtzz:that.jtzz, //家庭住址
					zslxr:that.zslxr, //招生联系人
					tcbk:tcbk, //脱产备考
					byxx:that.byxx, //毕业学校
					bysj:that.by_time, //毕业时间
					sxzy:that.sxzy, //所学专业
					lxfs:that.lxfs,//联系方式
					parent_name:that.parent_name, //家长姓名
					parent_phone:that.parent_phone, //家长手机号
					xlxz:that.xlxNum-1+2, //学历性质
				}
				var jkurl = '/study/register_sub'
					if(that.btnkg==1){
						return
					}		
					that.btnkg=1
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						that.htmlReset = 0
						var datas = res.data
						console.log(typeof datas)
							
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
						console.log(res)
						
						uni.showToast({
							icon: 'none',
							title: '提交成功'
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
							
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
				}).catch(e => {
					that.htmlReset = 1
					that.btnkg = 0
					// that.$refs.htmlLoading.htmlReset_fuc(1)
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
				
			},
			idCardVerification(value) {
				console.log(value)
				var sId = value;
				if (sId.length == 15) {
					if(!/^\d{14}(\d|x)$/i.test(sId)){
						this.message =  "你输入的身份证长度或格式错误";
						return false;
					} else  {
						sId=sId.substr(0,6)+'19'+sId.substr(6,9);
						sId+= getVCode(sId);
					}
				}
				function getVCode(CardNo17) {
				  var Wi = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
				  var Ai = new Array('1','0','X','9','8','7','6','5','4','3','2');
				  var cardNoSum = 0;
				  for (var i=0; i<CardNo17.length; i++)cardNoSum+=CardNo17.charAt(i)*Wi[i];
				  var seq = cardNoSum%11;
				  return Ai[seq];
				}
				var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"} ;
			
				var iSum=0 ;
				var info="" ;
				if(!/^\d{17}(\d|x)$/i.test(sId)){
					this.message =  "你输入的身份证长度或格式错误";
					return false;
				}
				sId=sId.replace(/x$/i,"a"); 
				if(aCity[parseInt(sId.substr(0,2))]==null){ 
					this.message =  "你的身份证地区非法";
					return false;
				}
				var sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2)); 
				var d=new Date(sBirthday.replace(/-/g,"/")) ;
				if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate())){
					this.message =  "身份证上的出生日期非法";
					return false; 
				}
				for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) ;
				if(iSum%11!=1){
					this.message =  "你输入的身份证号非法";
					return false; 
				}
				return true;
			},
			setac_fuc(index) {
				that.active = index
				this.index = 0
			},
			bindDateChange(e) {
				this.vio_time = e.detail.value
			},
			bindpickerChange(e) {
				this.index = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			
			getimg(img) {
				return service.getimg(img)
			},
			jump(e) {
				var that = this
				if (that.btnkg == 1) {
					return
				} else {
					that.btnkg = 1
					setTimeout(function() {
						that.btnkg = 0
					}, 2000)
				}
				console.log(e.currentTarget.dataset.type)
				service.jump(e)
			},
			goback() {
				uni.navigateBack()
			},
			func() {
				// that.$store.commit('setSystem',datas.system)
			},
			sexChange(e) { //性别选择
				console.log(e.detail.value);
				this.sexNum = e.detail.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap_box {
		width: 100%;
		// padding: 30rpx;
		min-height: 100vh;
		// #ifdef H5
		min-height: calc(100vh - 44px);
		// #endif
		background: #F8F8F8;
		position: relative;
	}


	.vip_tab_li {
		height: 90rpx;
		display: inline-flex;
		align-items: center;
		font-size: 30rpx;
		color: #FFFFFF;
		opacity: 0.6;

		position: relative;

		&+.vip_tab_li {
			margin-left: 50rpx;
		}

		&.active {
			opacity: 1;

			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -18rpx;
				width: 36rpx;
				height: 6rpx;
				background: #FFFFFF;
				border-radius: 3rpx;
			}
		}
	}

	.vio_sx {
		padding: 30rpx 0;
		justify-content: space-between;
		border-bottom: 1px solid #F3F3F7;
		align-items: baseline;
	}

	.vio_time {

		flex: 1;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #646464;
		letter-spacing: 0;
		display: flex;
		align-items: center;
		text-align: right;
		justify-content: flex-end;
		.icon {
			font-size: 20rpx;
			margin-left: 5rpx;
			color: #999999;
			opacity: .5;
		}

		input {
			font-size: 30rpx;
			color: #7D8087;
			text-align: right;
			padding: 0 10rpx;
		}
	}

	.vio_int {
		font-size: 30rpx;
		color: #7D8087;
		text-align: right;
		padding: 0 10rpx;
	}

	/deep/ .vip_intpl {
		color: #D5D7DA;
	}

	.vio_list {
		width: 100%;
		// padding: 0 30rpx 30rpx;
		padding: 30rpx;
		position: relative;
		z-index: 2;

		.main_list {
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 0 30rpx;
			.label {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				width: 240rpx;
				flex: none;
				text-align: left;
				justify-content: unset;
			}
		}

	}

	.bz_add {
		width: 100%;
		// position: fixed;
		// bottom: 0;
		background: #f8f8f8;
		z-index: 800;
		// left: 0;
		padding: 50rpx 0;

		view {
			width: 100%;
			height: 90rpx;
			background: #2D81FF;
			border-radius: 44rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.jf_tit {
		font-size: 32rpx;
		color: #FFFFFF;
		position: relative;
		padding-left: 20rpx;
		height: 60rpx;
		display: flex;
		align-items: center;

		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -15rpx;
			width: 6rpx;
			height: 30rpx;
			background: #FFFFFF;
		}
	}

	.jf_list {
		font-size: 30rpx;
		color: #FFFFFF;
		opacity: 0.8;
	}

	.reg_tip {
		.reg_tip_cell {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #EF5D22;
			background: #F2E9E6;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			padding: 15rpx 30rpx;
			.icon {
				width: 34rpx;
				height: 34rpx;
				margin-right: 20rpx;
			}
		}
	}

	.right-text {
		min-width: 100rpx;
		justify-content: flex-end;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #D5D7DA;
	}
	.right-text2{
		min-width: 100rpx;
		justify-content: flex-end;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.xz_li{
		padding: 0 15rpx;
		font-size: 30rpx;
		color: #7D8087;
		view{
			width: 30rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #ddd;
			margin-right: 10rpx;
			text{
				color: #fff;
				font-size: 26rpx;
			}
			&.active{
				background: #2D81FF;
				border: 1px solid #2D81FF;
			}
			
		}
	}
</style>