mr_web_back/src/layout/Index.vue

<template>
  <el-container id="AppContainer">
    <el-aside width="200px">
      <router-link to="/">
        <div id="logo">
          <!-- 头部Logo替换 -->
          <img src="/logo.png" style="margin-top: 5px;margin-left: 5px;" alt="" />
          <span>PHP模板</span>
        </div>
      </router-link>
      <AsideMenu :collapse="collapse" />
    </el-aside>
    <el-container>
      <el-header>
        <!-- <span @click="collapse = !collapse">
          <el-icon>
            <expand v-show="collapse" />
            <fold v-show="!collapse" />
          </el-icon>
        </span> -->
        <div class="header_right_title">
          <span>后 台 管 理 系 统</span>
        </div>


        <el-dropdown>
          <!-- <el-avatar :size="50" :src="circleUrl" /> -->
          <span style="color:black">
            欢迎您，
            <span style="color: red">{{ useInfo.user_name }}</span
            >！
            <Icon name="ElIconArrowDown" class="el-icon--right" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">登出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <el-card class="box-card main-card">
          <slot name="default"></slot>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useIntervalFn } from "@vueuse/core";
import AsideMenu from "./components/AsideMenu.vue";
import useUserStore from "~/store/user";
import useLoginStore from "~/store/login";

const router = useRouter();

const login = useLoginStore();
const user = useUserStore();

user.getUserInfo();
user.getUserMenu();

const useInfo = computed(() => user.user);
const collapse = ref(false);

const logout = () => {
  user.userLogout();
};

useIntervalFn(async () => {
  if (await login.checkLoginIsExp()) {
    ElNotification({
      title: "提示",
      message: "检测到当前登录状态已超时，请重新登录",
      type: "warning",
      duration: 0,
    });
    login.logout();
  }
}, 1000 * 30);
</script>
<style>
body {
  margin: 0;
}
#AppContainer {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.addButton {
  float: right;
}
.el-breadcrumb {
  position: fixed;
  top: 70px;
  z-index: 99;
  line-height: 35px !important;
  background-color: white;
  width: 100%;
  margin-bottom: 10px;
}
.el-main {
  padding: 0 !important;
  overflow: hidden !important;
}
.main-card {
  position: relative;
  height: 100%;
  overflow-y: auto !important;
}
.el-card__body {
  padding-top: 50px !important;
}
.el-aside {
  height: 100%;
  overflow-y: hidden;
}
/* 滑动条 */
/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 8px;
}
::-webkit-scrollbar-corner {
  background: #f6f6f6;
}
::-webkit-scrollbar-thumb {
  background: #cdcdcd;
  border-radius: 2px;
}
::-webkit-scrollbar-track {
  background: #f6f6f6;
  border-radius: 2px;
}

#logo span{
  font-size: 20px;
  font-weight: bold;
}


.header_m_box{
  display: flex;
  font-size: 14px;
  color: #85a5c2;
  font-weight: bold;
}

.header_m_content_box{
  display: flex;
}

</style>
<style lang="less" scoped>
/* 头部 */

.el-aside {
  position: relative;
  #logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    // justify-content: center;
    // justify-content: space-around;
    height: 70px;
    text-align: center;
    background-color: #109dea; // 头部logo背景色
    // background-color: #2b333e; //默认
    cursor: pointer;
    color: white;
    z-index: 99;
    img {
      width: 70px;
    }
  }
}

.header_right_title > span {
  font-weight: bold;
  margin: 2px;
}

.el-header {
  font-size: 16px !important;
  display: flex;
  box-shadow: 10px 5px 20px 0px #f1f1f1;
    // border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 70px;
  z-index: 999;

  .el-dropdown,
  .el-dropdown-menu__item {
    font-size: 16px;
    color: white;
  }
}
</style>