hjb_pc/components/layoutHeader.vue

<template>
  <div class="w-100%" style="background-color: #fff;">
    <div class="nav">
      <div class="menu">
        <ul>
          <li @click="goTo(1,'/')">首页</li>
          <li @click="goTo(2,'homeIndex/placeOrder')">下订单</li>
          <li @click="goTo(3)">接订单</li>
          <li @click="goTo(4)">找花店</li>
          <li @click="goTo(5)">花店地图</li>
          <li @click="goTo(6)">服务中心</li>
          <li @click="goTo(7)">下载中心</li>
          <li ref="active" class="active"></li>
        </ul>
      </div>
      <div class="login-btn">
        <div class="login" @click="login">登录</div>
        <div class="registered" @click="login">注册</div>
      </div>
    </div>
        <!--登录弹窗-->
        <user-login ref="userLoginRef" @on-login-succeeded="onLoginSucceeded"></user-login>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useUserStore } from '@/stores/user'
import {linkNavigateTo} from '~/utils/util'
const userStore = useUserStore()
const active = ref(null)
const userLoginRef = shallowRef()

const goTo = async (index: number,url?:string) => {
  await linkNavigateTo(url) 
//  console.log(active.value.offsetWidth);
 const width = active.value.offsetWidth
  active.value.style.left = (index - 1) * width + 'px'

}
const login = () => {
  if (userStore.isLogin) {
    // await linkNavigateTo('/forum/create')
  } else {
    //data.backUrl = '/forum/create'
    userLoginRef.value.open()
  }
}
const handlerNuxtLink = async (url: string, type: number) => {
  if (userStore.token) {
    await linkNavigateTo(url, { type: type })
  } else {
    userLoginRef.value.open()
  }
}
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  width: 6.25rem;
  margin: auto;
  height: .5208rem;
  background-color: #fff;
  ul {
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;
    li {
      font-size: .0833rem;
      width: .4688rem;
      list-style: none;
      text-align: center;
      cursor: pointer;
    }
    .active {
      position: absolute;
      bottom: 0;
      left: 0;
      width: .4688rem;
      height: .0365rem;
      background: linear-gradient(270deg, #ffd4ac 0%, #ff94d4 53%, #ff518f 100%);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      // transition: width 5s linear 0s;
    }
  }
  .login-btn {
    display: flex;
    align-items: center;
    height: 100%;
    .login {
      width: .4219rem;
      height: .1563rem;
      border-radius: .125rem;
      color: #000;
      text-align: center;
      line-height: .1563rem;
    }
    .registered {
      width: .4219rem;
      height: .1563rem;
      border-radius: .125rem;
      background: linear-gradient(270deg, #ffd4ac 0%, #ff94d4 53%, #ff518f 100%);
      color: #fff;
      text-align: center;
      line-height: .1563rem;
    }
  }
}
</style>