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 class="header-text">您好，请登录</div>
        <div class="header-text hig">免费注册</div>
        <div class="header-text">我的订单</div>
        <div class="header-text">会员中心</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"></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>