100 lines
2.1 KiB
Vue
100 lines
2.1 KiB
Vue
<template>
|
|
<Card :title="title">
|
|
<DeviceCard :leftCount="{ value: 22, label: '在线设备' }" :rightCount="{ value: 65, label: '离线设备' }">
|
|
<div class="list">
|
|
<div class="list-head">
|
|
<div class="device">设备名称</div>
|
|
<div class="enter">进场人数</div>
|
|
<div class="outer">出场人数</div>
|
|
</div>
|
|
<div class="list-item" :class="i === 2 ? 'offline' : 'online'" v-for="i in 3" :key="i">
|
|
<div class="status">在线</div>
|
|
<div class="label">1号塔吊</div>
|
|
<div class="enter">66</div>
|
|
<div class="outer">99</div>
|
|
</div>
|
|
</div>
|
|
</DeviceCard>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import Card from '../components/Card.vue'
|
|
import DeviceCard from './components/DeviceCard.vue'
|
|
export default {
|
|
components: { Card, DeviceCard },
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.list {
|
|
padding: 0 10px;
|
|
color: #fff;
|
|
.list-head {
|
|
margin-bottom: 6px;
|
|
padding: 0 16px;
|
|
font-size: 12px;
|
|
display: flex;
|
|
.device {
|
|
margin-left: 56px;
|
|
margin-right: auto;
|
|
}
|
|
.enter {
|
|
width: 70px;
|
|
}
|
|
.outer {
|
|
width: 70px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.list-item {
|
|
margin-bottom: 6px;
|
|
padding: 0 16px;
|
|
height: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
&.online {
|
|
background-image: linear-gradient(90deg, rgba(23, 54, 74, 1), rgba(23, 54, 74, 0.2));
|
|
.status {
|
|
background-color: #3cabfd;
|
|
}
|
|
}
|
|
&.offline {
|
|
background-image: linear-gradient(90deg, rgba(67, 42, 63, 1), rgba(67, 42, 63, 0.2));
|
|
.status {
|
|
background-color: #ff6c7f;
|
|
}
|
|
}
|
|
.status {
|
|
margin-right: 20px;
|
|
width: 36px;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
border-radius: 9px;
|
|
}
|
|
.label {
|
|
margin-right: auto;
|
|
font-size: 14px;
|
|
}
|
|
.enter {
|
|
width: 70px;
|
|
}
|
|
.outer {
|
|
width: 70px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
</style>
|