63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
|
<template>
|
|||
|
|
<div class="bl-box-container">
|
|||
|
|
<div class="box-item pos">{{ tLang('messages', '机架号') }}:
|
|||
|
|
<div>104019564#</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box-item">{{ tLang('messages', '设备状态') }}:
|
|||
|
|
<div class="status green"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box-item">
|
|||
|
|
<div style="text-wrap: nowrap;">{{ tLang('messages', '型号') }}:</div>
|
|||
|
|
<div> RPSP-NM-I+K-1-1800-Ⅰ-WC2+K-RF-1P220</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box-img">
|
|||
|
|
<el-image :src="lqImg" fit="contain"></el-image>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang='ts'>
|
|||
|
|
import { ref, getCurrentInstance } from 'vue'
|
|||
|
|
const { proxy } = getCurrentInstance()
|
|||
|
|
let lqImg = require('./../images/lq.png');
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.bl-box-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.box-item {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 80px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
div {
|
|||
|
|
margin-left: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.pos {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 80px;
|
|||
|
|
left: 190px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-img {
|
|||
|
|
width: 100%;
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|