Game-Backstage-Management-System/src/views/Home/HomeView.vue

<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ref } from 'vue'

const isCollapse = ref(false)
const menuList = [
  {
    title: '数据总览',
    icon: 'PieChart',
    children: [
      {
        pathName: 'OverView',
        title: '工作台'
      }
    ]
  },
  {
    title: '信息管理',
    icon: 'Histogram',
    children: [
      {
        pathName: 'GameManageView',
        title: '游戏管理'
      },
      {
        pathName: 'PlayerManageView',
        title: '玩家管理'
      }
    ]
  }
]

const changeCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<template>
  <div class="body">
    <div class="sideBarBox">
      <el-menu :router="true" :default-active="$route.name" class="sideBar" :collapse="isCollapse">
        <el-menu-item index="/" class="logoBox">
          <el-image :fit="'fill'" class="logoImg" src="/src/assets/logo.svg"></el-image>
          <template #title><span class="logoText">淳皓科技</span></template>
        </el-menu-item>
        <el-sub-menu v-for="item in menuList" :index="item.title">
          <template #title>
            <el-icon><component :is="item.icon" /></el-icon>
            <span class="menuTitle">{{ item.title }}</span>
          </template>
          <el-menu-item v-for="v in item.children" :index="v.pathName">{{ v.title }}</el-menu-item>
        </el-sub-menu>
        <div class="sideBarFold" @click="changeCollapse">
          <el-icon :size="25"><Fold /></el-icon>
        </div>
      </el-menu>
    </div>
    <div class="navBarBox">
      <div class="headPortraitBox">
        <!-- <el-avatar :size="40" src="/src/assets/default/defaultHead.png" /> -->
        <el-image class="headPortrait" src="/src/assets/default/defaultHead.png"></el-image>
      </div>
    </div>
    <div class="content">
      <RouterView />
    </div>
  </div>
</template>

<style scoped>
.body {
  width: 100%;
  display: flex;
  height: 100vh;
}

/* 设置宽度后，content无法适应宽度，只能去间接的调整内部元素的宽度 */
.sideBarBox {
  position: relative;
  /* width: 12%; */
  z-index: 2;
  height: 100vh;
  top: 0;
}

.sideBar {
  /* width: 12vw; */
  height: 100vh;
  position: relative;
  overflow: scroll;
}

/* 设置弹出层的样式 */
.el-popper > .logoText {
  width: 100px;
  font-size: 16px;
  /* color: red; */
}

/* 调整LOGO */
.logoBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logoImg {
  display: flex;
  align-items: center;
  width: 33px;
  /* margin-right: 20px; */
  /* height: 50px; */
}

.logoText {
  width: 80%;
  height: 100%;
  margin-left: 15%;
  display: flex;
  font-size: 18px;
  align-items: center;
  /* background-color: lightcoral; */
}

/* 主要用来调整整个menu的宽度 */
.menuTitle {
  margin-right: 40px;
}

.sideBarFold {
  width: 5%;
  height: 3%;
  position: absolute;
  right: 40px;
  bottom: 20px;
}

.navBarBox {
  position: fixed;
  width: 100vw;
  z-index: 1;
  height: 7vh;
  top: 0;
  background-color: white;
  right: 0;
  border-bottom: 1px solid gainsboro;
}

.headPortraitBox {
  /* width: 5vw; */
  /* height: 5vh; */
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
}

.headPortrait {
  cursor: pointer;
  width: 50px;
}

.content {
  /* flex-grow: 1; */
  /* position: absolute; */

  width: 100%;
  /* height: 93%; */
  margin-top: 7vh;
  overflow: scroll;
  background-color: #f2f3f5;
  right: 0vw;
  top: 0vh;
}
</style>