ExamSphere/admin/index.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
       <el-row type="flex" justify="space-between" align="middle" style="min-width: 1440px;">
         <div class="title">
           <el-menu default-active="1" class="el-menu-horizontal">
             <el-text class="logo">ExamSphere</el-text>
           </el-menu>
         </div>
         <div class="user-info">
       	<img :src="userStore.user.avatar?userStore.user.avatar:user.avatar" v-if="user.avatar||userStore.user.avatar" style="width: 40px;height: 40px;border-radius: 40px;margin-right:10px ;"/>
           <el-text class="user-name">{{userStore.user.username?userStore.user.username:user.username}}</el-text>
       	<button @click="logout" class="exit">退出</button>
         </div>
       </el-row>
      </el-header>

      <el-container>
        <el-aside width="200px" class="el-aside">
          <el-row class="tac">
            <el-col>
              <el-menu default-active="2" class="el-menu-vertical-demo">

                <el-sub-menu index="1">
                  <template #title>
                  <el-menu-item class="menu-item-hover">
                    <el-icon>
                    <House />
                    </el-icon>
                    <span style="color: #cdd1d3;">首页和通知</span>
                    </el-menu-item>
                  </template>
                  <el-menu-item-group style="background-color: #2d2e36;">
                  <router-link to='/admin/firstpage'>
                    <el-menu-item index="2-1">首页</el-menu-item>
                  </router-link>

                    <router-link to='/admin/notice'>
                      <el-menu-item index="2-2-1">通知管理</el-menu-item>
                    </router-link>
                  </el-menu-item-group>
                </el-sub-menu>

                <el-sub-menu index="2">
                  <template #title>
                  <el-menu-item class="menu-item-hover">
                    <el-icon>
                      <location />
                    </el-icon>
                    <span style="color: #cdd1d3;">用户管理 </span>
                    </el-menu-item>
                  </template>
                  <el-menu-item-group style="background-color: #2d2e36;">
                    <router-link to="/admin/student-info">
                      <el-menu-item index="1-1" style="color: #cdd1d3;">学生管理</el-menu-item>
                    </router-link>
                    <router-link to="/admin/teacher-info">
                      <el-menu-item index="1-2" style="color: #cdd1d3;">教师管理</el-menu-item>
                    </router-link>
                  </el-menu-item-group>
                </el-sub-menu>

                <router-link to="/admin/myinfo">
                  <el-menu-item index="3">
                    <el-icon>
                      <document />
                    </el-icon>
                    <span style="color: #cdd1d3;">我的资料</span>
                  </el-menu-item>
                </router-link>

                <router-link to="/admin/information">
                  <el-menu-item index="4">
                    <el-icon><icon-menu /></el-icon>
                    <span style="color: #cdd1d3;">用户反馈与建议</span>
                  </el-menu-item>
                </router-link>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { onMounted, reactive,ref,watch } from 'vue';
import { useRouter } from 'vue-router';
import request from '../../request';
import { useUserStore } from '../../stores/user.ts';

const userStore = useUserStore();
const router=useRouter();
const user = reactive(localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null);
const logout=()=>{
	router.push("/login")
	localStorage.removeItem("user")
	ElMessage.success("退出成功")
}
</script>

<style scoped>
  .common-layout {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #cdd1d3;
  }

  .el-container {
    height: 100%;
  }

  .el-header,
  .el-footer {
    background-color: #47484c;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #2d2e36;
    color: #fff;
    text-align: center;
  }

  .el-main {
     height: 100%;
     background: url("../../assets/背景2.jpg") no-repeat center center;
     background-size: cover;
    }

  .el-menu {
    background-color: #2d2e36;
  }

  .el-menu-item {
    color: #cdd1d3;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .el-menu-item:hover {
    background-color: #fba414;
    color: #fff;
  }

  .menu-item-hover:hover {
    background-color: #eef5fe;
    color: #333 !important;
  }

  .el-menu-item[disabled] {
    color: #6c757d;
    pointer-events: none;
  }

  .el-header {
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .el-menu-horizontal {
    background-color: transparent;
    display: flex;
    align-items: center;
    border: none;
  }

  .logo {
    font-size: 30px;
    color: white;
    margin-right: 20px;
  }

  .title,
  .user-info {
    display: flex;
    align-items: center;
    border: 0px;
  }

  .user-name {
    font-size: 16px;
    color: white;
  }

  .exit {
    margin-left: 15px;
  }
</style>