property/user_ui/work/pages/visitor/vadd.vue

<template>
	<view class="check">
		<uni-forms ref="form" :model="datainfo" :rules="rules">
			<view class="cbox" style="padding-bottom: 24rpx;">
				<view class="chtop flexc" @click="zhanflag=!zhanflag">
					<view class="line"></view>
					<view>常用访客</view>
					<view class="flex1"></view>
					<image :src="upimg" class="upimg" :class="zhanflag?'act':''"></image>
				</view>
				<view class="peobox flexc" v-if="zhanflag">
					<view class="plists flexcc">
						<view class="tit overtwo">爷爷奶奶</view>
						<view class="addimg flexcc">
							<image :src="addimg"></image>
						</view>
					</view>
					<view class="plists flexcc">
						<view class="tit overtwo">王一</view>
						<view class="addimg flexcc">
							<image :src="addimg"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="cbox">
				<view class="chtop flexc">
					<view class="line"></view>
					<view>访客信息</view>
				</view>
				<view class="chmain">
					<!-- 选择房屋 -->
					<uni-forms-item label="访客姓名" name="name">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.name"  :inputBorder='false' placeholder="请输入访客姓名" />
							<!-- <uni-data-checkbox selectedColor="#0156FE" selectedTextColor="#272727" v-model="datainfo.sex" :localdata="sexs" /> -->
						</view>
					</uni-forms-item>
					<uni-forms-item label="来访人数" name="num">
						<view class="flexc">
							<!-- <uni-easyinput :disabled="isdisabled" v-model="datainfo.num" type="Number" :inputBorder='false' placeholder="请输入来访人数" /> -->
							<view class="flex1"></view>
							<view class="libox flexcw rslist">
								<view class="sylist flexcc" :class="rsidx==ite.value?'act':''" v-for="(ite,idx) in rslist" :key="idx" @click="getRsFn(ite)">{{ite.label}}</view>
							</view>
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="来访时间" name="visitorTime">
						<!-- :hide-second='true' -->
						<view class="flexc">
							<uni-datetime-picker type="datetime" :disabled="isdisabled" :class="datainfo.visitorTime?'co27':'coa'"  placeholder="请选择来访时间" :border="false"  v-model="datainfo.visitorTime" @change="changeLog" />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
						<!-- <picker range-key='dictLabel' :value="vxlbidx" :range="vxlbList"   @change='bindDateChangea'>
							<view class="flexc">
								<view class="flex1 txr f13 co27" v-if="datainfo.maintenanceCategory&&!vxlb">{{statusFormats(datainfo.maintenanceCategory,vxlbList,'vxlb')}}</view>
								<view class="flex1 txr f13" v-else :class="vxlb?'co27':'coa'">{{vxlb||"请选择来访时间"}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker> -->
					</uni-forms-item>
					<uni-forms-item label="来访事由" name="reason">
						<view class="flexc ">
							<view class="flex1"></view>
							<view class="sylist flexcc" :class="syidx==ite.dictValue?'act':''" v-for="(ite,idx) in sylist" :key="idx" @click="getSyFn(ite.dictValue)">{{ite.dictLabel}}</view>
							<!-- <uni-easyinput  :disabled="isdisabled" v-model="datainfo.reason" :inputBorder='false' placeholder="请输入来访事由" /> -->
							<view class="rimg"><image :src="rimg"></image></view>
							<!-- <picker range-key='dictLabel' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
								<view class="rimg"><image :src="rimg"></image></view>
							</picker> -->
						</view>
					</uni-forms-item>
					<uni-forms-item label="来访门户" name="houseId">
						<w-select
						      style="margin-left: 20rpx;" 
						     v-model="chooseValue"
						      :list='fwlist'
						      valueName='label' 
						      keyName="value"
							  :chosevalue="datainfo.houseAddress"
							  :filterable='filterable'
						      @change='getchange'
						    >
						    </w-select>
					</uni-forms-item>
				</view>
			</view>
			<view class="cbox">
				<view class="chtop flexc">
					<view class="line"></view>
					<view>驾车信息</view>
				</view>
				<view class="chmain">
					<uni-forms-item label="是否驾车" name="isCar">
						<view class="flexc" @click="getChangeFn">
							<view class="flex1"></view>
							<image :src="check" v-if="datainfo.isCar=='Y'" class="checkimg"></image>
							<image :src="ncheck" v-else class="checkimg"></image>
						</view>
					</uni-forms-item>
					<uni-forms-item label="车牌号码" name="plateNumber" v-if="datainfo.isCar=='Y'">
						<view class="flexc">
							<!-- disabled -->
							<!-- <uni-easyinput :disabled="isdisabled" v-model="datainfo.plateNumber" :inputBorder='false' placeholder="请输入车牌号" /> -->
							<view class="flex1"></view>
							<view class="carinput-input">
								<view class="carinput-input-i" :class="{'input-active':carIndex == i}" @tap.stop="inputKey" :data-index="i" v-for="(v,i) in carInput" :key="i" v-if="i < 2">
									{{carInput[i].val}}
								</view>
								<!-- 塞个点 -->
								<view class="cir"></view>
								<view class="carinput-input-i" :class="{'input-active':carIndex == i}" @tap.stop="inputKey" :data-index="i" v-for="(v,i) in carInput" :key="i" v-if="i < 7&&i>1">
									{{carInput[i].val}}
								</view>
								<view class="carinput-input-i " :class="{'input-active':carIndex == 7}" @tap.stop="inputKey" data-index="7">
									<block v-if="carInput[7].val">{{carInput[7].val}}</block>
									<view v-else class="newtit flexccc">
										<image :src="addnew"></image>
										新能源
									</view>
									<!-- {{carInput[7].val?carInput[7].val:'+新能源'}} -->
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="手机号码" name="mobileNumber">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.mobileNumber" :inputBorder='false' placeholder="请输入手机号码" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<view class="tips">
						如驾车，填写车牌后，访客到访时，车闸机自动打开
					</view>
				</view>
			</view>
		</uni-forms>
		<view class="pdlr12 mt34">
			<view class="rhbtnw mb20" @click="getVisAdd">设为常用访客</view>
			<view class="rhbtn" @click="getEditFn" v-if="isdisabled">修改</view>
			<view class="rhbtn" @click="getSubmit" v-else>确定</view>
		</view>
		<tki-float-keyboard ref="keybd" :mode="'car'" :type="keyType" :title="'车牌键盘'" @del="keyCbDel" @val="keyCbVal" @hide="keyCbHide"></tki-float-keyboard>
		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {uploadIdentify,uploadmore,geocodeAddress} from '@/utils/common.js'
	import {reservAdd,reservDet,reservPut} from "@/api/work/people.js"
	import {getDictionaryFn} from "@/api/system/user.js"
	import {houseInfolistNoPage} from "@/api/work/work.js"
	import wSelect from "@/work/components/w-select/w-select.vue"
	import tkiFloatKeyboard from "@/mine/components/tki-float-keyboard/tki-float-keyboard.vue";
	var key='';
	// #ifdef H5
	key='8de52b560193f01932ad997dba3e76c0'
	// #endif
	// #ifdef APP-PLUS
	key='8de52b560193f01932ad997dba3e76c0'
	// #endif
	// #ifdef MP-WEIXIN
	key='8de52b560193f01932ad997dba3e76c0'
	// #endif
	export default {
		components: {wSelect,tkiFloatKeyboard},
		data() {
			return {
				rimg: require('@/static/images/rimg.png'),
				aphoto: require('@/work/static/visitor/aphoto.png'),
				upimg: require('@/work/static/manage/up.png'),
				addimg: require('@/work/static/manage/add.png'),
				check: require('@/mine/static/check.png'),
				ncheck: require('@/mine/static/ncheck.png'),
				baseUrl: config.baseUrl,
				checkflag:true,
				datainfo: {
					// "visitorManageId":"",//来访主键
					 "houseId":"",//门户id
					 "houseAddress":"",//详细门牌号
					 "name":"",//访客姓名
					 "num":"",//来访人数
					 "reason":"",//来访事由
					 "mobileNumber":"",//手机号码
					 "isCar":"N",//是否驾车 N:否 Y:是
					 "plateNumber":"",//车牌号码
					 // "reserveTime":"",//预约时间
					 "visitorTime":"",//来访时间
					 // "status":"",//状态 1：预约成功 2：已来访 3：已过期
					 // "photo":""//人脸信息
				},
				syqxidx:'',
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
				rules:{name: {rules: [{required: true,errorMessage: '请输入访客姓名' }]},
				  houseId: {rules: [{required: true,errorMessage: '请选择来访门户' }]},
				  mobileNumber: {rules: [{required: true,errorMessage: '请输入手机号'}, {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,errorMessage:'请输入正确的手机号码'}]},},
				phofile:[],
				filterable:true,
				chooseValue:'',
				fwlist:[],
				id:'',
				zhanflag:false,
				isdisabled:false,
				ptype:'add',
				userId:this.$store.state.user.userId,
				syidx:'',
				rsidx:'',
				sylist:[],
				rslist:[{label:'1',value:'1'},{label:'2',value:'2'},{label:'3',value:'3'},{label:'4',value:'4'},{label:'5',value:'5'},{label:'6',value:'6'},{label:'7',value:'7'},{label:'8',value:'8'},{label:'9',value:'9'},{label:'10及以上',value:'10'}],
				
				carIndex: -1,
				carInput: [
					{ type: 2, val: "皖" },
					{ type: 4, val: "A" },
					{ type: 1, val: "" },
					{ type: 1, val: "" },
					{ type: 1, val: "" },
					{ type: 1, val: "" },
					{ type: 3, val: "" },
					{ type: 1, val: "" }
				],
				keyType: 0,
				isPower: false, // 新能源
				addnew:require('@/mine/static/house/add.png'),
			}
		},
		onLoad: function(e) {
			if(e.id){
				this.id=e.id;
				this.ptype="edit";
				// this.isdisabled=true;
				this.getDetail()
			}
			this.init()
			if(this.ptype=='add'){
				this.time()
			}
		},
		methods: {
			checkPermi,
			checkRole,
			getEditFn(){
				this.isdisabled=false;
			},
			changeLog(){
				
			},
			async getLocation(address) {
				var that=this;
			      if (!address) {
			        uni.showToast({ title: '请输入地址', icon: 'none' });
			        return;
			      }
			
			      try { 
			        const { latitude, longitude } = await geocodeAddress(address, key);
					this.datainfo.lat=latitude;
					this.datainfo.lgt=longitude;
			      } catch (error) {
			        // uni.showToast({ title: '获取经纬度失败', icon: 'none' });
			      }
			},
			time() {
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var d = date.getDate();
				var h = date.getHours();
				var min = date.getMinutes();
				var s = date.getSeconds();
				var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
				var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
					'0' + s) : s);
				var kaTime = yearStr + ' ' + timeStr;
				console.log(kaTime)
				this.datainfo.visitorTime=kaTime
			},
			getSyFn(e){
				this.syidx=e;
				this.datainfo.reason=e;
			},
			getRsFn(e){
				this.rsidx=e.value;
				this.datainfo.num=e.label;
			},
			init(){
				// 自己的房屋
				var params={
					userId:this.userId,
					pageSize: 100,
					pageNum: 1,
				}
				houseInfolistNoPage(params).then(res=>{
					if(res.code==200){
						this.fwlist= res.rows.map(v => {
							return {
								label: v.detailedAddress,
								value: v.houseId,
								location: v.location
							}
						})
					}
				})
				// 获取事由
				getDictionaryFn('visit_reason').then(res=>{
					if(res.code==200){
						this.sylist = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
			},
			bindDateChange(e){
				var val=e.detail.value;
				// this.datainfo.applicationBank=this.sdyhlist[val].value;
				// this.applicationBank=this.sdyhlist[val].label;
			},
			getChangeFn(){
				if(this.isdisabled){
					return
				}
				if(this.datainfo.isCar=='Y'){
					this.datainfo.isCar='N'
				}else{
					this.datainfo.isCar='Y'
				}
			},
			getDetail(){
				reservDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						this.chooseValue=res.data.houseId
					}
				})
			},
			getSubmit(){
				var num=this.toBind()
				this.$refs.form.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.datainfo))
					if(!params.houseId){
						this.$toast("请选择来访门户")
						return
					}
					if(!params.visitorTime){
						this.$toast("请选择来访时间")
						return
					}
					if(params.isCar=='Y'&&!params.plateNumber){
						this.$toast("请输入车牌号")
						return
					}
					if(params.isCar!='Y'){
						params.plateNumber=''
					}else{
						if(num=='-1'){
							this.$toast('请输入完整的车牌号')
							return
						}
					}
					if(this.ptype=='add'){
						reservAdd(params).then(res=>{
							if(res.code==200){
								this.$toast("新增成功")
								setTimeout(function(){
									// uni.$emit("refComelist")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}else{
						reservPut(params).then(res=>{
							if(res.code==200){
								this.$toast("修改成功")
								setTimeout(function(){
									// uni.$emit("refComelist")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}
				})
			},
			getchange(e){
				this.datainfo.houseId=e.value;
				this.datainfo.houseAddress=e.label;
				this.datainfo.detailAddress=e.location;
				this.getLocation(e.location)
			},
			getaddImage(e) {
				let that = this;
				let file = [],
					count = 9
				uni.chooseImage({
					success: function(res) {
						let img = res.tempFilePaths;
						if (img.length + file.length > count) {
							uni.showToast({
								title: '最多上传' + count + '张图片',
								icon: 'none',
								duration: 2000
							})
						} else {
							let imglen = res.tempFilePaths.length;
							var fuwufile = [];
							uploadmore('/common/upload', img, 0, 0, 0, imglen, fuwufile, function(rs) {
								that.phofile = that.phofile.concat(rs);
							})
						}
					}
				});
			},
			// 车牌
			// 判定是否为空
			empty(v) {
				let tp = typeof v,
					rt = false;
				if (tp == "number" && String(v) == "") {
					rt = true
				} else if (tp == "undefined") {
					rt = true
				} else if (tp == "object") {
					if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
				} else if (tp == "string") {
					if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
				} else if (tp == "function") {
					rt = false
				}
				return rt
			},
			inputKey(e) {
				let that = this;
				let data = e.currentTarget.dataset;
				that.carIndex = data.index;
				if (data.index >= 7) {
					that.isPower=true;
					that.carIndex = 7;
					// if (!that.isPower) {
					// 	return false;
					// } else {
					// 	that.carIndex = 7;
					// }
				} else {
					that.carIndex = data.index;
				}
				that.upKeyType();
				that.keyShow();
			},
			keyCbVal(e) {
				let that = this;
				let index = Number(that.carIndex);
				if (index >= 0 && index < 6) {
					that.carInput[index].val = e;
					that.carIndex = index + 1;
				} else if (index == 6) {
					that.carInput[index].val = e;
					if (that.isPower) {
						// 新能源
						that.carIndex = 7;
					} else {
						// 不是新能源出输入结束
						that.keyHide();
						that.carIndex = -2;
						console.log('非新能源车输入完毕')
					}
				} else if (index == 7) {
					// 新能源车输入完毕
					that.carInput[index].val = e;
					that.keyHide();
					that.carIndex = -3;
					console.log('新能源车输入完毕')
				}
				that.upKeyType();
			},
			keyCbDel(e) {
				let index = this.carIndex;
				console.log(index,1)
				if (index > 0) {
					if (!this.empty(this.carInput[index].val)) {
						this.carInput[index].val = "";
						this.carIndex = index;
					} else {
						this.carInput[index - 1].val = "";
						this.carIndex = index - 1;
					}
					if(index==7){
						var obj={ type: 1, val: "" }
						this.carInput.splice(index,1,obj)
						this.isPower=false;
					}
					console.log(this.carInput)
				}
				this.upKeyType();
			},
			upKeyType() {
				if (!this.empty(this.carInput[this.carIndex])) {
					this.keyType = this.carInput[this.carIndex].type;
				}
			},
			keyShow() {
				this.$refs.keybd._keyShow();
			},
			keyHide() {
				this.$refs.keybd._keyHide();
			},
			keyCbHide() {
				if (this.carIndex != -3 || this.carIndex != -2) {
					this.carIndex = -1;
				}
			},
			powerChange(e) {
				let that = this
				let i = that.checkCar().i
				if (e.detail.value.length > 0) {
					that.isPower = true;
					if (i == -1) {
						that.carIndex = 7;
					} else {
						that.carIndex = i;
					}
					that.keyShow();
				} else {
					that.isPower = false;
					that.carInput[7].val = "";
					if (that.carIndex == 7) {
						that.keyHide();
						that.carIndex = -2;
					}
				}
				that.upKeyType();
			},
			checkCar() {
				// 检查车牌是否输入完成
				let that = this;
				let i = 7;
				let rt = { i: -1, isempty: false, val: "" };
				if (that.isPower) {
					i = 8;
				}
				for (let index = 0; index < i; index++) {
					const obj = that.carInput[index];
					if (this.empty(String(obj.val))) {
						rt.i = index;
						rt.isempty = true;
						rt.val = "";
						break;
					}
					rt.val += that.carInput[index].val;
				}
				return rt;
			},
			toBind() {
				let that = this
				let ck = that.checkCar();
				if (ck.i == -1 && !ck.isempty) {
					that.datainfo.plateNumber=ck.val;
					// if(this.isPower){
					// 	this.datainfo.vehicleEnergy='新能源'
					// }else{
					// 	this.datainfo.vehicleEnergy='燃油车'
					// }
					return ck.val
				} else {
					// 显示键盘输入
					// that.keyShow();
					// that.carIndex = ck.i;
					// that.keyType = that.carInput[ck.i].type;
					return '-1'
				}
			},
			//分解车牌
			toCarCode(code){
				var list=JSON.parse(JSON.stringify(this.carInput))
				var newArr=[]
				if(code){
					newArr=code.split('')
				}
				list.forEach((ite,idx)=>{
					ite.val=newArr[idx]
				})
				if(newArr.length==8){
					this.isPower=true;
				}
				this.carInput=JSON.parse(JSON.stringify(list))
			}
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.carinput-input{display: flex;justify-content: center;align-items: center;
	.input-active {color: #0256FD;border: 2rpx solid #0256FD;}
	.cir{width: 14rpx;height: 14rpx;background: #8D8D8D;border-radius: 50%;margin-right: 4rpx;}
}
	
.carinput-input-i{width: 52rpx;height: 80rpx;background: #F5F4F7;border-radius: 10rpx;font-weight: bold;font-size: 26rpx;color: #272727;margin-right: 4rpx;text-align: center;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;justify-content: center;
	.newtit{
		font-weight: bold;font-size: 16rpx;color: #0256FD;
		image{width: 20rpx;height: 20rpx;margin-bottom: 4rpx;}
	}
}
.check /deep/ .uni-date-editor--x__disabled{opacity: 1;}
.carinput-input-i:nth-last-child(1) {margin-right: 0}
.coa /deep/ .uni-date__x-input{text-align: right;color: #AAAAAA;}
.check /deep/ .select-wrap{border: none;width: 100%;}
.check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
.check .cbox /deep/ .uni-forms-item:last-child{border: none;}
.check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
.check /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 26rpx;color: #222327;}
.check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
.check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
.check /deep/ .uni-input-input{font-size: 26rpx;}
.check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
.check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
.check /deep/ .uni-data-checklist{flex: 0 0 auto;}
.check{min-height: 100vh;padding: 20rpx 18rpx 24rpx;box-sizing: border-box;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;margin-bottom: 24rpx;
	.chtop{padding-top: 32rpx;margin-bottom: 8rpx;
		// image{width: 14rpx;height: 48rpx;margin-right: 20rpx;}
		view{font-weight: bold;font-size: 32rpx;color: #272727;}
		.upimg{width: 22rpx;height: 14rpx;margin-right: 36rpx;transform: rotate(180deg);transition: all 0.3s;
			&.act{transform: rotate(0deg);}
		}
	}
	.chmain{
		padding: 0 32rpx;
		.upbox{height: 224rpx;background: #EFF4FF;border-radius: 20rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-bottom: 8rpx;overflow: auto;
			.img{width: 100%;height: 100%;}
			.addimg{width: 70rpx;height: 70rpx;margin-bottom: 16rpx;}
			view{font-weight: bold;font-size: 26rpx;color: #4C6686;}
		}
		.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
			image{width: 100%;height: 100%;}
		}
		.checkimg{width: 80rpx;height: 40rpx;margin-right: 8rpx;}
		.aphoto{padding: 0 24rpx;border-left: 2rpx solid #e6e6e6;margin-left: 26rpx;
			image{width: 40rpx;height: 38rpx;}
		}
	}
	.peobox{padding:24rpx 16rpx 0;
		.plists{position: relative;background: #EEF4FF;position: relative;
border-radius: 50%;width: 94rpx;height: 94rpx;margin: 0 20rpx 20rpx;padding: 4rpx;box-sizing: border-box;
			.tit{font-weight: 500;font-size: 22rpx;color: #0256FD;}
			.addimg{width: 36rpx;height: 36rpx;background: #FFFFFF;box-shadow: 0px 3px 5px 0px rgba(147,147,147,0.35);border-radius: 50%;position: absolute;bottom: -4rpx;right: 4rpx;
				image{width: 18rpx;height: 18rpx;}
			}
}
	}
}
.libox{
	&.rslist{
		.sylist{min-width:40rpx;height: 40rpx;margin-left: 14rpx;margin-top: 14rpx;}
	}
}
.sylist{background: #F0F0F0;border-radius: 26rpx;border:2rpx solid #DADADA;margin-left: 26rpx;font-weight: 500;min-width:112rpx;height: 54rpx;box-sizing: border-box;
font-size: 26rpx;
color: #666666;
	&.act{border: 2rpx solid #0256FD;background: #DCE8FF;color: #0256FD;}
}
.line{width: 14rpx;height: 48rpx;background: #0256FD;border-radius:0 12rpx 12rpx 0;margin-right: 18rpx;}
.tips{font-weight: 500;font-size: 22rpx;color: #0256FD;padding: 20rpx 0;}
</style>