<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>
