Cold_erp_web/src/views/Index.vue

<script setup lang="ts">
import { onMounted, computed } from 'vue'
import SubMenu from '@/layouts/Menu/SubMenu.vue'
import Main from '@/layouts/Main/index.vue'
import Header from '@/layouts/Header/index.vue'
import { GlobalStore } from '@/stores/index'
import { useRoute } from 'vue-router'
import Logo from '@/layouts/Menu/Logo.vue'

const globalStore = GlobalStore()

const routerList = computed(() => globalStore.expandMenuList)

onMounted(() => {
  globalStore.SET_User_Dept_List()
})

const route = useRoute()
const defaultActive = computed(() => route.path)
</script>

<template>
  <el-container class="home-container">
    <el-aside>
      <div class="menu" :style="{ width: globalStore.GET_isCollapse ? '65px' : '210px' }">
        <Logo />
        <el-scrollbar>
          <el-menu
            :default-active="defaultActive"
            :collapse="globalStore.GET_isCollapse"
            :collapse-transition="false"
            :unique-opened="true"
            active-text-color="#ffd04b"
            text-color="#fff"
            background-color="rgba(18, 21, 39, 0.86)"
          >
            <SubMenu :menu-list="routerList"></SubMenu>
          </el-menu>
        </el-scrollbar>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <Header />
      </el-header>
      <Main />
    </el-container>
  </el-container>
</template>

<style scoped lang="scss">
.home-container {
  height: 100%;
  .scrollbar {
    border-right: solid 1px var(--el-menu-border-color);
    :deep(.el-menu) {
      border-right: none;
    }
  }
  .el-aside {
    width: auto;
    overflow: inherit;
    background-color: rgba(18, 21, 39);
    border-right: 1px solid var(--el-border-color);
    transition: all 0.3s ease;
    .menu {
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: all 0.3s ease;
      // background-color: rgba(18, 21, 39, 0.86);
      .el-menu {
        overflow-x: hidden;
        border-right: none;
        // background-color: rgba(18, 21, 39, 0.86);
      }
    }
  }
  .el-header {
    display: flex;
    align-items: center;
    z-index: 10;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  }
}
</style>