81 lines
3.1 KiB
Vue
81 lines
3.1 KiB
Vue
<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>
|
||
|