nuxt3-gw/composables/header.vue

<template>
    <div class="flex w-full h-[100px] title fixed top-0 left-0 bottom-0 z-20 bg-[#fff]"
    style="border-bottom: 1px solid #E1E1E1;">
    <div class="flex-[1]"></div>
    <div class="h-[100px] bg-[#fff] flex items-center justify-between w-[1200px]"
      style="border-bottom: 1px solid #E1E1E1;">
      <!-- 头部title -->
      <div class="flex items-center">
        <img src="~/public/favicon.ico" class="w-[50px] h-[50px] mr-[10px]" alt="">
        <div class="flex flex-col">
          <span class="text-[#333333] text-[24px] font-medium">惠融易客</span>
          <span class="text-[16px] font-light">
            HUIRONG CRM
          </span>
        </div>
      </div>
      <!-- 右边 -->
      <ul class='flex items-center'>
        <li v-for="i in headerTitle" :key="i.go" @mouseenter="mouseenterFn(i.go)" @mouseleave="mouseleaveFn"
          :class="headerClass == i.go ? 'text-[#1f4df5!important]' : ''" @click="titleRight(i.go)"
          class="pr-[70px] text-[#999999] cursor-pointer text-[18px]">
          {{ i.title }}
        </li>
        <li class="px-[16px] text-[#999999] font-medium" @click="loginBtn">
          <!-- <n-button type="info" class="bg-[#165DFF] text-[18px] w-[130px] h-[42px]" style="border-radius: 6px;" >
            登录/注册
          </n-button> -->
          <van-button type="primary"> 登录/注册</van-button>

        </li>
      </ul>
    </div>
    <div class="flex-[1]">
    </div>
  </div>
</template>
<script lang="ts" setup>
const headerTitle = reactive([
  {
    title: '首页',
    go: 'home'
  },
  {
    title: '解决方案',
    go: 'solution'
  },
  {
    title: '联系我们',
    go: 'contact'
  },
  {
    title: '申请试用',
    go: 'probation'
  }
]
)
const headerClass = ref<string>('')
const mouseenterFn = (i: string) => {
  // console.log('mouseenterFn')
  headerClass.value = i
}
const mouseleaveFn = () => {
  headerClass.value = ''
}
const titleRight = (i: string) => {
  if (i == 'probation') {
    // btn()
    return
  }
  document.querySelector('#' + i)?.scrollIntoView()
}
const loginBtn = () => {
  console.log('跳转')
  // window.location.replace('http://p.daicrm.com/#/login')
  window.open('http://p.daicrm.com/#/login')
  // window.location.href('http://p.daicrm.com/#/login')
}
</script>