style: 布局样式

src/layout/components/footer/index.vue

@@ -8,13 +8,12 @@ const TITLE = getConfig("Title");
   <footer
     class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
   >
-    Copyright © 2020-present
     <a
       class="hover:text-primary"
       href="https://github.com/pure-admin"
       target="_blank"
     >
-      &nbsp;{{ TITLE }}
+      &nbsp;
     </a>
   </footer>
 </template>
@@ -25,7 +24,9 @@ const TITLE = getConfig("Title");
   align-items: center;
   justify-content: center;
   width: 100%;
+  height: 45px;
   padding: 0 0 8px;
   font-size: 14px;
+  background: #d5e8fb !important;
 }
 </style>

src/layout/components/navbar.vue

@@ -77,7 +77,7 @@ const {
 <style lang="scss" scoped>
 .navbar {
   width: 100%;
-  height: 65px;
+  height: 48px;
   overflow: hidden;
 
   .hamburger-container {

src/layout/components/sidebar/leftCollapse.vue

@@ -42,7 +42,7 @@ const toggleClick = () => {
 
 <template>
   <div class="left-collapse">
-    <IconifyIconOffline
+    <!-- <IconifyIconOffline
       v-tippy="{
         content: props.isActive ? '点击折叠' : '点击展开',
         theme: tooltipEffect,
@@ -53,7 +53,7 @@ const toggleClick = () => {
       :class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
       :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
       @click="toggleClick"
-    />
+    /> -->
   </div>
 </template>
 
@@ -62,8 +62,8 @@ const toggleClick = () => {
   position: absolute;
   bottom: 0;
   width: 100%;
-  height: 40px;
-  line-height: 40px;
-  box-shadow: 0 0 6px -3px var(--el-color-primary);
+  height: 45px;
+  line-height: 45px;
+  // box-shadow: 0 0 6px -3px var(--el-color-primary);
 }
 </style>

src/layout/components/sidebar/logo.vue

@@ -40,7 +40,7 @@ const { title, getLogo } = useNav();
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 65px;
+  height: 48px;
   // border: 1px solid red;
   overflow: hidden;
 
@@ -64,7 +64,8 @@ const { title, getLogo } = useNav();
       font-size: 13px;
       // font-weight: 600;
       line-height: 32px;
-      color: $subMenuActiveText;
+      // color: $subMenuActiveText;
+      color: black;
       // color: #fff;
       text-overflow: ellipsis;
       white-space: nowrap;

src/layout/components/sidebar/mixNav.vue

@@ -105,7 +105,9 @@ const changePassword = () => {
         <span class="el-dropdown-link navbar-bg-hover select-none">
           <!-- <img :src="userAvatar" :style="avatarsStyle" /> -->
           <!-- <p v-if="username" class="dark:text-white">{{ username }}</p> -->
-          <p v-if="username" class="user_text">{{ username }}</p>
+          <p v-if="username" class="user_text">
+            <el-icon><Avatar /></el-icon>
+          </p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">
@@ -138,8 +140,9 @@ const changePassword = () => {
 
 <style lang="scss" scoped>
 .user_text {
-  color: #8a8e91;
+  color: black;
 }
+
 :deep(.el-loading-mask) {
   opacity: 0.45;
 }
@@ -158,14 +161,22 @@ const changePassword = () => {
   // border: 1px solid red;
   // height: 30px;
   margin-right: 10px;
-  text-align: center;
   font-size: 12px !important; /* 修改菜单项的字体大小 */
+  text-align: center;
+}
+
+.el-menu-item.is-active {
+  z-index: 999;
+}
+
+.el-menu-item.is-active::before {
+  position: absolute;
+  z-index: -1;
+  // top: 10px;
+  // left: 0em;
+  width: 100%;
+  height: 30px;
+  content: "";
+  background-color: #d5e8fb;
 }
-// .el-menu-item.is-active {
-//   /* 修改样式 */
-//   // border: 1px solid red;
-//   width: 120px;
-//   height: 30px;
-//   background-color: #266fe8 !important;
-// }
 </style>

src/layout/components/sidebar/vertical.vue

@@ -97,7 +97,7 @@ onBeforeUnmount(() => {
     <el-scrollbar
       wrap-class="scrollbar-wrapper"
       :class="[device === 'mobile' ? 'mobile' : 'pc']"
-      style="background-color: #f0f5fd"
+      style="background-color: #d5e8fb"
     >
       <el-menu
         router
@@ -127,8 +127,8 @@ onBeforeUnmount(() => {
     <LeftCollapse
       v-if="device !== 'mobile'"
       :is-active="pureApp.sidebar.opened"
+      style="background-color: #d5e8fb"
       @toggleClick="toggleSideBar"
-      style="background-color: #f0f5fd"
     />
   </div>
 </template>

src/layout/theme/index.ts

@@ -19,12 +19,12 @@ const themeColors = {
   //   menuActiveBefore: "#4091f7"
   // },
   light: {
-    subMenuActiveText: "#fff", //logo文字颜色 菜单选择颜色及其设置颜色
-    menuBg: "#409EFF", //菜单背景色
+    subMenuActiveText: "blue", // 菜单选择颜色及其设置颜色
+    menuBg: "#fff", //菜单背景色
     menuHover: "#F2F2F2", //右侧设置菜单悬浮色
     subMenuBg: "#F0F5FD", //子菜单背景色
     subMenuActiveBg: "#FF603B", //子菜单选中背景色
-    menuText: "#8A8E91", //菜单文字颜色
+    menuText: "black", //菜单文字颜色
     sidebarLogo: "red", //菜单logo颜色
     menuTitleHover: "#000", //菜单悬浮文字颜色
     menuActiveBefore: "black" //菜单选中背景色

src/router/modules/echarts.ts

@@ -3,6 +3,7 @@ export default {
   path: "/echarts",
   meta: {
     title: "动态可视化",
+    icon: "ri:information-line",
     rank: 4
   },
   children: [

src/router/modules/index.ts

@@ -3,6 +3,7 @@ export default {
   path: "/IndexDefine",
   meta: {
     title: "指标库",
+    icon: "ri:information-line",
     rank: 1
   },
   children: [

src/style/sidebar.scss

@@ -45,11 +45,28 @@
     cursor: pointer;
   }
 
+  .main-container::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 45px; /* 与 padding-right 相同 */
+    height: 100%;
+    content: "";
+    background-color: #d5e8fb; /* 背景颜色设置为蓝色 */
+    // z-index: -1; /* 确保伪元素位于背景之后 */
+  }
+
   .main-container {
     position: relative;
     height: 100vh;
+
+    // border: 1px solid red;
     min-height: 100%;
+
+    // width: 1250px;
+    padding-right: 45px;
     margin-left: $sideBarWidth;
+
     // background: #f0f2f5;
     background: #fff;
 
@@ -96,6 +113,7 @@
     overflow: visible;
     font-size: 0;
     background: $menuBg;
+
     // border-right: 1px solid var(--pure-border-color);
 
     /* 展开动画 */
@@ -151,6 +169,7 @@
     .el-menu-item,
     .el-sub-menu__title {
       height: 50px;
+
       // color: $menuText;
 
       background-color: transparent !important;
@@ -175,10 +194,11 @@
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: $menuText !important;
 
+      // border: 1px solid red;
       i {
-        color: $subMenuActiveText !important;
+        color: $menuText !important;
       }
     }
 
@@ -206,7 +226,10 @@
     & .el-sub-menu .el-menu-item {
       min-width: $sideBarWidth !important;
       font-size: 14px;
-      background-color: $subMenuBg !important;
+
+      // background-color: $subMenuBg !important;
+      // background-color: #689df3 !important;
+      background-color: #d5e8fb !important;
     }
 
     /* 有子集的激活菜单左侧小竖条 */
@@ -238,9 +261,10 @@
     /* 无子集的激活菜单背景 */
     .is-active.submenu-title-noDropdown.outer-most > * {
       z-index: 1;
+      font-size: 14px !important;
+
       // color: #fff;
       color: #266fe8 !important;
-      font-size: 14px !important;
     }
 
     .is-active.submenu-title-noDropdown.outer-most::before {
@@ -249,9 +273,10 @@
       margin: 4px 0;
       clear: both;
       content: "";
+
       // border: 1px solid red;
       // background: var(--el-color-primary) !important;
-      background: #ffffff !important;
+      background: #c2daf7 !important;
       border-radius: 3px;
     }
   }
@@ -282,6 +307,7 @@
       i {
         // color: $subMenuActiveText !important;
         color: black !important;
+
         // color: red !important;
       }
     }
@@ -312,7 +338,7 @@
 
     .el-menu-item.is-active.nest-menu > * {
       z-index: 1;
-      color: #409EFF;
+      color: #409eff;
     }
 
     .el-menu-item.is-active.nest-menu::before {
@@ -320,8 +346,10 @@
       inset: 0 8px;
       clear: both;
       content: "";
+
       // background: var(--el-color-primary) !important;
-      background: #FFFFFF !important;
+      // border: 1px solid red;
+      background: #bfd4f6 !important;
       border-radius: 3px;
     }
 
@@ -423,7 +451,8 @@
     align-items: center;
     justify-content: space-around;
     width: 100%;
-    height: 65px;
+    height: 48px;
+
     // border: 1px solid red;
     background: $menuBg;
 
@@ -468,6 +497,7 @@
       align-items: center;
       justify-content: flex-end;
       min-width: 340px;
+
       // color: $subMenuActiveText;
       color: $menuText;
 
@@ -482,8 +512,9 @@
       /* 设置 */
       .set-icon {
         &:hover {
-          // background: $menuHover;
-          background: $subMenuActiveText;
+          background: $menuHover;
+
+          // background: $subMenuActiveText;
         }
       }
 
@@ -540,6 +571,7 @@
         position: static !important;
       }
     }
+
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;