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>
<style scoped lang="scss">
.num-item {
  border-radius: 4px;
  width: 50px;
  height: 60px;
  margin: 10px;
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(244, 244, 255, 0.961) 50%, rgb(255, 255, 255) 100%);
  font-size: 36px;
  color: #fff;
}

p {
  color: var(--link-color)
}




img {
  height: 100%;
}




.text1 {
  display: inline-block;
  white-space: nowrap;
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep(.n-button) {
  border-radius: 4px !important;
}

// 框
::v-deep(.n-card-header__main) {
  flex: inherit !important;
  margin: 0 auto !important;
}

::v-deep(.n-card-header) {
  padding: 0 !important;
  padding-top: 50px !important;
}

::v-deep(.n-card__content) {
  flex: inherit;
  margin: 0 auto;
  margin-bottom: 50px !important;
}

::v-deep(.n-form-item-label) {
  display: none !important;
}

::v-deep(.n-form-item) {
  --n-label-height: 10px !important;
}

::v-deep(.n-carousel__dots) {
  display: none !important;
}

::v-deep(.n-input__input-el) {
  height: 55px !important;
  line-height: 55px !important;
}

::v-deep(.n-card-header__main) {
  font-size: 30px;
}

// 按钮样式
::v-deep(.van-button--normal) {
  border-radius: 6px;
  background: #0047FF;
  border: 0;
  height: 67px;
}

.trial ::v-deep(.van-button--normal) {
  border-radius: 6px;
  background: #0047FF;
  border: 0;
  width: 400px;
  height: 67px;
}

::v-deep(.van-button__content) {
  font-size: 24px;
}

.title ::v-deep(.van-button--normal) {
  border-radius: 6px;
  background: #0047FF;
  border: 0;
  width: 130px;
  height: 42px;
}

.title ::v-deep(.van-button__content) {
  font-size: 16px;
}

.message ::v-deep(.van-button--normal) {
  border-radius: 6px;
  background: #0047FF;
  border: 0;
  width: 130px;
  height: 42px;
}

.message ::v-deep(.van-button__content) {
  font-size: 16px;
}

.modalCss ::v-deep(.n-button) {
  border-radius: 4px !important;
  height: 55px !important;
}

.submission ::v-deep(.n-button) {
  width: 700px !important;
}
</style>