From 6a4b6430d3f5b029b84826ef6583b9c3917f5978 Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Wed, 29 Nov 2023 19:15:46 +0800
Subject: [PATCH] beautify disk usage layout

---
 .../src/views/Cluster/MachineDetail/Base.vue  | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/Cluster/MachineDetail/Base.vue b/frontend/src/views/Cluster/MachineDetail/Base.vue
index dfffb1e..6b07bb0 100644
--- a/frontend/src/views/Cluster/MachineDetail/Base.vue
+++ b/frontend/src/views/Cluster/MachineDetail/Base.vue
@@ -5,10 +5,13 @@
             <el-descriptions-item label="所属部门"> {{ machineInfo.department }} </el-descriptions-item>
             <el-descriptions-item label="监控状态"> {{ machineInfo.state === 1 ? '在线' : machineInfo.state === 2 ? '离线' :
                 'unknown' }} </el-descriptions-item>
-            <el-descriptions-item label="系统版本"> {{ machineInfo.platform + ' ' + machineInfo.platform_version }} </el-descriptions-item>
+            <el-descriptions-item label="系统版本"> {{ machineInfo.platform + ' ' + machineInfo.platform_version }}
+            </el-descriptions-item>
             <el-descriptions-item label="架构"> {{ machineInfo.kernel_arch }} </el-descriptions-item>
-            <el-descriptions-item label="cpu"> {{ machineInfo.cpu_num + '核 ' + machineInfo.model_name }} </el-descriptions-item>
-            <el-descriptions-item label="内存"> {{ (machineInfo.memory_total / 1024 / 1024).toFixed(2) + 'G' }} </el-descriptions-item>
+            <el-descriptions-item label="cpu"> {{ machineInfo.cpu_num + '核 ' + machineInfo.model_name }}
+            </el-descriptions-item>
+            <el-descriptions-item label="内存"> {{ (machineInfo.memory_total / 1024 / 1024).toFixed(2) + 'G' }}
+            </el-descriptions-item>
             <el-descriptions-item label="内核版本"> {{ machineInfo.kernel_version }} </el-descriptions-item>
             <el-descriptions-item :label="item.device" :span="2" v-for="item in machineInfo.disk_usage" :key="item.$index">
                 <span class="diskMount">{{ "挂载点：" + item.path + "(" + item.total + ")" }}</span>
@@ -50,4 +53,30 @@ onMounted(() => {
 
 </script>
 
-<style lang="scss"></style>
\ No newline at end of file
+<style lang="scss">
+.diskMount {
+    display: inline-block;
+    font-size: 12px;
+    word-break: break-all;
+    width: 22%;
+    text-align: left;
+}
+
+.progress {
+    display: inline-block;
+    width: 74%;
+    margin-left: 2%;
+    border: 1px solid rgba(11, 35, 117, .5);
+    background: #fff;
+    border-radius: 10px;
+
+    span {
+        display: inline-block;
+        background: rgba(11, 35, 117, .6);
+        text-align: center;
+        color: #fff;
+        border: 1px solid #fff;
+        border-radius: 10px;
+    }
+}
+</style>
\ No newline at end of file
-- 
Gitee