web/src/components/common/Header.vue

<template>
  <header>
    <div class="center-wrapper">
      <div class="menu">
        <router-link to="/home" class="menu-item" active-class="active active1">首页</router-link>
        <router-link to="/registration" class="menu-item" active-class="active active2">挂号</router-link>
        <router-link to="/outpatient" class="menu-item" active-class="active active3">接诊</router-link>
        <router-link to="/charge" class="menu-item" active-class="active active4">收费</router-link>
        <router-link to="/inventory" class="menu-item" active-class="active active5">库存</router-link>
        <router-link to="/member" class="menu-item" active-class="active active6">会员</router-link>
        <router-link to="/social" class="menu-item" active-class="active active7">医保</router-link>
        <router-link to="/statistics" class="menu-item" active-class="active active8">统计</router-link>
        <router-link to="/settings" class="menu-item" active-class="active active9">设置</router-link>
        <div style="float: right;color: #fff">
          <el-button style="float: right;color: #fff" @click="logout" type="text">退出登录</el-button>
        </div>
      </div>

    </div>

  </header>
</template>

<style scoped lang="scss">
@use "@/assets/scss/base";

.menu {
  position: relative;
  text-align: center;
  line-height: 50px;

  .menu-item {
    display: inline-block;
    color: #FFF;
    outline: none;
    text-decoration: none;
    font-size: 18px;
    width: 140px;
    height: 50px;
    position: relative;

    span {
      display: inline-block;
      height: 50px;
    }

    &::before {
      content: '';
      display: inline-block;
      width: 26px;
      height: 50px;
      vertical-align: middle;
      border-radius: 12px;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: 0 10px;
    }

    &:nth-child(1)::before {
      background-image: url('/static/images/menu_icon/1.png'); // 替换为实际的图片路径
    }

    &:nth-child(2)::before {
      background-image: url('/static/images/menu_icon/2.png'); // 替换为实际的图片路径
    }

    &:nth-child(3)::before {
      background-image: url('/static/images/menu_icon/3.png'); // 替换为实际的图片路径
    }

    &:nth-child(4)::before {
      background-image: url('/static/images/menu_icon/4.png'); // 替换为实际的图片路径
    }

    &:nth-child(5)::before {
      background-image: url('/static/images/menu_icon/5.png'); // 替换为实际的图片路径
    }

    &:nth-child(6)::before {
      background-image: url('/static/images/menu_icon/6.png'); // 替换为实际的图片路径
    }

    &:nth-child(7)::before {
      background-image: url('/static/images/menu_icon/7.png'); // 替换为实际的图片路径
    }

    &:nth-child(8)::before {
      background-image: url('/static/images/menu_icon/8.png'); // 替换为实际的图片路径
    }

    &:nth-child(9)::before {
      background-image: url('/static/images/menu_icon/9.png'); // 替换为实际的图片路径
    }
  }

  .active {
    background: #fff;
    color: base.$background-color-main;
    border-radius: 12px;
  }

  .active1:before {
    background-image: url('/static/images/menu_icon/1-active.png') !important;
  }

  .active2:before {
    background-image: url('/static/images/menu_icon/2-active.png') !important;
  }

  .active3:before {
    background-image: url('/static/images/menu_icon/3-active.png') !important;
  }

  .active4:before {
    background-image: url('/static/images/menu_icon/4-active.png') !important;
  }

  .active5:before {
    background-image: url('/static/images/menu_icon/5-active.png') !important;
  }

  .active6:before {
    background-image: url('/static/images/menu_icon/6-actvie.png') !important;
  }

  .active7:before {
    background-image: url('/static/images/menu_icon/7-active.png') !important;
  }

  .active8:before {
    background-image: url('/static/images/menu_icon/8-active.png') !important;
  }

  .active9:before {
    background-image: url('/static/images/menu_icon/9-active.png') !important;
  }

}

header {
  position: relative;
  width: 100%;
  height: 80px;

  background-color: base.$background-color-main;
  padding: 15px 0;
}
</style>
<script setup lang="ts">
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {apiConfig} from "@/assets/config/apiConfig.ts";
import {post} from "@/utils/request";
import {singStatus} from "@/stores/counter.ts";

let logout = function () {
    localStorage.removeItem('token')
    ElMessage({
      message: "退出成功并退出签到，即将为您跳转到登录页面",
      type: 'success',
      duration: 1000,
      onClose: () => {
        post(apiConfig.signOut).then((res: any) => {
          useRouter().push("/manager/login")
        })
      }
  })
}
const status = singStatus()
</script>