152 lines
3.3 KiB
Vue
152 lines
3.3 KiB
Vue
<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>
|