hjb_pc/components/layoutHeader.vue

<template>
  <div class="w-100%" style="background-color: #fff;">
    <div class="nav">
      <div class="menu">
        <ul>
          <li :class="active == 1 ? 'active' : ''" @click="goTo(1,'/')">首页 <div v-if="active == 1" class="active-border"></div> </li>
          <li :class="active == 2 ? 'active' : ''"  @click="goTo(2,'/homeIndex/placeOrder')">下订单 <div v-if="active == 2" class="active-border"></div></li>
          <li :class="active == 3 ? 'active' : ''"  @click="goTo(3,'/homeIndex/receivingorders')">接订单<div v-if="active == 3" class="active-border"></div></li>
          <li :class="active == 4 ? 'active' : ''"  @click="goTo(4,'/homeIndex/lockflorist')">找花店<div v-if="active == 4" class="active-border"></div></li>
          <li :class="active == 5 ? 'active' : ''"  @click="goTo(5)">花店地图<div v-if="active == 5" class="active-border"></div></li>
          <li :class="active == 6 ? 'active' : ''"  @click="goTo(6)">服务中心<div v-if="active == 6" class="active-border"></div></li>
          <li :class="active == 7 ? 'active' : ''"  @click="goTo(7)">下载中心<div v-if="active == 7" class="active-border"></div></li>
          <!-- <li ref="active" class="active"></li> -->
          <nuxt-link to="homeIndex/placeOrder" exact>
    点击跳转到 About 页面
  </nuxt-link>
        </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(sessionStorage.getItem('index') || 1)
const userLoginRef = shallowRef()

const goTo = async (index: number,url?:string) => {
  active.value = index
  sessionStorage.setItem('index',index)
   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 {
  
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;
    li {
      position: relative;
      font-size: .0833rem;
      width: .4688rem;
      list-style: none;
      text-align: center;
      cursor: pointer;
      height:100%;
      line-height:.5208rem;
    }
    .active {
      color:#ff518f ;
      // transition: width 5s linear 0s;
    }
    .active-border{
      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;
    }
  }
  .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>