web_dist/src/layout/fillet-layout/index.vue

<template>
  <el-container style="height: 100vh">
    <div class="mask" v-show="!isCollapse" @click="hideMenu"></div>
    <el-aside :width="isCollapse ? '50px' : '260px'"
              class="layout_aside"
              :class="isCollapse ? 'hide-aside' : 'show-side'"
    >
      <FilletAside/>
    </el-aside>
    <el-container style="height: 100vh">
      <el-header style="height: 50px; display: block">
        <header-v2/>
      </el-header>
      <el-main class="scrollbar" ref="mainRef">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <keep-alive>
              <component :is="Component"/>
            </keep-alive>
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import {computed} from 'vue'
import HeaderV2 from "@/layout/fillet-layout/HeaderV2.vue";
import {useSystemStore} from "@/pinia/system-store";
import FilletAside from "@/layout/fillet-layout/FilletAside.vue";

const systemStore = useSystemStore()
const isCollapse = computed(() => systemStore.userConfig.isCollapse)

const hideMenu = () => {
  systemStore.setCollapse(true)
}
</script>

<style lang="scss" scoped>


.layout_aside {
  margin: 7px 4px 6px 6px;
  box-shadow: 0 0 12px rgba(0, 0, 0, .12);;
  border-radius: 4px;
  overflow: hidden;
  transition: width .3s ease;
  background-color: white;
}

.el-header {
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
}

.el-aside {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: 0.3s;

  &::-webkit-scrollbar {
    width: 0 !important;
  }
}

.el-main {
  background-color: var(--system-container-background);
  height: 100%;
  padding: 0;
}

.scrollbar {
  margin: 5px 5px 6px 5px;
  //margin: 8px;
  //box-shadow: var(--el-box-shadow-light);
  //border-radius: 5px;

  &::-webkit-scrollbar {
    display: none;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(144, 147, 153, 0.3);
  }

  &:hover {
    &::-webkit-scrollbar {
      display: block;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(144, 147, 153, 0.3);

      &:hover {
        background: rgba(144, 147, 153, 0.5);
      }
    }
  }
}

.el-main-box {
  width: 100%;
  min-width: 1200px;
  height: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 1000px) {
  .el-aside {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;

    &.hide-aside {
      left: -250px;
    }
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
  }
}
</style>