207 lines
3.8 KiB
Vue
207 lines
3.8 KiB
Vue
<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>
|
|
<view class="annotation" 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>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick,defineProps } from 'vue';
|
|
const darkFans = ref(false);
|
|
const props = defineProps({
|
|
isShow: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
});
|
|
</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%;
|
|
}
|
|
}
|
|
.annotation{
|
|
width: 7vw;
|
|
height: 8vw;
|
|
z-index: 20;
|
|
>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;
|
|
}
|
|
}
|
|
}
|
|
>view{
|
|
position: absolute;
|
|
&:nth-child(1){
|
|
width: 26vw;
|
|
height: 22vw;
|
|
top: 17vw;
|
|
left: 8vw;
|
|
z-index: 10;
|
|
}
|
|
&:nth-child(2){
|
|
width: 68vw;
|
|
height: 22vw;
|
|
top: 4vw;
|
|
left: 18vw;
|
|
}
|
|
&:nth-child(3){
|
|
width: 20vw;
|
|
height: 13vw;
|
|
top: 15vw;
|
|
left: 43vw;
|
|
}
|
|
&:nth-child(4){
|
|
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){
|
|
width: 11vw;
|
|
height: 9vw;
|
|
top: 23vw;
|
|
left: 63vw;
|
|
z-index: 5;
|
|
}
|
|
&:nth-child(7){
|
|
width: 13vw;
|
|
height: 11vw;
|
|
top: 25vw;
|
|
left: 80vw;
|
|
}
|
|
&:nth-child(8){
|
|
width: 15vw;
|
|
height: 14vw;
|
|
top: 31vw;
|
|
left: 67vw;
|
|
}
|
|
&:nth-child(9){
|
|
width: 48vw;
|
|
height: 22vw;
|
|
top: 34vw;
|
|
left: 21vw;
|
|
z-index: 11;
|
|
}
|
|
&:nth-child(10){
|
|
width: 17vw;
|
|
height: 10vw;
|
|
top: 48vw;
|
|
left: 26vw;
|
|
z-index: 12;
|
|
}
|
|
&:nth-child(11){
|
|
width: 11vw;
|
|
height: 8vw;
|
|
top: 22vw;
|
|
left: 56vw;
|
|
}
|
|
&:nth-child(12){
|
|
width: 3vw;
|
|
height: 3vw;
|
|
top: 21vw;
|
|
left: 57vw;
|
|
}
|
|
// title
|
|
&:nth-child(13){
|
|
top: 15.5vw;
|
|
left: 21.5vw;
|
|
}
|
|
&:nth-child(14){
|
|
top: 12vw;
|
|
left: 48vw;
|
|
}
|
|
&:nth-child(15){
|
|
top: 20vw;
|
|
left: 47vw;
|
|
}
|
|
&:nth-child(16){
|
|
top: 27vw;
|
|
left: 71vw;
|
|
}
|
|
&:nth-child(17){
|
|
top: 21vw;
|
|
left: 83vw;
|
|
}
|
|
}
|
|
}
|
|
.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>
|