personalhubs/src/components/pc/header.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import logoCn from '@/assets/images/logoCn.png'
import logoEn from '@/assets/images/logoEn.png'
import shopbtn from '@/assets/images/footer/shopbtn.gif'
import shopbtnEn from '@/assets/images/footer/shopbtn-en.gif'
import { useUserStore } from '@/stores/user'
import { pcHeader, languageList } from './data'
const router = useRouter();
//得到i18n的locale
const userStore = useUserStore()
const info = computed(() => userStore.getUserInfo)
const isLogin = computed(() => userStore.isLogin)
const { locale:langauge, t } = useI18n();
const navs = pcHeader(t)
const languageObj = computed(() => languageList.find(item => item.value === langauge.value) || {})
console.log('languageObj', info.value, userStore)
</script>

<template>
    <div class="header-layout">
    <div class="headercontainer clear flex justify-between items-center">
      <img :src="locale === 'zh' ? logoCn : logoEn" alt="logo">
      <div class="menu">
        <div
          class="list"
          ref="list"
        >
          <a
            v-for="nav in navs"
            :key="nav.text"
            :class="{active: hoverCp === nav.cp}"
            class="header-item"
            :style="{'margin-right': langauge==='en' ? '30px' : '48px'}"
            @click="toNav(nav)"
          >{{nav.text}}
            <ul class="child-list" v-if="nav.items">
              <li class="" v-for="(item, index) in nav.items" :key="index" @click.stop="toNav(item)">
                {{ item.text }}
              </li>
            </ul>
          </a>
          
        </div>
      </div>
      <div class="ctrl">
        <div class="shop-btn" @click="router.push({name: 'mallMeta'})" v-if="!isShop">
          <img :src="langauge==='en' ? shopbtnEn : shopbtn" alt="" srcset="">
        </div>
        <div class="language-w">
          <div class="list">
            <a class="header-item">
              <p class="guoqi" :style="{'background-image': `url(${languageObj.img})`}">{{ languageObj.name }}</p>
              <ul class="child-list">
                <li v-for="item in languageList" :key="item.name" :style="{'background-image': `url(${item.img})`}" @click="changeLanguage(item.value)">{{ item.name }}</li>
              </ul>
            </a>
          </div>
        </div>
        <div class="user" @click="router.push('/login/login')" v-if="!isLogin"></div>
        <div v-else-if="info" class="user-w">
          <div class="user avatar" :class="{vip: info.incrementNum}" :style="{'background-image': `url(${info.head})`}" @click="router.push('/information')">
          <div class="member-icon" @click.stop="router.push({name: 'member'})" v-if="info.incrementNum"></div>
          </div>
          <div class="list avatarList">
              <a class="header-item" @click="router.push('/information')">
                <ul class="child-list">
                  <li @click="router.push('/information')">{{ t('header.myaccount') }}</li>
                  <li @click.stop="handleLogout">{{ t('header.logout') }}</li>
                </ul>
              </a>
            </div>
        </div>
        <div class="cart" @click="handleCartClick">
          <h-icon type="xingouwuche" class="icon" />
          <span v-if="cartCount">{{cartCount}}</span>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="header">
    <div class="logo contentPage">
      <img :src="locale === 'zh' ? logoCn : logoEn" alt="logo">
    </div>
  </div> -->
</template>

<style lang="less" scoped>
.language-w {
  .header-item {
    margin-right: 20px !important;
    display: inline-block;
    p {
      color: #323233;
      font-size: 14px;
      font-weight: normal;
      padding-left: 28px;
      background: url(~@/assets/images/home/China.png) no-repeat left center;
      background-size: 20px 14px;
    }
  }
  .child-list {
    background: #fff;
    li {
      color: #323233;
      font-size: 14px;
      font-weight: normal;
      padding: 0 13px 0 40px;
      background: url(~@/assets/images/home/China.png) no-repeat 13px center;
      background-size: 20px 14px;
    }
  }
}

