<template>
	<view>
		<!-- 采购 -->
		<view class="box">
			<view class="leftr" v-if="lie">
				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scrolltop" class="scroll-Y"
					@scrolltolower="scrolltolower" :lower-threshold="400" @scroll="scrollview">
					<view class="boxibigtem" v-for="(v,i) in InvoicingList" :key='i'
						:class="{'yujing':Number(v.lowerLimit)>=Number(v.kcsl),'active':shopitem==i}"
						@click="shopclick(i,2)">
						<view>{{v.wlName}}</view>
						<view>规格型号: {{v.wlSpecificationModel}}</view>
						<view>采购单位： {{v.wlUnits}}</view>
						<view>
							<view class="carditem" :class="{'hl':v.tagType==1,'yl':v.tagType==2,'bj':v.tagType>2}">
								<image src="/static/index/warehouse/procurement/hl.png" mode="aspectFill"
									v-if="v.tagType==1"></image>
								<image src="/static/index/warehouse/procurement/yl.png" mode="aspectFill"
									v-if="v.tagType==2"></image>
								<image src="/static/index/warehouse/procurement/bj.png" mode="aspectFill"
									v-if="v.tagType>2"></image>
								{{v.tagName}}
							</view>
							<view class="znk">
								<image
									:src="v.materialImg?serverUrl + v.materialImg : '/static/index/warehouse/procurement/k.png'"
									mode="aspectFill"></image>
							</view>
							<view class="num">
								<view>{{v.kcsl}}</view>
								<view>库存数量</view>
							</view>
						</view>
					</view>
					<view style="height: 23vw;width: 100%;padding:10vw 40vw ;">
						<u-loadmore :status="status" />
					</view>
				</scroll-view>
				<shadowview :opacity="opacity"></shadowview>

			</view>
			
			<view class="fxj" v-if="lie">
				<arrowkeys @movecard="movecard($event,1)" :getblue="getblue" :moveleft="65" />
			</view>
			<view class="lfxj" v-else>
				<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="65" />
			</view>
			<view :class="lie?'mblbg':'lmblbg'"></view>
			
			<view class="lefts" v-if="!lie">
				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scrolltop" class="scroll-Y"
					@scrolltolower="scrolltolower" :lower-threshold="200" @scroll="scrollview">
					<view class="boxitem" v-for="(v,i) in InvoicingList" :key='i'
						:class="{'yujing':Number(v.lowerLimit)>=Number(v.kcsl),'active':shopitem==i}"
						@click="shopclick(i)">
						<view>{{v.wlName}}</view>
						<view>物料编码： {{v.wlMaterialNo}}</view>
						<view>规格型号： {{v.wlSpecificationModel}}</view>
						<view>采购单位： {{v.wlUnits}}</view>
						<view class="kcsl">
							<text>{{v.kcsl}}</text>
							<text>库存数量</text>
						</view>
						<view class="dbgys">
							<view>
								<view>采购数量：<text>{{v.purchaseQuantity}}</text></view>
								<view>{{v.suppliersName}}</view>
							</view>
							<view :class="v.flag?'act':''" @click.stop="xuanzhong(v)">
								<image src="/static/index/warehouse/procurement/d.png" mode="aspectFill" v-if="v.flag"></image>
								<image src="/static/index/warehouse/procurement/da.png" mode="aspectFill" v-else></image>
							</view>
						</view>
					</view>
					<view style="height: 23vw;width: 100%;padding:10vw 40vw ;">
						<u-loadmore :status="status" dashed line  nomore-text="已加载全部" />
					</view>
				</scroll-view>
				<shadowview :opacity="opacity"></shadowview>
			</view>
			<view class="rights">
				<view class="shitem">
					<view class="shypk">
						<view>生活用品库</view>
						<!-- <view @click="lie=!lie">
							 <view :class="lie?'atve':''">
								 <image src="/static/index/warehouse/procurement/lie/2ls.png" v-if="!lie" mode="aspectFill"></image>
								 <image src="/static/index/warehouse/procurement/lie/2lr.png" v-else mode="aspectFill"></image>
							 </view>
							 <view :class="lie?'':'atve'">
								 <image src="/static/index/warehouse/procurement/lie/3ls.png"  v-if="lie" mode="aspectFill"></image>
								 <image src="/static/index/warehouse/procurement/lie/3lr.png" v-else mode="aspectFill"></image>
							 </view>
						</view> -->
					</view>
					<view class="jqry">
						<view class="left tp">
							<image
								:src="cellobj?.fzrHeadPath?serverUrl + cellobj?.fzrHeadPath:'/static/index/warehouse/procurement/jqr.png'"
								mode="aspectFill"></image>
						</view>
						<view class="rigname">
							<view>{{cellobj?.fzr}}</view>
							<view>
								<!-- <text>男</text>
								<text>50岁</text> -->
								<text>{{cellobj?.fzrTel?cellobj?.fzrTel:'-'}}</text>
							</view>
						</view>
					</view>

				</view>
				
				<view class="ksfw">
					<view class="jx">
						<image src="/static/index/warehouse/l0.png" mode="aspectFill"></image>
						<text>待进行</text>
					</view>
					<view class="tm">10:00 - 10:10</view>
					<view class="wul">物料采购</view>
					<view class="zhxng">
						<view>
							<image src="/static/index/warehouse/xz.png" mode="aspectFill"></image>
							<text>协助执行</text>
						</view>
						<view>
							<image src="/static/index/warehouse/ap.png" mode="aspectFill"></image>
							<text>王金福 / 李贵田</text>
						</view>
					</view>
					<view class="shjs">
						<view class="iacts">开始服务</view>
						<view>服务结束</view>
					</view>
				</view>
				
				<view class="typeitem">
					<view class="toptype">
						<!-- <view v-for="v in ['三','二','一']">{{v+'级分类'}}</view> -->
						<view :class="scroll.act3==-1?'act':''" @click="typescroll(3,-1,{})" >全部</view>
						<view :class="scroll.act2==-1?'act':''" @click="typescroll(2,-1,{})" >全部</view>
						<view :class="scroll.act1==-1?'act':''" @click="typescroll(1,-1,{})" >全部</view>
					</view>
					<view class="scroltype">
						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop3"
							class="scroll-Y scrl3">
							<view :class="scroll.act3==i?'act':''"
								v-for="(v,i) in TreeData[scroll.act1]?.children[scroll.act2]?.children"
								@click="typescroll(3,i,v)">
								{{v.title}}
							</view>
						</scroll-view>

						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop2"
							class="scroll-Y scrl2">
							<view :class="scroll.act2==i?'act':''" v-for="(v,i) in TreeData[scroll.act1]?.children"
								@click="typescroll(2,i,v)">
								{{v.title}}
							</view>
						</scroll-view>

						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop1"
							class="scroll-Y scrl1">
							<view :class="scroll.act1==i?'act':''" v-for="(v,i) in TreeData" @click="typescroll(1,i,v)">
								<image :src="serverUrl + v.appCheckIconPath" mode="aspectFill" v-if="scroll.act1==i">
								</image>
								<image :src="serverUrl + v.appIconPath" mode="aspectFill" v-else></image>
								<text>
									{{v.title}}
								</text>
							</view>
						</scroll-view>
					</view>

					<view class="anmikc">
						<view v-for="(v,i) in animArray" :key="i" @click="admiclick(i)">
							<view>
								<donghua width="2vw" height="2vw" :links="v.url" :playing="i === anmidex"
									 class="donghua" />
							</view>

							<text>
								{{v.name}}
							</text>
						</view>
					</view>
					<view class="serchs">
						<view class="ipt">
							<input type="text" placeholder="物料名称/物料编码/物料简拼" v-model="form.wlParamInfo" />
							<image src="/static/index/warehouse/procurement/x.png" mode="aspectFill"
								v-if="form.wlParamInfo" @click="search(0)"></image>
						</view>
						<view @click="search" class="scr">
							检索
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mengban" v-if="wlxq" @click="qingkong"></view>
		<view class="wuliao guodu" :class="wlxq?'':'uncrkcard'">
			<view class="name">{{wuliaoobj.materialName}}</view>
			<view class="znk tp">
				<image class="crkcard-img"
					:src="wuliaoobj.materialImg?serverUrl + wuliaoobj.materialImg : '/static/index/warehouse/procurement/k.png'"
					mode="aspectFill"></image>
			</view>
			<view class="life">
				<view v-if="wuliaoobj.categoryName">{{wuliaoobj.categoryName}}</view>
				<view v-if="wuliaoobj.typeName">{{wuliaoobj.typeName}}</view>
				<view v-if="wuliaoobj.medicationName">{{wuliaoobj.medicationName}}</view>
			</view>
			<view class="zil">
				物料编码: {{ wuliaoobj.materialNo }}
			</view>
			<view class="zil">
				规格型号:  {{ wuliaoobj.specificationModel }}
			</view>
			<view class="zil">
				物料小类: {{wuliaoobj.tagName}}
			</view>
			<view class="zil">
				物料单位: {{wuliaoobj.materialUnits}}
			</view>
			<view class="zil">
				医保报销: {{ wuliaoobj.izYbbxName }}
			</view>
			<view class="zil">
				机构优惠: {{ wuliaoobj.izJgyhName }}
			</view>
			<view class="dibu">
				<view>
					<text>{{ wuliaoobj.kcsl }}</text>
					<text>库存数量</text>
				</view>
				<view>
					<text>{{ wuliaoobj.upperLimit }}</text>
					<text>物料上限 <text class="l"> ↑</text></text>
				</view>
				<view style="align-items: end;">
					<text>{{ wuliaoobj.lowerLimit }}</text>
					<text><text class="f">↓ </text>物料下限 </text>
				</view>
			</view>
		</view>
		
		<view class="mengban" v-if="cgd" @click="qingkong"></view>
		<view class="caigoudan guodu" :class="cgd?'':'uncgd'">
			<view class="title"><view></view>采购单</view>
			<scroll-view scroll-y="true" class="cgdscroll" scroll-with-animation >
				<view class="cardcd" v-for="(v,i) in generatedOrder" :key='i'>
					<view class="cgdh brtop">
						<view>采购单号：<text>{{v.cgdNo}}</text></view>
						<view>采购金额：<text>{{v.totalPrice}}</text></view>
					</view>
					<view class="cgdh">
						<view>采购人：{{v.qgBy}} </view>
						<view>采购日期：{{v.qgDate}}</view>
						<view>供应商：{{v.gysName}}</view>
					</view>
					<view class="fler">
						<view class="boxitem" v-for="(f,l) in v.cgdInfoList" :key='i'  >
							<view>{{f.wlName}}</view>
							<view>物料编码：{{f.wlMaterialNo}}</view>
							<view style="white-space: nowrap;">规格型号：{{f.wlSpecificationModel}}</view>
							<view>采购单位：{{f.wlUnits}}</view>
							 <view class="kcsl">
							 	<text>{{f.kcsl}}</text>
							 	<text>库存数量</text>
							 </view>
							
							<view class="dbgys">
									<view>采购数量：<text>{{f.purchaseQuantity}}</text></view>
									<view>采购金额：<text>{{f.procurementPrice}}</text></view>
							</view>
							
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<equiment :open="tost" @configdel="config" :propsmove="propsmove" @del="del(anmidex)" :content="anmidex==3?'确定要删除此物料吗？':'是否清空购物车？'"></equiment>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineProps } from 'vue';
	import { queryShoppingCartList, getGwcMaterialTreeData, queryNuInfoByNuId, updateKfstatus,deleteQgInfoById,emptiedQgInfo ,queryWlInfoByWlId,generatedPurchaseOrder,generatedPurchaseViewOrder } from './api/lunpan.js'
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import shadowview from './components/ShadowView.vue';
	import calculator from './components/calculator.vue';
	import equiment from './components/equiment.vue';
	const navurl = ref('');
	const InvoicingList = ref([]);
	const TreeData = ref([]);
	const cellobj = ref({});
	
	const wuliaoobj = ref({});
	const serverUrl = ref('');
	const scrolltop = ref(0)
	const shopitem = ref(0)
	const getblue = ref(false);
	const shyp = ref(false);
	const opacity = ref(false); 
	
	const wlxq = ref(false);
	const cgd = ref(false);
	const tost = ref(false);
	const lie = ref(false)

	const scrollnum = ref(0);


	const scroll = reactive({ scrolltop1: 0, scrolltop2: 0, scrolltop3: 0, act1: -1, act2: -1, act3: -1 });
	const form = reactive({
		nuId: '',
		pageNo: 1,
		pageSize: -1,
		categoryId: '',
		typeId: '',
		medicationId: '',
		wlParamInfo: ''
	})
	const switchshyp = () => {
		let obj = {
			id: cellobj.value.id,
			status: shyp.value ? '5' : '2'
		}
		updateKfstatus(obj).then(res => {
			console.log(res)
			if (res.success) {
				shyp.value = shyp.value ? false : true;
				cell();
			} else {
				uni.showToast({
					icon: 'error',
					title: res.message
				})
			}
		})
	}
	const config = ()=>{
		qingkong()
	}
	const timerflag = ref(true);
	const connfig = () =>{
		if(timerflag.value==false){return}
		timerflag.value = false;
		generatedPurchaseOrder(generatedOrder.value).then(res=>{
			uni.showToast({
				icon:res.success?'success':'error',
				title:res.message
			})
			setTimeout(()=>{
				if(res.success){
					InvoicingList.value = [];
					form.pageNo = 1;
					qingkong()
					queryInvo()
					timerflag.value = true;
				}
			},700)
			
		})
	}
	const shopclick = (i : number, k : number,flag:boolean) => {
		if(i==shopitem.value&&!flag){
			InvoicingList.value[shopitem.value].flag = !InvoicingList.value[shopitem.value].flag;
			panduan();
		}
		if (k == 2) {
			let num = Math.ceil((i + 1) / 2)
			scrolltop.value = (num - 2) * 270;
			shopitem.value = i;
		} else {
			let num = Math.ceil((i + 1) / 3)
			scrolltop.value = (num - 2) * 240;
			shopitem.value = i;
		}
		panduan();
	}
	const xuanzhong = (o:any)=>{
		o.flag = !o.flag
		panduan()
	}

	const typescroll = (e : number, i : number, v : object) => {
		
		if (e == 1) {
			scroll.act2 = -1;
			scroll.act3 = -1;
			scroll.scrolltop2 = 0;
			scroll.scrolltop3 = 0;
			form.categoryId = v?.categoryId;
			form.typeId = '';
			form.medicationId = '';
			if (scroll.act1 == i ||i==-1) {
				scroll.act1 = -1;
				form.categoryId = '';
				form.pageNo = 1;
				InvoicingList.value = [];
				queryInvo();
				return
			}
		}
		if (e == 2) {
			scroll.act3 = -1;
			scroll.scrolltop3 = 0;
			form.categoryId = v?.categoryId;
			form.typeId = v?.typeId;
			form.medicationId = '';
		}
		if (e == 3) {
			form.categoryId = v?.categoryId;
			form.typeId = v?.typeId;
			form.medicationId = v?.key;
		}
		scroll['act' + e] = i;
		scroll['scrolltop' + e] = (i - 2) * 50;
		form.pageNo = 1;
		InvoicingList.value = [];
		shopitem.value = 0;
		queryInvo();
	}
	const search = (x : number) => {
		if (x === 0) { form.wlParamInfo = '' }
		form.pageNo = 1;
		InvoicingList.value = [];
		queryInvo();
	}
	onLoad(() => {
		form.nuId = uni.getStorageSync('nuId');
		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
		getMaterial();
		queryInvo();
		cell();
	})

	const qingkong = () => {
		anmidex.value = -1;
		wlxq.value = false;
		cgd.value = false;
		tost.value = false;
	}
	const cell = () => {
		queryNuInfoByNuId(form).then(res => {
			cellobj.value = res.result;
			shyp.value = res.result.status == 5 ? false : true
		})
	}
	const getMaterial = () => {
		getGwcMaterialTreeData(form).then(res => {
			TreeData.value = res.result
		})
	}
	const setout = ref(true)
	let times = null;
	const status = ref('loadmore')
	onPageScroll((e) => {
		console.log(e)
	})
	const scrolltolower = () => {
		if (!setout) { return }
		status.value = 'loading'
		setout.value = false;
		form.pageNo++;
		queryInvo()
		times = setTimeout(() => {
			setout.value = true
		}, 1000)
	}
	const scrollview = (e : number) => {
		if (e.detail.scrollTop > scrollnum.value) {
			opacity.value = true;
			setTimeout(() => {
				opacity.value = false;
			}, 900)
		} else {
			opacity.value = false;
		}
		scrollnum.value = e.detail.scrollTop;
	}
	 
	const queryInvo = () => {
		queryShoppingCartList(form).then(res => { 
			res.result.records.forEach((item,i)=>{
				item.flag = true
			})
			console.log(res.result.records)
			InvoicingList.value.push(...res.result.records);
			status.value = res.result.total == InvoicingList.value.length ? 'nomore' : 'loadmore';
			panduan();
		})
	}
	const propsmove = ref(-1)
	const movecard = (type : number, l : number) => {
		if(cgd.value == true){
			switch (type){
				case 4:
					connfig()
					break;
				case 5:
					qingkong()
					break;
					
				default:
					break;
			}
			return
		}
		if(tost.value == true){
			propsmove.value = type;
			return
		}
		if (l == 1) {
			switch (type) {
				case 0:
					// 上
					shopitem.value = shopitem.value < 1 ? shopitem.value = 0 : shopitem.value - 2
					break;
				case 1:
					// →
					shopitem.value = shopitem.value >= InvoicingList.value.length - 1 ? InvoicingList.value.length - 1 : shopitem.value + 1
					break;
				case 2:
					// 下
					shopitem.value = shopitem.value >= InvoicingList.value.length - 2 ? shopitem.value = 0 : shopitem.value + 2
					break;
				case 3:
					shopitem.value = shopitem.value == 0 ? shopitem.value = InvoicingList.value.length - 1 : shopitem.value - 1
					// ←
					break;
				case 4:
					// 扫描
					InvoicingList.value[shopitem.value].flag = !InvoicingList.value[shopitem.value].flag;
					break;
				case 5:
					// 返回
					uni.navigateBack({
						delta: 1
					})
					break;

				default:
					break;
			}
			shopclick(shopitem.value, 2,true)
		} else {
			switch (type) {
				case 0:
					// 上
					shopitem.value = shopitem.value < 2 ? shopitem.value = 0 : shopitem.value - 3
					break;
				case 1:
					// →
					shopitem.value = shopitem.value >= InvoicingList.value.length -1? shopitem.value = 0 : shopitem.value + 1
					break;
				case 2:
					// 下
					shopitem.value = shopitem.value >= InvoicingList.value.length-3 ? shopitem.value = 0 : shopitem.value + 3
					break;
				case 3:
					shopitem.value = shopitem.value == 0 ? shopitem.value = InvoicingList.value.length-1 : shopitem.value - 1
					// ←
					break;
				case 4:
					// 扫描
					InvoicingList.value[shopitem.value].flag = !InvoicingList.value[shopitem.value].flag;
					break;
				case 5:
					// 返回
					uni.navigateBack({
						delta: 1
					})
					break;

				default:
					break;
			}
			shopclick(shopitem.value, 0,true)
		}

	}
	// 通用的生成函数
	function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
		return Array.from({ length: count }, (_, i) => {
			const idx = pad
				? String(i + startIndex).padStart(2, '0')
				: i + startIndex
			return `${base}/${prefix}${idx}.${ext}`
		})
	}
	const anmidex = ref(-1)
	const generatedOrder = ref([])
	const delstr = ref([])
	const tmr = ref(true)
	const admiclick = (i : number) => {
		if(tmr.value == false){return}
			tmr.value = false;
			anmidex.value = i;
			switch (i) {
				case 0:
				if(InvoicingList.value.length==0){
					uni.showToast({
						title:'请选择物料~',
						icon:'none'
					})
					anmidex.value = -1;
					tmr.value = true;
					return
				}
					InvoicingList.value[shopitem.value].flag = !InvoicingList.value[shopitem.value].flag;
					panduan();
					setTimeout(()=>{
						anmidex.value = -1;
						tmr.value = true;
					},1000)
					break;
				case 1:
					let arr = [];
					InvoicingList.value.forEach(item=>{
						if(item.flag){
							arr.push(item)
						}
					})
					if(arr.length==0){
						uni.showToast({
							title:'请选择物料~',
							icon:'none'
						})
						tmr.value = true;
						anmidex.value = -1;
						return
					}
					tmr.value = true;
					generatedPurchaseViewOrder(arr).then(res=>{
						generatedOrder.value = res.result; 
					})
					 cgd.value = true;
					break;
				case 2:
				if(InvoicingList.value.length==0){
					uni.showToast({
						title:'购物车物料为空~',
						icon:'none'
					})
					tmr.value = true;
					anmidex.value = -1;
					return
				}
				tmr.value = true;
					queryWlInfo();
					break;
				case 3: 
					 
					if(InvoicingList.value.length==0){
						uni.showToast({
							title:'购物车物料为空~',
							icon:'none'
						})
						tmr.value = true;
						anmidex.value = -1;
						return
					}
					tmr.value = true;
					tost.value = true;
					break;
				case 4:
				if(InvoicingList.value.length==0){
					uni.showToast({
						title:'购物车物料为空~',
						icon:'none'
					})
					tmr.value = true;
					anmidex.value = -1;
					return
				} 
				tmr.value = true;
				tost.value = true;
					break;
					case 5:
					 uni.navigateTo({
					 	url:'/pages/Warehouse/purchaseorder'
					 })
					 anmidex.value = -1;
						break;
				// case 1:
				//全选
				// 	let arrs = [];
				// 	if(InvoicingList.value.length==0){
				// 		uni.showToast({
				// 			title:'购物车为空~',
				// 			icon:'none'
				// 		})
				// 		tmr.value = true;
				// 		anmidex.value = -1;
				// 		return
				// 	} 
				// 	 InvoicingList.value.forEach((item,i)=>{
				// 	 	if(item.flag){ 
				// 	 		arrs.push(i)
				// 	 	}else{
				// 			item.flag = true;
				// 		}
				// 	 })
				// 	 if(arrs.length==InvoicingList.value.length){
				// 	 	InvoicingList.value.forEach((item,i)=>{
				// 	 		 item.flag = false;
				// 	 	})
				// 	 }
				// 	 setTimeout(()=>{
				// 	 	anmidex.value = -1;
				// 		tmr.value = true;
				// 	 },1000)
				// 	break;

				default:
					break;
			}
	}
	const del = (e:number)=>{
		if(e==3){
			let delstr = InvoicingList.value[shopitem.value].id;
			deleteQgInfoById(delstr).then(res=>{
				uni.showToast({
					icon:res.success?'success':'none',
					title:res.message
				})
				if(res.success){
					InvoicingList.value.splice(shopitem.value,1)
					if(shopitem.value == InvoicingList.value.length){
						shopitem.value = InvoicingList.value.length-1
					}
				}
				qingkong()
			})
		}else{
			emptiedQgInfo().then(res=>{
				if(res.success){
					InvoicingList.value = [];
					queryInvo()
					qingkong()
				}
				uni.showToast({
					icon:res.success?'success':'none',
					title:res.message
				})
			})
		}
		
	}
	// 物料详情
	const queryWlInfo = ()=>{
		let obj = {
			wlId:InvoicingList.value[shopitem.value].wlId,
			nuId:form.nuId
		}
			queryWlInfoByWlId(obj).then(res=>{
				wuliaoobj.value = res.result;
				wlxq.value = true
			})
	}
	const panduan =()=>{
		animArray.value[0].name =InvoicingList.value[shopitem.value].flag? '取消':'选择'
	}
	const animArray = ref([
		{
			url: genPaths(
				'/static/index/warehouse/procurement/select',
				'select',
				8,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '选择',
			imgurl: '/static/index/warehouse/procurement/select/select1.png'
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/procure',
				'procure0',
				7,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '采 购',
			imgurl: '/static/index/warehouse/procurement/procure/procure01.png'
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/details',
				'details0',
				7,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '物料详情',
			imgurl: '/static/index/warehouse/procurement/details/details01.png'
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/del',
				'del',
				9,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '删除',
			imgurl: '/static/index/warehouse/procurement/del/del1.png'
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/dele',
				'del',
				8,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '清空',
			imgurl: '/static/index/warehouse/procurement/dele/del1.png'
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/Purchase',
				'Purchase0',
				9,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '采购单',
			imgurl: '/static/index/warehouse/procurement/Purchase/Purchase01.png'
		},
	])
</script>

<style scoped lang="less">
	.toast{
		width: 26vw;
		max-height: 40vh;
		position: fixed;
		z-index: 105;
		right: 1.5vw;
		bottom: 1.5vw;
		background: #fff;
		border-radius: 1.6vw;
		padding: 2vw 1vw 5vw;
		.cfg{
			width: 100%;
			height: 3.5vw;
			display: flex;
			position: absolute;
			bottom: 0;
			left: 0vw;
			>view{
				width: 50%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 1.2vw;
				font-weight: 600;
				border-top: 1px solid rgba(239, 240, 244, 1);
				&:nth-child(2){
					color:rgba(3, 133, 250, 1);
					border-left: 1px solid rgba(239, 240, 244, 1);
				}
			}
		}
		.cont{
			width: 70%;
			font-size: 1.3vw;
			margin: 0.5vw auto 0;
			max-height: 21.5vh;
			overflow-y: scroll;
		}
		.xunw{
			width: 100%;
			font-size: 1.3vw;
			margin: 0.5vw auto 0;
			text-align: center;
			font-weight: 600;
		}
		.tit{
			width: 100%;
			height: 3vw;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.4vw;
			font-weight: bolder;
			letter-spacing: 0.3vw;
		}
		
	}
	.uncgd{
		bottom: -96vh !important;
	}
	.caigoudan{
		width: 47.6vw;
		height: 95vh;
		background: #FFFFFF; 
		border-radius: 1.6vw;
		position: fixed;
		z-index: 104;
		bottom: 1.5vw;
		left: 26vw;
		padding:0.5vw 1vw 0;
		
		.cgdscroll{
			width: 100%;
			height: calc(95vh - 4.5vw);
			.cardcd{
				
				.fler{
					display: grid;
					grid-template-columns: 1fr 1fr;
				}
				.boxitem {
					width: 22vw;
					height: 14vw;
					background: rgba(192, 192, 192, 0.14);
					border-radius: 1.6vw;
					margin: 0 1vw 1.2vw 0;
					border: 2px dashed #fff;
					display: inline-block;
					padding:1vw 1.6vw 0;
					position: relative;
					.kcsl{
						position: absolute;
						width: 4vw;
						top: 1.5vw;
						right: 1.7vw;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						text{
							&:nth-child(1){
								font-weight: bold;
								font-size: 1.8vw;
								color: #555555;
							}
							&:nth-child(2){
								font-weight: 400;
								font-size: 1vw;
								color: #999999;
							}
						}
					}
					.dbgys{
						width: 100%;
						height: 3.6vw;
						position: absolute;
						left: 0;
						bottom: 0vw;
						background: #f7f7fa;
						border-radius:0 0 1.6vw 1.6vw;
						border: 2px solid rgba(239, 240, 244, 1);
						padding: 0.4vw  1.5vw 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.act{
							background: rgba(231, 240, 251, 1) !important;
							border: 1px solid rgba(0, 118, 214, 1) !important;
						}
						>view{
							 font-weight: 400;
							 font-size: 1vw;
							 color: #888888;
							 
							 view{
							 	width:15vw;
							 	height:1.9vw;
							 	white-space: nowrap;
							 	overflow: hidden;
							 	text-overflow: ellipsis;
							 }
							 text{
							 	font-weight: bold;
							 	font-size: 1.4vw;
							 	color: #555555;
							 }
						}
					}
					>view {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 1.4vw;
							color: #333;
							white-space: nowrap;
							overflow: hidden;
							width: 100%;
							text-overflow: ellipsis;
							max-width: 15vw;
							
						}
				
						&:nth-child(2) {
							font-weight: 400;
							font-size: 1.1vw;
							color: #555555;
							margin-top: .6vw;
						}
				
						&:nth-child(3) ,&:nth-child(4) {
							font-weight: 400;
							font-size: 1.1vw;
							color: #666666;
							margin-top: .2vw;
						}
				
					}
				}
				
				.cgdh{
					width: 100%;
					height: 2.5vw;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #333333;
					view{
						font-size: 1.1vw;
					}
					text{
						font-size: 1.2vw;
						font-weight: bold;
					}
				}
			}
		}
		.title{
			height: 4vw;
			font-weight: 400;
			font-size: 1.4vw;
			color: #333333;
			border-bottom: 1px solid #DCDCDC;
			display: flex;
			align-items: center;
			view{
				width: 0.5vw;
				height: 1.4vw;
				background: linear-gradient(-69deg, #006DC9, #0385FA);
				border-radius: 0.25vw;
				margin-right: 0.7vw;
			}
		}
		
		
	}
	.uncrkcard{
		right: -26vw !important;
	}
	.wuliao {
		width: 25.2vw;
		height: 48.8vw;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 1vw 0rpx rgba(171, 171, 172, 0.29);
		border-radius: 1.6vw;
		position: fixed;
		bottom: 11vw;
		right: 1.5vw;
		z-index: 103;
		padding: 2vw 2.2vw 2vw;

		.dibu {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin: 3vw auto 0;

			view {
				width: 4vw;
				height: 80%;
				font-weight: 400;
				font-size: .9vw;
				color: #8F92A1;
				display: flex;
				flex-direction: column;
				margin-left: 2.1vw;
				margin-top: -0.2vw;
				align-items: center;

				.l {
					color: rgba(3, 133, 250, 1);
				}

				.f {
					color: rgba(250, 178, 182, 1);
				}

				>text {
					white-space: nowrap;
					display: inline-block;
					display: flex;

					&:nth-child(1) {
						font-weight: bold;
						font-size: 1.4vw;
						color: #555555;
					}

					&:nth-child(2) {
						font-weight: 400;
						font-size: .9vw;
						color: #8F92A1;
						white-space: nowrap;
					}
				}
			}
		}

		.zil {
			font-weight: 400;
			font-size: 1.1vw;
			color: #777777;
			margin-top: .9vw;
		}

		.life {
			width: 66%;
			height: 2vw;
			margin: 0 auto 3vw;
			display: flex;
			justify-content: space-around;

			view {
				width: 5.3vw;
				height: 1.8vw;
				border-radius: .9vw;
				border: 1px solid #D2D2D2;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: .9vw;
				color: #555555;
				margin-left: .6vw;
				white-space: nowrap;
			}
		}

		.znk {
			width: 16vw;
			height: 15vw;
			margin: 2vw auto 0;
		}

		.name {
			width: 100%;
			font-weight: bold;
			font-size: 1.4vw;
			color: #212327;
			height: 3vw;
			line-height: 1.5vw;
		}
	}

	// 
	.shuru {
		width: 20.6vw;
		height: 34.5vw;
		position: fixed;
		bottom: 1.5vw;
		right: 1.6vw;
		z-index: 103;
	}




	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background: RGBA(239, 240, 244, 0.55);
	}

	.tp {
		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0vw 1vw 0;

		.rights {
			width: 24.5vw;
			height: calc(100% - 4vw);
			margin-top: 4vw;

			.serchs {
				width: 100%;
				height: 3.2vw;
				background: rgba(255, 255, 255, .5);
				border-radius: 1.6vw;
				display: flex;
				justify-content: space-between;
				padding: 0.5vw;
				align-items: center;
				margin-top: 1.1vw;

				.ipt {
					display: flex;
					align-items: center;

					image {
						width: 2.2vw;
						height: 2.2vw;
						margin-left: 0.5vw;
					}

					input {
						width: 18vw;
						height: 2.4vw;
						font-size: 1.1vw;
						padding-left: 1.6vw;
					}
				}

				.scr {
					width: 4.2vw;
					height: 2.4vw;
					background: url('/static/index/warehouse/procurement/sh.png')no-repeat;
					background-size: 100% 100%;
					border-radius: 1.2vw;
					border: 1px solid rgba(0, 155, 252, 1);
					font-weight: 400;
					font-size: 1vw;
					color: #1083F8;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.anmikc {
				width: 100%;
				height: 9vw;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				>view {
					width: 7.8vw;
					height: 3.7vw;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: 1.3vw;
					color: #212327;
					background: #FFFFFF;
					margin: 0.25vw 0.3vw 0 0;
					border-radius: 1.6vw;
					view {
						display: flex;
						justify-content: center;
						align-items: center;
						image {
							width: 2vw;
							height: 2vw;
						}

						.donghua {
							margin: 0;
						}
					}

					text {
						white-space: nowrap;
					}

				}
			}

			.typeitem {
				width: 100%;
				height: 38vh;

				.scroltype {
					width: 100%;
					height: calc(34vh - 2vw);
					display: flex;
					justify-content: space-around;
					.scrl1{
						width: 9vw;
						view {
							width: 8.8vw;
						}
						
					}
					.scrl2,.scrl3{
						width: 8vw;
						view {
							width: 7.7vw;
						}
					}
					.scroll-Y {
						height: calc(38vh - 2vw);
						
						view {
							height: 3.8vw;
							background: rgba(255, 255, 255, .5);
							border-radius: 1.9vw;
							font-weight: 400;
							font-size: 1.3vw;
							color: #212327;
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 0 0.4vw;
							margin-bottom: .8vw;
							text-align: center;

							text {
								white-space: nowrap;
							}

							>image {
								width: 2vw;
								height: 2vw;
							}
						}

						.act {
							background: rgba(255, 255, 255, 1) !important;
							font-weight: 600;
							color: #0385FA !important;
						}
					}
				}

				>.toptype {
					width: 100%;
					height: 2vw;
					display: flex;
					justify-content: space-around;
					margin: .4vw 0 .4vw 0;
					.act {
						background: rgba(255, 255, 255, 1) !important;
						font-weight: 600;
						color: #0385FA !important;
					}
					>view {
						width: 7vw;
						height: 1.9vw;
						border-radius: 1vw;
						display: flex;
						justify-content: center;
						align-items: center;
						background: rgba(255, 255, 255, .5);
						border:1px solid rgba(255, 255, 255, .5);
						font-weight: 400;
						font-size: 1.2vw;
						color: #333333;
						padding: 0;
					}
				}
			}

			.shitem {
				width: 100%;
				height: 6.8vw;
				background: #E8E9ED;
				border-radius: 1.6vw;
				padding: 1.2vw 1.8vw;
				position: relative;
				.jqry {
					width: 100%;
					display: flex;
					align-items: center;

					.left {
						width: 5vw;
						height: 5vw;
						margin-right: .8vw;
						border-radius: .3vw;
						overflow: hidden;
					}

					.rigname {
						height: 4vw;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						view {
							&:nth-child(1) {
								font-weight: bold;
								font-size: 1.4vw;
								color: #212327;
							}

							&:nth-child(2) {
								width: 11vw;
								font-weight: 400;
								font-size: 1vw;
								color: #212327;
								display: flex;
								justify-content: space-between;
							}
						}

					}
				}

				.shypk {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					position: absolute;
					top: 0;
					right: 0;
					
					view {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 1.1vw;
							color: #333333;
							padding: 1vw;
						}

						&:nth-child(2) {
							display: flex;
							align-items: center;
							width: 4.6vw;
							height: 2.2vw;
							border-radius: 0.4vw;
							 view{
								 width: 50%;
								 height: 100%;
								 display: flex;
								 justify-content: center;
								 align-items: center;
								 background: rgba(239, 240, 244, 1);
								 image{
									 width: 1.6vw;
									 height: 1.6vw;
								 }
							 }
							 .atve{
								 background: #fff;
							 }
						
						}
					}
				}
			}
		}

		.lefts {
			width: 72.5vw;
			margin-left: 1vw;
			height: calc(100%);
			position: relative;



			.scroll-Y {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;

				.boxitem {

					&:nth-child(1),
					&:nth-child(2),
					&:nth-child(3) {
						margin-top: 4vw;
					}
				}
			}

			.boxitem {
				width: 22.5vw;
				height: 14.3vw;
				background: rgba(255, 255, 255, .7);
				border-radius: 1.6vw;
				margin: 0 1.3vw 1.2vw 0;
				border: 2px dashed #fff;
				display: inline-block;
				padding:1vw 1.6vw 0;
				position: relative;
				.kcsl{
					position: absolute;
					width: 4vw;
					top: 1.5vw;
					right: 1.7vw;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					text{
						&:nth-child(1){
							font-weight: bold;
							font-size: 1.8vw;
							color: #555555;
						}
						&:nth-child(2){
							font-weight: 400;
							font-size: 1vw;
							color: #999999;
						}
					}
				}
				.dbgys{
					width: 100%;
					height: 4.5vw;
					position: absolute;
					left: 0;
					bottom: 0vw;
					background: #f7f7fa;
					border-radius:0 0 1.6vw 1.6vw;
					border: 2px solid rgba(239, 240, 244, 1);
					display: flex;
					padding: 0.4vw  1.5vw 0;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					overflow: hidden;
					.act{
						background: rgba(231, 240, 251, 1) !important;
						border: 1px solid rgba(0, 118, 214, 1) !important;
					}
					>view{
						&:nth-child(2){
							width: 2.2vw;
							height: 2.2vw;
							display: flex;
							justify-content: center;
							align-items: center;
							background: #EEEEEE;
							border-radius: 50%;
							border: 1px solid #CBCFD0;
							padding: 0 !important;
							image{
								width: 1.6vw;
								height: 1.6vw;
							}
						}
						&:nth-child(1){
							display: flex;
							flex-direction: column;
							font-weight: 400;
							font-size: 1vw;
							color: #888888;
							
							view{
								width:15vw;
								height:1.9vw;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							text{
								font-weight: bold;
								font-size: 1.4vw;
								color: #555555;
							}
						}
					}
				}
				>view {
					.hl {
						color: #0385FA;
						background: #E7F0FB;
					}

					.yl {
						background: #DCF6F3;
						color: #00C6A9;
					}

					.bj {
						background: #E9EBFC;
						color: #727BFF;
					}


					&:nth-child(1) {
						font-weight: bold;
						font-size: 1.4vw;
						color: #333;
						white-space: nowrap;
						overflow: hidden;
						width: 100%;
						text-overflow: ellipsis;
						max-width: 15vw;
						
					}

					&:nth-child(2) {
						font-weight: 400;
						font-size: 1.1vw;
						color: #555555;
						margin-top: .6vw;
					}

					&:nth-child(3) ,&:nth-child(4) {
						font-weight: 400;
						font-size: 1.1vw;
						color: #666666;
						margin-top: .2vw;
					}

					


					.znk {
						width: 8vw;
						height: 7vw;
						position: absolute;
						right: 1vw;
						bottom: 5.3vw;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.carditem {
						width: 5.8vw;
						height: 2.1vw;
						border-radius: 1.0vw;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: .9vw;
						margin-top: .8vw;

						image {
							width: 1.4vw;
							height: 1.4vw;
						}
					}
				}
			}

		}

	}

	.yujing {
		border: 2px solid rgba(255, 102, 107, 0.51) !important;
		box-shadow: 0 0 8px rgba(255, 102, 107, 0.051) inset;

		view {
			.num {
				view {
					&:nth-child(1) {
						color: #FF5757 !important;
					}
				}

			}
		}
	}

	.active {
		border: 2px dashed #017DE9 !important;
	}

	.swsh {
		width: 2.7vw;
		height: 1.5vw;
		background: #D6D8DC;
		border-radius: .75vw;
		border: 1px solid #D6D8DC;
		padding: 0.2vw;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		>view {
			width: 1.1vw;
			height: 1.1vw;
			background: #FCFCFD;
			border-radius: 50%;
		}
	}

	.act {
		background: linear-gradient(-69deg, #E1EFFC, #CAE0F9, #D2E9FF) !important;
		border: 1px solid rgba(0, 130, 251, 0.34) !important;
		padding-left: 1.3vw;

		view {
			background: #0385FA;
			position: absolute;
		}
	}

	// 大图
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}

	.leftr {
		width: 72.5vw;
		margin-left: 1vw;
		height: calc(100%);
		position: relative;


		.mblbg {
			width: 35vw;
			height: 16vw;
			position: absolute;
			left: -1vw;
			bottom: 0vw;
			border-radius: 1.6vw;
			filter: blur(15rpx);
			background: RGBA(239, 240, 244, 1);
			z-index: 10;
		}

		.scroll-Y {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;

			.boxitem {

				&:nth-child(1),
				&:nth-child(2),
				&:nth-child(3) {
					margin-top: 4vw;
				}
			}
		}

		.boxibigtem {

			&:nth-child(1),
			&:nth-child(2) {
				margin-top: 4vw;
			}
		}

		.boxibigtem {
			width: 33.3vw;
			height: 21.7vw;
			background: rgba(255, 255, 255, .7);
			border-radius: 1.6vw;
			margin: 0 1.3vw 1.2vw 0;
			border: 2px dashed #fff;
			display: inline-block;
			padding: 2.3vw;
			position: relative;

			>view {
				.hl {
					color: #0385FA;
					background: #E7F0FB;
				}

				.yl {
					background: #DCF6F3;
					color: #00C6A9;
				}

				.bj {
					background: #E9EBFC;
					color: #727BFF;
				}


				&:nth-child(1) {
					font-weight: bold;
					font-size: 1.5vw;
					color: #333;
					white-space: nowrap;
					overflow: hidden;
					width: 100%;
					text-overflow: ellipsis;
				}

				&:nth-child(2) {
					font-weight: 400;
					font-size: 1.2vw;
					color: #555555;
					margin-top: .9vw;
				}

				&:nth-child(3) {
					font-weight: 400;
					font-size: 1.2vw;
					color: #666666;
					margin-top: .6vw;
				}

				>&:nth-child(4) {
					width: 100%;
					height: 10vw;
					position: absolute;
					left: 0;
					bottom: 0;

				}

				.num {
					position: absolute;
					bottom: 2vw;
					left: 2.5vw;
					display: flex;
					flex-direction: column;
					justify-content: center;

					view {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 2.2vw;
							color: #555;
						}

						&:nth-child(2) {
							font-weight: 400;
							font-size: 1vw;
							color: #999999;
						}
					}

				}

				.znk {
					width: 12vw;
					height: 11.5vw;
					position: absolute;
					right: 1.5vw;
					bottom: 1vw;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.carditem {
					width: 5.8vw;
					height: 2.1vw;
					border-radius: 1.0vw;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: .9vw;
					margin-top: .8vw;

					image {
						width: 1.4vw;
						height: 1.4vw;
					}
				}
			}
		}
	}
	.mblbg {
		width: 37.5vw;
		height: 16.5vw;
		position: absolute;
		left: -1vw;
		bottom: 0vw;
		border-radius: 1.6vw;
		filter: blur(15rpx);
		background: RGBA(239, 240, 244, 1);
		z-index: 1110;
	}
	.lmblbg {
		width: 26.5vw;
		height: 15vw;
		position: absolute;
		left: -1vw;
		bottom: 0.5vw;
		border-radius: 1.6vw;
		filter: blur(15rpx);
		background: RGBA(239, 240, 244, 1);
		z-index: 1110;
	}
	.lfxj {
		width: 30vw;
		height: 16vw;
		position: absolute;
		left: 1vw;
		bottom: 0vw;
		z-index: 1111;
		border-radius: 1.6vw;
	
		text {
			width: 76%;
			font-weight: 400;
			font-size: .9vw;
			color: #999999;
			display: flex;
			justify-content: center;
			position: absolute;
			left: 0;
			bottom: 0vw;
		}
	}
	.fxj {
		width: 23vw;
		height: 22vw;
		position: fixed;
		left: 0;
		bottom: 2vw;
		z-index: 1111;
		border-radius: 1.6vw;
	
		text {
			width: 100%;
			font-weight: 400;
			font-size: .9vw;
			color: #999999;
			display: flex;
			justify-content: center;
			position: absolute;
			left: 0;
			bottom: 0vw;
		}
	}
	
	
	.ksfw{
		width: 100%;
		height: 13.6vw;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 1vw;
		border: 1px solid #D9DADC;
		padding: 0 1vw;
		margin: 0.7vw auto 0;
		position: relative;
		.shjs{
			width: 100%;
			margin-top: 0.8vw;
			display: flex;
			justify-content: space-around;
			view{
				width: 7.2vw;
				height: 2.5vw;
				background: #E4E9F4;
				border-radius: 1.25vw;
				font-weight: 400;
				font-size: 1.1vw;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #E4E9F4;
			}
			.iacts{
				background: rgba(168, 212, 255, .75);
				border: 1px solid #A8D4FF;
				color: #249BFA;
			}
			
		}
		.zhxng{
			width: 100%;
			height: 2.8vw;
			margin-top: 0.4vw;
			display: flex;
			padding: 1.1vw;
			justify-content: space-between;
			border-bottom: 2px solid #E5E5E5;
			view{
				display: flex;
				align-items: center;
				image{
					width: 1.6vw;
					height: 1.6vw;
					margin-right: 0.3vw;
				}
				text{
					font-weight: 400;
					font-size: 1vw;
					color: #555555;
				}
			}
		}
		.wul{
			width: 100%;
			height: 1.5vw;
			font-weight: bold;
			font-size: 1.5vw;
			color: #555555;
			text-align: center;
			margin: 1vw auto 0;
		}
		.tm{
			width: 100%;
			height: 1.8vw;
			font-size: 2.2vw;
			font-weight: bolder;
			color: #555555;
			margin-top: 2vw;
			text-align: center;
		}
		.jx{
			width: 2.9vw;
			height: 1.4vw;
			position: absolute;
			top: 0.9vw;
			right: 1.5vw;
			font-weight: 400;
			font-size:0.7vw;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				z-index: 1;
			}
			text{
				position: relative;
				z-index: 2;
			}
		}
	}
</style>
<style>
	page {
		background: RGBA(239, 240, 244, 1);
	}
</style>