From 5c2a12a0436d01b48439528864811777af9aae68 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期三, 01 十一月 2023 15:28:27 +0800
Subject: [PATCH] 集群状态的组件开发 缺背景图
---
src/views/dashboard/components/DeviceStatusInfo.vue | 50 ++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 40 insertions(+), 10 deletions(-)
diff --git a/src/views/dashboard/components/DeviceStatusInfo.vue b/src/views/dashboard/components/DeviceStatusInfo.vue
index 3bef1ae..1593dc7 100644
--- a/src/views/dashboard/components/DeviceStatusInfo.vue
+++ b/src/views/dashboard/components/DeviceStatusInfo.vue
@@ -70,7 +70,8 @@
</span>
</span>
</span>
- <div class="device-b">杩愯鏃堕棿锛�1澶�1灏忔椂23鍒�12绉�</div>
+ <div class="device-info">涓昏妭鐐�</div>
+ <div class="device-b title-bng"><span>鑺傜偣鏁�</span> <i>120</i></div>
</div>
</div>
</template>
@@ -97,20 +98,15 @@
$status-dark-font: #efefef;
$status-off: red;
.device-status-info {
- width: calc(50% - 5px);
+ width: 50%;
height: 150px;
line-height: 40px;
- background: $status-done;
margin-top: 10px;
- border-radius: 4px;
color: #fff;
- border: 1px solid $status-border;
- box-sizing: border-box;
overflow: hidden;
float: left;
text-align: center;
font-size: 15px;
-
.duan {
color: $status-off;
font-size: 26px;
@@ -128,8 +124,13 @@
.color-one,
.color-two {
height: 100%;
- width: 100%;
- margin-right: 10px;
+ width: calc(100% - 10px);
+ margin-right: 20px;
+ background: $status-done;
+ border: 1px solid $status-border;
+ box-sizing: border-box;
+ border-radius: 4px;
+ padding-top: 10px;
.device-m {
width: 100%;
display: inline-block;
@@ -149,7 +150,36 @@
}
}
.color-two {
- margin-left: 10px;
+ margin-right: 0px;
+ position: relative;
+ .device-info {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ padding: 0px 6px;
+ font-size: 12px;
+ line-height: 20px;
+ background: $status-running;
+ color: #fff;
+ border-radius: 8px;
+ }
+ .title-bng {
+ height: 32px;
+ line-height: 32px;
+ background: url('../../../assets/images/number.png') no-repeat center center / cover;
+ span {
+ height: 32px;
+ display: inline-block;
+ text-align: center;
+ display: inline-block;
+ float: left;
+ margin-left: 35%;
+ }
+ i {
+ float: right;
+ margin-right: 15px;
+ }
+ }
}
}
</style>
--
Gitblit v1.8.0