.header-layout {
  // $mc: .5s cubic-bezier(.77, 0, .175, 1);
  // $ts: all $mc;
  background-color: #fff;
  color: #fff;
  justify-content: space-between;
  color: #323233;
  height: 80px;
  box-shadow:0px 3px 6px rgba(0,0,0,0.1);
  .headercontainer {
    height: 100%;
    width: 1316px;
    padding: 0 20px;
    margin: 0 auto;
  }
  .child-layout {
    position: absolute;
    top: 100%;
    max-height: 0;
    left: 0;
    right: 0;
    // transition: max-height $mc;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    .silp {
      position: absolute;
      width: 1px;
      height: 100%;
      background-color: #ededed;
      z-index: 2;
    }
  }

  .logo-layout {
    text-align: center;
    text-align: left;
    margin-right: 52px;
    float: left;
    height: 100%;
    .logo {
      position: relative;
      width: 150px;
      height: 100%;
      display: inline-block;
      color: #fff;
    }
  }

  .menu {
    float: left;
    min-width: 600px;

    .lang {
      box-sizing: border-box;
      text-align: center;
      padding-right: 10px;

      a {
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        margin-left: 5px;
        color: #727272;
        transition: color 0.2s ease;
        &:hover{
          color: #fff;
        }
      }

      .active{
        color: #fff;
      }
    }

    
  }
  .list {
      justify-content: space-between;
      height: 100%;
      a {
        display: inline-block;
        // padding: 30px 47px 25px 0;
        margin-right: 48px;
        line-height: 80px;
        font-size: 16px;
        text-decoration: none;
        font-weight: bold;
        position: relative;
        transition: color 0.3s ease;

        &::before {
          z-index: 2;
        }

        &.active {
          color: #727272;

          &::after {
            border-top-color: #727272;
            transform: translateY(-50%) scale(1.3);
          }

          &::before {
            transform: translateY(-50%) scale(0.7);
            border-top-color: #000;
          }
        }

      }
    }
  .ctrl {
    align-items: center;
    font-size: 16px;
    &>div {
      display: inline-block;
      vertical-align: middle;
    }
    .shop-btn {
      margin-right: 25px;
      cursor: pointer;
      
      height: 34px;
      line-height: 34px;
      text-align: center;
      font-weight: 400;
      height: 34px;
      background: linear-gradient(180deg, #1EDAE5 1%, #069199 100%);
      border-radius: 17px;
      color: #FFFFFF;
        
  img {
    height: 34px;
  }
    }
    .country {
      width: 20px;
      height: 21px;
      display: inline-block;
      background: url(~@/assets/images/home/China.png) no-repeat center center;
      vertical-align: middle;
    }
    .language-w {
      // padding: 0 30px  0 10px;
    }
    .language {
      margin: 0 15px 0 0;
      color: #8F8F8F;
      cursor: pointer;
      vertical-align: middle;
      font-size: 16px;
      font-weight: 600;
      &.is-active {
        color: #323233;
      }
    }
    .user {
      width: 20px;
      height: 20px;
      background: url(~@/assets/images/home/account-icon.png) no-repeat center center;
      cursor: pointer;
      background-size: cover;
      &.avatar {
        width: 34px;
        height: 34px;
        border: 1px solid #EFEFEF;
        border-radius: 50%;
        position: relative;
        &.vip {
          border-color: #D8AF7C;
        }
      }
      
      .member-icon {
        width: 12px;
        height: 12px;
        background: url(~@/assets/images/refactor/usercenter/avatar_vip.png) no-repeat center center;
        background-size: cover;
        position: absolute;
        right: -2px;
        bottom: 0;
      }
    }
    .cart {
      color: #323233;
      margin-left: 18px;
      cursor: pointer;
      position: relative;
      .icon {
        font-size: 26px;
      }
      span {
        display: block;
        position: absolute;
        left: 9px;
        top: 0;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 14px;

        height: 16px;
        min-width: 16px;
        padding: 0 2px;
        background: linear-gradient(135deg, #696D75 0%, #3C3F41 100%);
        border-radius: 4px;
      }
    }
  }

}
.header-item:hover {
  position: relative;
  .child-list {
    display: block;
  }
}
.child-list {
  position: absolute;
  // width: 112px;
  box-shadow: 0px -2px 6px rgba(113,113,113,0.16);
  margin-top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: none;
  transition: all linear 0.5s;
  padding-top: 6px;
  white-space: nowrap;
  
  background: #fff;
  &::before {
    position: absolute;
    display: block;
    top: -5px;
    left: 50%;
    margin-left: -2px;
    width: 0;
    height: 0px;
    content: '';
    background: #fff;
    border-style: solid;
    border-width: 4px;
    border-color: #fff #fff transparent transparent;
    transform: rotate(-45deg);
    box-shadow: 1px -1px 0px rgba(113,113,113,0.16);
    z-index: 1;
  }
  li {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    text-align: center;
    position: relative;
    background: #fff;
    z-index: 2;
    width: 100%;
    padding: 0 25px;
    &:hover {
      background-color: #EBEBEB;
    }
  }
}
.list {
  &:hover {
    .header-item {
      color: #909090;
    }
  }
  .header-item:hover {
    position: relative;
    color: #323233;
    transition: 0s;
    .child-list {
      display: block;
    }
  }
}
.user-w {
  .avatarList{
    position: absolute;
    z-index: 1;
  }
  .list {
    height: 100%;
    top: 0;
    .header-item {
      display: block;
      width: 32px;
      padding-top: 80px;
    }
  }
}
@media screen and (max-width: 1600px){
}

@media screen and (max-width: 1450px){
}

</style>