supervision-vue/src/layout/components/Header.vue

<template>
    <header class="flex v-center between main-header">
        <div class="logo flex v-center">
            <a href="/">
                <img src="/logo.png" alt="" />
            </a>
            <span>长沙公安数字督察一体化平台</span>
        </div>
        <section
            class="flex gap userinfo v-center pointer"
            @click.stop="dropdownShow = true"
        >
            <icon name="el-icon-UserFilled" :size="29" color="#586EFF" />
            <span>{{ userStore.user.nickName }}</span>
            <span>{{ userStore.user.departName }}</span>
        </section>
    </header>
    <ul class="userinfo-dropdown" v-if="dropdownShow">
        <!-- <li class="flex gap v-center" @click="openHelp">
            <icon name="local-icon-question" :size="22" />
            <span>帮助手册</span>
        </li> -->
        <li class="flex gap v-center" @click="supportShow = true">
            <icon name="el-icon-Star" :size="22" />
            <span>技术支持</span>
        </li>
        <li class="flex gap v-center" @click="goBackV1">
            <icon name="el-icon-Back" :size="20" />
            <span>返回旧版</span>
        </li>
        <li class="flex gap v-center" @click="handleLogout">
            <icon name="local-icon-logout" :size="20" />
            <span>退出登录</span>
        </li>
    </ul>

    <div class="overlay" v-if="supportShow" @click="supportShow = false">
        <div class="position-center support-box">
            <header class="flex">
                <span>技术支持</span>
                <img src="/imgs/support.png" alt="" />
            </header>
            <div class="support-content" @click.stop>
                <!-- <p>业务服务热线：18163608038（周巍警官） </p> -->
                <p>技术服务热线：18867391894 （杨姣） 13787166867（李镇洋）</p>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import useUserStore from "@/stores/modules/user";
import { deleteToken } from "@/utils/token";
import { logout } from "@/api/auth";

const { VITE_PROFILES } = process.env;

const userStore = useUserStore();

const router = useRouter();

const dropdownShow = ref(false);
const supportShow = ref(false);

document.addEventListener("click", () => {
    dropdownShow.value = false;
});

async function handleLogout() {
    await logout();
    deleteToken();
    location.reload();
}

function goBackV1() {
    window.location.href = "/";
}

function openHelp() {
    window.open(router.resolve("/support").href);
}
</script>
<style lang="scss" scoped>
header.main-header {
    background-color: #162582;
    color: #fff;
    height: var(--header-height);
    padding: 0 8px;
    font-size: 20px;
    .logo {
        font-size: 3.89vh;
        font-weight: 700;
        letter-spacing: 4px;
        a {
            text-decoration: none;
            color: inherit;
            img {
                width: 4vw;
                display: block;
            }
        }
    }
    .userinfo {
        margin-right: 8px;
    }
}
.userinfo-dropdown {
    position: fixed;
    right: 16px;
    top: calc(var(--header-height) - 8px);
    background: #ffffff;
    box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
        0px 6px 16px 0px rgba(0, 0, 0, 0.08),
        0px 3px 6px -4px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    margin: 0;
    padding: 8px 0;
    z-index: 999;
    overflow: hidden;
    li {
        padding: 8px 16px;
        font-size: 16px;
        width: 120px;
        &:hover {
            cursor: pointer;
            font-weight: 700;
            color: var(--primary-color);
        }
    }
}
.support-box {
    width: 800px;
    header {
        width: 100%;
        height: 160px;
        line-height: 160px;
        background: linear-gradient(270deg, #1227bb 0%, #3ba2cf 100%);
        span {
            width: 50%;
            box-sizing: border-box;
            padding-left: 48px;
            color: #fff;
            font-size: 38px;
            font-weight: 700;
        }
    }
    .support-content {
        padding: 32px 20px;
        background-color: #fff;
        font-size: 16px;
        color: #333;
        p {
            margin-top: 1em;
            margin-bottom: 0.5em;
        }
    }
}
</style>