hldy_app/pages/Warehouse/procurement.vue

<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.materialName}}</view>
						<view>规格型号: {{v.specificationModel}}</view>
						<view>采购单位： {{v.materialUnits}}</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 class="mblbg"> </view>
				<view class="fxj">
					<arrowkeys @movecard="movecard($event,1)" :getblue="getblue" :moveleft="45" />
					<text>长春市朝阳区久泰开运养老服务有限公司</text>
				</view>
			</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.materialName}}</view>
						<view>规格型号: {{v.specificationModel}}</view>
						<view>采购单位： {{v.materialUnits}}</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 class="mblbg"> </view>
				<view class="fxj">
					<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="45" />
					<text>长春市朝阳区久泰开运养老服务有限公司</text>
				</view>
			</view>
			<view class="rights">
				<view class="shitem">
					<view class="shypk">
						<view>生活用品库</view>
						<view>

							<view class="swsh guodu" :class="shyp?'act':''" @click="switchshyp">
								<view class="guodu"></view>
							</view>
							<text>
								{{!shyp?'停用':'启用'}}
							</text>
						</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 style="display: flex;flex-direction: column;align-items: center;margin-left: 3.8vw;">
							<view class="swsh guodu"  :class="lie?'act':''" @click="lie=!lie">
								<view class="guodu"></view>
							</view>
							<text style=" white-space: nowrap;
									font-weight: 400;
									font-size: 1vw;
									color: #666666;">{{lie?'三列':'两列'}}</text>
						</view>
					</view>

				</view>
				<view class="typeitem">
					<view class="toptype">
						<view v-for="v in ['三','二','一']">{{v+'级分类'}}</view>
					</view>
					<view class="scroltype">
						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop3"
							class="scroll-Y">
							<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">
							<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 class="dot" v-if="carnum>0&&i==5">{{carnum<=99?carnum:'99+'}}</view>
						</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="gys" @click="qingkong"></view>
		<view class="rigbot guodu" :class="gys?'':'unrigbot'">
			<view>
				供应商
				<text  @click="gysflag = true">选择</text>
			</view>
			<view @click="gysflag = true">
				 {{gysarr[gysidnum]?.name}}
			</view>
			<view>
				<text>采购数量</text>
				<view class="jj" @click="jjnum(-1)">
					-
				</view>
				<view class="num" @click="colse">
					{{caigouobj.Limitnum}}
				</view>
				<view class="jj" @click="jjnum(1)">
					+
				</view>
			</view>
			<view class="tanchu" v-if="gysflag">
				<scroll-view scroll-y="true" class="gysscrol">
					<view v-for="(v,i) in gysarr" :key='i' :class="gysidnum==i?'acts':''" @click="gysid(i)">
						<text>{{v.name}}</text>
						<image src="/static/index/warehouse/procurement/d.png" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="shuru guodu" :class="gysnum?'':'unrigbot'">
			<calculator :translateNumber="caigouobj.Limitnum" :doOnce="caigouobj.Limitnum" @colse="colse" @right="right"></calculator>
		</view>
		<view class="cgou guodu" :class="gys?'':'uncg'">
			<view class="topcont">
				<view class="top">
					<view class="leftimg tp">
						<image :src=" '/static/index/warehouse/procurement/k.png'" mode="aspectFill"></image>
					</view>
					<view class="rightcont">
						<view>
							<text>{{caigouobj.materialName}}</text>
							<view class="swsh guodu" :class="shyp?'act':''" @click="switchshyp">
								<view class="guodu"></view>
							</view>
						</view>
						<view>
							<view>物料编码: {{caigouobj.materialNo}}</view>
							<text>物料小类: {{caigouobj.tagName}}</text>
						</view>
						<view>
							<view>规格型号: {{ caigouobj.specificationModel }}</view>
							<text>物料单位: {{ caigouobj.materialUnits}}</text>
						</view>
						<view>
							<view>医保报销: {{ caigouobj.izYbbxName }}</view>
							<text>机构优惠: {{ caigouobj.izJgyhName }}</text>
						</view>

					</view>
				</view>
				<view class="life">
					<view>
						<view v-if="caigouobj.categoryId_dictText">{{caigouobj.categoryId_dictText}}</view>
						<view v-if="caigouobj.categoryId_dictText">{{caigouobj.typeId_dictText}}</view>
						<view>
							<text>{{caigouobj.kcsl}}</text>
							<text>库存数量</text>
						</view>
					</view>
					<view>
						<view>
							<text>{{caigouobj.upperLimit}}</text>
							<text>物料上限 <text class="l"> ↑</text></text>
						</view>
						<view>
							<text style="text-align: right;">{{caigouobj.lowerLimit}}</text>
							<text><text class="f">↓ </text>物料下限 </text>
						</view>
					</view>
				</view>
			</view>
			<view class="gyscont">
				<view>
					<text>供应商：</text>
					<text> {{gysarr[gysidnum]?.name}}</text>
				</view>
				<view>
					<text>采购数量</text>
					<view class="jj" @click="jjnum(-1)">
						-
					</view>
					<view class="num">
						{{caigouobj.Limitnum}}
					</view>
					<view class="jj" @click="jjnum(1)">
						+
					</view>
				</view>
			</view>
			<view class="tj">
				<text @click="connfig">确定</text>
				<text>
					采购数量： {{caigouobj.Limitnum}}
				</text>
			</view>
		</view>

		<view class="mengban" v-if="crk" @click="qingkong"></view>
		<view class="crkcard guodu" :class="crk?'':'uncrkcard'">
			<view class="shopcont">
				<view class="img tp">
					<image :src=" '/static/index/warehouse/procurement/k.png'" mode="aspectFill"></image>
				</view>
				<view class="cont">
					<view>纸尿裤-拉拉裤纸尿裤-拉拉裤</view>
					<view>规格型号: 800mm*680mm</view>
					<view>物料编码: ZHYP044</view>
					<view>
						<text>56</text>
						当前库存
					</view>
				</view>
			</view>
			<view class="select">
				<view>
					<view>全部</view>
					<view>日期从近到远
						<image src="/static/index/hulilist/xia.png" mode="aspectFill"></image>
					</view>
				</view>
				<view>
					<text>总计:100笔</text>
					<text>出库：50</text>
					<text>入库：50</text>
				</view>
			</view>
			<scroll-view scroll-y="true" class="crkscroll">
				<view class="cgrk" v-for="(v,i) in 15" :key='i'>
					<view>
						<text>采购入库</text>
						<text>服务指令:生活用品请领</text>
						<text>2025-02-13 17:29:18</text>
					</view>
					<view>
						<text>摘要:服务指令</text>
						<text :class="i>5?'c':'l'">+50</text>
						<text>库存：96</text>
					</view>
				</view>
			</scroll-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>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineProps } from 'vue';
	import { queryInvoicingList, getMaterialTreeData, queryNuInfoByNuId, updateKfstatus,queryWlInfoByWlId,addShoppingCartList,queryShoppingCartList } 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';
	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 gysnum = ref(false);
	const gys = ref(false);
	const crk = ref(false);
	const wlxq = 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: 9,
		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 shopclick = (i : number, k : number) => {
		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;
		}

	}

	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) {
				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();
	})
	onShow(()=>{
		shoppcar()
	})
	const qingkong = () => {
		gys.value = false;
		anmidex.value = -1;
		crk.value = false;
		wlxq.value = false;
		gysnum.value = false;

	}
	const colse = () => {
		gysnum.value = !gysnum.value
	}
	const right = (n:number) => {
		let d = Number(caigouobj.value.upperLimit)-Number(caigouobj.value.kcsl)
		
		if(d>=n){
			caigouobj.value.Limitnum = n;
		}else{
			caigouobj.value.Limitnum = d;
		}
		if(n<1){
			caigouobj.value.Limitnum = 1;
		}
		gysnum.value = false;
		
	}
	
	const cell = () => {
		queryNuInfoByNuId(form).then(res => {
			cellobj.value = res.result;
			shyp.value = res.result.status == 5 ? false : true
		})
	}
	const getMaterial = () => {
		getMaterialTreeData().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 = () => {
		queryInvoicingList(form).then(res => {
			InvoicingList.value.push(...res.result.records);
			status.value = res.result.total == InvoicingList.value.length ? 'nomore' : 'loadmore'
		})
	}
	const movecard = (type : number, l : number) => {
		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:
					// 扫描

					break;
				case 5:
					// 返回
					uni.navigateBack({
						delta: 1
					})
					break;

				default:
					break;
			}
			shopclick(shopitem.value, 2)
		} 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 ? shopitem.value = 0 : shopitem.value + 1
					break;
				case 2:
					// 下
					shopitem.value = shopitem.value > InvoicingList.value.length ? shopitem.value = 0 : shopitem.value + 3
					break;
				case 3:
					shopitem.value = shopitem.value == 0 ? shopitem.value = InvoicingList.value.length : shopitem.value - 1
					// ←
					break;
				case 4:
					// 扫描

					break;
				case 5:
					// 返回
					uni.navigateBack({
						delta: 1
					})
					break;

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

	}
	// 通用的生成函数
	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 jjnum = (e:number) =>{
		let n = Number(caigouobj.value.upperLimit)-Number(caigouobj.value.kcsl)
		if(n==caigouobj.value.Limitnum&&e==1){return}
		if(caigouobj.value.Limitnum==1&&e==-1){return}
		caigouobj.value.Limitnum+=e;
	}
	const anmidex = ref(-1)
	const caigouobj = ref({})
	const gysarr = ref([])
	
	const admiclick = (i : number) => {
		if(i==5){
			uni.navigateTo({
				url:'/pages/Warehouse/procurecart'
			})
			return
		}
		if (anmidex.value == i) {
			anmidex.value = -1
		} else {
			anmidex.value = i;
			switch (i) {
				case 0:
					break;
				case 1:
					caigouobj.value = InvoicingList.value[shopitem.value];
					caigouobj.value.Limitnum =  Number(caigouobj.value.upperLimit)-Number(caigouobj.value.kcsl);
					let n = [];
					let id = [];
					n = caigouobj.value.suppliers_dictText.split(/[, ]+/);
					id = caigouobj.value.suppliers.split(/[, ]+/);
					n.forEach((item,i)=>{
						gysarr.value.push({'name':item,'id':id[i]})
					})
					gys.value = true
					break;
				case 2:
					uni.navigateTo({
						url:'/pages/Warehouse/purchaseorder'
					})
				
					break;
				case 3:
				let obj = {
					wlId:InvoicingList.value[shopitem.value].wlId,
					nuId:form.nuId
				}
				queryWlInfoByWlId(obj).then(res=>{
					wuliaoobj.value = res.result;
					wlxq.value = true
				})
					break;
				case 4:
					crk.value = true
					break;
				case 5:
					uni.navigateTo({
						url:'/pages/Warehouse/procurecart'
					})
					break;

				default:
					break;
			}
		}
	}
	const gysidnum = ref(0)
	const gysflag = ref(false)
	const gysid = (i:number)=>{
		gysidnum.value = i;
		gysflag.value = false;
	}
	const timers = ref(true)
	const connfig = () =>{
		if(timers.value==false){return}
		timers.value=false;
		let dt = {
			nuId:form.nuId,
			purchaseQuantity:caigouobj.value.Limitnum,
			suppliersId:gysarr.value[gysidnum.value].id,
			suppliersName:gysarr.value[gysidnum.value].name,
			wlId:caigouobj.value.wlId
		}
		addShoppingCartList([dt]).then(res=>{
			uni.showToast({
				icon:res.success?'success':'none',
				title:res.message
			})
			setTimeout(()=>{
				timers.value=true;
				if(res.success){
					qingkong()
					shoppcar()
				}
			},700)
		})
	}
	const carnum = ref(0)
	const shoppcar=()=>{
		queryShoppingCartList(form).then(resr=>{
			carnum.value = resr.result.total
		})
	}
	const animArray = ref([
		{
			url: genPaths(
				'/static/index/warehouse/procurement/store',
				'store0',
				8,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '库存预警',
			imgurl: '/static/index/warehouse/procurement/store/store01.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/Purchase',
				'Purchase0',
				9,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '采购单',
			imgurl: '/static/index/warehouse/procurement/Purchase/Purchase01.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/bound',
				'bound0',
				11,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '出入库',
			imgurl: '/static/index/warehouse/procurement/bound/bound01.png'
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/Cart',
				'Cart0',
				10,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '购物车',
			imgurl: '/static/index/warehouse/procurement/Cart/Cart01.png'
		}
	])
</script>

<style lang="less">
	.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: 60%;
			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;
			}
		}

		.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;
		}
	}

	// 出入库
	.uncrkcard {
		right: -38vw !important;
	}

	.crkcard {
		width: 38vw;
		height: 50vw;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 1vw 0rpx rgba(171, 171, 172, 0.29);
		border-radius: 1.6vw;
		position: fixed;
		right: 1.5vw;
		bottom: 11vw;
		z-index: 102;

		.crkscroll {
			width: 100%;
			height: 29vw;

			.cgrk {
				width: 35vw;
				height: 8.5vw;
				background: rgba(236, 237, 239, 0.4);
				border-radius: 1.6vw;
				margin: 0.8vw auto 0;
				padding: 1.8vw 2vw;
				display: flex;
				justify-content: space-between;

				>view {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&:nth-child(1) {
						text {

							&:nth-child(2),
							&:nth-child(3) {
								font-weight: 400;
								font-size: 1.1vw;
								color: #888888;
							}

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

					&:nth-child(2) {
						.c {
							color: #FF6600 !important;
						}

						.l {
							color: #0076D6 !important;
						}

						text {
							font-weight: 400;
							font-size: 1.1vw;
							color: #888888;
							text-align: right;

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

		.select {
			width: 100%;
			height: 7vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 1vw 1.5vw;

			>view {
				display: flex;

				&:nth-child(2) {
					justify-content: space-between;

					text {
						font-weight: 400;
						font-size: 1.1vw;
						color: #555555;
					}
				}

				&:nth-child(1) {
					justify-content: flex-end;

					view {
						min-width: 5vw;
						height: 2.6vw;
						border-radius: 1.3vw;
						border: 1px solid #DCDCDC;
						padding: 0 1.4vw;
						align-items: center;
						display: flex;
						align-items: center;
						margin: 0 0.5vw;

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

					}
				}
			}
		}

		.shopcont {
			width: 100%;
			height: 10vw;
			background: rgba(236, 237, 239, 0.3);
			border-bottom: 1px solid #DCDCDC;
			display: flex;
			align-items: center;

			.cont {
				width: 26vw;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				position: relative;
				padding: 2vw 0;

				view {
					&:nth-child(4) {
						width: 5vw;
						height: 5vw;
						background: rgba(236, 237, 239, 1);
						border-radius: 1.4vw;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						font-weight: 400;
						font-size: 1vw;
						position: absolute;
						color: #888888;
						top: 2.5vw;
						right: 1.8vw;
						padding: 0.5vw 0;

						text {
							font-weight: bold;
							font-size: 1.8vw;
							color: #555555;
						}
					}

					&:nth-child(2),
					&:nth-child(3) {
						font-weight: 400;
						font-size: 1.1vw;
						color: #888888;
					}

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

			.img {
				width: 10vw;
				height: 9vw;
			}
		}
	}

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

	// 采购
	.unrigbot {
		right: -25vw !important;
	}

	.rigbot {
		width: 25.5vw;
		height: 13vw;
		background: #FFFFFF;
		border-radius: 1.6vw;
		position: fixed;
		bottom: 1.5vw;
		right: 1.6vw;
		z-index: 102;
		padding: 1.1vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		>.tanchu{
			width: 22vw;
			height: 7vw;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(174,175,176,0.35);
			border-radius: 1.1vw;
			padding: 0 1.4vw;
			position: absolute;
			right: 1.2vw;
			bottom: 1.2vw;
			.gysscrol{
				width: 100%;
				height: 7vw;
				.acts{
					color: #0385FA !important;
					image{
						display: block;
					}
				}
				view{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 400;
					font-size: 1vw;
					color: #666666;
					margin-bottom: 0.9vw;
					&:nth-child(1){
						margin-top: 0.9vw;
					}
					image{
						width: 1vw !important;
						height: 0.7vw !important;
						display: none;
					}
				}
			}
			
		}
		>view {
			display: flex;
			align-items: center;
			

			&:nth-child(3) {
				align-items: center;
				white-space: nowrap;

				text {
					font-weight: 400;
					font-size: 1.1vw;
					color: #555555;
					white-space: nowrap;
					margin-right: 1.2vw;
				}

				.jj {
					width: 3.5vw;
					height: 3.5vw;
					background: rgba(85, 85, 85, .1);
					border-radius: 1.0vw;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 0 0 1vw;
					position: relative;
					padding: 0 !important;

					&:active {
						content: '';
						width: 3.5vw;
						height: 3.5vw;
						background: linear-gradient(-61deg, #EAF5FF, #CBE7FF) !important;
					}
				}

				.num {
					width: 6.5vw;
					height: 3.5vw;
					border-radius: 1.0vw;
					background: rgba(85, 85, 85, .1);
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 0 0 1vw;
				}

			}

			&:nth-child(2) {
				width: 100%;
				height: 3.0vw;
				background: rgba(85, 85, 85, 0.1);
				border-radius: 1.0vw;
				padding-left: 1.5vw;
			}

			&:nth-child(1) {
				justify-content: space-between;
				font-weight: 400;
				font-size: 1.1vw;
				color: #555555;

				text {
					width: 5.2vw;
					height: 2.2vw;
					display: inline-block;
					text-align: center;
					line-height: 2.2vw;
					font-weight: 400;
					font-size: 1vw;
					color: #5C7992;
					background: linear-gradient(-61deg, #EAF5FF, #CBE7FF) !important;
					border-radius: 1.1vw;
				}
			}
		}
	}

	.uncg {
		left: -47vw !important;
	}

	.cgou {
		width: 47vw;
		height: 26vw;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx .5vw 0rpx #E8E9ED;
		border-radius: 1.6vw;
		position: fixed;
		left: 2vw;
		top: 16vw;
		z-index: 101;
		padding: 2vw 0 0;

		.tj {
			width: 100%;
			height: 3.5vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 2vw;

			>text {
				&:nth-child(1) {
					width: 5.2vw;
					height: 2.2vw;
					display: inline-block;
					text-align: center;
					line-height: 2.2vw;
					font-weight: 400;
					font-size: 1vw;
					color: #5C7992;
					background: linear-gradient(-61deg, #EAF5FF, #CBE7FF) !important;
					border-radius: 1.1vw;
				}

				&:nth-child(2) {
					font-weight: 400;
					font-size: 1.1vw;
					color: #555555;
					align-items: center;
				}
			}
		}

		.gyscont {
			width: 100%;
			height: 5.7vw;
			background: #EFF0F4;
			padding: 2vw;
			display: flex;
			border-top: 1px solid #E8E9ED;
			border-bottom: 1px solid #E8E9ED;

			view {
				width: 50%;

				&:nth-child(2) {
					display: flex;
					align-items: center;
					white-space: nowrap;

					text {
						font-weight: 400;
						font-size: 1.1vw;
						color: #555555;
						white-space: nowrap;
					}

					.jj {
						width: 3.5vw;
						height: 3.5vw;
						background: rgba(85, 85, 85, .1);
						border-radius: 1.0vw;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 0 1vw;
						position: relative;

						&:active {
							content: '';
							width: 3.5vw;
							height: 3.5vw;
							background: linear-gradient(-61deg, #EAF5FF, #CBE7FF) !important;
						}
					}

					.num {
						width: 6.5vw;
						height: 3.5vw;
						border-radius: 1.0vw;
						background: rgba(85, 85, 85, .1);
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				&:nth-child(1) {
					display: flex;
					flex-direction: column;

					text {
						font-weight: 400;
						font-size: 1vw;
						margin-left: 1vw;

						&:nth-child(1) {
							color: rgba(85, 85, 85, 1);
							margin-top: -0.4vw;
						}

						&:nth-child(2) {
							margin-top: 0.4vw;
							color: #555555;
						}
					}
				}
			}
		}

		.topcont {
			width: 100%;
			height: 14.6vw;
			padding: 0 2vw;

			.life {
				width: 100%;
				height: 4.4vw;
				display: flex;
				justify-content: space-around;

				>view {
					width: 50%;
					height: 100%;
					display: flex;
					justify-content: space-between;

					&:nth-child(2) {
						display: flex;
						justify-content: flex-end;

						view {
							min-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;
							padding-right: 2.1vw;

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

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

							&:nth-child(1) {
								border-right: 1px solid rgba(239, 240, 244, 1);
							}

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

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

					&:nth-child(1) {
						display: flex;
						justify-content: flex-start;

						view {

							&:nth-child(1),
							&:nth-child(2) {
								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;
							}

							&:nth-child(3) {
								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;

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

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

			.top {
				width: 100%;
				height: 10.2vw;
				display: flex;
				justify-content: space-between;

				.leftimg {
					width: 10vw;
					height: 9vw;
					margin-left: 1vw;
				}

				.rightcont {
					width: 29vw;
					height: 100%;
					display: flex;
					flex-direction: column;

					>view {
						width: 100%;

						&:nth-child(1) {
							display: flex;
							justify-content: space-between;
							margin-bottom: .5vw;

							text {
								width: 25vw;
								font-weight: bold;
								font-size: 1.4vw;
								color: #212327;
								display: inline-block;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						&:nth-child(2),
						&:nth-child(3),
						&:nth-child(4) {
							display: flex;
							font-weight: 400;
							font-size: 1vw;
							color: #777777;
							align-items: center;
							white-space: nowrap;

							>view {
								width: 16vw;
								margin-top: .8vw;
							}

							text {
								display: inline-block;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}

	}

	.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: 27vw;
			height: calc(100% - 4vw);
			margin-top: 4vw;

			.serchs {
				width: 27vw;
				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: space-between;
				flex-wrap: wrap;

				>view {
					width: 8.5vw;
					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;
					border-radius: 1.6vw;
					position: relative;
					.dot{
						position: absolute;
						right: 0;
						top: -0.5vw;
						min-width: 1.5vw;
						height: 1.5vw;
						border-radius: 0.75vw;
						display: flex;
						justify-content: center;
						align-items: center;
						background: red;
						color: #fff;
						font-size: 1vw;
						margin: 0 !important;
						padding: 0 0.25vw;
					}

					view {
						margin-right: .4vw;

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

						.donghua {
							margin: 0;
						}
					}

					text {
						white-space: nowrap;
					}

				}
			}

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

				.scroltype {
					width: 100%;
					height: calc(54vh - 2vw);
					display: flex;
					justify-content: space-around;

					.scroll-Y {
						width: 8.5vw;
						height: calc(54vh - 2vw);

						view {
							width: 100%;
							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;

					view {
						width: 7vw;
						height: 1.9vw;
						border-radius: 1vw;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 1.2vw;
						color: #333333;
					}
				}
			}

			.shitem {
				width: 27vw;
				height: 10.3vw;
				background: #E8E9ED;
				border-radius: 1.6vw;
				padding: 1.2vw 1.8vw;

				.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: space-between;

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

						&:nth-child(2) {
							display: flex;
							flex-direction: column;
							align-items: center;

							text {
								font-weight: 400;
								font-size: 1vw;
								color: #666666;
							}


						}
					}
				}
			}
		}

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

			.fxj {
				width: 23vw;
				height: 22vw;
				position: absolute;
				left: 0;
				bottom: 2vw;
				z-index: 11;
				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;
				}
			}

			.mblbg {
				width: 24.5vw;
				height: 21vw;
				position: absolute;
				left: -1vw;
				bottom: 0.5vw;
				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;
					}
				}
			}

			.boxitem {
				width: 22vw;
				height: 19.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: 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: .6vw;
					}

					&: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: 10vw;
						height: 9.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;
						}
					}
				}
			}

		}

	}

	.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: 70vw;
		margin-left: 1vw;
		height: calc(100%);
		position: relative;

		.fxj {
			width: 30vw;
			height: 16vw;
			position: absolute;
			left: 1vw;
			bottom: 0vw;
			z-index: 111;
			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;
			}
		}

		.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;
					}
				}
			}
		}
	}
</style>
<style>
	page {
		background: RGBA(239, 240, 244, 1);
	}
</style>