ele-usky-admin/src/layout/index.vue

<template>
  <a-layout class="vab-layout-wrap">

   
    <!-- 顶部横向排版 start -->
    <div>
      <a-layout-header
        class="vab-header"
        :style="`background:${$store.state.homeStyle}`"
      >

       <div style="width: 408px;display:inline-block;position:absolute;left:0">
         <vab-logo />
       </div>
       <div class="menu-outBox" style="display:none" >
         <a-menu
              class="vab-menu"
              theme=""
              mode="inline"
              v-model:selectedKeys="selectedKeys"
              v-model:openKeys="openKeys"
             
              :style="`width:${(routes.length-4)*100}px`"
            >
              <vab-menu
                v-for="route in routes"
                :key="route.path"
                :item="route"
              />
            </a-menu>
       </div>
       <div style="width: 340px;display:inline-block;position:absolute;right:0">
         <vab-avatar />
       </div>
        <a-row>
          <!-- <a-col
            :xs="10"
            :sm="10"
            :md="10"
            :lg="10"
            :xl="10"
            style="max-width: 400px"
          >
            <vab-logo />
          </a-col>
          <a-col
            :xs="14"
            :sm="14"
            :md="14"
            :lg="14"
            :xl="14"
            style="min-width: calc(100% - 400px)"
          > -->
            <!-- 菜单start -->
            <!-- <a-menu
              class="vab-menu"
              theme=""
              mode="inline"
              v-model:selectedKeys="selectedKeys"
              v-model:openKeys="openKeys"
            >
              <vab-menu
                v-for="route in routes"
                :key="route.path"
                :item="route"
              />
            </a-menu> -->
            <!-- 菜单end-->
            <!-- <vab-avatar /> -->
          <!-- </a-col> -->
        </a-row>
      </a-layout-header>
    </div>
    <!-- 顶部横向排版 end -->

    

    <div
      v-if="device === 'mobile' && !collapse"
      class="vab-mask"
      @click="handleFoldSideBar"
    ></div>

    <!-- 左侧菜单start -->
    <a-layout-sider
      collapsible
      class="vab-sider"
      width="220"
      v-model:collapsed="collapse"
      :class="classObj"
      :trigger="null"
    >
      <!-- 导航文字及缩进 start -->
      <div
        style="
          line-height: 50px;
          text-align: right;
          border-bottom: 1px solid rgba(0, 0, 0, 0.04);
        "
      >
        <span v-if="!collapse" style="margin-right: 79px">导航</span>
        <div
          style="display: inline-block"
          :style="{ 'margin-right': collapse ? '30px' : '20px' }"
        >
          <menu-unfold-outlined
            v-if="collapse"
            class="trigger"
            @click="toggleCollapse"
          />
          <menu-fold-outlined v-else class="trigger" @click="toggleCollapse" />
        </div>
      </div>
      <!-- 导航及缩进 end -->

      <!-- 菜单start -->
      <a-menu
        class="vab-menu"
        theme=""
        mode="inline"
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
      >
        <vab-menu v-for="route in routes" :key="route.path" :item="route" />
      </a-menu>
      <!-- 菜单end-->
    </a-layout-sider>
    <!-- 左侧菜单end -->

    <!-- 页面主体start -->
    <a-layout
      class="vab-layout"
      :class="'mobile' === device ? 'vab-mobile-layout' : ''"
    >
      <vab-tabs />
      <vab-content />
    </a-layout>
  </a-layout>
  <!-- 页面主体end -->
</template>
<script>
import VabLogo from './vab-logo'
import VabAvatar from './vab-avatar'
import VabMenu from './vab-menu'
import VabTabs from './vab-tabs'
import VabContent from './vab-content'
import { mapActions, mapGetters } from 'vuex'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'

