style: 菜单样式

src/layout/components/appMain.vue

@@ -44,6 +44,11 @@ const getMainWidth = computed(() => {
     : stretch.value
       ? "1440px"
       : "100%";
+  // return isNumber(stretch.value)
+  //   ? stretch.value + "px"
+  //   : stretch.value
+  //     ? "1440px"
+  //     : "100%";
 });
 
 const getSectionStyle = computed(() => {

src/layout/components/footer/index.vue

@@ -24,6 +24,10 @@ const TITLE = getConfig("Title");
   align-items: center;
   justify-content: center;
   width: 100%;
+  // border: 1px solid red;
+  // position: absolute;
+  // bottom: 0px;
+  // left: 0px;
   height: 45px;
   padding: 0 0 8px;
   font-size: 14px;

src/layout/components/sidebar/mixNav.vue

@@ -96,19 +96,21 @@ const changePassword = () => {
     </el-menu>
     <div class="horizontal-header-right">
       <!-- 菜单搜索 -->
-      <Search id="header-search" />
+      <!-- <Search id="header-search" /> -->
       <!-- 全屏 -->
-      <FullScreen id="full-screen" />
+      <!-- <FullScreen id="full-screen" /> -->
       <!-- 消息通知 -->
       <!-- <Notice id="header-notice" /> -->
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
-        <span class="el-dropdown-link navbar-bg-hover select-none">
+        <!-- <span class="el-dropdown-link navbar-bg-hover select-none user_text"> -->
+        <span class="el-dropdown-link user_text">
           <!-- <img :src="userAvatar" :style="avatarsStyle" /> -->
           <!-- <p v-if="username" class="dark:text-white">{{ username }}</p> -->
-          <p v-if="username" class="user_text">
+          <p v-if="username" class="icon-img">
             <el-icon><Avatar /></el-icon>
           </p>
+          <p class="ml-0.5">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">
@@ -140,7 +142,23 @@ const changePassword = () => {
 </template>
 
 <style lang="scss" scoped>
+// .icon-img {
+//   width: 30px;
+//   height: 30px;
+//   border-radius: 100%;
+//   color: blue;
+//   font-size: 20px;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   background: #fff;
+// }
 .user_text {
+  line-height: 100%;
+  color: #fff;
+}
+
+.user_text:hover {
   color: black;
 }
 
@@ -168,15 +186,13 @@ const changePassword = () => {
 
 .el-menu-item.is-active {
   z-index: 999;
-  border-bottom-color: none !important;
+  // border-bottom-color: none !important;
 }
 
 .el-menu-item.is-active::before {
   position: absolute;
   z-index: -1;
-  // top: 10px;
-  // left: 0em;
-  width: 100%;
+  width: 80%;
   height: 30px;
   content: "";
   background-color: #d5e8fb;

src/layout/theme/index.ts

@@ -20,12 +20,12 @@ const themeColors = {
   // },
   light: {
     subMenuActiveText: "#0052D9", // 菜单选择颜色及其设置颜色
-    menuBg: "#fff", //菜单背景色
+    menuBg: "#022BBD", //菜单背景色
     menuHover: "#F2F2F2", //右侧设置菜单悬浮色
     subMenuBg: "#F0F5FD", //子菜单背景色
-    subMenuActiveBg: "#FF603B", //子菜单选中背景色
-    menuText: "black", //菜单文字颜色
-    sidebarLogo: "red", //菜单logo颜色
+    subMenuActiveBg: "#CDDCF7", //子菜单选中背景色
+    menuText: "#FFF", //菜单文字颜色
+    sidebarLogo: "#fff", //菜单logo颜色
     menuTitleHover: "#000", //菜单悬浮文字颜色
     menuActiveBefore: "black" //菜单选中背景色
   },

src/style/sidebar.scss

@@ -196,9 +196,9 @@
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
-      color: $menuText !important;
+      // color: $menuText !important;
+      color: black !important;
 
-      // border: 1px solid red;
       i {
         color: $menuText !important;
       }
@@ -266,7 +266,7 @@
       font-size: 14px !important;
 
       // color: #fff;
-      color: #266fe8 !important;
+      color: blue !important;
     }
 
     .is-active.submenu-title-noDropdown.outer-most::before {
@@ -325,7 +325,9 @@
     .el-sub-menu__title {
       height: 50px;
       line-height: 50px;
-      color: $menuText;
+
+      // color: $menuText;
+      color: black;
       background-color: $subMenuBg;
 
       &:hover {
@@ -340,7 +342,9 @@
 
     .el-menu-item.is-active.nest-menu > * {
       z-index: 1;
-      color: #409eff;
+
+      // color: #409eff;
+      color: #0052d9;
     }
 
     .el-menu-item.is-active.nest-menu::before {
@@ -414,6 +418,7 @@
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
+      // color: $subMenuActiveText !important;
       color: $subMenuActiveText !important;
 
       i {
@@ -514,7 +519,8 @@
       /* 设置 */
       .set-icon {
         &:hover {
-          background: $menuHover;
+          // background: $menuHover;
+          color: black;
 
           // background: $subMenuActiveText;
         }
@@ -531,7 +537,9 @@
         justify-content: space-around;
         height: 48px;
         padding: 10px;
-        color: $subMenuActiveText;
+
+        // color: $subMenuActiveText;
+        color: #fff;
         cursor: pointer;
 
         p {
@@ -558,6 +566,8 @@
       padding-right: var(--el-menu-base-level-padding);
       color: $menuText;
 
+      // color: black;
+
       &:hover {
         color: $menuTitleHover !important;
       }