yoe-shop-web/src/layout/components/header.vue

<template>
  <!-- 头部组件 -->
  <div class="header flex-row-center">
    <div class="header-bos flex-row-between">
      <div class="positioning flex-row-start">
        <img src="@/assets/images/layout/layout1.png" alt="" />
        <div>武汉</div>
      </div>
      <div class="header-box flex-row-start">
        <div v-if="!isLoggedIn" class="header-text" @click="goToLogin" style="cursor: pointer">请登录</div>
        <div v-if="!isLoggedIn" class="header-text hig">免费注册</div>
        <div class="header-text" @click="goToMyOrder">我的订单</div>
        <div class="header-text" @click="onPath('/enterprise/companyInfo')">会员中心</div>
        <div class="header-text">人才招聘</div>
        <div class="header-text">帮助中心</div>
        <div class="header-text end">在线客服</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { computed } from 'vue';
import { onPath } from '@/utils/siteConfig';
const router = useRouter();
const userStore = useUserStore();

// 判断是否已登录
const isLoggedIn = computed(() => !!userStore.token);

const goToLogin = () => {
  router.push('/login');
};

const goToMyOrder = () => {
  onPath('/order/orderManage');
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 40px;
  background-color: #efefef;
  .header-bos {
    width: 1200px;
    height: 100%;
    .positioning {
      font-weight: 400;
      font-size: 14px;
      color: #322b2b;
      img {
        height: 20px;
        width: 20px;
        margin-right: 10px;
      }
    }
    .header-box {
      font-weight: 400;
      font-size: 14px;
      color: #101828;
      .header-text {
        padding-right: 14px;
        margin-right: 14px;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          width: 1px;
          height: 12px;
          background-color: #b7b7b7;
          right: 0;
          top: 4px;
        }
        &.end {
          padding-right: 0;
          margin-right: 0;
          &::after {
            display: none;
          }
        }
        &.hig {
          color: #e7000b;
        }
      }
    }
  }
}
</style>