仓库 页面

pages/Warehouse/Warehouse.vue

@@ -1,10 +1,29 @@
 <template>
 	<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`"  v-show="isShow">
 		<view class="wareaitem">
-			<view class="tp" v-for="(item,index) in 12" :key='index'>
-				<image :src="'/static/index/warehouse/w'+index+'.png'" mode="aspectFill"></image>
+			<view class="wareaitem-item">
+				<view class="tp" v-for="(item,index) in 9" :key='index' >
+					<image :src="'/static/index/warehouse/w'+index+'.png'" mode="aspectFill"></image>
+				</view>
+				
+				<view class="tp" :class="'itemact'+item" v-for="(item,index) in 7" :key='index' @click.stop="housactive(index)">
+					<image :src="'/static/index/warehouse/active/i'+index+'.png'" mode="aspectFill" v-if="index>5||housedex==index"></image>
+				</view>
+				
+				<view class="tp ys" >
+					<image :src="'/static/index/warehouse/active/i7.png'" mode="aspectFill" ></image>
+				</view>
+				<view class="tp gifs" >
+					<image src="/static/index/warehouse/ys.gif" mode="aspectFill"></image>
+				</view>
+				<view class="tp w11" >
+					<image src="/static/index/warehouse/w11.png" mode="aspectFill"></image>
+				</view>
+				<view class="tp wclik"  @click.stop="housactive(1)">
+					 <!-- 采购增加层级高度方便点击 -->
+				</view>
 			</view>
-			<view class="annotation" v-for="(v,i) in ['付款','采购','结账','护理单元','中控室']" :key='i'>
+			<view class="annotation" :class="'annotation'+(i+1)" v-for="(v,i) in ['付款','采购','结账','拣货','护理单元','中控室']" :key='i'>
 				<view>{{v}}</view>
 				<view class="tp">
 					<image src="/static/index/warehouse/y1.png" mode="aspectFill"></image>
@@ -13,6 +32,13 @@
 					<image src="/static/index/warehouse/y0.png" mode="aspectFill"></image>
 				</view>
 			</view>
+			
+			<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="125" />
+			<view class="operationbtn">
+				<view v-for="(v,i) in ['请领出库','退货入库','库存盘点','实时监控']"
+				 @tap="onTap(i)" 
+				 :class="beblue === i ? 'click-box-target grad-text' : 'click-box'">{{v}}</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -20,12 +46,69 @@
 <script setup lang="ts">
 	 import { ref, onMounted, onBeforeUnmount, computed, nextTick,defineProps } from 'vue';
 	 const darkFans = ref(false);
+	const getblue = ref(false);
 	 const props = defineProps({
 	 	isShow: {
 	 		type: Boolean,
 	 		required: true,
 	 	},
 	 });
+	 const housedex = ref(-1);
+	 const housactive = (index : number) => {
+		 if(index>5){return}
+		 housedex.value = index;
+	 	console.log(index)
+	 }
+	 const movecard = (type : number) => {
+	   console.log(type)
+	   switch (type){
+	   	case 0:
+		// 上
+		housedex.value>0?housedex.value--:housedex.value = 5
+	   		break;
+	   	case 1:
+		housedex.value>4?housedex.value = 0:housedex.value++
+		// →
+	   		break;
+	   	case 2:
+		housedex.value>4?housedex.value = 0:housedex.value++
+		// 下
+	   		break;
+	   	case 3:
+		housedex.value>0?housedex.value--:housedex.value = 5
+		// ←
+	   		break;
+	   	case 4:
+		// 确定
+	   		break;
+	   	case 5:
+		// 返回
+		uni.navigateBack()
+	   		break;
+	   		
+	   	default:
+	   		break;
+	   }
+	 }
+	 const beblue = ref<number>(-1);
+	 let clickResetTimer : ReturnType<typeof setTimeout> | null = null;
+	 // 单击（或短按）
+	 function onTap(dir : number) {
+	 	clearClickResetTimer()
+	 
+	 	beblue.value = dir 
+	 	clickResetTimer = setTimeout(() => {
+	 		beblue.value = -1
+	 		clickResetTimer = null
+	 	}, 500)
+	 }
+	 function clearClickResetTimer() {
+	 	if (clickResetTimer) {
+	 		clearTimeout(clickResetTimer)
+	 		clickResetTimer = null
+	 	}
+	 }
+	 
 </script>
 
 <style lang="less">
@@ -42,142 +125,290 @@
 				height: 100%;
 			}
 		}
-		.annotation{
-			width: 7vw;
-			height: 8vw;
-			z-index: 20;
+		.operationbtn{
+			width: 20vw;
+			height: 10vw;
+			position: absolute;
+			right: 3vw;
+			bottom: 2vw;
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
 			>view{
-				position: relative;
-				&:nth-child(1){
-					width: 7vw;
-					height: 2vw;
-					background: #F2F3F7;
-					box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(182,186,196,0.35);
-					border: 2rpx solid #FFFFFF;
-					font-weight: 400;
-					font-size: 1vw;
-					color: #333333;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					z-index: 3;
-				}
-				&:nth-child(2){
-					width: 4vw;
-					height: 2vw;
-					z-index: 2;
-					margin: -2rpx auto 0;
-					z-index: 2;
-				}
-				&:nth-child(3){
-					width: 3vw;
-					height: 5vw;
-					z-index: 1;
-					margin: -1vw auto 0;
-				}
+				width: 9vw;
+				height: 4vw;
+				border-radius: 1vw;
+				border: 2rpx solid #D9DADC; 
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-weight: 400;
+				font-size: 1vw;
+				color: #888D99;
+				margin: 0 0.3vw;
+				transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease;
+				-webkit-tap-highlight-color: transparent;
+			}
+			.click-box {
+				color: #888d99;
+				background: rgba(255, 255, 255, 0.43);
+			}
+			
+			.click-box-target {
+				color: transparent;
+				animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
+				transform-origin: center center;
+			}
+			.grad-text {
+				background: linear-gradient(90deg, #5b8bb3, #87a1bd);
+				background-size: 200% 100%;
+				background-position: 0% 50%;
+				-webkit-background-clip: text;
+				background-clip: text;
+				-webkit-text-fill-color: transparent;
+				transition: background-position 0.8s linear;
+			}
+			
+			@keyframes scalePulse {
+				0% { transform: scale(1); }
+				25% { transform: scale(0.94); }
+				65% { transform: scale(1.08); }
+				100% { transform: scale(1); }
 			}
 		}
-		>view{
-			position: absolute;
-			&:nth-child(1){
-				width: 26vw;
-				height: 22vw;
-				top: 17vw;
+		.wareaitem-item{
+			width: 100%;
+			height: 100%;
+			position: fixed;
+			top: 0;
+			left: 0;
+			background: url('/static/index/warehouse/bg.png')no-repeat;
+			background-size:cover cover;
+			
+			.itemact1 {
+				width: 25vw;
+				height: 19vw;
+				top: 21vw;
 				left: 8vw;
-				z-index: 10;
-			}
-			&:nth-child(2){
-				width: 68vw;
-				height: 22vw;
-				top: 4vw;
-				left: 18vw;
-			}
-			&:nth-child(3){
+				z-index: 31;
+			} 
+			.itemact2{
 				width: 20vw;
 				height: 13vw;
 				top: 15vw;
 				left: 43vw;
+				z-index: 27;
 			}
-			&:nth-child(4){
+			.itemact3{
 				width: 20vw;
 				height: 14vw;
 				top: 26vw;
 				left: 45vw;
-				z-index: 10;
-			}
-			&:nth-child(5){
-				width: 11vw;
-				height: 7vw;
-				top: 28vw;
-				left: 56vw;
-			}
-			&:nth-child(6){
+				z-index: 35;
+			} 
+			.itemact4{
 				width: 11vw;
 				height: 9vw;
 				top: 23vw;
 				left: 63vw;
-				z-index: 5;
+				z-index: 36;
 			}
-			&:nth-child(7){
-				width: 13vw;
-				height: 11vw;
+			.itemact6{
+				width: 15vw;
+				height: 10vw;
 				top: 25vw;
 				left: 80vw;
+				z-index: 35;
 			}
-			&:nth-child(8){
-				width: 15vw;
-				height: 14vw;
+			.itemact5{
+				width: 16vw;
+				height: 13vw;
 				top: 31vw;
 				left: 67vw;
+				z-index: 35;
 			}
-			&:nth-child(9){
+			.itemact7{
 				width: 48vw;
 				height: 22vw;
-				top: 34vw;
-				left: 21vw;
-				z-index: 11;
+				top: 35vw;
+				left: 22vw;
+				z-index: 31;
 			}
-			&:nth-child(10){
-				width: 17vw;
-				height: 10vw;
-				top: 48vw;
-				left: 26vw;
-				z-index: 12;
-			}
-			&:nth-child(11){
+			 
+			.itemact8{
 				width: 11vw;
 				height: 8vw;
 				top: 22vw;
 				left: 56vw;
+				z-index: 17;
 			}
-			&:nth-child(12){
+			 .itemact9{
+			 	width: 11vw;
+			 	height: 9vw;
+			 	top: 23vw;
+			 	left: 63vw;
+			 	z-index: 22;
+			 }
+			
+			.wclik{
+				width: 20vw;
+				height: 13vw;
+				top: 15vw;
+				left: 43vw;
+				z-index: 47;
+			}
+			
+			.gifs{
+				width: 38vw;
+				height:19.5vw;
+				top: 19vw;
+				left: 26vw;
+				z-index: 29;
+			}
+			.w11{
 				width: 3vw;
-				height: 3vw;
-				top: 21vw;
-				left: 57vw;
-			} 
-			// title
-			&:nth-child(13){ 
-				top: 15.5vw;
-				left: 21.5vw;
+				height:3vw;
+				top: 22.5vw;
+				left: 58vw;
+				z-index: 35;
 			}
-			&:nth-child(14){
+			.ys{
+					width: 11vw;
+					height: 8vw;
+					top: 22vw;
+					left: 56vw;
+					z-index: 28;
+				}
+			>view{
+				position: absolute;
+				&:nth-child(1){
+					width: 25vw;
+					height: 19vw;
+					top: 21vw;
+					left: 8vw;
+					z-index: 30;
+				}
+				&:nth-child(2){
+					width: 72vw;
+					height: 36vw;
+					top: 3vw;
+					left: 13.5vw;
+					z-index: 15;
+				}
+				&:nth-child(3){
+					width: 20vw;
+					height: 13vw;
+					top: 15vw;
+					left: 43vw;
+					z-index: 20;
+				}
+				&:nth-child(4){
+					width: 20vw;
+					height: 14vw;
+					top: 26vw;
+					left: 45vw;
+					z-index: 10;
+				}
+				&:nth-child(5){
+					width: 11vw;
+					height: 7vw;
+					top: 27vw;
+					left: 58vw;
+				}
+				&:nth-child(6){
+					width: 11vw;
+					height: 9vw;
+					top: 23vw;
+					left: 63vw;
+					z-index: 31;
+				}
+				&:nth-child(7){
+					width: 15vw;
+					height: 10vw;
+					top: 25vw;
+					left: 80vw;
+				}
+				&:nth-child(8){
+					width: 16vw;
+					height: 13vw;
+					top: 31vw;
+					left: 67vw;
+				}
+				
+				&:nth-child(9){
+					width: 25vw;
+					height: 8vw;
+					top: 27vw;
+					left: 19.8vw;
+				} 
+				
+			}
+			
+		}
+			.annotation1{
+				top: 18.2vw;
+				left: 20.5vw;
+			}
+			.annotation2{
 				top: 12vw;
 				left: 48vw;
 			}
-			&:nth-child(15){
-				top: 20vw;
-				left: 47vw;
+			.annotation3{
+				top: 21vw;
+				left: 49vw;
 			}
-			&:nth-child(16){
-				top: 27vw;
-				left: 71vw;
+			.annotation4{
+				top: 17.5vw;
+				left: 65vw;
 			}
-			&:nth-child(17){
+			.annotation5{
+				top: 28vw;
+				left: 70vw;
+			}
+			.annotation6{
 				top: 21vw;
 				left: 83vw;
 			}
-		}
+			// title
+			.annotation {
+				width: 7vw;
+				height: 8vw;
+				z-index: 20;
+				position: fixed;
+				
+				
+				>view{
+					position: relative;
+					&:nth-child(1){
+						width: 7vw;
+						height: 2vw;
+						background: #F2F3F7;
+						box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(182,186,196,0.35);
+						border: 2rpx solid #FFFFFF;
+						font-weight: 400;
+						font-size: 1vw;
+						color: #333333;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						z-index: 3;
+					}
+					&:nth-child(2){
+						width: 4vw;
+						height: 2vw;
+						z-index: 2;
+						margin: -2rpx auto 0;
+						z-index: 2;
+					}
+					&:nth-child(3){
+						width: 3vw;
+						height: 5vw;
+						z-index: 1;
+						margin: -1vw auto 0;
+					}
+				}
+			}
+		
 	}
 .backgroundContainer {
 		display: flex;