From f148f9a0890a4c7edb1a94ad71f5982994a6ec81 Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Tue, 27 Aug 2024 20:34:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=95=E9=83=A8=E6=A0=B7=E5=BC=8F=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9&=E8=AE=A1=E5=88=92=E6=A0=91=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layouts/components/Footer/index.vue   | 65 ++++++++++++++++---
 .../src/layouts/components/Main/index.scss    |  2 +-
 frontend/src/layouts/index.vue                |  3 +
 frontend/src/styles/common.scss               |  5 +-
 frontend/src/views/home/components/tree.vue   |  6 +-
 frontend/src/views/home/tabs/dashboard.vue    |  6 +-
 6 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/frontend/src/layouts/components/Footer/index.vue b/frontend/src/layouts/components/Footer/index.vue
index a665738..38638dc 100644
--- a/frontend/src/layouts/components/Footer/index.vue
+++ b/frontend/src/layouts/components/Footer/index.vue
@@ -7,9 +7,15 @@
         <arrow-down />
       </el-icon>
     </span> -->
-      <el-button type="primary">
-        {{ title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
-      </el-button>
+      <!-- <el-button type="primary"> -->
+      <div class="change_mode">
+        {{ title }}
+        <el-icon class="el-icon--right change_mode_down"
+          ><arrow-down
+        /></el-icon>
+        <el-icon class="el-icon--right change_mode_up"><arrow-up /></el-icon>
+      </div>
+      <!-- </el-button> -->
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item @click="title = '模拟式模式'"
@@ -24,7 +30,11 @@
         </el-dropdown-menu>
       </template>
     </el-dropdown>
-    <p> <a href="http://www.shining-electric.com/" target="_blank"> 2024 © 南京灿能电力自动化股份有限公司 </a></p>
+    <p>
+      <a href="http://www.shining-electric.com/" target="_blank">
+        2024 © 南京灿能电力自动化股份有限公司
+      </a>
+    </p>
   </div>
 </template>
 <script lang="ts" setup>
@@ -33,14 +43,49 @@ const title = ref("模拟式模块");
 </script>
 <style scoped lang="scss">
 @import "./index.scss";
-.footer{
+.footer {
   position: relative;
-  p{
+  background-color: var(--el-color-primary);
+  // .el-button:hover {
+  //   background-color: var(--el-color-primary) !important;
+  //   border: none !important;
+  //   outline: none !important;
+  // }
+  .change_mode {
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100%;
+    width: auto;
+    font-size: 14px;
+    .change_mode_down {
+      display: block;
+    }
+    .change_mode_up {
+      display: none;
+    }
+  }
+  .change_mode:hover {
+    .change_mode_down {
+      display: none;
+    }
+    .change_mode_up {
+      display: block;
+    }
+  }
+  .el-dropdown {
+    z-index: 1001;
+  }
+  p {
     position: absolute;
- width: 100%;
- height: 100%;
- text-align: center;
- line-height: 40px;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    line-height: 40px;
+    a {
+      color: #fff;
+    }
   }
 }
 </style>
diff --git a/frontend/src/layouts/components/Main/index.scss b/frontend/src/layouts/components/Main/index.scss
index fd4f175..b6af3da 100644
--- a/frontend/src/layouts/components/Main/index.scss
+++ b/frontend/src/layouts/components/Main/index.scss
@@ -1,6 +1,6 @@
 .el-main {
   box-sizing: border-box;
-  padding: 10px 12px;
+  padding: 10px 12px;//主体padding
   overflow-x: hidden;
   background-color: var(--el-bg-color-page);
 }
diff --git a/frontend/src/layouts/index.vue b/frontend/src/layouts/index.vue
index 7761380..a1bbe6e 100644
--- a/frontend/src/layouts/index.vue
+++ b/frontend/src/layouts/index.vue
@@ -30,5 +30,8 @@ const layout = computed(() => globalStore.layout);
 <style scoped lang="scss">
 .layout {
   min-width: 600px;
+  position: fixed;
+  left: 0;
+  top: 0;
 }
 </style>
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index e94465c..a72fa0a 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -74,9 +74,12 @@
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
+  background-color: var(--el-color-primary);
 }
+/* 滚动条实际可拖动部分的颜色 */
 ::-webkit-scrollbar-thumb {
-  background-color: var(--el-border-color-darker);
+  // background-color: var(--el-border-color-darker);
+  background-color: var(--el-color-primary);
   border-radius: 20px;
 }
 
diff --git a/frontend/src/views/home/components/tree.vue b/frontend/src/views/home/components/tree.vue
index d61a481..6dad8bd 100644
--- a/frontend/src/views/home/components/tree.vue
+++ b/frontend/src/views/home/components/tree.vue
@@ -5,7 +5,7 @@
         placeholder="请输入计划名称"
         v-model="searchForm.planName"
       ></el-input>
-      <Menu style="width: 26px;height: 26px; margin-left: 8px;cursor: pointer;" @click.stop="detail({})" />
+      <Menu style="width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)" @click.stop="detail({})" />
     </div>
     <div class="tree_container">
       <el-tree
@@ -19,8 +19,8 @@
         @node-click="handleNodeClick"
       >
         <template #default="{ node, data }">
-          <span class="custom-tree-node">
-            <Platform v-if="!data.pid" style="width:14px;height: 12px;margin-right:8px;" :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}"/>
+          <span class="custom-tree-node" style="display: flex;align-items: center;">
+            <Platform v-if="!data.pid" style="width:18px;height: 18px;margin-right:8px;" :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}"/>
             <span>{{ node.label }}</span>
             <!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
           </span>
diff --git a/frontend/src/views/home/tabs/dashboard.vue b/frontend/src/views/home/tabs/dashboard.vue
index 3b1e37a..506d326 100644
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -6,9 +6,8 @@
     </div>
     <!-- <span class="new_span">测试scss颜色</span> -->
     <div class="right_container">
-
-            <!-- 功能选择 -->
-            <div class="container_function">
+      <!-- 功能选择 -->
+      <div class="container_function">
         <!-- <div class="function_title"><p>功能选择</p></div> -->
         <div class="function_main">
           <div
@@ -74,7 +73,6 @@
           ></pie>
         </div>
       </div>
-
       <!-- 筛选条件 -->
       <div class="container_title">
         <el-form :model="form" label-width="80px" :inline="true">