样式调整

src/components/menu/SideMenu.vue

@@ -1,177 +1,237 @@
 <template>
   <a-layout-sider
     :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
-    width="200px"
-    :collapsible="collapsible"
-    v-model="collapsed"
-    :trigger="null">
+    width='256px'
+    :collapsible='collapsible'
+    v-model='collapsed'
+    :trigger='null'>
     <logo />
     <s-menu
-      :collapsed="collapsed"
-      :menu="menus"
-      :theme="theme"
-      @select="onSelect"
-      :mode="mode"
-      :style="smenuStyle">
+      :collapsed='collapsed'
+      :menu='menus'
+      :theme='theme'
+      @select='onSelect'
+      :mode='mode'
+      :style='smenuStyle'>
     </s-menu>
   </a-layout-sider>
 
 </template>
 
 <script>
-  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",
-    components: { ALayoutSider, Logo, SMenu },
-    mixins: [mixin, mixinDevice],
-    props: {
-      mode: {
-        type: String,
-        required: false,
-        default: 'inline'
-      },
-      theme: {
-        type: String,
-        required: false,
-        default: 'dark'
-      },
-      collapsible: {
-        type: Boolean,
-        required: false,
-        default: false
-      },
-      collapsed: {
-        type: Boolean,
-        required: false,
-        default: false
-      },
-      menus: {
-        type: Array,
-        required: true
-      }
+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',
+  components: { ALayoutSider, Logo, SMenu },
+  mixins: [mixin, mixinDevice],
+  props: {
+    mode: {
+      type: String,
+      required: false,
+      default: 'inline'
     },
-    computed:{
-      smenuStyle() {
-        let style = { 'padding': '0' }
-        if (this.fixSiderbar) {
-          style['height'] = 'calc(100% - 59px)'
-          style['overflow'] = 'auto'
-          style['overflow-x'] = 'hidden'
-        }
-        return style
-      }
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    },
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: false
     },
-    methods: {
-      onSelect (obj) {
-        this.$emit('menuSelect', obj)
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    menus: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    smenuStyle() {
+      let style = { 'padding': '0' }
+      if (this.fixSiderbar) {
+        style['height'] = 'calc(100% - 59px)'
+        style['overflow'] = 'auto'
+        style['overflow-x'] = 'hidden'
       }
+      return style
+    }
+  },
+  methods: {
+    onSelect(obj) {
+      this.$emit('menuSelect', obj)
     }
   }
+}
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 
-  /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
-  .sider {
-    $scrollBarSize: 10px;
+/* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
+.sider {
+  $scrollBarSize: 10px;
 
-    ul.ant-menu {
+  ul.ant-menu {
 
-      /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-      &::-webkit-scrollbar {
-        width: $scrollBarSize;
-        height: $scrollBarSize;
-        background-color: transparent;
-        display: none;
-      }
+    /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+    &::-webkit-scrollbar {
+      width: $scrollBarSize;
+      height: $scrollBarSize;
+      background-color: transparent;
+      display: none;
+    }
 
-      & .-o-scrollbar {
-        display: none;
-      }
+    & .-o-scrollbar {
+      display: none;
+    }
 
-      /* 兼容IE */
-      -ms-overflow-style: none;
-      -ms-scroll-chaining: chained;
-      -ms-content-zooming: zoom;
-      -ms-scroll-rails: none;
-      -ms-content-zoom-limit-min: 100%;
-      -ms-content-zoom-limit-max: 500%;
-      -ms-scroll-snap-type: proximity;
-      -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-
-      /* 定义滚动条轨道 */
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
+    /* 兼容IE */
+    -ms-overflow-style: none;
+    -ms-scroll-chaining: chained;
+    -ms-content-zooming: zoom;
+    -ms-scroll-rails: none;
+    -ms-content-zoom-limit-min: 100%;
+    -ms-content-zoom-limit-max: 500%;
+    -ms-scroll-snap-type: proximity;
+    -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;
-        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+    /* 定义滑块 */
+    &::-webkit-scrollbar-thumb {
+      border-radius: $scrollBarSize;
+      background-color: #eee;
+      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 
-        &:hover {
-          background-color: #dddddd;
-        }
+      &:hover {
+        background-color: #dddddd;
+      }
 
-        &:active {
-          background-color: #bbbbbb;
-        }
+      &:active {
+        background-color: #bbbbbb;
       }
     }
+  }
 
-    /** 暗色系滚动条样式 */
-    &.dark ul.ant-menu {
-      &::-webkit-scrollbar-thumb {
-        background-color: #666666;
+  /** 暗色系滚动条样式 */
+  &.dark ul.ant-menu {
+    &::-webkit-scrollbar-thumb {
+      background-color: #666666;
 
-        &:hover {
-          background-color: #808080;
-        }
+      &:hover {
+        background-color: #808080;
+      }
 
-        &:active {
-          background-color: #999999;
-        }
+      &:active {
+        background-color: #999999;
       }
     }
-
   }
 
-  /* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
+}
+
+/* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
 
 </style>
 
 <!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
-<style lang="scss">
-  .ant-menu.ant-menu-root {
-    & > .ant-menu-item:first-child {
-      background-color: transparent;
+<style lang='scss'>
+.ant-menu.ant-menu-root {
+  & > .ant-menu-item:first-child {
+    background-color: transparent;
 
+    & > a, & > a:hover {
+      color: rgba(0, 0, 0, 0.65);
+    }
+
+    &.ant-menu-item-selected {
       & > a, & > a:hover {
-        color: rgba(0, 0, 0, 0.65);
+        color: #1890ff;
       }
+    }
+  }
 
-      &.ant-menu-item-selected {
-        & > a, & > a:hover {
-          color: #1890ff;
-        }
-      }
+  &.ant-menu-dark > .ant-menu-item:first-child {
+    & > a, & > a:hover {
+      color: rgba(255, 255, 255, 0.65);
     }
 
-    &.ant-menu-dark > .ant-menu-item:first-child {
+    &.ant-menu-item-selected {
       & > a, & > a:hover {
-        color: rgba(255, 255, 255, 0.65);
+        color: rgba(255, 255, 255, 1);
       }
+    }
+  }
+
+  .ant-menu-item-selected {
+    background: inherit !important;
+
+    a {
+      background: #0050B3;
+      box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
+      border-radius: 4px;
+
+      &::after {
+        content: '';
+        width: 8px;
+        height: 8px;
+        background: #FFC53D;
+        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25);
+        border-radius: 50%;
+        position: absolute;
+        right: 18px;
+        top: 50%;
+        margin-top: -4px;
+      }
+    }
+  }
+
+  .ant-menu-submenu-inline {
+    .ant-menu-submenu-title {
+      padding: 0 19px 0 20px !important;
 
-      &.ant-menu-item-selected {
-        & > a, & > a:hover {
-          color: rgba(255, 255, 255, 1);
-        }
+      & > span {
+        display: inline-block;
+        padding-left: 18px;
+        box-sizing: border-box;
       }
     }
   }
+
+  .ant-menu-sub {
+    padding-left: 20px;
+  }
+
+  .ant-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 0 19px 0 20px !important;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    a {
+      display: inline-block;
+      height: 40px !important;
+      flex: 1 !important;
+      padding-left: 18px;
+      box-sizing: border-box;
+      position: relative;
+    }
+  }
+}
 </style>
 <!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->

src/components/page/GlobalLayout.vue

@@ -53,7 +53,7 @@
 
     <a-layout
       :class="[layoutMode, `content-width-${contentWidth}`]"
-      :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
+      :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 267 : 80}px` : '0' }">
       <!-- layout header -->
       <global-header
         :mode="layoutMode"
@@ -279,7 +279,7 @@
         transition: width .2s;
 
         &.ant-header-side-opened {
-          width: calc(100% - 200px)
+          width: calc(100% - 267px)!important;
         }
 
         &.ant-header-side-closed {

src/components/tools/Logo.vue

@@ -2,7 +2,7 @@
   <div class="logo">
     <router-link :to="{name:'dashboard'}">
       <img src="~@/assets/logo.png" alt="logo">
-      <h1 v-if="showTitle">{{ title }}</h1>
+<!--      <h1 v-if="showTitle">{{ title }}</h1>-->
     </router-link>
   </div>
 </template>
@@ -29,7 +29,7 @@
 </script>
 <style lang="scss" scoped>
   /*缩小首页布 局顶部的高度*/
-  $height: 59px;
+  $height: 65px;
 
   .sider {
     box-shadow: none !important;
@@ -38,7 +38,11 @@
       line-height: $height !important;
       box-shadow: none !important;
       transition: background 300ms;
-
+      background: linear-gradient(45deg, #1890FF 0%, #096DD9 100%);
+      padding-left: 0!important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       a {
         color: white;
         &:hover {