partner-front-vue3/src/components/layout/BaseHeader.vue

<template>
  <div class="base-header bg-#021B1B flex items-center justify-between">
    <img src="@/assets/images/zc_logo.png" class="w-238px h-32px" alt="" />
    <div class="mx-auto text-#fff text-20px">
      Welcome to the EJET PartnerShare Platform
    </div>
    <div>
      <!-- <img src="@/assets/images/user.png" alt="" class="logo" />
      <img src="@/assets/images/user.png" alt="" class="logo" /> -->
      <a-dropdown v-if="userStore.token" placement="bottom">
        <div class="ant-dropdown-link cursor-pointer bg-#fff b-rd-50% p-10px flex items-center" @click.prevent>
          <img class="w-20 h-20 rounded-full" v-if="userStore.userInfo.photo" :src="userStore.userInfo.photo" alt="" />
          <i-custom-user v-else class="w-20 h-20   c-primary" />
        </div>
        <span class="mr-10">{{ userStore.userInfo?.username }}</span>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <router-link to="/settings">个人设置</router-link>
            </a-menu-item>
            <a-menu-item>
              <div @click="logout">退出登录</div>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <router-link v-else to="login" class="fw-700 text-14px text-#696F79 underline"
        v-show="showLogin">登录/注册</router-link>
    </div>
  </div>
</template>
<script setup lang="ts">
import { DownOutlined } from '@ant-design/icons-vue'
import useUserStore from 'Store/modules/user'
import { Modal } from 'ant-design-vue'
import { isPage } from '@/utils'
const userStore = useUserStore()
const showLogin = !isPage('login') && !isPage('register')

const logout = () => {
  Modal.confirm({
    title: '提示',
    content: '是否确认退出？',
    centered: true,
    onOk: () => {
      userStore.logout()
    },
  })
}
</script>
<style lang="less">
.base-header {
  padding: 20px 56px;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    /* 阴影距离盒子底部的距离，负数表示在盒子外部 */
    height: 10px;
    /* 阴影的高度 */
    background: linear-gradient(to bottom, rgba(126, 125, 125, 0.2), rgba(0, 0, 0, 0));
    z-index: 1;
    /* 确保伪元素在盒子之下 */
  }
}
</style>