hldy_app/pages/Warehouse/procurement.vue

<template>
	<view>
		<!-- 采购 -->
		<view class="box">
			<view class="leftr" v-if="shyp">
				<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="!shyp">
				<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>
					
				</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>
								<image :src="v.imgurl" mode="aspectFill" v-if="anmidex!=i"></image>
								<donghua width="2vw" height="2vw" :links="v.url" :playing="i === anmidex"
									v-show="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>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive,onBeforeUnmount, computed, nextTick,defineProps } from 'vue';
	import { queryInvoicingList ,getMaterialTreeData,queryNuInfoByNuId,updateKfstatus } from './api/lunpan.js'
	import { onShow, onLoad, onHide ,onPageScroll } from "@dcloudio/uni-app"
	import shadowview  from './components/ShadowView.vue';
	 const navurl = ref('');
	 const InvoicingList = ref([]);
	 const TreeData = ref([]);
	 const cellobj = 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 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();
	 })
	 const cell = ()=>{
	 	 queryNuInfoByNuId(form).then(res=>{
			 console.log(res.result)
			 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 anmidex = ref(-1)
	 const admiclick = (i:number)=>{
		 anmidex.value = i;
	 }
	 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">
	.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;
				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;
						}
						.guodu{
							transition: .4s;
							-webkit-transform-style: preserve-3d;
							-webkit-overflow-scrolling: touch;
						}
						.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;
							}
						}
						
					}
				}
			}
		}
	}
	.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;
		}
// 大图

.leftr{
		width: 70vw;
		margin-left: 1vw;
		height:calc(100%);
		position: relative;
		.fxj{
			width: 30vw;
			height: 16vw;
			position: absolute;
			left: 1vw;
			bottom: 0vw;
			z-index: 11;
			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>