nuxt3-gw/pages/index.vue

<template>
  <div class="h-[80px] w-full bg-[#fff] flex items-center justify-between px-[12%]">
    <!-- 头部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-[18px] font-medium">惠融易客</span>
        <span class="text-[15px] font-light">
          huirong crm
        </span>
      </div>
    </div>
    <!-- 右边 -->
    <ul class='flex items-center'>
      <li v-for="i in headerTitle" :key="i.go" class="px-[16px] text-[#999999] font-medium">
        {{ i.title }}
      </li>
      <li class="px-[16px] text-[#999999] font-medium">
        <n-button type="info" class="bg-[#165DFF]">
          登录/注册
        </n-button>
      </li>
    </ul>

  </div>
  <!-- 图片 -->
  <div class="relative">
    <img src="~/public/image/img_home.png" class="w-full" alt="">
    <div class="flex flex-col absolute left-[12%] top-[30%] text-[#fff]">
      <div class="text-[40px] font-black flex">
        <h1 class="pr-[15px]">惠融易客</h1>
        <div>
          数字金融服务商
        </div>
      </div>
      <span class="mt-[10px] mb-[35px]">提交申请，立即开启企业数字化升级/提供专家1V1服务，提供企业定制化数字解决方案</span>
      <n-button type="info" class="bg-[#165DFF] w-[180px] h-[50px] text-[18px]">
        立即申请试用
      </n-button>
    </div>
  </div>
  <!-- 传统问题 traditional-->
  <div class="flex flex-col items-center justify-center pt-[70px] pb-[70px]">
    <h2 class="text-[20px] font-medium">传统方式管理难点</h2>
    <span class="text-[#999999] px-[12px] pt-[15px] pb-[40px]">传统方式管理过程中有哪些问题？</span>
    <ul class="flex items-center justify-center pb-[50px]">
      <li v-for="(item, i) in num" :key="i" class="w-[25%]">
        <!-- <img :src="item.img" alt=""> -->
        <img src="../public/image/p_img_home_qs_0_0.png" alt="">
        <!-- <img class="t-desktop-icon" :src="getImg(i)" /> -->

      </li>
    </ul>

  </div>
  <div class="w-full">
    <img src="~/public/image/advantage.png" class="w-full" alt="">
  </div>
  <!-- 精准获客 -->
  <div class="flex flex-col items-center justify-center pt-[70px] pb-[70px]">
    <h2 class="text-[20px] font-medium">精准获客</h2>
    <span class="text-[#999999] px-[12px] pt-[15px] pb-[40px]">多渠道投放对接，帮助企业精准推广产品矩阵</span>
    <ul class="flex items-center flex-wrap justify-center pb-[50px] ">
      <li v-for="(item, i) in 8" :key="i" class="w-[20%] mx-[10px]">
        <!-- <img :src="item.img" alt=""> -->
        <img src="../public/image/img_home_ad_0.png" alt="">
        <!-- <img class="t-desktop-icon" :src="getImg(i)" /> -->
      </li>
    </ul>

  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const headerTitle = reactive([
  {
    title: '首页',
    go: 'home'
  },
  {
    title: '解决方案',
    go: 'solution'
  },
  {
    title: '联系我们',
    go: 'contact'
  },
  {
    title: '申请试用',
    go: 'probation'
  }
]
)
const num = reactive([{
  img: '~/public/image/p_img_home_qs_0_0.png'
},
{
  img: '~/public/image/p_img_home_qs_0_1.png'

},
{
  img: '~/public/image/p_img_home_qs_0_2.png'

}
])
const getImg=(name: number)=> {
    return new URL(`/public/image/p_img_home_qs_0_${name}.png`, import.meta.url).href;
}

</script>
<style scoped lang="scss">
p {
  color: var(--link-color)
}
</style>