style: 调整菜单和卡片样式，优化界面一致性

- 更新菜单项和子菜单的文本颜色及背景色
- 调整卡片布局和阴影效果，提升视觉层次
- 统一待办事项和数据统计模块的样式

src/App.vue

@@ -14,3 +14,6 @@ const currentLocale = computed(() => zhCn);
     <ReDialog />
   </ElConfigProvider>
 </template>
+
+<style scoped lang="scss">
+</style>

src/layout/components/sidebar/horizontal.vue

@@ -39,7 +39,8 @@ nextTick(() => {
       <img src="/logo.png" alt="logo" />
       <span>{{ title }}</span>
     </div>
-    <el-menu router ref="menuRef" mode="horizontal" class="horizontal-header-menu" :default-active="defaultActive">
+    <el-menu router ref="menuRef" text-color="#606266" mode="horizontal" class="horizontal-header-menu"
+      :default-active="defaultActive">
       <sidebar-item v-for="route in usePermissionStoreHook().wholeMenus" :key="route.path" :item="route"
         :base-path="route.path" />
     </el-menu>
@@ -76,7 +77,21 @@ nextTick(() => {
 :deep(.el-loading-mask) {
   opacity: 0.45;
 }
-
+:deep(.el-menu-item) {
+  color: #606266!important;
+}
+:deep(.el-sub-menu.is-active) {
+  background-color: #e6f7ff!important;
+}
+:deep(.el-sub-menu__title) {
+  background: transparent!important;
+}
+:deep(.el-sub-menu .el-sub-menu__icon-arrow) {
+  margin-left: 3px!important;
+}
+:deep(.el-menu--popup .el-menu-item) {
+  color: #606266 !important;
+}
 /* :deep(.el-sub-menu.is-active .el-sub-menu__title) {
   border-bottom: 0;
 } */

src/layout/components/tag/index.scss

@@ -43,22 +43,23 @@
   display: flex;
   align-items: center;
   width: 100%;
+  padding: 4px 0 0 0;
   font-size: 14px;
   color: var(--el-text-color-primary);
   background: #fff;
-  box-shadow: 0 0 1px #888;
+  box-shadow: 0 -0.3px 0.5px #888;
 
   .scroll-item {
     position: relative;
     display: inline-block;
     height: 38px;
     padding: 2px 6px;
-    margin-right: 4px;
+    margin-right: 16px;
     line-height: 34px;
     cursor: pointer;
     border-color: transparent;
     border-radius: 6px 6px 0 0;
-    /* box-shadow: 0 0 1px #888; */
+    /* box-shadow: 0 -1px 1px #888; */
     transition: all 0.4s;
 
     .el-icon-close {
@@ -195,7 +196,8 @@
 
 .scroll-item.is-active {
   position: relative;
-  background-color: #e6f7ff;
+  /* background-color: #e6f7ff; */
+  background-color: #f0f2f5;
   border-bottom: none;
   z-index: 1;
 
@@ -212,13 +214,13 @@
   &::before {
     left: -18px;
     border-bottom-right-radius: 18px;
-    box-shadow: 9px 0 0 0 #e6f7ff;
+    box-shadow: 9px 0 0 0 #f0f2f5;
   }
 
   &::after {
     right: -18px;
     border-bottom-left-radius: 18px;
-    box-shadow: -9px 0 0 0 #e6f7ff;
+    box-shadow: -9px 0 0 0 #f0f2f5;
   }
 
   &:not(:first-child) {

src/layout/theme/index.ts

@@ -23,7 +23,7 @@ const themeColors = {
     menuHover: "#e0ebf6",
     subMenuBg: "#fff",
     subMenuActiveBg: "#e0ebf6",
-    menuText: "#7a80b4",
+    menuText: "#606266",
     sidebarLogo: "#fff",
     menuTitleHover: "#000",
     menuActiveBefore: "#4091f7"
@@ -67,7 +67,7 @@ const themeColors = {
     menuHover: "#59bfc1",
     subMenuBg: "#000",
     subMenuActiveBg: "#59bfc1",
-    menuText: "#7a80b4",
+    menuText: "#606266",
     sidebarLogo: "#053434",
     menuTitleHover: "#fff",
     menuActiveBefore: "#59bfc1"
@@ -78,7 +78,7 @@ const themeColors = {
     menuHover: "#60ac80",
     subMenuBg: "#000",
     subMenuActiveBg: "#60ac80",
-    menuText: "#7a80b4",
+    menuText: "#606266",
     sidebarLogo: "#112f21",
     menuTitleHover: "#fff",
     menuActiveBefore: "#60ac80"
@@ -89,7 +89,7 @@ const themeColors = {
     menuHover: "#d84493",
     subMenuBg: "#000",
     subMenuActiveBg: "#d84493",
-    menuText: "#7a80b4",
+    menuText: "#606266",
     sidebarLogo: "#3f0d29",
     menuTitleHover: "#fff",
     menuActiveBefore: "#d84493"
@@ -100,7 +100,7 @@ const themeColors = {
     menuHover: "#693ac9",
     subMenuBg: "#000",
     subMenuActiveBg: "#693ac9",
-    menuText: "#7a80b4",
+    menuText: "#606266",
     sidebarLogo: "#1f0c38",
     menuTitleHover: "#fff",
     menuActiveBefore: "#693ac9"

src/style/sidebar.scss

@@ -1,14 +1,14 @@
 /* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
 @mixin merge-style($sideBarWidth) {
-  $menuActiveText: #7a80b4;
+  $menuActiveText: #606266;
 
-  @media screen and (width >= 150px) and (width <= 420px) {
+  @media screen and (width >=150px) and (width <=420px) {
     .app-main-nofixed-header {
       overflow-y: hidden;
     }
   }
 
-  @media screen and (width >= 420px) {
+  @media screen and (width >=420px) {
     .app-main-nofixed-header {
       overflow: hidden;
     }
@@ -66,7 +66,7 @@
     .fixed-header {
       width: 100% !important;
 
-      + .app-main {
+      +.app-main {
         padding-top: 37px !important;
       }
     }
@@ -153,7 +153,7 @@
       }
     }
 
-    .is-active > .el-sub-menu__title,
+    .is-active>.el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;
 
@@ -167,7 +167,7 @@
       transition: color 0.3s;
     }
 
-    .el-menu-item.is-active.nest-menu > * {
+    .el-menu-item.is-active.nest-menu>* {
       z-index: 1;
       color: #fff;
     }
@@ -190,9 +190,7 @@
     }
 
     /* 有子集的激活菜单左侧小竖条 */
-    .el-menu--collapse
+    .el-menu--collapse .is-active.outer-most.el-sub-menu>.el-sub-menu__title::before {
-      .is-active.outer-most.el-sub-menu
-      > .el-sub-menu__title::before {
       position: absolute;
       top: 0;
       left: 0;
@@ -205,7 +203,7 @@
       transform: translateY(0);
     }
 
-    .el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before {
+    .el-menu--collapse .outer-most.el-sub-menu>.el-sub-menu__title::before {
       position: absolute;
       top: 50%;
       display: block;
@@ -216,7 +214,7 @@
     }
 
     /* 无子集的激活菜单背景 */
-    .is-active.submenu-title-noDropdown.outer-most > * {
+    .is-active.submenu-title-noDropdown.outer-most>* {
       z-index: 1;
       color: #fff;
     }
@@ -244,13 +242,13 @@
       }
     }
 
-    & > .el-menu {
+    &>.el-menu {
       i {
         margin-right: 20px;
       }
     }
 
-    .is-active > .el-sub-menu__title,
+    .is-active>.el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;
 
@@ -283,7 +281,7 @@
       transition: color 0.3s;
     }
 
-    .el-menu-item.is-active.nest-menu > * {
+    .el-menu-item.is-active.nest-menu>* {
       z-index: 1;
       color: #fff;
     }
@@ -312,7 +310,7 @@
 
   /* horizontal 菜单 */
   .el-menu--horizontal {
-    & > .el-sub-menu .el-sub-menu__icon-arrow {
+    &>.el-sub-menu .el-sub-menu__icon-arrow {
       position: static !important;
       margin-top: 0;
     }
@@ -335,7 +333,7 @@
     }
 
     /* 无子菜单时激活 border-bottom */
-    .router-link-exact-active > .submenu-title-noDropdown {
+    .router-link-exact-active>.submenu-title-noDropdown {
       height: 60px;
       border-bottom: 2px solid var(--el-menu-active-color);
     }
@@ -351,7 +349,7 @@
       }
     }
 
-    .is-active > .el-sub-menu__title,
+    .is-active>.el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;
 
@@ -360,7 +358,7 @@
       }
     }
 
-    .nest-menu .el-sub-menu > .el-sub-menu__title,
+    .nest-menu .el-sub-menu>.el-sub-menu__title,
     .el-menu-item {
       &:hover {
         color: $menuTitleHover !important;
@@ -372,7 +370,7 @@
       transition: color 0.3s;
     }
 
-    .el-menu-item.is-active.nest-menu > * {
+    .el-menu-item.is-active.nest-menu>* {
       z-index: 1;
       color: #fff;
     }
@@ -505,7 +503,7 @@
       }
     }
 
-    .is-active > .el-sub-menu__title,
+    .is-active>.el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;
 
@@ -585,8 +583,8 @@ body[layout="vertical"] {
     /* 菜单折叠 */
     .el-menu--collapse {
       .el-sub-menu {
-        & > .el-sub-menu__title {
+        &>.el-sub-menu__title {
-          & > span {
+          &>span {
             width: 100%;
             height: 100%;
             text-align: center;
@@ -673,10 +671,10 @@ body[layout="mix"] {
     /* 菜单折叠 */
     .el-menu--collapse {
       .el-sub-menu {
-        & > .el-sub-menu__title {
+        &>.el-sub-menu__title {
           padding: 0;
 
-          & > span {
+          &>span {
             width: 100%;
             height: 100%;
             text-align: center;
@@ -686,4 +684,4 @@ body[layout="mix"] {
       }
     }
   }
-}
+}

src/views/welcome/index.vue

@@ -1,8 +1,171 @@
 <script setup lang="ts">
+import { Clock, House, Lightning, Connection } from '@element-plus/icons-vue';
+
 defineOptions({
   name: "Welcome"
 });
+
+const todoItems = [
+  { name: '即将到期', icon: Clock, count: 5 },
+  { name: '空房管理', icon: House, count: 3 },
+  { name: '低电量锁', icon: Lightning, count: 2 },
+  { name: '电表离线', icon: Connection, count: 1 },
+  { name: '水表离线', icon: Connection, count: 4 }
+];
+
+const shopData = [
+  { name: '商店数量', value: 12 },
+  { name: '商品数量', value: 356 },
+  { name: '订单数量', value: 89 }
+];
+
+const deviceData = [
+  { name: '总柜子数量', value: 15 },
+  { name: '总格口数量', value: 240 },
+  { name: '已关联数量', value: 180 },
+  { name: '未关联数量', value: 60 },
+  { name: '网关数量', value: 8 }
+];
 </script>
 
 <template>
+  <div class="welcome-container">
+    <!-- 待办事项 -->
+    <div class="section-container todo-container">
+      <div class="section-title">
+        <div class="title-bar"></div>
+        <div class="title-text">待办事项</div>
+      </div>
+      <el-row :gutter="12" class="todo-section">
+        <el-col :span="4" v-for="item in todoItems" :key="item.name">
+          <el-card shadow="never" class="todo-card">
+            <div class="todo-content">
+              <el-icon :size="30" class="todo-icon">
+                <component :is="item.icon" />
+              </el-icon>
+              <div class="todo-count">{{ item.count }}</div>
+              <div class="todo-name">{{ item.name }}</div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+
+    <el-row :gutter="12">
+      <!-- 数据统计 -->
+      <el-col :span="12">
+        <div class="section-container shop-container">
+          <div class="section-title">
+            <div class="title-bar"></div>
+            <div class="title-text">数据统计</div>
+          </div>
+          <el-row :gutter="12" class="data-section">
+            <!-- 商店数据 -->
+            <el-col :span="4" v-for="item in shopData" :key="item.name">
+              <el-card shadow="never" class="todo-card">
+                <div class="todo-content">
+                  <div class="todo-count">{{ item.value }}</div>
+                  <div class="todo-name">{{ item.name }}</div>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+
+      <!-- 智能设备 -->
+      <el-col :span="12">
+        <div class="section-container device-container">
+          <div class="section-title">
+            <div class="title-bar"></div>
+            <div class="title-text">智能设备</div>
+          </div>
+          <el-row :gutter="12" class="data-section">
+            <el-col :span="4" v-for="item in deviceData" :key="item.name">
+              <el-card shadow="never" class="todo-card">
+                <div class="todo-content">
+                  <div class="todo-count">{{ item.value }}</div>
+                  <div class="todo-name">{{ item.name }}</div>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
+
+<style scoped lang="scss">
+:deep(.el-card) {
+  border: none; // 移除卡片边框;
+}
+
+.welcome-container {
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+
+    .title-bar {
+      width: 3px;
+      height: 16px;
+      background-color: var(--el-color-primary);
+      margin-right: 8px;
+      border-radius: 2px;
+    }
+
+    .title-text {
+      font-size: 16px;
+      font-weight: bold;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .section-container {
+    margin-bottom: 12px;
+    padding: 15px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .todo-section {
+    margin-bottom: 0;
+
+    .todo-card {
+      height: 100%;
+      border: none;
+
+      .todo-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 10px 0;
+
+        .todo-icon {
+          margin-bottom: 10px;
+          color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+  .todo-count {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    text-align: center;
+  }
+
+  .todo-name {
+    font-size: 14px;
+    color: var(--el-text-color-secondary);
+    text-align: center;
+  }
+  .data-section {
+    margin-bottom: 0;
+  }
+}
+</style>