438 lines
8.7 KiB
Vue
438 lines
8.7 KiB
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>
|