<template>
	<view>
		<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}">
			<view class="left-father" @click="uni.navigateBack();">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
				<view style="font-size: 30rpx;">物料配置</view>
			</view>
		</view>
		<view :style="{height:`${uni.getStorageSync('moveHeight') + 40}px`}"></view>
		<image class="bacimg" src="https://www.focusnu.com/media/xcx/gys_head_bj.png" mode="aspectFill"></image>
		<!-- <u-tabs :list="list1" @change="click" style="z-index: 999; " :current="current">
			<view slot="right" style="padding-left: 4px;position: absolute;right: 0;top: 0;"  @tap="$u.toast('插槽被点击')"   >
				<u-icon name="list"  size="21"   bold  ></u-icon>
			</view>
		</u-tabs> -->
		<view style="height: 45px;"></view>
		<view class="tabs" :style="{top:`${uni.getStorageSync('moveHeight') + 40}px`}">
			<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
				<view class="u-scroll-box" >
					<view class="u-tab-item u-line-1"  v-for="(item, index) in materialTypeList" :key="index"  @tap="clickTab(index,item)" >
						{{ item['typeName']}}
						<view v-if="current==index" class="u-tab-bar" ></view>
					</view>
				</view>
			</scroll-view>
			<!-- ▲ -->
			<view class="ristb" @click="sx=!sx" :style="sx?'color: #0077FE':''">
				筛选 <text class="guodu" :class="sx?'xz':''">▼</text>  
			</view>
		</view>
		<view class="mengban" v-if="sx" @click="sx = false"></view>
		<view class="shaixuanbox guodu"   :style="{top:`${uni.getStorageSync('moveHeight') + 85}px`,height:sx?'1090rpx':'0 !important'}">
			<scroll-view class="shaixuascroll"  scroll-y="true" scroll-with-animation >
				<view v-for="(v,i) in sxlist" :key='i'>
					<view class="tiele">{{v.name}}</view>
					<view class="xhbtn">
						<view :class="k.flag?'act':''" v-for="(k,l) in v.children" :key='l' @click="danxuan(k)">{{k.name}}</view>
					</view>
				</view>
				
			 </scroll-view>
			<view class="botrn">
				<view @click="chongzhi(0,0)">重置</view>
				<view @click="config">确定</view>
			</view>
		</view>
		<view class="mengban" v-if="dwflag||djflag" @click="dwflag = false;djflag = false"></view>
		<view class="tanchuc guodu" :style="{height:dwflag?(Math.ceil(list.length / 2)>4?'862rpx':(Math.ceil(list.length / 2)*100 + 462)+'rpx'):'0 !important'}">
			<view class="tittop">
				<text></text>
				<view>销售单位</view>
			</view>
			<scroll-view scroll-y="true" class="scrollxhdw" :show-scrollbar="false" :style="Math.ceil(list.length / 2)>4?'height:400rpx':'height:'+ (Math.ceil(list.length / 2)*100)+'rpx'">
				<view class="xhdw">
					<view v-for="(v,i) in list " :key='i' :class="i==dwact?'act':''" @click="dwact = i;qita = v.text">{{v.text}}</view>
				</view>
			</scroll-view>
			
			<view class="qit" style="width: 518rpx;">
				<text>其它</text>
				<view style="width: 430rpx;">
					<input type="text" v-model="qita" @blur="blur">
				</view>
			</view>
			<view class="botrn" style="position: relative;">
				<view @click="dwflag = false">取消</view>
				<view @click="queding('dw')">确定</view>
			</view>
		</view>
		
		
		<view class="tanchuc guodu" :style="{height:djflag?'962rpx !important':'0 !important'}">
			<view class="tittop">
				<text></text>
				<view>销售单价</view>
			</view>
			<view class="calculator-father">
				<view v-for="(item,index) in calculatorArray" :key="index">
					<view class="calculator-kuai"
						style="font-size: 33rpx;" v-if="item==`AE`" @click="clickKuai(item,index)" hover-class="btn-active">
						<image src="https://www.focusnu.com/media/xcx/gys_wl_del.png" mode="aspectFill"></image>
					</view>
					<view class="calculator-kuai" v-else @click="clickKuai(item,index)" hover-class="btn-active">
						{{item}}
					</view>
				</view>
			</view>
			<view class="qit">
				<text>单价</text>
				<view>
					<input type="text" v-model="stringShow" disabled maxlength="6">
				</view>
			</view>
			<view class="botrn" style="position: relative;">
				<view @click="djflag = false">取消</view>
				<view @click="queding('dj')">确定</view>
			</view>
		</view>
		<!-- <view class="box">
			 <view v-for="(v,i) in materialTypeList" @click="checkMaterialType(v.materialTypeId)">{{v.typeName}}</view>
		</view> -->
		<scroll-view class="scrollviews"  scroll-y="true" scroll-with-animation  @scrolltolower="scrolltolower"
		:style="{ height:`calc(100vh - ${uni.getStorageSync('moveHeight') + 145}px )`}">
			<view class="lists"  v-for="(v,i) in listarr" :key="i">
				<view class="zuo">
					<image :src="v.materialImg?orgObj.orgNetUrl+v.materialImg:'https://www.focusnu.com/media/default/PICNULL.png'" mode="aspectFill"></image>
					<view class="ido">
						<view v-if="v.categoryName">{{v.categoryName}}</view>
						<view v-if="v.typeName">{{v.typeName}}</view>
					</view>
				</view>
				<view class="rou">
					<view class="tit">{{v.materialName}}</view>
					<view class="xingh" style="margin-top: 34rpx;">规格型号: {{v.specificationModel}}</view>
					<view class="xingh" style="margin-top: 15rpx;">生产厂家: {{v.manufacturer}}</view>
					<view class="xingh" style="margin-top: 15rpx;">品牌型号: {{v.brandType}}</view>
					<view class="xsdj">
						<view @click="dj(i)">
							<view>{{v.salesUnitPrice?v.salesUnitPrice:'--'}}</view>
							<view>
								销售单价
								<image src="https://www.focusnu.com/media/xcx/edit.png" mode="aspectFill" class="icos" v-if="flag"></image>
							</view>
						</view>
						<view style="align-items: center;"  @click="dw(i)">
							<view>{{v.salesUnit?v.salesUnit:'--'}}</view>
							<view>
								销售单位
								<image src="https://www.focusnu.com/media/xcx/edit.png" mode="aspectFill" class="icos" v-if="flag"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 30rpx;">
				<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="list.length>0" />
			</view>
			<view style="height: 20px;"></view>
		</scroll-view>
		
		<view class="botfiexd">
			<view   @click="handleYulan">
				{{!flag?'返回':'取消'}}
			</view>
			<view  @click="flag = true" v-if="!flag">
				编辑
			</view>
			<view  @click="flag = false" v-if="flag">
				确定
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	 import { reactive, ref, onMounted, onUnmounted, } from 'vue';
	 import { onLoad, onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	 import { getSuppliersMaterialType, getSuppliersMaterialInfo,getDictItems,getSuppliersMaterialTypeByCondition,editSuppliersMaterialInfo } from './api.js'
	 const orgObj = ref({});//机构信息
	 const materialTypeList = ref([]);//物料分类集合
	 const materialInfoList = ref([]);//物料信息集合
	 const materialTypeId = ref('');//物料分类选中条件
	 const openId = uni.getStorageSync('openid');//用户id
	 const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", 0, "AE"];
	 const blueNumber = ref(-1);
	 const sx = ref(false)
	 const dwact = ref(-1)
	 const qita = ref('')
	 const list = ref([])
	 const listarr = ref([])
	 const status = ref('loadmore')
	 onLoad((e)=>{
		 orgObj.value = JSON.parse(e.orgObj);
		 // console.log('orgObj.value-->',orgObj.value);
		 getMaterialType();//获取分类信息
		 // getMaterialInfo();//获取物料信息
		 gettimearr()
		 getypeByCondition()
	 })
	 const blur = ()=>{
		let a =  list.value.find(item => item.text == qita.value)
		 if(a){
			 list.value.forEach((v,i)=>{
				 if(v.text == qita.value){
					 dwact.value = i
				 }
			 })
		 }else{
			 dwact.value = -1
		 }
	 }
	 const queding = (e)=>{
		 if(e=='dw'){
			 if(qita.value == ""){
				 uni.showToast({
				 	title:'请输入单位',
					icon:'none'
				 })
				 return
			 }
			 let obj={
				 salesUnit:qita.value,
				 id:listarr.value[index.value].id,
				 openId:openId,
				 orgCode:orgObj.value.orgCode,
				 materialName:listarr.value[index.value].materialName,
				 specificationModel:listarr.value[index.value].specificationModel,
				 brandType:listarr.value[index.value].brandType,
				 manufacturer:listarr.value[index.value].manufacturer
			 }
			 editSuppliersMaterialInfo(obj).then(res=>{
				 if(res.success){
					 listarr.value[index.value].salesUnit = qita.value;
					 dwflag.value = false;
					 qita.value = "";
					 dwact.value = -1
				 }else{
					 uni.showToast({
					 	title:res.message,
						icon:'none'
					 })
				 }
			 })
		 }else{
			 if(Number(stringShow.value)==0){
				 uni.showToast({
				 	title:'请输入大于0',
					icon:'none'
				 })
				 return
			 }
			 let obj={
				 salesUnitPrice:Number(stringShow.value),
				 id:listarr.value[index.value].id,
				 openId:openId,
				 orgCode:orgObj.value.orgCode,
				 materialName:listarr.value[index.value].materialName,
				 specificationModel:listarr.value[index.value].specificationModel,
				 brandType:listarr.value[index.value].brandType,
				 manufacturer:listarr.value[index.value].manufacturer
			 }
			 editSuppliersMaterialInfo(obj).then(res=>{
				 if(res.success){
					 listarr.value[index.value].salesUnitPrice = Number(stringShow.value)
					 djflag.value = false;
					 stringShow.value ='';
				 }else{
					 uni.showToast({
					 	title:res.message,
						icon:'none'
					 })
				 }
			 })
		 }
		 
	 }
	 const gettimearr =()=>{
		 getDictItems({dictCode:'xcx_gys_wldw'}).then(res=>{
			 list.value = res
		 })
	 }
	 const stringShow = ref("");
	 const relNumber = ref(0);
	 const isZero = ref(false);
	 const clickKuai = (item : any, index : number) => {
		 if (item == "AE") {
		 	stringShow.value = stringShow.value.slice(0, -1)
			return
		 }
		 if(stringShow.value.length>10){return}
		 let a = stringShow.value.indexOf('.')
		 if(item=="."&&stringShow.value.length==0){
			 return
		 }
		 if(item=="."&&a>-1){
			 return
		 }
		stringShow.value +=item
		stringShow.value = stringShow.value.replace(/^(\d+)\.(\d{0,2}).*/, '$1.$2')
		stringShow.value = formatStr(stringShow.value)
	 	 // // console.log(stringShow.value)
	 }
	 function formatStr(val) {
	   if (!val) return ''
	   if (val.length >= 2) {
	     if (val[0] === '0') {
	       if (val[1] === '.') {
	         return val
	       }
	       else if (!isNaN(val[1])) {
	         return val.replace(/^0+/, '')
	       }
	     }
	   }
	   return val
	 }
	 const scrollLeft = ref(0) 
	 const current = ref(-1)
	 const clickTab = (e,v)=>{
		 if(current.value == e){return}
		 current.value = e
		 scrollLeft.value = (e-2)*70;
		 // console.log('item', e,v);
		 listarr.value = [];
		 pageNo.value = 1;
		 checkMaterialType(v.materialTypeId);
		 chongzhi(1,v.id)
	 }
	 //获取分类信息
	 const getMaterialType = ()=>{
		 let obj = {
			 orgCode: orgObj.value.orgCode,
			 openId: openId
		 }
		 getSuppliersMaterialType(obj).then(res=>{
			 // console.log('1--->',res);
			 materialTypeList.value = res.result;
			 setTimeout(()=>{
				 clickTab(0,res.result[0])
			 },50)
		 })
	 }
	 const sxlist = ref([])
	 // 筛选列表
	 const getypeByCondition = ()=>{
		 let obj = {
			 orgCode: orgObj.value.orgCode,
			 openId: openId
		 }
		 getSuppliersMaterialTypeByCondition(obj).then(res=>{
			 res.result.forEach(item=>{
				 item.children.forEach(e=>{
					 e.flag = false
				 })
			 })
			 sxlist.value = res.result
		 })
	 }
	 // 选择
	 const danxuan = (e)=>{
		 e.flag = !e.flag
		 if(!e.flag){return}
	 	sxlist.value.forEach(item=>{
	 		 item.children.forEach(f=>{
				 if(e.id!=f.id){
					 f.flag = false
				 }
	 		 })
	 	})
	 }
	 // 重置
	 const chongzhi = (k,d)=>{
	 	sxlist.value.forEach(item=>{
			 item.children.forEach(e=>{
				 // console.log(d,e.id)
				 if(k==0){
					 e.flag = false
				 }
				 if(k==1&&d==e.id){
					 e.flag = true
				 }else{
					 e.flag = false
				 }
			 })
		})
	 }
	  // 确定
	 const config = ()=>{
		 sx.value = false;
		 sxlist.value.forEach(item=>{
		 	 item.children.forEach(e=>{
		 		 if(e.flag){
					 // console.log(e)
					  // checkMaterialType(e.id)
					  chaxn(e.id)
				 }
		 	 })
		 })
	 }
	 // 匹配
	 const chaxn = (e)=>{
		 materialTypeList.value.forEach((item,i)=>{
			 if(item.id==e){
				 // console.log(item.id,e)
				 clickTab(i,materialTypeList.value[i])
			 }
		 })
	 }
	 const tiout = ref(true)
	 const scrolltolower =()=>{
		 if(tiout){
			 pageNo.value++;
			 tiout.value = false;
			 getMaterialInfo()
		 }
		 setTimeout(()=>{
			 tiout.value = true
		 },1000)
	 }
	 //获取物料信息
	 const pageNo = ref(1);
	 const getMaterialInfo = ()=>{
		 let obj = {
			 orgCode: orgObj.value.orgCode,
			 materialTypeId: materialTypeId.value,
			 openId: openId,
			 pageSize:10,
			 pageNo:pageNo.value
		 }
		 // console.log('getMaterialInfo-obj--->', obj);
		 getSuppliersMaterialInfo(obj).then(res=>{
			 // console.log('2--->',res);
			 listarr.value.push(...res.result.records) 
			 status.value = (res.result.total == listarr.value.length ? 'nomore' : 'loadmore')
		 })
	 }
	 //选中物料分类
	 const checkMaterialType = (checkId)=>{
		 // console.log('checkId--->',checkId);
		 materialTypeId.value = checkId;
		 // console.log('materialTypeId.value>',materialTypeId.value);
		 getMaterialInfo();
	 }
	 const flag = ref(false)
	 const djflag = ref(false)
	 const dwflag = ref(false)
	 const index = ref(-1)
	 const dj = (e) =>{
		 if(!flag.value){return}
		 djflag.value = true;
		 index.value = e
	 }
	 const dw = (e) =>{
		 if(!flag.value){return}
		 dwflag.value = true
		 index.value = e
	 }
	 //返回
	 const handleYulan = ()=>{
		 if(!flag.value){
			 uni.navigateBack()
		 }else{
			 flag.value = false
		 }
	 }
	 //确认
	 const handleQueren = ()=>{
		 
	 }
</script>

<style lang="less" scoped>
	.tanchuc{
		width: 100%;
		height: 0;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
		position: fixed;
		bottom: 0;
		z-index: 111;
		overflow: hidden;
		.calculator-father{
			width: 450rpx;
			height: 500rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 10rpx auto;
			view{
				width: 130rpx;
				height: 111rpx;
				background: #F1F4F9;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 43rpx;
				color: #727B87;
				border: 1px solid #F1F4F9;
				image{
					width: 44rpx;
					height: 44rpx;
				}
			}
			.btn-active {
				background: linear-gradient(to bottom, #019cef, #0084fa);
				color: #fff;
				font-weight: 500;
			}
		}
		.qit{
			width: 466rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx auto;
			view{
				width: 355rpx;
				height: 81rpx;
				border-radius: 20rpx;
				border: 1px solid #A9B1C0;
				input{
					width: 100%;
					height: 100%;
					padding: 0 20rpx;
					color: #727B87;
					font-size: 40rpx;
				}
			}
			text{
				font-weight: 400;
				font-size: 28rpx;
				color: #555555;
			}
		}
		.scrollxhdw{
			width: 540rpx;
			margin: 10rpx auto;
			
		}
		.xhdw{
			width: 540rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			
			
			view{
				width: 261rpx;
				height: 82rpx;
				background: #F1F4F9;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #555555;
				margin-top: 17rpx;
				border: 1px solid #F1F4F9;
			}
			.act{
				background: #ECF5FF;
				border: 1px solid #1083F8;
			}
		}
		.tittop{
			width: 100%;
			padding: 60rpx 60rpx 40rpx;
			display: flex;
			align-items: center;
			view{
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}
			text{
				width: 15rpx;
				height: 33rpx;
				background: #1083F8;
				border-radius: 7rpx;
				margin-right: 30rpx;
			}
		}
	}
	.shaixuanbox{
		width: 704rpx;
		height: 0;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 7rpx 0rpx rgba(109,127,138,0.15);
		border-radius: 30rpx;
		position: fixed;
		left: 23rpx;
		z-index: 61;
		overflow: hidden;
		.shaixuascroll{
			width: 100%;
			height: 900rpx;
			padding: 30rpx;
			.tiele{
				font-weight: 400;
				font-size: 26rpx;
				color: #222222;
				margin: 30rpx 0 0 0;
			}
			.xhbtn{
				width: 105%;
				display: flex;
				flex-wrap: wrap;
				view{
					width: 193rpx;
					height: 60rpx;
					background: #F8F8F8;
					border-radius: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 25rpx 30rpx 0 0;
					font-weight: 400;
					font-size: 28rpx;
					color: #555555;
				}
				.act{
					background: #E1F0FF;
					color: #2D8CF8;
				}
			}
		}
		
	}
	.botrn{
		width: 100%;
		height: 140rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		view{
			width: 205rpx;
			height: 78rpx;
			border-radius: 30rpx;
			margin: 0 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			&:nth-child(1){
				background: #E1F0FF;
				border: 1px solid rgba(36,155,251,0.51);
				color: #222222;
			}
			&:nth-child(2){
				background: linear-gradient(-90deg, #288DFD, #21A4FA);
				color: #FFFFFF;
			}
		}
	}
	.mengban{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 60;
		background: rgba(34, 34, 34, 0.2);
	}
	.scrollviews{
		width: 100%;
		border-radius: 40rpx;
	}
	.lists{
		width: 703rpx;
		height: 350rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 20rpx auto 0;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: space-between;
		.rou{
			width: 440rpx;
			display: flex;
			flex-direction: column;
			.tit{
				font-weight: bold;
				font-size: 35rpx;
				color: #222222;
				margin-top: 35rpx;
				white-space: nowrap;
				max-width: 430rpx;
				height: 36rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				line-height: 35rpx;
			}
			.xingh{
				font-weight: 400;
				font-size: 25rpx;
				color: #777777;
			}
			.xsdj{
				width: 100%;
				display: flex;
				position: relative;
				height: 60rpx;
				margin-top: 30rpx;
				::after{
					position: absolute;
					content: '';
					width: 1rpx;
					height: 44rpx;
					background: #E5E5E5;
					top: 10rpx;
					left: 158rpx;
				}
				.icos{
					width: 18.5rpx;
					height: 18.5rpx;
					margin-left: 5rpx;
					position: relative;
					top: 3rpx;
				}
				>view{
					width: 158rpx;
					display: flex;
					flex-direction: column;
					height: 100%;
					
					view{
						text-align: center;
						&:nth-child(1){
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
						&:nth-child(2){
							font-weight: 400;
							font-size: 21rpx;
							color: #999999;
							display: block;
							
						}
					}
				}
			}
		}
		.zuo{
			width: 272rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.ido{
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 20rpx;
				view{
					width: 102rpx;
					height: 40rpx;
					border-radius: 20rpx;
					border: 1px solid #D2D2D2;
					font-weight: 400;
					font-size: 19rpx;
					color: #555555;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 12rpx;
				}
			}
			image{
				width: 188rpx;
				height: 188rpx;
				border-radius: 15rpx;
			}
		}
	}
	.botfiexd{
		width: 100%;
		height: 118rpx;
		background: #FFFFFF;
		border: 1px solid #E5E5E5;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 55;
		display: flex;
		justify-content: center;
		align-items: center;
		view{
			width: 225rpx;
			height: 75rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 20rpx;
			&:nth-child(1){
				background: #E1F0FF;
				border: 1px solid rgba(36,155,251,0.51);
				font-weight: 600;
				font-size: 33rpx;
				color: #222222;
			}
			&:nth-child(2){
				background: linear-gradient(-90deg, #288DFD, #21A4FA);
				font-weight: 600;
				font-size: 33rpx;
				color: #FFFFFF;
			}
		}
		
	}
	.xz{
		transform: rotate(180deg);
	}
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
	.tabs{
		width: 100%;
		height: 45px;
		position: fixed;
		left: 0;
		z-index: 59;
		display: flex;
		align-items: center;
		.ristb{
			width: 150rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 600;
			font-size: 30rpx;
			color: #000022;
		}
		.u-scroll-view {
			width: 600rpx;
			white-space: nowrap;
			position: relative;
			box-sizing: border-box;
			height: 100%;
			.u-scroll-box {
				position: relative;
				white-space: nowrap;
				height: 100%;
				.u-tab-item {
					position: relative;
					display: inline-block;
					text-align: center;
					transition-property: background-color, color;
					font-weight: 400;
					font-size: 30rpx;
					color: #000022;
					margin: 0 22rpx;
					height: 100%;
					line-height: 90rpx;
					.u-tab-bar{
						width: 17rpx;
						height: 8rpx;
						background: #1083F8;
						border-radius: 4rpx;
						position: absolute;
						bottom: 10rpx;
						left: 40%;
					}
				}
			}
		}
	}
	.bottom-button-qiehuan {
		width: 70rpx;
		height: 42rpx;
		background-color: #E1EFFC;
		border-radius: 20rpx;
		border: #CAE0F9 1rpx solid;
		display: flex;
		align-items: center;
		position: relative;
	
		.blue-ball {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			margin-left: 30rpx;
			background-color: #0385FA;
			position: relative;
		}
		
	}
	.noact{
		background-color:#f3f3f3;
		.blue-ball {
			background-color: #666;
		}
	}
	 
	.box{
		width: 700rpx;
		padding: 15rpx;
		margin: 40rpx auto;
		background: #fff;
		border-radius: 30rpx;
		.cont{
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E5E5E5;
			font-size: 28rpx;
			position: relative;
			.one-left-imge {
				width: 35rpx;
				height: 35rpx;
				position: absolute;
				top: 50%;
				right: 8rpx;
				transform: translateY(-50%);
			}
			.left{
				width: 200rpx;
				color: #646464;
				padding-left: 15rpx;
			}
			.cot{
				color: #9E9E9E;
				max-width: 400rpx;
				input{
					max-width: 400rpx;
					color: #9E9E9E;
				}
			}
		}
	}

.bacimg {
			width: 100%;
			height: 383rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}
	
		.title-back {
			background: rgba(255, 255, 255, 0);
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-bottom: 20rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 59;
		}
	
		.left-father {
			width: 350rpx;
			height: 100%;
			display: flex;
			align-items: flex-end;
	
			.back-img {
				width: 45rpx;
				height: 40rpx;
				margin-left: 40rpx;
				margin-right: 15rpx;
			}
		}
	</style>
	<style>
		page {
			background: #F7F7F7;
			padding-bottom:112rpx ;
		}
	</style>