Browse Source

样式修改:菜单样式优化;

chengbeibei 1 year ago
parent
commit
0a1182e0b1
2 changed files with 50 additions and 1 deletions
  1. BIN
      src/assets/left-menu.png
  2. 50 1
      src/components/menu/SideMenu.vue

BIN
src/assets/left-menu.png


+ 50 - 1
src/components/menu/SideMenu.vue

@@ -94,8 +94,45 @@
   /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
   /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
   .sider {
   .sider {
     @scrollBarSize: 10px;
     @scrollBarSize: 10px;
+    // 选中菜单颜色 240613-新加样式
+    & /deep/ .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected // 选中菜单样式
+    //,/deep/ .ant-menu-submenu-title:hover, // 鼠标悬浮样式,有背景图时,需放开
+    ///deep/ .ant-menu-item:hover //鼠标悬浮样式,有背景图时,需放开
+    {
+      // 无背景图,样式设置
+      background-color: #d3e1f5;
+      /*// 有背景图的对应样式设置
+      background-color: rgba(169, 202, 248, 0.5);
+      font-weight: 800;
+      color: #fff;*/
+    }
+    /*// 有背景图的对应样式设置 统计、一张图菜单样式
+    & /deep/ .ant-menu-item > a {
+      color: #f4f4f4;
+    }
+    & /deep/ .ant-menu-submenu-selected {
+      color: #fff;
+      > div {
+        font-weight: 800;
+      }
+    }*/
 
 
     ul.ant-menu {
     ul.ant-menu {
+      /*// 菜单背景图,未启用 240613-新加样式
+      background-image: url('../../assets/left-menu.png');
+      background-size: cover;
+      color: #fff;*/
+
+      // 子菜单颜色样式设置 240613-新加样式
+      & /deep/ li.ant-menu-submenu > ul.ant-menu.ant-menu-inline.ant-menu-sub {
+        // 无背景图样式设置
+        background-color: #f3f3f3;
+        /*// 有背景图的对应样式设置
+        background-color: rgba(243, 243, 243, 0.2);
+        & a {
+          color: #f4f4f4;
+        }*/
+      }
 
 
       /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
       /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
       &::-webkit-scrollbar {
       &::-webkit-scrollbar {
@@ -166,7 +203,7 @@
   .sider .ant-menu.ant-menu-root {
   .sider .ant-menu.ant-menu-root {
     & > .ant-menu-item:first-child {
     & > .ant-menu-item:first-child {
       background-color: transparent;
       background-color: transparent;
-
+      // 无背景图,样式设置
       & > a, & > a:hover {
       & > a, & > a:hover {
         color: rgba(0, 0, 0, 0.65);
         color: rgba(0, 0, 0, 0.65);
       }
       }
@@ -176,6 +213,18 @@
           color: @primary-color;
           color: @primary-color;
         }
         }
       }
       }
+
+      /*// 有背景图,样式设置
+      & > a, & > a:hover {
+        color: #f4f4f4;
+      }
+
+      &.ant-menu-item-selected {
+        & > a, & > a:hover {
+          color: #fff;
+          font-weight: 800;
+        }
+      }*/
     }
     }
 
 
     &.ant-menu-dark > .ant-menu-item:first-child {
     &.ant-menu-dark > .ant-menu-item:first-child {