tijiao

litian

2025-03-18 4a8d8a5f49321d9597251e7ba69bf39f78baa51b

 src/App.vue

@@ -1,52 +1,8 @@
<script setup lang="ts">
import { ref } from 'vue';
import Header from './layout/Header.vue';
import TreeMenu from './components/TreeMenu.vue';

const menuItem = ref('/')

const handMenu = (key: string) => {
  menuItem.value = key;
};

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header height="60px">
        <Header @selectMenu="handMenu"/>
      </el-header>
      <el-container>
        <el-aside width="240px">
          <TreeMenu :menuItem="menuItem"/>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
  <RouterView />
</template>

<style lang="less">
.common-layout {
  height: 100vh;
  .el-container {
    height: 100%;
  }
  .el-header {
    background-color: #fff;
    color: #333;
    line-height: 60px;
    border-bottom: 1px solid #eee;
  }
  .el-aside {
    background-color: #fff;
    border-right: 1px solid #eee;
  }
  .el-main {
    background-color: #f5f7fa;
  }
}
</style>
<script setup lang="ts">

</script>
<style></style>