拉代码

src/views/home.vue

@@ -48,6 +48,10 @@ function findBestMatch(menuList, path) {
   return bestMatch || path // fallback 到当前路径
 }
 
+// 获取菜单图标（require动态导入）
+
+
+
 // 响应式高亮菜单
 const activeMenu = computed(() => {
   return findBestMatch(menuList.value, route.path)
@@ -112,26 +116,38 @@ function logout() {
               <!-- 有子菜单的父级菜单（menuType=2 且存在children） -->
               <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.id.toString()">
                 <template #title>
-                  <el-icon>
-                    <Folder />
-                  </el-icon>
+                  <img 
+                  :src="`/src/assets/SvgIcons/${menu.menuName}.svg`" 
+                  :alt="`${menu.menuName}图标`" 
+                  style="width: 4vh; height: 4vh; margin-right: 4px;"
+                  >
+                  
                   <span>{{ menu.menuName }}</span>
                 </template>
                 <!-- 子菜单 -->
                 <template v-for="child in menu.children" :key="child.id">
                   <!-- 子菜单为叶子节点（无children） -->
                   <el-menu-item v-if="!child.children || child.children.length === 0" :index="getRoutePath(child)">
+                    <el-icon style="margin-right: 4px;">
+                      <Folder />
+                    </el-icon>
                     <span>{{ child.menuName }}</span>
                   </el-menu-item>
 
                   <!-- 子菜单有下级 -->
                   <el-sub-menu v-else :index="child.id.toString()">
                     <template #title>
+                      <el-icon style="margin-right: 4px;">
+                      <Folder />
+                    </el-icon>
                       <span>{{ child.menuName }}</span>
                     </template>
                     <!-- 递归 下一级-->
                     <template v-for="grandChild in child.children" :key="grandChild.id">
                       <el-menu-item :index="getRoutePath(grandChild)">
+                        <el-icon style="margin-right: 4px;">
+                      <Folder />
+                    </el-icon>
                         <span>{{ grandChild.menuName }}</span>
                       </el-menu-item>
                     </template>
@@ -141,9 +157,11 @@ function logout() {
 
               <!-- 无子菜单的一级菜单 -->
               <el-menu-item v-else :index="getRoutePath(menu)">
-                <el-icon>
-                  <Folder />
-                </el-icon>
+                <img 
+                  :src="`@/assets/SvgIcons/${menu.menuName}.svg`" 
+                  :alt="`${menu.menuName}图标`" 
+                  style="width: 4vh; height: 4vh; margin-right: 4px;"
+                >
                 <span>{{ menu.menuName }}</span>
               </el-menu-item>
             </template>
@@ -174,10 +192,10 @@ function logout() {
 
       <!-- 右侧内容区域 -->
       <div class="content-container">
-        <!-- 头部 -->
+        <!-- 头部
         <el-header class="header">
           
-        </el-header>
+        </el-header> -->
 
         <!-- 主内容区域 -->
         <div class="main-area">
@@ -240,9 +258,8 @@ function logout() {
   left: 1vh;
   right: 1vh;
   bottom: 1vh;
-  /* 毛玻璃效果 */
   background-image: url('@/assets/半透明background.png');
-  
+  background-size: cover;
   z-index: 1;
   display: flex;
   flex-direction: row;
@@ -253,6 +270,7 @@ function logout() {
 /* 侧边栏容器 */
 .sidebar-container {
   flex-shrink: 0;
+  
 }
 .logo {
   display: flex;
@@ -271,7 +289,6 @@ function logout() {
 /* 底部设置中心样式 */
 .settings-container {
   padding: 10px 0 10px 20px; /* 上，右， 下，左 */
-  background: rgba(255, 255, 255, 0.85);
   display: flex;
   align-items: center; /* 垂直居中 */
 }
@@ -279,7 +296,7 @@ function logout() {
 /* 调整下拉菜单的样式，确保它向上弹出 */
 
 .el-dropdown-link:focus {
-  /* 移除异常效果 */
+  /* 移除底部的异常效果 */
   outline: none;
   text-decoration: none;
 }
@@ -292,13 +309,14 @@ function logout() {
 .sidebar-layout {
   width: 15vw;
   height: 100%;
-  background: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
-  backdrop-filter: blur(5px); /* 毛玻璃效果 */
+  background: #E7F4FD; /* 浅蓝色背景 */
+  /* backdrop-filter: blur(5px); 毛玻璃效果 --消耗性能 */
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 添加阴影增强层次感 */
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   position: relative;
+  transition: all 0.3s ease;
 }
 
 /* 内容区域容器 */
@@ -314,13 +332,17 @@ function logout() {
 
 /* 头部样式 */
 .header {
-  background: rgba(255, 255, 255, 0.9);
-  /* 半透明白色背景 */
-  backdrop-filter: blur(5px);
-  /* 毛玻璃效果 */
-  height: 8vh;
+  /* 将纯色背景替换为线性渐变 */
+  background: linear-gradient(
+    90deg, 
+    rgba(228, 240, 252, 1) 20%, 
+    rgba(190, 218, 247, 1) 50%, 
+    rgba(228, 240, 252, 1) 100%
+  );
+  height: 6vh;
   border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  margin-bottom: 4px;
+  box-shadow: 0 2px 5px rgba(8, 4, 4, 0.1);
   /* 添加阴影增强层次感 */
   z-index: 80;
 }
@@ -328,9 +350,9 @@ function logout() {
 /* 主内容区域容器 */
 .main-area {
   flex: 1;
-  background: rgba(255, 255, 255, 0.9);
+  background: #E7F4FD;
   /* 半透明白色背景 */
-  backdrop-filter: blur(5px);
+  /* backdrop-filter: blur(5px); */
   /* 毛玻璃效果 */
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@@ -356,24 +378,24 @@ function logout() {
   width: 100%;
 }
 
-/* 感觉没用 */
-.el-menu-demo {
-  border: none;
-  padding: 0;
-  float: right;
-  background: transparent !important;
-  /* 最高优先级的透明 */
-}
-
-/* 侧边栏菜单样式优化 感觉没用*/
+/* 侧边栏菜单样式 适配浅色背景 */
 .el-menu {
   background: transparent !important;
 }
 
-::v-deep(.el-sub-menu__title:hover) {
-  background: transparent !important;
+
+/* 工作台，金币管理，现金管理 */
+::v-deep(.el-sub-menu__title:hover),
+::v-deep(.el-menu-item:hover) {
+  background: #E5EBFE;
+}
+/* 子菜单展开时和背景同色 */
+::v-deep(.el-sub-menu__title),
+::v-deep(.el-menu-item) {
+  background: #E7F4FD;
 }
 
+
 .message-font {
   /* 个人信息字体样式 */
   font-size: 16px;

src/views/workspace/index.vue

@@ -1,4 +1,8 @@
 <template>
+  <!-- 头部 -->
+        <el-header class="header">
+            <div class="title">数据总览</div>
+        </el-header>
   <div style="height: 100vh; overflow: hidden;">
     <el-row class="cards" >
       <el-col :span="12">
@@ -99,4 +103,35 @@ onMounted(async () => {
 
 <style scoped>
 
+.header {
+  /* 将纯色背景替换为线性渐变 */
+  background: linear-gradient(
+    90deg, 
+    rgba(228, 240, 252, 1) 20%, 
+    rgba(190, 218, 247, 1) 50%, 
+    rgba(228, 240, 252, 1) 100%
+  );
+  height: 6vh;
+  border-radius: 12px;
+  margin-bottom: 4px;
+  box-shadow: 0 2px 5px rgba(8, 4, 4, 0.1);
+  /* 添加阴影增强层次感 */
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  width: 136px;
+  color: #040a2d;
+  font-family: "PingFang SC";
+  font-size: 34px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 31.79px;
+  text-align: center;
+}
+
+
 </style>