左侧导航菜单，子菜单弹出（垂直菜单）

src/assets/less/mytodo.css

@@ -38,6 +38,7 @@
   width: calc((100% - 10px) / 3);
 }
 #home .firstLine .oaBig .oaItem h4 {
+  font-size: 12px;
   margin-top: 4px;
 }
 #home .secondLine .links button {

src/components/menu/Contextmenu.vue

@@ -1,6 +1,8 @@
 <template>
+  <!-- 左侧 菜单具体内容 -->
   <a-menu :style="style" class="contextmenu" v-show="visible" @click="handleClick" :selectedKeys="selectedKeys">
     <a-menu-item :key="item.key" v-for="item in itemList">
+      <!-- role 作用、角色-->
       <a-icon role="menuitemicon" v-if="item.icon" :type="item.icon" />{{ item.text }}
     </a-menu-item>
   </a-menu>
@@ -8,64 +10,64 @@
 
 <script>
 export default {
-  name: 'Contextmenu',
-  props: {
-    visible: {
-      type: Boolean,
-      required: false,
-      default: false
+    name: 'Contextmenu',
+    props: {
+        visible: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        itemList: {
+            type: Array,
+            required: true,
+            default: () => []
+        }
     },
-    itemList: {
-      type: Array,
-      required: true,
-      default: () => []
-    }
-  },
-  data () {
-    return {
-      left: 0,
-      top: 0,
-      target: null,
-      selectedKeys: []
-    }
-  },
-  computed: {
-    style () {
-      return {
-        left: this.left + 'px',
-        top: this.top + 'px'
-      }
-    }
-  },
-  created () {
-    window.addEventListener('mousedown', e => this.closeMenu(e))
-    window.addEventListener('contextmenu', e => this.setPosition(e))
-  },
-  methods: {
-    closeMenu (e) {
-      if (['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
-        this.$emit('update:visible', false)
-      }
+    data () {
+        return {
+            left: 0,
+            top: 0,
+            target: null,
+            selectedKeys: []
+        }
     },
-    setPosition (e) {
-      this.left = e.clientX
-      this.top = e.clientY
-      this.target = e.target
+    computed: {
+        style () {
+            return {
+                left: this.left + 'px',
+                top: this.top + 'px'
+            }
+        }
     },
-    handleClick ({key}) {
-      this.$emit('select', key, this.target)
-      this.$emit('update:visible', false)
+    created () {
+        window.addEventListener('mousedown', e => this.closeMenu(e))
+        window.addEventListener('contextmenu', e => this.setPosition(e))
+    },
+    methods: {
+        closeMenu (e) {
+            if (['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
+                this.$emit('update:visible', false)
+            }
+        },
+        setPosition (e) {
+            this.left = e.clientX
+            this.top = e.clientY
+            this.target = e.target
+        },
+        handleClick ({ key }) {
+            this.$emit('select', key, this.target)
+            this.$emit('update:visible', false)
+        }
     }
-  }
 }
 </script>
 
 <style lang="less" scoped>
-  .contextmenu{
-    position: fixed;
-    z-index: 1;
-    border: 1px solid #9e9e9e;
-    border-radius: 4px;
-    box-shadow: 2px 2px 10px #aaaaaa !important;
-  }
+.contextmenu {
+  position: fixed;
+  z-index: 1;
+  border: 1px solid #9e9e9e;
+  border-radius: 4px;
+  box-shadow: 2px 2px 10px #aaaaaa !important;
+}
 </style>

src/components/menu/SideMenu.vue

@@ -1,10 +1,12 @@
 <template>
+  <!-- 左侧菜单 设置 collapsible可折叠 -->
   <a-layout-sider
-    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
+    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null]"
     width="200px"
     :collapsible="collapsible"
     v-model="collapsed"
-    :trigger="null">
+    :trigger="null"
+  >
     <logo />
     <s-menu
       :collapsed="collapsed"
@@ -15,163 +17,168 @@
       :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'
+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",
+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
-      }
+    // 菜单类型
+        mode: {
+            type: String,
+            required: false,
+            // default: 'inline' // 原始
+            default: 'vertical' // 垂直菜单 航向展示一级二级
+        },
+        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
+        }
     },
-    computed:{
-      smenuStyle() {
-        let style = { 'padding': '0' }
-        if (this.fixSiderbar) {
-          style['height'] = 'calc(100% - 59px)'
-          style['overflow'] = 'auto'
-          style['overflow-x'] = 'hidden'
+    computed: {
+        smenuStyle () {
+            let style = { padding: '0' }
+            if (this.fixSiderbar) {
+                style['height'] = 'calc(100% - 59px)'
+                style['overflow'] = 'auto'
+                style['overflow-x'] = 'hidden'
+            }
+            return style
         }
-        return style
-      }
     },
     methods: {
-      onSelect (obj) {
-        this.$emit('menuSelect', obj)
-      }
+        onSelect (obj) {
+            this.$emit('menuSelect', obj)
+        }
     }
-  }
+}
 </script>
 <style lang="less" scoped>
+/* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
+.sider {
+  @scrollBarSize: 10px;
+
+  ul.ant-menu {
+    /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+    &::-webkit-scrollbar {
+      width: @scrollBarSize;
+      height: @scrollBarSize;
+      background-color: transparent;
+      display: none;
+    }
 
-  /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
-  .sider {
-    @scrollBarSize: 10px;
-
-    ul.ant-menu {
+    & .-o-scrollbar {
+      display: none;
+    }
 
-      /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-      &::-webkit-scrollbar {
-        width: @scrollBarSize;
-        height: @scrollBarSize;
-        background-color: transparent;
-        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;
+    }
 
-      & .-o-scrollbar {
-        display: none;
-      }
+    /* 定义滑块 */
+    &::-webkit-scrollbar-thumb {
+      border-radius: @scrollBarSize;
+      background-color: #eee;
+      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
 
-      /* 兼容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;
+      &:hover {
+        background-color: #dddddd;
       }
 
-      /* 定义滑块 */
-      &::-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;
-        }
-
-        &: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="less">
-  .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.ant-menu-root {
+  & > .ant-menu-item:first-child {
+    background-color: transparent;
+    // background-color: red;
+
+    & > a,
+    & > a:hover {
+      color: rgba(0, 0, 0, 0.65);
+      // color: red;
+    }
 
-      &.ant-menu-item-selected {
-        & > a, & > a:hover {
-          color: @primary-color;
-        }
+    &.ant-menu-item-selected {
+      & > a,
+      & > a:hover {
+        color: @primary-color;
       }
     }
+  }
 
-    &.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 {
+    & > a,
+    & > a:hover {
+      color: rgba(255, 255, 255, 0.65);
+    }
 
-      &.ant-menu-item-selected {
-        & > a, & > a:hover {
-          color: rgba(255, 255, 255, 1);
-        }
+    &.ant-menu-item-selected {
+      & > a,
+      & > a:hover {
+        color: rgba(255, 255, 255, 1);
       }
     }
   }
+}
 </style>
-<!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
+<!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->

src/components/menu/index.js

@@ -4,185 +4,191 @@ import Icon from 'ant-design-vue/es/icon'
 const { Item, SubMenu } = Menu
 
 export default {
-  name: 'SMenu',
-  props: {
-    menu: {
-      type: Array,
-      required: true
+    name: 'SMenu',
+    props: {
+        menu: {
+            type: Array,
+            required: true
+        },
+        theme: {
+            type: String,
+            required: false,
+            default: 'dark'
+        },
+        // 菜单类型
+        mode: {
+            type: String,
+            required: false,
+            // default: 'inline' //原始
+            default: 'vertical' // 垂直菜单 航向展示一级二级
+        },
+        collapsed: {
+            type: Boolean,
+            required: false,
+            default: false
+        }
     },
-    theme: {
-      type: String,
-      required: false,
-      default: 'dark'
+    data () {
+        return {
+            openKeys: [],
+            selectedKeys: [],
+            cachedOpenKeys: []
+        }
     },
-    mode: {
-      type: String,
-      required: false,
-      default: 'inline'
+    computed: {
+        rootSubmenuKeys: vm => {
+            const keys = []
+            vm.menu.forEach(item => keys.push(item.path))
+            return keys
+        }
     },
-    collapsed: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  data () {
-    return {
-      openKeys: [],
-      selectedKeys: [],
-      cachedOpenKeys: []
-    }
-  },
-  computed: {
-    rootSubmenuKeys: vm => {
-      const keys = []
-      vm.menu.forEach(item => keys.push(item.path))
-      return keys
-    }
-  },
-  mounted () {
-    this.updateMenu()
-  },
-  watch: {
-    collapsed (val) {
-      if (val) {
-        this.cachedOpenKeys = this.openKeys.concat()
-        this.openKeys = []
-      } else {
-        this.openKeys = this.cachedOpenKeys
-      }
+    mounted () {
+        this.updateMenu()
     },
-    $route: function () {
-      this.updateMenu()
-    }
-  },
-  methods: {
+    watch: {
+        collapsed (val) {
+            if (val) {
+                this.cachedOpenKeys = this.openKeys.concat()
+                this.openKeys = []
+            } else {
+                this.openKeys = this.cachedOpenKeys
+            }
+        },
+        $route: function () {
+            this.updateMenu()
+        }
+    },
+    methods: {
     // select menu item
-    onOpenChange (openKeys) {
+        onOpenChange (openKeys) {
+            // 在水平模式下时执行，并且不再执行后续
+            // if (this.mode === 'horizontal') {
+            if (this.mode === 'vertical') {
+                // 横向
+                this.openKeys = openKeys
+                // console.log('0000')
+                return
+            }
+            // 非水平模式时
+            const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
+            if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
+                this.openKeys = openKeys
+                // console.log('1111')
+            } else {
+                this.openKeys = latestOpenKey ? [latestOpenKey] : []
+                // console.log('2222')
+            }
+        },
+        updateMenu () {
+            const routes = this.$route.matched.concat()
+            const { hidden } = this.$route.meta
+            if (routes.length >= 3 && hidden) {
+                routes.pop()
+                this.selectedKeys = [routes[routes.length - 1].path]
+            } else {
+                this.selectedKeys = [routes.pop().path]
+            }
+            const openKeys = []
 
-      // 在水平模式下时执行，并且不再执行后续
-      if (this.mode === 'horizontal') {
-        this.openKeys = openKeys
-        return
-      }
-      // 非水平模式时
-      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
-      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
-        this.openKeys = openKeys
-      } else {
-        this.openKeys = latestOpenKey ? [latestOpenKey] : []
-      }
-    },
-    updateMenu () {
-      const routes = this.$route.matched.concat()
-      const { hidden } = this.$route.meta
-      if (routes.length >= 3 && hidden) {
-        routes.pop()
-        this.selectedKeys = [routes[routes.length - 1].path]
-      } else {
-        this.selectedKeys = [routes.pop().path]
-      }
-      const openKeys = []
-      if (this.mode === 'inline') {
-        routes.forEach(item => {
-          openKeys.push(item.path)
-        })
-      }
-      //update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
-      if(!this.selectedKeys || this.selectedKeys[0].indexOf(":")<0){
-        this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
-      }
-      //update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
-    },
+            // if (this.mode === 'inline') {
+            if (this.mode === 'vertical') {
+                routes.forEach(item => {
+                    openKeys.push(item.path)
+                })
+            }
+            // update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
+            if (!this.selectedKeys || this.selectedKeys[0].indexOf(':') < 0) {
+                this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
+            }
+            // update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
+        },
 
-    // render
-    renderItem (menu) {
-      if (!menu.hidden) {
-        return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
-      }
-      return null
-    },
-    renderMenuItem (menu) {
-      const target = menu.meta.target || null
-      const tag = target && 'a' || 'router-link'
-      let props = { to: { name: menu.name } }
-      if(menu.route && menu.route === '0'){
-        props = { to: { path: menu.path } }
-      }
+        // render
+        renderItem (menu) {
+            if (!menu.hidden) {
+                return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
+            }
+            return null
+        },
+        renderMenuItem (menu) {
+            const target = menu.meta.target || null
+            const tag = (target && 'a') || 'router-link'
+            let props = { to: { name: menu.name } }
+            if (menu.route && menu.route === '0') {
+                props = { to: { path: menu.path } }
+            }
 
-      const attrs = { href: menu.path, target: menu.meta.target }
+            const attrs = { href: menu.path, target: menu.meta.target }
 
-      if (menu.children && menu.alwaysShow) {
-        // 把有子菜单的 并且 父菜单是要隐藏子菜单的
-        // 都给子菜单增加一个 hidden 属性
-        // 用来给刷新页面时， selectedKeys 做控制用
-        menu.children.forEach(item => {
-          item.meta = Object.assign(item.meta, { hidden: true })
-        })
-      }
+            if (menu.children && menu.alwaysShow) {
+                // 把有子菜单的 并且 父菜单是要隐藏子菜单的
+                // 都给子菜单增加一个 hidden 属性
+                // 用来给刷新页面时， selectedKeys 做控制用
+                menu.children.forEach(item => {
+                    item.meta = Object.assign(item.meta, { hidden: true })
+                })
+            }
 
-      return (
-        <Item {...{ key: menu.path }}>
-          <tag {...{ props, attrs }}>
-            {this.renderIcon(menu.meta.icon)}
-            <span>{menu.meta.title}</span>
-          </tag>
-        </Item>
-      )
+            return (
+                <Item {...{ key: menu.path }}>
+                    <tag {...{ props, attrs }}>
+                        {this.renderIcon(menu.meta.icon)}
+                        <span>{menu.meta.title}</span>
+                    </tag>
+                </Item>
+            )
+        },
+        renderSubMenu (menu) {
+            const itemArr = []
+            if (!menu.alwaysShow) {
+                menu.children.forEach(item => itemArr.push(this.renderItem(item)))
+            }
+            return (
+                <SubMenu {...{ key: menu.path }}>
+                    <span slot="title">
+                        {this.renderIcon(menu.meta.icon)}
+                        <span>{menu.meta.title}</span>
+                    </span>
+                    {itemArr}
+                </SubMenu>
+            )
+        },
+        renderIcon (icon) {
+            if (icon === 'none' || icon === undefined) {
+                return null
+            }
+            const props = {}
+            typeof icon === 'object' ? (props.component = icon) : (props.type = icon)
+            return <Icon {...{ props }} />
+        }
     },
-    renderSubMenu (menu) {
-      const itemArr = []
-      if (!menu.alwaysShow) {
-        menu.children.forEach(item => itemArr.push(this.renderItem(item)))
-      }
-      return (
-        <SubMenu {...{ key: menu.path }}>
-          <span slot="title">
-            {this.renderIcon(menu.meta.icon)}
-            <span>{menu.meta.title}</span>
-          </span>
-          {itemArr}
-        </SubMenu>
-      )
-    },
-    renderIcon (icon) {
-      if (icon === 'none' || icon === undefined) {
-        return null
-      }
-      const props = {}
-      typeof (icon) === 'object' ? props.component = icon : props.type = icon
-      return (
-        <Icon {... { props } }/>
-      )
-    }
-  },
 
-  render () {
-    const { mode, theme, menu } = this
-    const props = {
-      mode: mode,
-      theme: theme,
-      openKeys: this.openKeys
-    }
-    const on = {
-      select: obj => {
-        this.selectedKeys = obj.selectedKeys
-        this.$emit('select', obj)
-      },
-      openChange: this.onOpenChange
-    }
+    render () {
+        const { mode, theme, menu } = this
+        const props = {
+            mode: mode,
+            theme: theme,
+            openKeys: this.openKeys
+        }
+        const on = {
+            select: obj => {
+                this.selectedKeys = obj.selectedKeys
+                this.$emit('select', obj)
+            },
+            openChange: this.onOpenChange
+        }
 
-    const menuTree = menu.map(item => {
-      if (item.hidden) {
-        return null
-      }
-      return this.renderItem(item)
-    })
-    // {...{ props, on: on }}
-    return (
-      <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
-        {menuTree}
-      </Menu>
-    )
-  }
+        const menuTree = menu.map(item => {
+            if (item.hidden) {
+                return null
+            }
+            return this.renderItem(item)
+        })
+        // {...{ props, on: on }}
+        return (
+            <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
+                {menuTree}
+            </Menu>
+        )
+    }
 }

src/components/page/GlobalLayout.vue

@@ -1,58 +1,64 @@
 <template>
   <a-layout class="layout" :class="[device]">
-
+    <!-- 侧栏菜单 -->
     <template v-if="layoutMode === 'sidemenu'">
       <a-drawer
         v-if="device === 'mobile'"
         :wrapClassName="'drawer-sider ' + navTheme"
         placement="left"
-        @close="() => this.collapsed = false"
+        @close="() => (this.collapsed = false)"
         :closable="false"
         :visible="collapsed"
         width="200px"
       >
+        <!-- 垂直菜单 横向展示二级三级 -->
         <side-menu
-          mode="inline"
+          mode="vertical"
           :menus="menus"
-          @menuSelect="menuSelect"
+          @menuSelect="menuSelect()"
           :theme="navTheme"
           :collapsed="false"
-          :collapsible="true"></side-menu>
+          :collapsible="true"
+        ></side-menu>
       </a-drawer>
 
       <side-menu
         v-else
-        mode="inline"
+        mode="vertical"
         :menus="menus"
         @menuSelect="myMenuSelect"
         :theme="navTheme"
         :collapsed="collapsed"
-        :collapsible="true"></side-menu>
+        :collapsible="true"
+      ></side-menu>
     </template>
-    <!-- 下次优化这些代码 -->
+
+    <!-- 下次优化这些代码  手机-->
     <template v-else>
       <a-drawer
         v-if="device === 'mobile'"
         :wrapClassName="'drawer-sider ' + navTheme"
         placement="left"
-        @close="() => this.collapsed = false"
+        @close="() => (this.collapsed = false)"
         :closable="false"
         :visible="collapsed"
         width="200px"
       >
         <side-menu
-          mode="inline"
+          mode="vertical"
           :menus="menus"
           @menuSelect="menuSelect"
           :theme="navTheme"
           :collapsed="false"
-          :collapsible="true"></side-menu>
+          :collapsible="true"
+        ></side-menu>
       </a-drawer>
     </template>
 
     <a-layout
       :class="[layoutMode, `content-width-${contentWidth}`]"
-      :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
+      :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }"
+    >
       <!-- layout header -->
       <global-header
         :mode="layoutMode"
@@ -70,7 +76,7 @@
 
       <!-- layout footer -->
       <a-layout-footer style="padding: 0px">
-        <global-footer/>
+        <global-footer />
       </a-layout-footer>
     </a-layout>
 
@@ -81,602 +87,592 @@
 </template>
 
 <script>
-  import SideMenu from '@/components/menu/SideMenu'
-  import GlobalHeader from '@/components/page/GlobalHeader'
-  import GlobalFooter from '@/components/page/GlobalFooter'
-  // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
-  // import SettingDrawer from '@/components/setting/SettingDrawer'
-  // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
-  // update-end ---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
-
-  import { triggerWindowResizeEvent } from '@/utils/util'
-  import { mapState, mapActions } from 'vuex'
-  import { mixin, mixinDevice } from '@/utils/mixin.js'
-
-  export default {
+import SideMenu from '@/components/menu/SideMenu'
+import GlobalHeader from '@/components/page/GlobalHeader'
+import GlobalFooter from '@/components/page/GlobalFooter'
+// update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
+// import SettingDrawer from '@/components/setting/SettingDrawer'
+// 注释这个因为在个人设置模块已经加载了SettingDrawer页面
+// update-end ---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
+
+import { triggerWindowResizeEvent } from '@/utils/util'
+import { mapState, mapActions } from 'vuex'
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+
+export default {
     name: 'GlobalLayout',
     components: {
-      SideMenu,
-      GlobalHeader,
-      GlobalFooter,
-      // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
-      // // SettingDrawer
-      // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
-      // update-end ---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
-
+        SideMenu,
+        GlobalHeader,
+        GlobalFooter
+    // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
+    // // SettingDrawer
+    // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
+    // update-end ---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
     },
     mixins: [mixin, mixinDevice],
-    data() {
-      return {
-        collapsed: false,
-        activeMenu:{},
-        menus: []
-      }
+    data () {
+        return {
+            collapsed: false,
+            activeMenu: {},
+            menus: []
+        }
     },
     computed: {
-      ...mapState({
-        // 主路由
-        mainRouters: state => state.permission.addRouters,
-        // 后台菜单
-        permissionMenuList: state => state.user.permissionList
-      })
+        ...mapState({
+            // 主路由
+            mainRouters: state => state.permission.addRouters,
+            // 后台菜单
+            permissionMenuList: state => state.user.permissionList
+        })
     },
     watch: {
-      sidebarOpened(val) {
-        this.collapsed = !val
-      }
+        sidebarOpened (val) {
+            this.collapsed = !val
+        }
     },
-    created() {
-      //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
-      //this.menus = this.mainRouters.find((item) => item.path === '/').children;
-      this.menus = this.permissionMenuList
-      // 根据后台配置菜单，重新排序加载路由信息
-      console.log('----加载菜单逻辑----')
-      console.log(this.mainRouters)
-      console.log(this.permissionMenuList)
-      console.log('----navTheme------'+this.navTheme)
-      //--update-end----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
+    created () {
+    // --update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
+    // this.menus = this.mainRouters.find((item) => item.path === '/').children;
+        this.menus = this.permissionMenuList
+        // 根据后台配置菜单，重新排序加载路由信息
+        console.log('----加载菜单逻辑----')
+        console.log(this.mainRouters)
+        console.log(this.permissionMenuList)
+        console.log('----navTheme------' + this.navTheme)
+    // --update-end----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
     },
     methods: {
-      ...mapActions(['setSidebar']),
-      toggle() {
-        this.collapsed = !this.collapsed
-        this.setSidebar(!this.collapsed)
-        triggerWindowResizeEvent()
-      },
-      menuSelect() {
-        if (!this.isDesktop()) {
-          this.collapsed = false
-        }
-      },
-      //update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
-      myMenuSelect(value){
-        //此处触发动态路由被点击事件
-        this.findMenuBykey(this.menus,value.key)
-        this.$emit("dynamicRouterShow",value.key,this.activeMenu.meta.title)
-        // update-begin-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
-        let storeKey = 'route:title:' + this.activeMenu.path
-        this.$ls.set(storeKey, this.activeMenu.meta.title)
-        // update-end-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
-      },
-      findMenuBykey(menus,key){
-        for(let i of menus){
-          if(i.path==key){
-            this.activeMenu = {...i}
-          }else if(i.children && i.children.length>0){
-            this.findMenuBykey(i.children,key)
-          }
+        ...mapActions(['setSidebar']),
+        toggle () {
+            this.collapsed = !this.collapsed
+            this.setSidebar(!this.collapsed)
+            triggerWindowResizeEvent()
+        },
+        menuSelect () {
+            if (!this.isDesktop()) {
+                this.collapsed = false
+            }
+        },
+        // update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
+        myMenuSelect (value) {
+            // 此处触发动态路由被点击事件
+            this.findMenuBykey(this.menus, value.key)
+            this.$emit('dynamicRouterShow', value.key, this.activeMenu.meta.title)
+            // update-begin-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
+            let storeKey = 'route:title:' + this.activeMenu.path
+            this.$ls.set(storeKey, this.activeMenu.meta.title)
+            // this.activeMenu.meta.children.style = 'red'
+            // update-end-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
+        },
+        findMenuBykey (menus, key) {
+            for (let i of menus) {
+                if (i.path == key) {
+                    this.activeMenu = { ...i }
+                } else if (i.children && i.children.length > 0) {
+                    this.findMenuBykey(i.children, key)
+                }
+            }
         }
-      }
-      //update-end-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
+    // update-end-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
     }
-  }
-
+}
 </script>
 
 <style lang="less">
-  body {
-    // 打开滚动条固定显示
-    overflow-y: scroll;
+body {
+  // 打开滚动条固定显示
+  overflow-y: scroll;
 
-    &.colorWeak {
-      filter: invert(80%);
-    }
+  &.colorWeak {
+    filter: invert(80%);
   }
+}
 
-  .layout {
-    min-height: 100vh !important;
-    overflow-x: hidden;
-
-    &.mobile {
+.layout {
+  min-height: 100vh !important;
+  overflow-x: hidden;
 
-      .ant-layout-content {
-
-        .content {
-          margin: 24px 0 0;
-        }
+  &.mobile {
+    .ant-layout-content {
+      .content {
+        margin: 24px 0 0;
       }
+    }
 
-      /**
+    /**
        * ant-table-wrapper
        * 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动
        */
-      .ant-table-wrapper {
-        .ant-table-content {
-          overflow-y: auto;
-        }
-        .ant-table-body {
-          min-width: 800px;
-        }
+    .ant-table-wrapper {
+      .ant-table-content {
+        overflow-y: auto;
       }
-      .sidemenu {
-        .ant-header-fixedHeader {
-
-          &.ant-header-side-opened, &.ant-header-side-closed {
-            width: 100%
-          }
+      .ant-table-body {
+        min-width: 800px;
+      }
+    }
+    .sidemenu {
+      .ant-header-fixedHeader {
+        &.ant-header-side-opened,
+        &.ant-header-side-closed {
+          width: 100%;
         }
       }
+    }
 
-      .topmenu {
-        /* 必须为 topmenu  才能启用流式布局 */
-        &.content-width-Fluid {
-          .header-index-wide {
-            margin-left: 0;
-          }
+    .topmenu {
+      /* 必须为 topmenu  才能启用流式布局 */
+      &.content-width-Fluid {
+        .header-index-wide {
+          margin-left: 0;
         }
       }
-      .header, .top-nav-header-index {
-        .user-wrapper .action {
-          padding: 0 12px;
-        }
+    }
+    .header,
+    .top-nav-header-index {
+      .user-wrapper .action {
+        padding: 0 12px;
       }
     }
+  }
 
-    &.ant-layout-has-sider {
-      flex-direction: row;
-    }
+  &.ant-layout-has-sider {
+    flex-direction: row;
+  }
 
-    .trigger {
-      font-size: 22px;
-      line-height: 42px;
-      padding: 0 18px;
-      cursor: pointer;
-      transition: color 300ms, background 300ms;
+  .trigger {
+    font-size: 22px;
+    line-height: 42px;
+    padding: 0 18px;
+    cursor: pointer;
+    transition: color 300ms, background 300ms;
 
-      &:hover {
-        background: rgba(255, 255, 255, 0.3);
-      }
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
     }
+  }
 
-    .topmenu {
-      .ant-header-fixedHeader {
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 9;
-        width: 100%;
-        transition: width .2s;
-
-        &.ant-header-side-opened {
-          width: 100%;
-        }
+  .topmenu {
+    .ant-header-fixedHeader {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 9;
+      width: 100%;
+      transition: width 0.2s;
 
-        &.ant-header-side-closed {
-          width: 100%;
-        }
+      &.ant-header-side-opened {
+        width: 100%;
       }
-      /* 必须为 topmenu  才能启用流式布局 */
-      &.content-width-Fluid {
-        .header-index-wide {
-          max-width: unset;
-          margin-left: 24px;
-        }
 
-        .page-header-index-wide {
-          max-width: unset;
-        }
+      &.ant-header-side-closed {
+        width: 100%;
+      }
+    }
+    /* 必须为 topmenu  才能启用流式布局 */
+    &.content-width-Fluid {
+      .header-index-wide {
+        max-width: unset;
+        margin-left: 24px;
       }
 
+      .page-header-index-wide {
+        max-width: unset;
+      }
     }
+  }
 
-    .sidemenu {
-      .ant-header-fixedHeader {
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 9;
-        width: 100%;
-        transition: width .2s;
+  .sidemenu {
+    .ant-header-fixedHeader {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 9;
+      width: 100%;
+      transition: width 0.2s;
 
-        &.ant-header-side-opened {
-          width: calc(100% - 200px)
-        }
+      &.ant-header-side-opened {
+        width: calc(100% - 200px);
+      }
 
-        &.ant-header-side-closed {
-          width: calc(100% - 80px)
-        }
+      &.ant-header-side-closed {
+        width: calc(100% - 80px);
       }
     }
+  }
 
-    .header {
-      height: 64px;
-      padding: 0 12px 0 0;
-      background: #fff;
-      box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-      position: relative;
-    }
+  .header {
+    height: 64px;
+    padding: 0 12px 0 0;
+    background: #fff;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    position: relative;
+  }
 
-    .header, .top-nav-header-index {
+  .header,
+  .top-nav-header-index {
+    .user-wrapper {
+      float: right;
+      height: 100%;
 
-      .user-wrapper {
-        float: right;
-        height: 100%;
+      .action {
+        cursor: pointer;
+        padding: 0 14px;
+        display: inline-block;
+        transition: all 0.3s;
 
-        .action {
-          cursor: pointer;
-          padding: 0 14px;
-          display: inline-block;
-          transition: all .3s;
+        height: 70%;
+        line-height: 46px;
 
-          height: 70%;
-          line-height: 46px;
+        &.action-full {
+          height: 100%;
+        }
 
-          &.action-full {
-            height: 100%;
-          }
+        &:hover {
+          background: rgba(255, 255, 255, 0.3);
+        }
 
-          &:hover {
-            background: rgba(255, 255, 255, 0.3);
-          }
+        .avatar {
+          margin: 20px 10px 20px 0;
+          color: #1890ff;
+          // color: red;
+          background: hsla(0, 0%, 100%, 0.85);
+          vertical-align: middle;
+        }
 
-          .avatar {
-            margin: 20px 10px 20px 0;
-            color: #1890ff;
-            background: hsla(0, 0%, 100%, .85);
-            vertical-align: middle;
-          }
+        .icon {
+          font-size: 16px;
+          padding: 4px;
+        }
 
-          .icon {
-            font-size: 16px;
-            padding: 4px;
+        .anticon {
+          color: white;
+        }
+      }
+    }
+
+    &.dark {
+      .user-wrapper {
+        .action {
+          color: black;
+
+          &:hover {
+            background: rgba(0, 0, 0, 0.05);
           }
 
           .anticon {
-            color: white;
+            color: black;
           }
         }
       }
+    }
+  }
 
-      &.dark {
-        .user-wrapper {
-
-          .action {
-            color: black;
-
-            &:hover {
-              background: rgba(0, 0, 0, 0.05);
-            }
+  &.mobile {
+    .top-nav-header-index {
+      .header-index-wide {
+        .header-index-left {
+          .trigger {
+            color: rgba(255, 255, 255, 0.85);
+            padding: 0 12px;
+          }
 
-            .anticon {
-              color: black;
-            }
+          .logo.top-nav-header {
+            text-align: center;
+            width: 56px;
+            line-height: 58px;
           }
         }
       }
-    }
 
-    &.mobile {
-      .top-nav-header-index {
+      .user-wrapper .action .avatar {
+        margin: 20px 0;
+      }
 
+      &.light {
         .header-index-wide {
-
           .header-index-left {
-
             .trigger {
-              color: rgba(255, 255, 255, 0.85);
-              padding: 0 12px;
-            }
-
-            .logo.top-nav-header {
-              text-align: center;
-              width: 56px;
-              line-height: 58px;
+              color: rgba(0, 0, 0, 0.65);
             }
           }
         }
-
-        .user-wrapper .action .avatar {
-          margin: 20px 0;
-        }
-
-        &.light {
-
-          .header-index-wide {
-
-            .header-index-left {
-              .trigger {
-                color: rgba(0, 0, 0, 0.65);
-              }
-            }
-          }
-          //
-        }
+        //
       }
     }
+  }
 
-    &.tablet {
-      // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
-      .top-nav-header-index {
-
-        .header-index-wide {
-
-          .header-index-left {
-            .logo > a {
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
+  &.tablet {
+    // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
+    .top-nav-header-index {
+      .header-index-wide {
+        .header-index-left {
+          .logo > a {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
         }
       }
-
     }
+  }
 
-    .top-nav-header-index {
-      box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-      position: relative;
-      transition: background .3s, width .2s;
+  .top-nav-header-index {
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    position: relative;
+    transition: background 0.3s, width 0.2s;
 
-      .header-index-wide {
-        width: 100%;
-        margin: auto;
-        padding: 0 20px 0 0;
+    .header-index-wide {
+      width: 100%;
+      margin: auto;
+      padding: 0 20px 0 0;
+      display: flex;
+      height: 59px;
+
+      .ant-menu.ant-menu-horizontal {
+        border: none;
+        height: 64px;
+        line-height: 64px;
+      }
+
+      .header-index-left {
+        flex: 1 1;
         display: flex;
-        height: 59px;
 
-        .ant-menu.ant-menu-horizontal {
-          border: none;
+        .logo.top-nav-header {
+          width: 165px;
           height: 64px;
+          position: relative;
           line-height: 64px;
-        }
-
-        .header-index-left {
-          flex: 1 1;
-          display: flex;
-
-          .logo.top-nav-header {
-            width: 165px;
-            height: 64px;
-            position: relative;
-            line-height: 64px;
-            transition: all .3s;
-            overflow: hidden;
+          transition: all 0.3s;
+          overflow: hidden;
 
-            img {
-              display: inline-block;
-              vertical-align: middle;
-              height: 32px;
-            }
+          img {
+            display: inline-block;
+            vertical-align: middle;
+            height: 32px;
+          }
 
-            h1 {
-              color: #fff;
-              display: inline-block;
-              vertical-align: top;
-              font-size: 16px;
-              margin: 0 0 0 12px;
-              font-weight: 400;
-            }
+          h1 {
+            color: #fff;
+            display: inline-block;
+            vertical-align: top;
+            font-size: 16px;
+            margin: 0 0 0 12px;
+            font-weight: 400;
           }
         }
+      }
 
-        .header-index-right {
-          float: right;
-          height: 59px;
-          overflow: hidden;
-          .action:hover {
-            background-color: rgba(0, 0, 0, 0.05);
-          }
+      .header-index-right {
+        float: right;
+        height: 59px;
+        overflow: hidden;
+        .action:hover {
+          background-color: rgba(0, 0, 0, 0.05);
         }
       }
+    }
 
-      &.light {
-        background-color: #fff;
+    &.light {
+      background-color: #fff;
 
-        .header-index-wide {
-          .header-index-left {
-            .logo {
-              h1 {
-                color: #002140;
-              }
+      .header-index-wide {
+        .header-index-left {
+          .logo {
+            h1 {
+              color: #002140;
             }
           }
         }
       }
+    }
 
-      &.dark {
-
-        .user-wrapper {
-
-          .action {
-            color: white;
+    &.dark {
+      .user-wrapper {
+        .action {
+          color: white;
 
-            &:hover {
-              background: rgba(255, 255, 255, 0.3);
-            }
+          &:hover {
+            background: rgba(255, 255, 255, 0.3);
           }
         }
-        .header-index-wide .header-index-left .trigger:hover {
-          background: rgba(255, 255, 255, 0.3);
-        }
       }
-
-    }
-
-    // 内容区
-    .layout-content {
-      margin: 24px 24px 0px;
-      height: 64px;
-      padding: 0 12px 0 0;
+      .header-index-wide .header-index-left .trigger:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
     }
+  }
 
+  // 内容区
+  .layout-content {
+    margin: 24px 24px 0px;
+    height: 64px;
+    padding: 0 12px 0 0;
   }
+}
 
-  .topmenu {
-    .page-header-index-wide {
-      margin: 0 auto;
-      width: 100%;
-    }
+.topmenu {
+  .page-header-index-wide {
+    margin: 0 auto;
+    width: 100%;
   }
+}
 
-  // drawer-sider 自定义
-  .ant-drawer.drawer-sider {
-    .sider {
-      box-shadow: none;
-    }
+// drawer-sider 自定义
+.ant-drawer.drawer-sider {
+  .sider {
+    box-shadow: none;
+  }
 
-    &.dark {
-      .ant-drawer-content {
-        background-color: rgb(0, 21, 41);
-      }
+  &.dark {
+    .ant-drawer-content {
+      background-color: rgb(0, 21, 41);
     }
-    &.light {
-      box-shadow: none;
-      .ant-drawer-content {
-        background-color: #fff;
-      }
-    }
-
-    .ant-drawer-body {
-      padding: 0
+  }
+  &.light {
+    box-shadow: none;
+    .ant-drawer-content {
+      background-color: #fff;
     }
   }
 
-  // 菜单样式
-  .sider {
-    box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, .35);
-    position: relative;
-    z-index: 10;
+  .ant-drawer-body {
+    padding: 0;
+  }
+}
 
-    &.ant-fixed-sidemenu {
-      position: fixed;
-      height: 100%;
-    }
+// 菜单样式
+.sider {
+  box-shadow: 2px 116px 6px 0 rgba(0, 21, 41, 0.35);
+  position: relative;
+  z-index: 10;
 
-    .logo {
-      height: 64px;
-      position: relative;
-      line-height: 64px;
-      padding-left: 24px;
-      -webkit-transition: all .3s;
-      transition: all .3s;
-      background: #002140;
-      overflow: hidden;
-
-      img, h1 {
-        display: inline-block;
-        vertical-align: middle;
-      }
+  &.ant-fixed-sidemenu {
+    position: fixed;
+    height: 100%;
+  }
 
-      img {
-        height: 32px;
-      }
+  .logo {
+    height: 64px;
+    position: relative;
+    line-height: 64px;
+    padding-left: 24px;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+    background: #002140;
+    overflow: hidden;
+
+    img,
+    h1 {
+      display: inline-block;
+      vertical-align: middle;
+    }
 
-      h1 {
-        color: #fff;
-        font-size: 18px;
-        margin: 0 0 0 8px;
-        font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-        font-weight: 600;
-      }
+    img {
+      height: 32px;
     }
 
-    &.light {
-      background-color: #fff;
-      box-shadow: 2px 116px 8px 0 rgba(29, 35, 41, 0.05);
+    h1 {
+      color: #fff;
+      font-size: 18px;
+      margin: 0 0 0 8px;
+      font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
+        'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
+      font-weight: 600;
+    }
+  }
 
-      .logo {
-        background: #fff;
-        box-shadow: 1px 1px 0 0 #e8e8e8;
+  &.light {
+    background-color: #fff;
+    box-shadow: 2px 116px 8px 0 rgba(29, 35, 41, 0.05);
 
-        h1 {
-          color: unset;
-        }
-      }
+    .logo {
+      background: #fff;
+      box-shadow: 1px 1px 0 0 #e8e8e8;
 
-      .ant-menu-light {
-        border-right-color: transparent;
+      h1 {
+        color: unset;
       }
     }
 
-  }
-
-  // 外置的样式控制
-  .user-dropdown-menu-wrapper.ant-dropdown-menu {
-    padding: 4px 0;
-
-    .ant-dropdown-menu-item {
-      width: 160px;
+    .ant-menu-light {
+      border-right-color: transparent;
     }
+  }
+}
 
-    .ant-dropdown-menu-item > .anticon:first-child,
-    .ant-dropdown-menu-item > a > .anticon:first-child,
-    .ant-dropdown-menu-submenu-title > .anticon:first-child
-    .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
-      min-width: 12px;
-      margin-right: 8px;
-    }
+// 外置的样式控制
+.user-dropdown-menu-wrapper.ant-dropdown-menu {
+  padding: 4px 0;
 
+  .ant-dropdown-menu-item {
+    width: 160px;
   }
 
-  // 数据列表 样式
-  .table-alert {
-    margin-bottom: 16px;
+  .ant-dropdown-menu-item > .anticon:first-child,
+  .ant-dropdown-menu-item > a > .anticon:first-child,
+  .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
+    min-width: 12px;
+    margin-right: 8px;
   }
+}
 
-  .table-page-search-wrapper {
-
-    .ant-form-inline {
-
-      .ant-form-item {
-        display: flex;
-        margin-bottom: 24px;
-        margin-right: 0;
+// 数据列表 样式
+.table-alert {
+  margin-bottom: 16px;
+}
 
-        .ant-form-item-control-wrapper {
-          flex: 1 1;
-          display: inline-block;
-          vertical-align: middle;
-        }
+.table-page-search-wrapper {
+  .ant-form-inline {
+    .ant-form-item {
+      display: flex;
+      margin-bottom: 24px;
+      margin-right: 0;
 
-        > .ant-form-item-label {
-          line-height: 32px;
-          padding-right: 8px;
-          width: auto;
-        }
-        .ant-form-item-control {
-          height: 32px;
-          line-height: 32px;
-        }
+      .ant-form-item-control-wrapper {
+        flex: 1 1;
+        display: inline-block;
+        vertical-align: middle;
       }
-    }
 
-    .table-page-search-submitButtons {
-      display: block;
-      margin-bottom: 24px;
-      white-space: nowrap;
+      > .ant-form-item-label {
+        line-height: 32px;
+        padding-right: 8px;
+        width: auto;
+      }
+      .ant-form-item-control {
+        height: 32px;
+        line-height: 32px;
+      }
     }
-
   }
 
-  .content {
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+}
 
-    .table-operator {
-      margin-bottom: 18px;
+.content {
+  .table-operator {
+    margin-bottom: 18px;
 
-      button {
-        margin-right: 8px;
-      }
+    button {
+      margin-right: 8px;
     }
   }
-</style>
+}
+
+// 未选择菜单项鼠标滑过样式
+.ant-menu-submenu-active {
+  background-color: rgba(142, 202, 230, 0.2);
+}
+//选中菜单样式
+.ant-menu-submenu-selected {
+  background-color: rgba(142, 202, 230, 0.5);
+}
+</style>