From 0912a878749e1671c207ecd5ca321c501108593d Mon Sep 17 00:00:00 2001
From: wangdan <dan.wang@fit2cloud.com>
Date: Thu, 16 Feb 2023 19:04:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E6=A6=82=E5=86=B5?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/app-layout/footer/index.vue    |  4 +-
 .../src/components/card-with-header/index.vue | 41 +++++++++++++------
 frontend/src/lang/modules/zh.ts               |  2 +-
 frontend/src/main.ts                          |  1 -
 frontend/src/styles/common-dark.scss          |  0
 frontend/src/styles/element.scss              |  9 ++++
 frontend/src/styles/index.scss                |  1 -
 frontend/src/views/home/app/index.vue         | 11 +++--
 frontend/src/views/home/index.vue             | 14 +++----
 frontend/src/views/home/status/index.vue      | 14 +++----
 10 files changed, 59 insertions(+), 38 deletions(-)
 delete mode 100644 frontend/src/styles/common-dark.scss

diff --git a/frontend/src/components/app-layout/footer/index.vue b/frontend/src/components/app-layout/footer/index.vue
index 248c4ce4d..76c5e73d6 100644
--- a/frontend/src/components/app-layout/footer/index.vue
+++ b/frontend/src/components/app-layout/footer/index.vue
@@ -19,13 +19,13 @@
     border-top: 1px solid #e4e7ed;
     box-sizing: border-box;
     a {
-        font-size: 14px;
+        font-size: 12px;
         color: #858585;
         text-decoration: none;
         letter-spacing: 0.5px;
     }
     span {
-        font-size: 14px;
+        font-size: 12px;
         color: #858585;
         text-decoration: none;
         letter-spacing: 0.5px;
diff --git a/frontend/src/components/card-with-header/index.vue b/frontend/src/components/card-with-header/index.vue
index 46169fe56..9a569aa04 100644
--- a/frontend/src/components/card-with-header/index.vue
+++ b/frontend/src/components/card-with-header/index.vue
@@ -2,7 +2,6 @@
     <div>
         <el-card :style="{ height: height }" class="home-card">
             <div class="header">
-                <span></span>
                 <span>{{ header }}</span>
             </div>
 
@@ -24,20 +23,36 @@ defineProps({
 <style scoped lang="scss">
 .home-card {
     .header {
-        span:first-child {
-            background: $primary-color;
-            border-radius: 7px;
-            flex: none;
-            order: 0;
-            flex-grow: 0;
-            padding: 3px;
+        span {
+            position: relative;
+            font-size: 16px;
+            font-weight: 500;
+            margin-left: 18px;
+            &::before {
+                position: absolute;
+                top: 4px;
+                left: -13px;
+                width: 4px;
+                height: 14px;
+                content: '';
+                background: $primary-color;
+                border-radius: 10px;
+            }
         }
+        // span:first-child {
+        //     background: $primary-color;
+        //     border-radius: 7px;
+        //     flex: none;
+        //     order: 0;
+        //     flex-grow: 0;
+        //     padding: 3px;
+        // }
 
-        span:nth-child(2) {
-            font-size: 18px;
-            font-weight: 700;
-            margin-left: 10px;
-        }
+        // span:nth-child(2) {
+        //     font-size: 18px;
+        //     font-weight: 700;
+        //     margin-left: 10px;
+        // }
     }
 
     div:nth-child(2) {
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 647f16423..ddfdb4a80 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -201,7 +201,7 @@ export default {
         logs: '面板日志',
     },
     home: {
-        overview: '概 览',
+        overview: '概览',
         appInstalled: '已安装应用',
         systemInfo: '系统信息',
         hostname: '主机名称',
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 01daf9a67..007d0b7e3 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,7 +5,6 @@ import App from './App.vue';
 
 import '@/styles/index.scss';
 // import '@/styles/reset.scss';
-import '@/styles/common-dark.scss';
 import '@/styles/common.scss';
 import '@/assets/fonts/font.scss';
 import '@/assets/iconfont/iconfont.css';
diff --git a/frontend/src/styles/common-dark.scss b/frontend/src/styles/common-dark.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/src/styles/element.scss b/frontend/src/styles/element.scss
index b92b33f5e..ef996e895 100644
--- a/frontend/src/styles/element.scss
+++ b/frontend/src/styles/element.scss
@@ -1,4 +1,5 @@
 html {
+    --el-box-shadow-light: 0px 0px 4px rgba(0, 94, 235, 0.1) !important;
     // * menu
     --el-menu-bg-color: rgba(0, 94, 235, 0.1) !important;
     --el-menu-item-bg-color: rgba(255, 255, 255, 0.3);
@@ -179,4 +180,12 @@ html {
 
 .el-avatar {
     --el-avatar-bg-color: #ffffff !important;
+    border: 0.5px solid #eaeaea;
+    box-shadow: 0px 0px 2px 1px rgba(186, 186, 186, 0.22);
+    border-radius: 8px !important;
+    padding: 5px;
+}
+
+.el-card {
+    border: none;
 }
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 87160f8f2..e3a0009b5 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,5 +1,4 @@
 @use 'fit2cloud-ui-plus/src/styles/index.scss' as *;
-@use './element-dark.scss';
 @use './element.scss';
 @use './reset.scss';
 
diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue
index 9cb8d1750..90886ec5a 100644
--- a/frontend/src/views/home/app/index.vue
+++ b/frontend/src/views/home/app/index.vue
@@ -5,7 +5,7 @@
                 <el-row :gutter="10">
                     <el-col :span="5">
                         <div>
-                            <el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
+                            <el-avatar shape="square" :size="55" :src="'data:image/png;base64,' + app.icon" />
                         </div>
                     </el-col>
                     <el-col :span="15">
@@ -33,7 +33,6 @@
                         </el-button>
                     </el-col>
                 </el-row>
-                <div class="h-app-divider"></div>
             </div>
         </el-scrollbar>
     </div>
@@ -101,18 +100,18 @@ defineExpose({
 <style lang="scss">
 .h-app-card {
     cursor: pointer;
-    padding: 15px;
+    padding: 10px 15px;
 
     .h-app-content {
         .h-app-title {
             font-weight: 500;
-            font-size: 16px;
+            font-size: 15px;
         }
 
         .h-app-desc {
             span {
                 font-weight: 400;
-                font-size: 14px;
+                font-size: 12px;
                 color: #646a73;
             }
         }
@@ -126,7 +125,7 @@ defineExpose({
 }
 
 .h-app-divider {
-    margin-top: 5px;
+    margin-top: 13px;
     border: 0;
     border-top: var(--panel-border);
 }
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index d374cdcc5..3e8909263 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -10,7 +10,7 @@
         />
         <el-row :gutter="20" style="margin-top: 20px">
             <el-col :span="16">
-                <CardWithHeader :header="$t('home.overview')" height="180px">
+                <CardWithHeader :header="$t('home.overview')" height="146px">
                     <template #body>
                         <div class="h-overview">
                             <el-row>
@@ -46,7 +46,7 @@
                         </div>
                     </template>
                 </CardWithHeader>
-                <CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px" height="285px">
+                <CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px" height="275px">
                     <template #body>
                         <Status ref="statuRef" />
                     </template>
@@ -117,7 +117,7 @@
                 </CardWithHeader>
             </el-col>
             <el-col :span="8">
-                <CardWithHeader :header="$t('home.systemInfo')" height="350px">
+                <CardWithHeader :header="$t('home.systemInfo')" height="306px">
                     <template #body>
                         <el-descriptions :column="1" class="h-systemInfo">
                             <el-descriptions-item class-name="system-content">
@@ -583,14 +583,14 @@ onBeforeUnmount(() => {
     text-align: center;
 
     span:first-child {
-        font-size: 18px;
+        font-size: 14px;
         color: #646a73;
     }
 
     .count {
         margin-top: 10px;
         span {
-            font-size: 28px;
+            font-size: 25px;
             color: $primary-color;
             font-weight: 500;
             line-height: 32px;
@@ -605,12 +605,12 @@ onBeforeUnmount(() => {
 
 .system-label {
     font-weight: 400 !important;
-    font-size: 16px !important;
+    font-size: 14px !important;
     color: #1f2329;
 }
 
 .system-content {
-    font-size: 15px !important;
+    font-size: 13px !important;
 }
 
 .monitor-tags {
diff --git a/frontend/src/views/home/status/index.vue b/frontend/src/views/home/status/index.vue
index b888d9275..34751e7a2 100644
--- a/frontend/src/views/home/status/index.vue
+++ b/frontend/src/views/home/status/index.vue
@@ -183,22 +183,22 @@ const freshChart = (chartName: string, Title: string, Data: number) => {
                 text: Data + '%',
                 textStyle: {
                     color: '#0f0f0f',
-                    lineHeight: 30,
+                    lineHeight: 25,
                     fontSize: 20,
                     fontWeight: '400',
                 },
-                left: '50%',
+                left: '49%',
                 top: '32%',
                 subtext: Title,
                 subtextStyle: {
-                    color: '#000000',
-                    fontSize: 14,
+                    color: '#646A73',
+                    fontSize: 13,
                 },
                 textAlign: 'center',
             },
         ],
         polar: {
-            radius: ['72%', '92%'],
+            radius: ['71%', '82%'],
             center: ['50%', '50%'],
         },
         angleAxis: {
@@ -245,7 +245,7 @@ const freshChart = (chartName: string, Title: string, Data: number) => {
             },
             {
                 type: 'pie',
-                radius: ['0%', '55%'],
+                radius: ['0%', '61%'],
                 center: ['50%', '50%'],
                 label: {
                     show: false,
@@ -256,7 +256,7 @@ const freshChart = (chartName: string, Title: string, Data: number) => {
                         value: 0,
                         itemStyle: {
                             shadowColor: '#e3e3e3',
-                            shadowBlur: 20,
+                            shadowBlur: 5,
                         },
                     },
                 ],