<template>
|
<div class="device-number-info">
|
<div class="device-l">
|
<div class="device-t">本机设备编码</div>
|
<div class="device-b">
|
<div class="device-info">
|
{{ deviceCurrent }}
|
</div>
|
</div>
|
</div>
|
<div class="device-r">
|
<div class="device-t">云端设备编码</div>
|
<div class="device-b">
|
<div v-for="(item, index) in deviceList" :key="index" class="device-info">
|
{{ item.value }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { toRefs } from 'vue'
|
const deviceList = [
|
{
|
value: '123454'
|
},
|
{
|
value: '54321'
|
}
|
]
|
const deviceCurrent = '456789'
|
</script>
|
|
<style scoped lang="scss">
|
$status-default: #2c5dbb82;
|
$status-running: #00ff00f0;
|
$status-ready: #0059ffd0;
|
$status-border: #ffffff21;
|
$status-dark-font: #efefef;
|
$status-off: red;
|
.device-number-info {
|
width: 100%;
|
height: 180px;
|
margin-top: 20px;
|
color: #fff;
|
overflow: hidden;
|
float: left;
|
text-align: center;
|
font-size: 12px;
|
background: $status-default;
|
border: 1px solid $status-border;
|
box-sizing: border-box;
|
border-radius: 4px;
|
padding: 5px 20px;
|
.device-l {
|
width: 120px;
|
float: left;
|
}
|
.device-r {
|
width: calc(100% - 130px);
|
float: right;
|
}
|
.device-t {
|
text-align: left;
|
height: 25px;
|
line-height: 25px;
|
}
|
.device-b {
|
width: 100%;
|
height: calc(100% - 35px);
|
overflow: hidden;
|
}
|
.device-info {
|
padding: 0px 6px;
|
font-size: 12px;
|
line-height: 20px;
|
background: $status-ready;
|
color: #fff;
|
border-radius: 4px;
|
float: left;
|
margin-right: 5px;
|
margin-top: 5px;
|
}
|
}
|
</style>
|
