feat:官网开发

nuxt.config.ts

@@ -6,7 +6,7 @@ export default defineNuxtConfig({
       meta: [
         { name: "description", content: "惠融易客助贷系统是一套专门为助贷机构量身打造的金融中介精准获客服务平台。一站式帮助助贷机构，金融居间公司，银行贷款中介老板解决获客难，转化差，管理难等业务难题，提高销售人员效率，提升销售团队业绩！现在申请，可立即试用！" },
         { name: "keywords", content: "助贷获客,信贷拓客,金融中介CRM系统" },
-      ]
+      ],
     },
   },
   css: ["assets/global.scss"],

pages/index.vue

@@ -1,13 +1,113 @@
 <template>
-  <div>
-    <nav class="border-b border-slate-200 px-5 py-2 flex items-center justify-between">
-      <h1 class="text-2xl font-bold">Nuxt3 in Action</h1>
-      <img class="w-[50px] border-[1px] border-slate-300 rounded-full inline-block" src="~/public/image/bgc-img.png"
-        alt="avatar" />
-    </nav>
-    <NButton>hello</NButton>
+  <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)

require/isMobile.js

@@ -0,0 +1,25 @@
+;(function () {
+  // 判断移动端
+  var sUserAgent = navigator.userAgent.toLowerCase()
+  if (
+    /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(
+      sUserAgent
+    )
+  ) {
+    //跳转移动端页面
+    if (window.location.href.indexOf('mobile') < 0) {
+      window.location.replace('/user/m_user') //跳转后没有后退功能
+    }
+  } else {
+    // PC端
+  }
+})()
+(function(window){
+  window.onresize=function(){
+      rem();
+  }
+  function rem(){
+      document.documentElement.style.fontSize = document.documentElement.clientWidth /7.2 + "px";
+  }
+  rem();
+})(window);