export default {
  components: {
    VabLogo,
    VabAvatar,
    VabMenu,
    VabTabs,
    VabContent,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
  },
  data() {
    return {
      selectedKeys: [],
      openKeys: [],
    }
  },
  computed: {
    ...mapGetters({
      collapse: 'settings/collapse',
      routes: 'routes/routes',
      device: 'settings/device',
    }),
    classObj() {
      return {
        'vab-mobile': this.device === 'mobile',
        'vab-collapse': this.collapse,
      }
    },
  },
  watch: {
    $route: {
      handler({ path, matched }) {
        matched[0].children.length > 1
          ? (this.selectedKeys = [path])
          : (this.selectedKeys = [matched[0].path])
        this.openKeys = [matched[0].path]
      },
      immediate: true,
    },
  },
  beforeMount() {
    window.addEventListener('resize', this.handleLayouts)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleLayouts)
  },
  mounted() {
    this.handleLayouts()
  },
  methods: {
    ...mapActions({
      toggleDevice: 'settings/toggleDevice',
      handleFoldSideBar: 'settings/foldSideBar',
      toggleCollapse: 'settings/toggleCollapse',
    }),
    handleLayouts() {
      const width = document.body.getBoundingClientRect().width
      if (this.width !== width) {
        const isMobile = width - 1 < 992
        this.toggleDevice(isMobile ? 'mobile' : 'desktop')
        this.width = width
      }
    },
  },
}
</script>
<style lang="less">
.vab-layout-wrap {
  height: 100%;

  .vab-sider {
    background-color: #fff;
    position: fixed;
    top: 60px;
    left: 0;
    height: 100vh;
    overflow: auto;
    .vab-menu {
      overflow-y: auto;
      height: calc(100vh - @vab-header-height);
      li {
        //     margin-top: 10px;
        // margin-bottom: 10px;
        // line-height: 50px;
        // height: 50px;
      }
    }
    .vab-menu::-webkit-scrollbar {
      display: none;
    }
  }
  .vab-layout {
    height: calc(100vh - 0);
    overflow: auto;
    padding-left: 220px;
    transition: all 0.2s;
    background-color: #f0f3f4;
    padding-top: @vab-header-height;
  }
  .vab-mobile-layout {
    padding-left: 0;
    transition: all 0.2s;
  }
  .vab-collapse {
    .vab-logo .anticon + span {
      display: inline-block;
      max-width: 0;
      opacity: 0;
      transition: all 0.2s;
    }
    & + .vab-layout {
      padding-left: 81px;
      transition: all 0.2s;
    }
  }
  .vab-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
    opacity: 0.5;
  }
  .vab-mobile {
    position: fixed !important;
    z-index: 999;
    &.vab-collapse {
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      * {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
      }
      .ant-menu-item,
      .ant-menu-submenu {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
      }
      & + .vab-layout {
        padding-left: 0px !important;
        transition: all 0.2s;
      }
    }
  }
  .vab-header {
    padding: 0;
    background: #016ddb;
    color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    height: @vab-header-height;
    line-height: @vab-header-height;
    .ant-col + .ant-col {
      display: flex;
      justify-content: flex-end;
      padding: 0 @vab-padding;
    }
    .trigger {
      height: @vab-header-height;
      padding: 0 @vab-padding;
      font-size: 18px;
      line-height: @vab-header-height;
      cursor: pointer;
      transition: color 0.3s;
      &:hover {
        color: #1890ff;
      }
    }
  }
}
.vab-header {
  .menu-outBox{
    display:inline-block;position:absolute;left:420px;width:calc(100% - 740px);overflow-x:auto
  }

  .menu-outBox::-webkit-scrollbar {
  /*滚动条整体样式*/
  // width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
  height:8px;
}
.menu-outBox::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  background: rgba(1, 109, 219,.4);
}
.menu-outBox::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  // border-radius: 10px;
  background: rgb(245, 245, 265);
}

  .ant-menu-inline{
    // width:200%;
  }
  .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title{
    margin-top:10px;
    
  }

  .svg-icon{
    margin-right:3px!important;
  }
  .ant-menu-submenu-arrow::after,.ant-menu-submenu-arrow::before{
    background-image:none!important;

  }
   .ant-menu-inline > .ant-menu-item{
     height: 36px!important;
    line-height: 36px!important;
    margin-top: 12px;

   }
  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
    background: rgba(255, 255, 255, 0.2)!important;
    border-radius:4px;
    // color:#000;
  }
  .ant-menu-item::after{
    border-right:0px solid #000!important
  }
  .ant-menu-inline .ant-menu-item:not(:last-child){
    margin-bottom:0!important;
    
  }
  .ant-menu-inline .ant-menu-item{
    float:left;
    
  }
  .ant-menu{
    background:rgba(0,0,0,0);

     li{
  display:inline-block;
  width:auto!important;
  color:#fff;
  padding:0 10px!important

  }

  
 

}
}
</style>