功能选择背景色样式更改

frontend/src/views/home/tabs/dashboard.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="static">
     <div class="left_tree">
-      <tree ref="treeRef"  @jump="jump"/>
+      <tree ref="treeRef" @jump="jump" />
     </div>
     <!-- <span class="new_span">测试scss颜色</span> -->
     <div class="right_container">
@@ -105,20 +105,23 @@
       </div>
       <!-- 功能选择 -->
       <div class="container_function">
-        <div
-          class="function_item"
-          :class="
-            item.checked ? 'function_item checked_function' : 'function_item'
-          "
-          v-for="(item, index) in tabsList"
-          :key="index"
-          @click="handleCheckFunction(index)"
-        >
-          <div class="item_img">
-            <img :src="item.img" alt="" />
-          </div>
-          <div class="item_text">
-            <p>{{ item.label }}</p>
+        <div class="function_title"><p>功能选择</p></div>
+        <div class="function_main">
+          <div
+            class="function_item"
+            :class="
+              item.checked ? 'function_item checked_function' : 'function_item'
+            "
+            v-for="(item, index) in tabsList"
+            :key="index"
+            @click="handleCheckFunction(index)"
+          >
+            <div class="item_img">
+              <img :src="item.img" alt="" />
+            </div>
+            <div class="item_text">
+              <p>{{ item.label }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -181,8 +184,8 @@ import pie from "@/components/echarts/pie/default.vue";
 import { useRouter } from "vue-router";
 import tree from "../components/tree.vue";
 import Table from "../components/table.vue";
-import {data} from "@/api/plan/static.json"
-console.log(data,"??????????185");
+import { data } from "@/api/plan/static.json";
+console.log(data, "??????????185");
 const treeRef = ref();
 const form: any = ref({
   activeTabs: 0, //功能选择
@@ -391,15 +394,15 @@ const handleCheckFunction = (val: any) => {
       item.checked = false;
     }
   });
-  form.value.activeTabs=val;
+  form.value.activeTabs = val;
 };
 // 树点击跳转
-const jump=(e:any) => {
-  console.log("🚀 ~ jump ~ e:", e)
+const jump = (e: any) => {
+  console.log("🚀 ~ jump ~ e:", e);
   router.push({
     path: "/plan/planList",
   });
-}
+};
 onMounted(() => {
   console.log();
   getTree();
@@ -455,57 +458,78 @@ onMounted(() => {
       width: 100%;
       height: 70px;
       background: #fff;
+      border-radius: 4px;
       display: flex;
       justify-content: space-between;
       margin-bottom: 10px;
-      padding: 10px 50px;
+      padding: 10px 50px 10px 30px;
       box-sizing: border-box;
-      .function_item {
-        width: 120px;
-        height: 50px;
+      .function_title {
+        height: 100%;
+
+        width: 100px;
+        // line-height: 70px;
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        cursor: pointer;
-        // border: 1px solid var(--el-color-primary);
-        .item_img {
-          width: 50px;
-          height: 50px;
-          border-radius: 50%;
-          background-color: #c6c6c6;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          img {
-            width: 30px;
-            height: auto;
-          }
-        }
-        .item_img:nth-child(3),
-        .item_img:nth-child(6) {
-          padding: 10px !important;
-          img {
-            width: 20px !important;
-            height: auto;
-          }
-        }
-        .item_text {
-          p {
-            margin: 0;
-            color: var(--el-color-primary);
-            font-weight: 800;
-            color: #000;
-          }
+        justify-content: flex-start;
+        p {
+          font-size: 14px;
+          font-weight: 800;
+          text-align: center;
+          margin: 0;
         }
       }
-      .function_item:hover,
-      .checked_function {
-        .item_img {
-          background-color: var(--el-color-primary);
+      .function_main {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        .function_item {
+          width: 120px;
+          height: 50px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          cursor: pointer;
+          // border: 1px solid var(--el-color-primary);
+          .item_img {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background-color: #607eab;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+              width: 30px;
+              height: auto;
+            }
+          }
+          .item_img:nth-child(3),
+          .item_img:nth-child(6) {
+            padding: 10px !important;
+            img {
+              width: 20px !important;
+              height: auto;
+            }
+          }
+          .item_text {
+            p {
+              margin: 0;
+              color: var(--el-color-primary);
+              font-weight: 800;
+              color: #000;
+            }
+          }
         }
-        .item_text {
-          p {
-            color: var(--el-color-primary);
+        .function_item:hover,
+        .checked_function {
+          .item_img {
+            background-color: var(--el-color-primary);
+          }
+          .item_text {
+            p {
+              color: var(--el-color-primary);
+            }
           }
         }
       }
@@ -529,7 +553,7 @@ onMounted(() => {
     }
     .container_table {
       width: 100%;
-flex:1;
+      flex: 1;
       border-radius: 4px;
     }
   }