对照设计图修改页面

jero-web/src/components/menu/SideMenu.vue

@@ -1,11 +1,12 @@
 <template>
   <a-layout-sider
     :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
-    width="208px"
+    style="background: #EFF1F3"
+    width="240px"
     :collapsible="collapsible"
     v-model="collapsed"
     :trigger="null">
-    <logo />
+    <logo/>
     <s-menu
       :collapsed="collapsed"
       :menu="menus"
@@ -19,13 +20,13 @@
 </template>
 
 <script>
-  import ALayoutSider from "ant-design-vue/es/layout/Sider"
+  import ALayoutSider from 'ant-design-vue/es/layout/Sider'
   import Logo from '../tools/Logo'
   import SMenu from './index'
   import { mixin, mixinDevice } from '@/utils/mixin.js'
 
   export default {
-    name: "SideMenu",
+    name: 'SideMenu',
     components: { ALayoutSider, Logo, SMenu },
     mixins: [mixin, mixinDevice],
     props: {
@@ -54,9 +55,9 @@
         required: true
       }
     },
-    computed:{
+    computed: {
       smenuStyle() {
-        let style = { 'padding': '0' }
+        let style = { 'padding': '0', 'background': '#EFF1F3' }
         if (this.fixSiderbar) {
           style['height'] = 'calc(100% - 59px)'
           style['overflow'] = 'auto'
@@ -66,7 +67,7 @@
       }
     },
     methods: {
-      onSelect (obj) {
+      onSelect(obj) {
         this.$emit('menuSelect', obj)
       }
     }
@@ -81,6 +82,7 @@
     ul.ant-menu {
 
       /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+
       &::-webkit-scrollbar {
         width: @scrollBarSize;
         height: @scrollBarSize;
@@ -103,11 +105,13 @@
       -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
 
       /* 定义滚动条轨道 */
+
       &::-webkit-scrollbar-track {
         background-color: transparent;
       }
 
       /* 定义滑块 */
+
       &::-webkit-scrollbar-thumb {
         border-radius: @scrollBarSize;
         background-color: #eee;
@@ -124,6 +128,7 @@
     }
 
     /** 暗色系滚动条样式 */
+
     &.dark ul.ant-menu {
       &::-webkit-scrollbar-thumb {
         background-color: #666666;
@@ -172,5 +177,29 @@
       }
     }
   }
+
+  .ant-menu-submenu > .ant-menu {
+    background: #e1e3e7 !important;
+  }
+
+  .ant-menu-item {
+    height: 48px !important;
+    line-height: 48px !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .ant-menu-item-selected {
+    height: 48px !important;
+    line-height: 48px !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    background-color: #D9F4F5 !important;
+  }
+
+  .ant-menu-inline .ant-menu-item::after {
+    left: 0 !important;
+    right: inherit !important;
+  }
 </style>
 <!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->