k_online_ui/src/views/Layout/src/LayoutView.vue

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import Header from './components/Header/HeaderView.vue'
import Menu from './components/Menu/MenuView.vue'
import Logo from './images/logo.png'
import ScoringGrade from '@/components/ScoringGrade'
import LogoMenu from './images/logo_menu.png'

const leftAsideWidth = ref('232px')
const isCollapse = ref(false)
const handleMenuCollapse = (val: boolean) => {
  isCollapse.value = val
  val ? (leftAsideWidth.value = '64px') : (leftAsideWidth.value = '232px')
}
</script>
<template>
  <el-container class="layout-container">
    <!-- 页面左侧导航栏 -->
    <el-aside :width="leftAsideWidth" class="left-nav">
      <div class="logo-bd">
        <el-image
          v-if="isCollapse"
          style="width: 40px; height: 40px"
          :src="LogoMenu"
          fit="cover"
        ></el-image>
        <el-image v-else style="width: 110px" :src="Logo"></el-image>
      </div>
      <Menu v-model="isCollapse" @update:modelValue="handleMenuCollapse"></Menu>
    </el-aside>

    <!-- 右侧整体布局 -->
    <el-container style="min-width: 900px">
      <!-- 顶部Header -->
      <el-header class="layout-header">
        <Header></Header>
      </el-header>

      <!-- 主体内容 -->
      <el-main class="layout-content">
        <router-view />
      </el-main>
    </el-container>
    <ScoringGrade></ScoringGrade>
  </el-container>
</template>

<style scoped lang="scss">
.layout-container {
  height: 100%;
  .logo-bd {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
  }

  .left-nav {
    border-right: 1px solid var(--color-border);
    overflow: hidden;
    transition: all 0.3s;
    // :deep(.el-scrollbar__view) {
    //   height: 100%;
    // }
    // .el-menu {
    //   height: calc(100% - 120px);
    // }
  }
  .layout-header {
    position: relative;
    height: 48px;
    border-bottom: 1px solid var(--color-border);
    color: var(--el-text-color-primary);
  }
  .layout-content {
    padding: 0;
    & > .el-scrollbar {
      :deep(.el-scrollbar__wrap--hidden-default) {
        border-radius: 0;
        & > .el-scrollbar__view {
          height: 100%;
        }
      }
    }
  }
}
</style>