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.
151 lines
3.3 KiB
151 lines
3.3 KiB
<template>
|
|
<div class="info-box">
|
|
<div class="box-title">
|
|
<div class="dot"></div>
|
|
<span>办公区域扶梯A</span>
|
|
</div>
|
|
<div class="box-inner">
|
|
<!-- 是否开启 -->
|
|
<div class="item">
|
|
<div class="item-box">
|
|
<div class="icon">
|
|
<div class="icon-item">
|
|
<img src="../image/liftState/lift-normal.svg" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item-text">开启</div>
|
|
</div>
|
|
<!-- 是否故障 -->
|
|
<div class="item">
|
|
<div class="item-box">
|
|
<div class="icon">
|
|
<div class="icon-item">
|
|
<img src="../image/liftState/lift-normal.svg" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item-text">开启</div>
|
|
</div>
|
|
<!-- 如何运行 -->
|
|
<div class="item">
|
|
<div class="item-box">
|
|
<div class="icon">
|
|
<div class="icon-item">
|
|
<img src="../image/liftState/lift-normal.svg" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item-text">开启</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
// 请求
|
|
|
|
// 初始化 ===========================================================
|
|
|
|
onMounted(() => {
|
|
|
|
})
|
|
|
|
// tab页部分 ========================================================
|
|
|
|
// 运行状态
|
|
const runState = ref('1');
|
|
// 电梯状态
|
|
const liftState = ref('2');
|
|
|
|
|
|
</script>
|
|
<style lang="less" scoped>
|
|
// 面板
|
|
.info-box {
|
|
// 字体颜色变量
|
|
--text: rgb(20, 255, 255);
|
|
|
|
width: 240px;
|
|
height: 130px;
|
|
display: flex;
|
|
gap: 5px;
|
|
flex-direction: column;
|
|
background: rgb(17, 44, 86, 0.9);
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 8px;
|
|
border: 3px solid var(--text);
|
|
// 面板标题
|
|
.box-title {
|
|
height: auto;
|
|
color: var(--text);
|
|
// 标题前小方块
|
|
.dot {
|
|
display: inline-block;
|
|
width: 2px;
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
background: var(--text);
|
|
}
|
|
// 标题
|
|
span {
|
|
padding-left: 8px;
|
|
}
|
|
}
|
|
// 下半部分
|
|
.box-inner {
|
|
flex: 1;
|
|
display: flex;
|
|
padding: 0 10px;
|
|
// 单个盒子（3盒子）
|
|
.item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// 盒子中放置图片的容器
|
|
.item-box {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// border: 1px solid red;
|
|
.icon {
|
|
width: 55px;
|
|
height: 55px;
|
|
background-image: url(../image/box.svg);
|
|
background-size: 130% 130%;
|
|
background-repeat: no-repeat;
|
|
background-position: left -8px top -8px;
|
|
// border: 1px solid red;
|
|
position: relative;
|
|
.icon-item {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
margin: auto;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.item-text {
|
|
height: 20px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: white;
|
|
user-select: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|