house/fount/components/index/IndexHeader.vue

<template>
  <!-- 顶部导航栏组件 -->
  <!-- <el-header> // 注释掉的默认顶部导航栏结构
    <el-menu background-color="#00c292" text-color="#FFFFFF" active-text-color="#FFFFFF" mode="horizontal">
      <div class="fl title">{{this.$project.projectName}}</div> // 显示项目名称
      <div class="fr logout" style="display:flex;">
        <el-menu-item index="3">
          <div>{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div> // 显示用户角色和用户名
        </el-menu-item>
        <el-menu-item @click="onLogout" index="2">
          <div>退出登录</div> // 退出登录按钮
        </el-menu-item>
      </div>
    </el-menu>
  </el-header> -->

  <!-- 自定义顶部导航栏 -->
  <div class="navbar" :style="{backgroundColor:heads.headBgColor,height:heads.headHeight,boxShadow:heads.headBoxShadow,lineHeight:heads.headHeight}">
    <!-- 左侧标题菜单 -->
    <div class="title-menu" :style="{justifyContent:heads.headTitleStyle=='1'?'flex-start':'center'}">
      <!-- 如果启用了头部图片，则显示图片 -->
      <el-image v-if="heads.headTitleImg" class="title-img" :style="{width:heads.headTitleImgWidth,height:heads.headTitleImgHeight,boxShadow:heads.headTitleImgBoxShadow,borderRadius:heads.headTitleImgBorderRadius}" :src="heads.headTitleImgUrl" fit="cover"></el-image>
      <!-- 显示项目名称 -->
      <div class="title-name" :style="{color:heads.headFontColor,fontSize:heads.headFontSize}">{{this.$project.projectName}}</div>
    </div>
    <!-- 右侧菜单 -->
    <div class="right-menu">
      <!-- 用户信息 -->
      <div class="user-info" :style="{color:heads.headUserInfoFontColor,fontSize:heads.headUserInfoFontSize}">{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
      <!-- 退出到前台按钮 -->
      <div class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onIndexTap">退出到前台</div>
      <!-- 退出登录按钮 -->
      <div class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onLogout">退出登录</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false, // 对话框是否可见
      ruleForm: {}, // 表单数据
      user: {}, // 当前用户数据
      heads: { // 头部样式配置
        "headLogoutFontHoverColor": "rgba(41, 42, 42, 1)", // 退出按钮悬停时的文字颜色
        "headFontSize": "20px", // 标题字体大小
        "headUserInfoFontColor": "rgba(238, 221, 129, 1)", // 用户信息文字颜色
        "headBoxShadow": "0 1px 6px #444", // 导航栏阴影
        "headTitleImgHeight": "44px", // 标题图片高度
        "headLogoutFontHoverBgColor": "rgba(247, 142, 142, 1)", // 退出按钮悬停时的背景颜色
        "headFontColor": "rgba(153, 239, 237, 1)", // 标题文字颜色
        "headTitleImg": false, // 是否启用标题图片
        "headHeight": "60px", // 导航栏高度
        "headTitleImgBorderRadius": "22px", // 标题图片圆角
        "headTitleImgUrl": "http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg", // 标题图片地址
        "headBgColor": "#4F4949", // 导航栏背景颜色
        "headTitleImgBoxShadow": "0 1px 6px #444", // 标题图片阴影
        "headLogoutFontColor": "rgba(153, 239, 237, 1)", // 退出按钮文字颜色
        "headUserInfoFontSize": "16px", // 用户信息字体大小
        "headTitleImgWidth": "44px", // 标题图片宽度
        "headTitleStyle": "2", // 标题对齐方式（1：左对齐，2：居中）
        "headLogoutFontSize": "16px" // 退出按钮字体大小
      }
    };
  },
  created() {
    this.setHeaderStyle(); // 初始化头部样式
  },
  mounted() {
    let sessionTable = this.$storage.get("sessionTable"); // 获取会话表名
    this.$http({
      url: sessionTable + '/session', // 请求会话信息
      method: "get"
    }).then(({ data }) => {
      if (data && data.code === 0) { // 如果请求成功
        this.user = data.data; // 设置当前用户数据
      } else {
        let message = this.$message;
        message.error(data.msg); // 显示错误信息
      }
    });
  },
  methods: {
    onLogout() {
      let storage = this.$storage;
      let router = this.$router;
      storage.remove("Token"); // 移除 Token
      router.replace({ name: "login" }); // 跳转到登录页面
    },
    onIndexTap() {
      window.location.href = `${this.$base.indexUrl}`; // 跳转到前台首页
    },
    setHeaderStyle() {
      this.$nextTick(() => { // 确保 DOM 已更新
        document.querySelectorAll('.navbar .right-menu .logout').forEach(el => { // 遍历退出按钮
          el.addEventListener("mouseenter", e => { // 鼠标移入事件
            e.stopPropagation();
            el.style.backgroundColor = this.heads.headLogoutFontHoverBgColor; // 设置背景颜色
            el.style.color = this.heads.headLogoutFontHoverColor; // 设置文字颜色
          });
          el.addEventListener("mouseleave", e => { // 鼠标移出事件
            e.stopPropagation();
            el.style.backgroundColor = "transparent"; // 恢复背景颜色
            el.style.color = this.heads.headLogoutFontColor; // 恢复文字颜色
          });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.navbar {
  height: 60px; // 导航栏高度
  line-height: 60px; // 行高
  width: 100%; // 宽度占满父容器
  padding: 0 34px; // 内边距
  box-sizing: border-box; // 使用标准盒模型
  background-color: #ff00ff; // 背景颜色
  position: relative; // 相对定位
  z-index: 111; // 层级

  .right-menu {
    position: absolute; // 绝对定位
    right: 34px; // 距离右侧的距离
    top: 0; // 距离顶部的距离
    height: 100%; // 高度占满父容器
    display: flex; // 使用弹性布局
    justify-content: flex-end; // 子元素右对齐
    align-items: center; // 垂直居中对齐
    z-index: 111; // 层级

    .user-info {
      font-size: 16px; // 字体大小
      color: red; // 文字颜色
      padding: 0 12px; // 内边距
    }

    .logout {
      font-size: 16px; // 字体大小
      color: red; // 文字颜色
      padding: 0 12px; // 内边距
      cursor: pointer; // 鼠标悬停时显示为手型
    }
  }

  .title-menu {
    display: flex; // 使用弹性布局
    justify-content: flex-start; // 子元素左对齐
    align-items: center; // 垂直居中对齐
    width: 100%; // 宽度占满父容器
    height: 100%; // 高度占满父容器

    .title-img {
      width: 44px; // 图片宽度
      height: 44px; // 图片高度
      border-radius: 22px; // 圆角
      box-shadow: 0 1px 6px #444; // 阴影
      margin-right: 16px; // 右侧外边距
    }

    .title-name {
      font-size: 24px; // 字体大小
      color: #fff; // 文字颜色
      font-weight: 700; // 字体加粗
    }
  }
}
</style>