You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
3.1 KiB
81 lines
3.1 KiB
<template>
|
|
<div class="lighting-box">
|
|
<div class="lighting-img-box">
|
|
<!-- 左上角，区域切换 -->
|
|
<div class="btn-box">
|
|
<button class="btn-item">1F</button>
|
|
<button class="btn-item">2F</button>
|
|
<button class="btn-item">站台</button>
|
|
</div>
|
|
<!-- 楼层区域 -->
|
|
<div class="area">
|
|
<div class="area-item area1" :class="{ 'isActive': area === 1 }" @click="getArea(1)">
|
|
<div class="light-group">
|
|
<div class="group-shadow group-shadow1" @click.stop="getArea(1.1)"></div>
|
|
</div>
|
|
<div class="light-group">
|
|
<div class="group-shadow group-shadow1" @click.stop="getArea(1.2)"></div>
|
|
</div>
|
|
</div>
|
|
<div class="area-item area2" @click="getArea(2)">
|
|
<div class="light-group">
|
|
<div class="group-shadow group-shadow2" @click.stop="getArea(2.1)"></div>
|
|
</div>
|
|
<div class="light-group">
|
|
<div class="group-shadow group-shadow2" @click.stop="getArea(2.2)"></div>
|
|
</div>
|
|
</div>
|
|
<div class="area-item area3" @click="getArea(3)">
|
|
<div class="light-group">
|
|
<div class="group-shadow group-shadow3" @click.stop="getArea(3.1)"></div>
|
|
</div>
|
|
</div>
|
|
<div class="area-item area4" @click="getArea(4)">
|
|
<div class="light-group">
|
|
<div class="group-shadow group-shadow4" @click.stop="getArea(4.1)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 照明设备 -->
|
|
<div class="lights">
|
|
<light :styleObject="{left: '190px', bottom: '200px'}" :type="1"></light>
|
|
<light :styleObject="{left: '245px', bottom: '125px'}" :type="2"></light>
|
|
<light :styleObject="{left: '355px', bottom: '160px'}" :type="3"></light>
|
|
<light :styleObject="{left: '295px', bottom: '230px'}" :type="3"></light>
|
|
<light :styleObject="{left: '460px', bottom: '230px'}" :type="3"></light>
|
|
<light :styleObject="{left: '510px', bottom: '190px'}" :type="3"></light>
|
|
<light :styleObject="{left: '415px', bottom: '275px'}" :type="1"></light>
|
|
</div>
|
|
</div>
|
|
<!-- 右侧抽屉的触发按钮 -->
|
|
<div class="drawer-box" v-if="!visible">
|
|
<double-left-outlined class="drawer-icon" style="color: rgba(255, 255, 255, 1)" />
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { ref } from 'vue';
|
|
import light from './light.vue';
|
|
import {
|
|
DoubleLeftOutlined,
|
|
DoubleRightOutlined
|
|
} from '@ant-design/icons-vue';
|
|
|
|
let area = ref(1)
|
|
let visible = ref(false)
|
|
|
|
|
|
const getArea = (number: any) => {
|
|
alert(number)
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import "./indexs.less";
|
|
.isActive {
|
|
border: 2px solid white !important;
|
|
}
|
|
</style>
|
|
|