hldy_app/pages/Warehouse/Warehouse.vue

<template>
	<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`"  v-show="isShow">
		<view class="wareaitem">
			<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" :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>
				</view>
				<view class="tp">
					<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>

<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">
	.wareaitem{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(255, 255, 255, 0.7);
		.tp{
			image{
				width: 100%;
				height: 100%;
			}
		}
		.operationbtn{
			width: 20vw;
			height: 10vw;
			position: absolute;
			right: 3vw;
			bottom: 2vw;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			>view{
				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); }
			}
		}
		.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: 31;
			} 
			.itemact2{
				width: 20vw;
				height: 13vw;
				top: 15vw;
				left: 43vw;
				z-index: 27;
			}
			.itemact3{
				width: 20vw;
				height: 14vw;
				top: 26vw;
				left: 45vw;
				z-index: 35;
			} 
			.itemact4{
				width: 11vw;
				height: 9vw;
				top: 23vw;
				left: 63vw;
				z-index: 36;
			}
			.itemact6{
				width: 15vw;
				height: 10vw;
				top: 25vw;
				left: 80vw;
				z-index: 35;
			}
			.itemact5{
				width: 16vw;
				height: 13vw;
				top: 31vw;
				left: 67vw;
				z-index: 35;
			}
			.itemact7{
				width: 48vw;
				height: 22vw;
				top: 35vw;
				left: 22vw;
				z-index: 31;
			}
			 
			.itemact8{
				width: 11vw;
				height: 8vw;
				top: 22vw;
				left: 56vw;
				z-index: 17;
			}
			 .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: 22.5vw;
				left: 58vw;
				z-index: 35;
			}
			.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;
			}
			.annotation3{
				top: 21vw;
				left: 49vw;
			}
			.annotation4{
				top: 17.5vw;
				left: 65vw;
			}
			.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;
		flex-direction: column;
		position: relative;
		width: 100vw;
		height: 100vh;
		background-image: url('/static/index/lightbgcnew.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
	}

	//暗黑模式
	.darkbackgroundContainer {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		background-image: url('/static/index/background.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
	}
</style>