Browse Source

fix:pc修改

shenchunlv 2 years ago
parent
commit
b6ee1c4b3c

+ 4 - 1
nuxt.config.ts

@@ -26,8 +26,11 @@ export default defineNuxtConfig({
   modules: [
     '@nuxtjs/tailwindcss',
     "@huntersofbook/naive-ui-nuxt",
-    '@vant/nuxt'
+    '@vant/nuxt',
   ],
+  vant:{
+    
+  },
   build:{
     transpile: [/^vant-ui/]
   },

+ 127 - 23
package-lock.json

@@ -6,11 +6,14 @@
     "": {
       "hasInstallScript": true,
       "dependencies": {
-        "@nuxt/webpack-builder": "^3.2.3"
+        "@nuxt/webpack-builder": "^3.2.3",
+        "axios": "^1.3.4",
+        "vant": "^4.1.0"
       },
       "devDependencies": {
         "@huntersofbook/naive-ui-nuxt": "^0.7.1",
         "@nuxtjs/tailwindcss": "^6.4.1",
+        "@vant/nuxt": "^1.0.0",
         "nuxt": "^3.2.3",
         "sass": "^1.58.3"
       }
@@ -2480,6 +2483,42 @@
         "vue": ">=2.7 || >=3"
       }
     },
+    "node_modules/@vant/nuxt": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@vant/nuxt/-/nuxt-1.0.0.tgz",
+      "integrity": "sha512-PCoIMCgl4Srh1ELTlVBvUIvF43/yyhO83ZYeMYbFA9H5t52JU3tvkKU1iRYQUxhKygAQ4HQtm8MqCo/pPb8lhA==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.2.0",
+        "magic-string": "^0.29.0",
+        "unplugin": "^1.0.1"
+      },
+      "peerDependencies": {
+        "vant": ">=4"
+      }
+    },
+    "node_modules/@vant/nuxt/node_modules/magic-string": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.29.0.tgz",
+      "integrity": "sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "node_modules/@vant/use": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.0.tgz",
+      "integrity": "sha512-Dk7aMn7gLpoDew2tix/mjXpP0PoERWcxWh+pRY4xxl0MG4eeByAAyZSE6PgMpof4Yorqn7yq8KmeQcaVnxq2cg=="
+    },
     "node_modules/@vercel/nft": {
       "version": "0.22.6",
       "resolved": "https://registry.npmmirror.com/@vercel/nft/-/nft-0.22.6.tgz",
@@ -3248,9 +3287,7 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -3295,6 +3332,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3857,9 +3904,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -4477,9 +4522,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -5167,7 +5210,6 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -5236,9 +5278,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -8863,6 +8903,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
@@ -10595,6 +10640,18 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vant": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-4.1.0.tgz",
+      "integrity": "sha512-wAcKaWjvWrmM4bSvyYxhh0LDe9KYFOKzNAgZBpJzokAuldnaUXQF8Dco7B30U2BglErxQC1NhqLCgnZoybOnqg==",
+      "dependencies": {
+        "@vant/popperjs": "^1.3.0",
+        "@vant/use": "^1.5.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
@@ -13289,6 +13346,38 @@
         "unhead": "1.1.15"
       }
     },
+    "@vant/nuxt": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@vant/nuxt/-/nuxt-1.0.0.tgz",
+      "integrity": "sha512-PCoIMCgl4Srh1ELTlVBvUIvF43/yyhO83ZYeMYbFA9H5t52JU3tvkKU1iRYQUxhKygAQ4HQtm8MqCo/pPb8lhA==",
+      "dev": true,
+      "requires": {
+        "@nuxt/kit": "^3.2.0",
+        "magic-string": "^0.29.0",
+        "unplugin": "^1.0.1"
+      },
+      "dependencies": {
+        "magic-string": {
+          "version": "0.29.0",
+          "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.29.0.tgz",
+          "integrity": "sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/sourcemap-codec": "^1.4.13"
+          }
+        }
+      }
+    },
+    "@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "@vant/use": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.0.tgz",
+      "integrity": "sha512-Dk7aMn7gLpoDew2tix/mjXpP0PoERWcxWh+pRY4xxl0MG4eeByAAyZSE6PgMpof4Yorqn7yq8KmeQcaVnxq2cg=="
+    },
     "@vercel/nft": {
       "version": "0.22.6",
       "resolved": "https://registry.npmmirror.com/@vercel/nft/-/nft-0.22.6.tgz",
@@ -13890,9 +13979,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "at-least-node": {
       "version": "1.0.0",
@@ -13913,6 +14000,16 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -14257,8 +14354,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -14659,9 +14754,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
     "delegates": {
       "version": "1.0.0",
@@ -15131,8 +15224,7 @@
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "7.3.0",
@@ -15169,8 +15261,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -17571,6 +17661,11 @@
       "integrity": "sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==",
       "dev": true
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
@@ -18759,6 +18854,15 @@
       "dev": true,
       "optional": true
     },
+    "vant": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-4.1.0.tgz",
+      "integrity": "sha512-wAcKaWjvWrmM4bSvyYxhh0LDe9KYFOKzNAgZBpJzokAuldnaUXQF8Dco7B30U2BglErxQC1NhqLCgnZoybOnqg==",
+      "requires": {
+        "@vant/popperjs": "^1.3.0",
+        "@vant/use": "^1.5.0"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",

+ 26 - 19
pages/index.vue

@@ -6,20 +6,20 @@
       <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-[20px] font-medium">惠融易客</span>
+          <span class="text-[#333333] text-[24px] font-medium">惠融易客</span>
           <span class="text-[16px] font-light">
-            huirong crm
+            HUIRONG CRM
           </span>
         </div>
       </div>
       <!-- 右边 -->
       <ul class='flex items-center'>
         <li v-for="i in headerTitle" :key="i.go" @click="titleRight(i.go)"
-          class="pr-[80px] text-[#999999] font-medium cursor-pointer text-[18px]">
+          class="pr-[80px] text-[#999999] cursor-pointer text-[18px]">
           {{ i.title }}
         </li>
         <li class="px-[16px] text-[#999999] font-medium">
-          <n-button type="info" class="bg-[#165DFF]">
+          <n-button type="info" class="bg-[#165DFF] text-[18px] w-[130px] h-[42px]">
             登录/注册
           </n-button>
         </li>
@@ -42,7 +42,7 @@
             数字金融服务商
           </div>
         </div>
-        <span class="mt-[12px] mb-[50px] text-[20px]">提交申请,立即开启企业数字化升级/提供专家1V1服务,提供企业定制化数字解决方案</span>
+        <span class="mt-[12px] mb-[50px] text-[20px] font-light" style="letter-spacing: 1px;">提交申请,立即开启企业数字化升级/提供专家1V1服务,提供企业定制化数字解决方案</span>
         <n-button type="info" class="bg-[#165DFF] w-[256px] h-[67px] text-[26px]" @click="btn">
           立即申请试用
         </n-button>
@@ -155,13 +155,13 @@
           <n-carousel autoplay :currentIndex="currentIndex">
             <img v-for="item in homeList" class="carousel-img" :src="item.images">
           </n-carousel>
-          <div class="flex flex-col justify-between ml-[50px] font-medium text-[24px] w-[500px]">
+          <div class="flex flex-col justify-between ml-[30px] font-medium text-[24px] w-[500px]">
             <h1>{{ homeList[currentIndex].title }}</h1>
-            <div class="flex justify-between h-[50px]">
-              <span class="text-[18px] ">
+            <div class="flex items-center justify-between h-[50px]">
+              <span class="text-[18px] text-[#666]">
                 {{ homeList[currentIndex].summary }}
               </span>
-              <n-button type="info" class="bg-[#165DFF]" @click="btnContent(currentIndex)">
+              <n-button type="info" class="bg-[#165DFF] text-[18px] w-[130px] h-[42px]" @click="btnContent(currentIndex)">
                 查看详情
               </n-button>
             </div>
@@ -246,7 +246,7 @@
   </div>
   <n-modal v-model:show="showModal">
     <n-card style="width: 800px" title="申请试用" :bordered="false" size="huge" role="dialog" aria-modal="true">
-      <div class="text-[#999999] text-[12px] pt-[15px] pb-[30px]">
+      <div class="text-[#999999] text-[18px] pt-[15px] pb-[12px]">
         为了我们能更好的服务您,请您填写以下信息,如遇到问题,请您拨打免费服务热线
       </div>
       <n-form ref="formRef" :model="customer" :rules="rules">
@@ -268,13 +268,13 @@
         </n-form-item>
         <n-form-item path="verifyCode" label="验证码" class="">
           <n-input v-model:value="customer.verifyCode" class="h-[55px] leading-[55px]" placeholder="请输入验证码" />
-          <n-button type="info" class="w-[100px] h-[50px] text-[#fff] bg-[#1f4df5] ml-[10px]" :disabled="countdown != 0"
+          <n-button type="info" class="w-[150px] h-[55px] text-[#fff] bg-[#1f4df5] ml-[20px] rounded-[4px]" :disabled="countdown != 0"
             @click="verifyCodeFn">
             {{ countdown == 0 ? '获取验证码' : countdown }}
           </n-button>
         </n-form-item>
         <div class="flex justify-center">
-          <n-button type="info" class="w-[300px] h-[50px] text-[#fff] bg-[#1f4df5]" @click="handleValidateButtonClick">
+          <n-button type="info" class="w-[400px] h-[55px] text-[20px] text-[#fff] bg-[#1f4df5] rounded-[4px]" @click="handleValidateButtonClick">
             立即提交
           </n-button>
         </div>
@@ -535,7 +535,7 @@ img{
 .carousel-img {
   width: 509px;
   height: 306px;
-  // object-fit: cover;
+  border-radius: 4px;
 }
 
 .custom-dots {
@@ -548,15 +548,15 @@ img{
   display: inline-block;
   width: 20px;
   height: 4px;
-  margin: 0 3px;
-  border-radius: 4px;
-  background: #888888;
+  margin: 0 5px;
+  // border-radius: 4px;
+  background: #0000001d;
   transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
 }
 
 .custom-dots li.is-active {
-  width: 50px;
+  width: 40px;
   background: #0047FF;
 }
 
@@ -567,18 +567,22 @@ img{
 }
 
 ::v-deep(.n-card-header) {
-  padding: 0;
-  padding-top: 50px;
+  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;
@@ -588,4 +592,7 @@ img{
   height: 55px !important;
   line-height: 55px !important;
 }
+::v-deep(.n-card-header__main){
+  font-size: 30px;
+}
 </style>

+ 570 - 0
pages/m_user.vue

@@ -0,0 +1,570 @@
+<template>
+  <div class="flex mx-[20px] h-[44px] items-center">
+    <div class="w-[24px]">
+      <img src="~/public/image/title-left.png" style="width: 24px;" alt="">
+    </div>
+    <div class="flex-1 flex items-center justify-center">
+      <img src="~/public/favicon.ico" style="width: 24px;" alt="">
+    </div>
+    <div class="w-[24px]">
+      <img src="~/public/image/title-right.png" style="width: 24px;" alt="">
+    </div>
+  </div>
+  <!-- 图片 -->
+  <div>
+    <div class="relatives flex justify-center">
+      <div class="flex-[1]">
+      </div>
+      <!-- <img src="~/public/image/img_home.png" class="w-full" alt=""> -->
+      <div class=" flex items-center flex-col text-[#fff] mt-[28px]">
+        <div class="text-[24px] font-normal flex">
+          <h1 class="pr-[15px]">惠融易客</h1>
+          <div>
+            数字金融服务商
+          </div>
+        </div>
+        <span class="mt-[10px]  text-[10px]">提交申请,立即开启企业数字化升级
+        </span>
+        <span class="mb-[28px] text-[10px]">
+          提供专家1V1服务,提供企业定制化数字解决方案
+        </span>
+        <n-button type="info" class="bg-[#165DFF] w-[144px] h-[40px] text-[14px]" @click="btn">
+          立即申请试用
+        </n-button>
+      </div>
+      <div class="flex-[1]">
+
+      </div>
+    </div>
+  </div>
+
+  <!-- 传统问题 traditional-->
+  <div class="flex flex-col items-center justify-center mx-[16px] mt-[30px]">
+    <h2 class="text-[18px] font-medium">传统方式管理难点</h2>
+    <span class="text-[#999999] pb-[10px] text-[12px]">传统方式管理过程中有哪些问题?</span>
+    <div class="flex">
+      <div class="w-765px mx-auto">
+        <n-carousel autoplay class="mx-auto">
+          <img src="../public/image/p_img_home_qs_0_0.png" style="width: 343px; margin: 0 auto;" alt="">
+          <img src="../public/image/p_img_home_qs_0_1.png" style="width: 343px; margin: 0 auto;" alt="">
+          <img src="../public/image/p_img_home_qs_0_2.png" style="width: 343px; margin: 0 auto;" alt="">
+        </n-carousel>
+      </div>
+    </div>
+  </div>
+  <div class="w-full mt-[30px]">
+    <img src="~/public/image/m_advantage.png" class="w-full" alt="">
+  </div>
+  <!-- 精准获客 -->
+  <div id="solution" class="flex flex-col items-center justify-center py-[30px]">
+    <h2 class="text-[18px] font-medium">精准获客</h2>
+    <span class="text-[#999999] pt-[5px] pb-[10px] text-[12px]">多渠道投放对接,帮助企业精准推广产品矩阵</span>
+    <div class="flex w-full">
+      <div class="flex-[1]"></div>
+      <ul class=" flex items-center flex-wrap justify-center mx-auto">
+        <li class="w-[107px] h-[50px] mr-[11px] mb-[10px]">
+          <img src="../public/image/img_home_ad_0.png" alt="">
+        </li>
+        <li class="w-[107px] h-[50px] mr-[11px] mb-[10px]">
+          <img src="../public/image/img_home_ad_1.png" alt="">
+        </li>
+        <li class="w-[107px] h-[50px] mb-[10px]">
+          <img src="../public/image/img_home_ad_2.png" alt="">
+        </li>
+        <li class="w-[107px] h-[50px] mr-[11px] mb-[10px]">
+          <img src="../public/image/img_home_ad_3.png" alt="">
+        </li>
+        <li class="w-[107px] h-[50px] mr-[11px] mb-[10px]">
+          <img src="../public/image/img_home_ad_4.png" alt="">
+        </li>
+        <li class="w-[107px] h-[50px] mb-[10px]">
+          <img src="../public/image/img_home_ad_5.png" alt="">
+        </li>
+        <li class="w-[107px] h-[50px] mr-[10px]">
+          <img src="../public/image/img_home_ad_6.png" alt="">
+        </li>
+        <li class="w-[107px] h-[50px]">
+          <img src="../public/image/img_home_ad_7.png" alt="">
+        </li>
+      </ul>
+      <div class="flex-[1]">
+
+      </div>
+    </div>
+
+
+  </div>
+  <!-- 免费试用 trial-->
+  <div class="w-full h-full trial">
+    <div></div>
+    <div class=" mx-auto flex flex-col items-center text-[#161616] pt-[16px] pb-[20px]">
+      <h2 class="font-medium text-[18px]" @click="btn">免费试用</h2>
+      <div class="mt-[12px] mb-[18px] text-[12px] text-[#999999]">
+        立即免费试用惠融易客CRM 提升企业业绩
+      </div>
+      <div class="mb-[20px] flex items-center font-medium text-[13px]">
+        <span>已有</span>
+        <ul class="flex justify-center items-center mx-[10px] my-[20px] bg-[#f7f8fa]">
+          <li v-for="item in freeList" class=" py-[2px] px-[3px] bg-[#fff] mx-[5px] text-[16px]">
+            {{ item }}
+          </li>
+        </ul>
+        <span>
+          人加入
+        </span>
+      </div>
+      <n-button type="info" class="bg-[#165DFF] w-[144px] h-[40px] text-[14px]" @click="btn">
+        立即申请试用
+      </n-button>
+    </div>
+    <div>
+
+    </div>
+  </div>
+  <!-- 咨询信息 message-->
+  <div class="flex flex-col items-center justify-center pt-[30px] pb-[70px] mx-[16px] " v-if="homeList[0]">
+    <h2 class="text-[18px] font-medium">资讯信息</h2>
+    <span class="text-[#999999] px-[12px] pt-[5px] pb-[8px] text-[12px]">点击了解惠融易客的更多信息</span>
+    <div>
+      <n-carousel autoplay :currentIndex="currentIndex" class="mx-auto">
+        <img v-for="item in homeList" class="carousel-img" :src="item.images">
+      </n-carousel>
+      <div
+        class="flex flex-col justify-between font-medium text-[16px] h-[94px] w-[343px] mx-auto text-[#000000] mt-[10px] mb-[20px]">
+        <h1>{{ homeList[currentIndex].title }}</h1>
+        <div class="flex items-center justify-between">
+          <span class="text-[12px] ">
+            {{ homeList[currentIndex].summary }}
+          </span>
+          <n-button type="info" class="bg-[#165DFF]" @click="btnContent(currentIndex)">
+            查看详情
+          </n-button>
+        </div>
+      </div>
+      <ul class="custom-dots w-[375px]">
+        <li v-for="(i, index) in homeList" :key="index" :class="{ ['is-active']: currentIndex === index }"
+          @click="customFn(index)">
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="w-full bg-[#1f1d2a] pt-[20px] pb-[10px]" id="contact">
+    <van-collapse v-model="activeNames">
+      <van-collapse-item title="联系方式" name="1">
+        <div class="flex flex-col">
+          <span class="text-[12px] my-[16px]">
+          客服: kefu@meloinfo.com
+        </span>
+        <span class="text-[12px]">
+          商务: 17723267692(微信同号)
+        </span>
+        </div>
+
+      </van-collapse-item>
+      <van-collapse-item title="公司地址" name="2">
+        <span class="text-[12px] py-[10px]">
+          重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
+        </span>
+      </van-collapse-item>
+      <van-collapse-item title="应用二维码(长按识别)" name="3">
+        <!-- 二维码 -->
+        <div class="flex items-center justify-center">
+          <div class="flex flex-col items-center justify-center" v-if="bottomCode.wxQrUrl">
+            <img :src="bottomCode.wxQrUrl" style="width:100px;height:100px" alt="">
+            <span class="text-[#fff] text-[12px]" style="font-size: 11px; margin-bottom: 5px;">
+              关注公众号
+            </span>
+          </div>
+          <div class="flex flex-col items-center justify-center" v-if="bottomCode.iosQrUrl" style="margin: 0 30px">
+            <img :src="bottomCode.iosQrUrl" style="width:100px;height:100px" alt="">
+            <span class="text-[#fff] text-[12px]" style="font-size: 11px; margin-bottom: 5px;">
+              iosAPP下载
+            </span>
+          </div>
+          <div class="flex flex-col items-center justify-center" v-if="bottomCode.androidQrUrl">
+            <img :src="bottomCode.androidQrUrl" style="width:100px;height:100px" alt="">
+            <span class="text-[#fff] text-[12px]" style="font-size: 11px; margin-bottom: 5px;">
+              安卓APP下载
+            </span>
+          </div>
+        </div>
+      </van-collapse-item>
+    </van-collapse>
+    <div class=" m-auto">
+      <!-- 备案号 -->
+      <div class="flex flex-col items-center justify-center text-[#999999] text-[10px] my-[30px]">
+        <span>重庆惠融数字科技有限公司版权所有</span>
+        <span>
+          渝ICP备2023000211号-4
+        </span>
+      </div>
+    </div>
+  </div>
+  <n-modal v-model:show="showModal">
+    <n-card style="width: 800px" title="申请试用" :bordered="false" size="huge" role="dialog" aria-modal="true">
+      <div class="text-[#999999] text-[12px] pt-[15px] pb-[30px]">
+        为了我们能更好的服务您,请您填写以下信息,如遇到问题,请您拨打免费服务热线
+      </div>
+      <n-form ref="formRef" :model="customer" :rules="rules">
+        <n-form-item path="companyName" label="公司名称">
+          <n-input v-model:value="customer.companyName" @keydown.enter.prevent class="h-[55px] leading-[55px]"
+            placeholder="请输入公司名称" />
+        </n-form-item>
+        <n-form-item path="city" label="所在城市">
+          <n-input v-model:value="customer.city" class="h-[55px] leading-[55px]" placeholder="请选择所在城市" />
+          <!-- <n-cascader v-model:value="customer.city" placeholder="请选择所在城市" class="h-[55px] leading-[55px]"
+            :options="provice" check-strategy="child" :show-path="true" value-field="name" label-field="name" @update:value="handleUpdateValue"
+            /> -->
+        </n-form-item>
+        <n-form-item path="customName" label="姓名">
+          <n-input v-model:value="customer.customName" class="h-[55px] leading-[55px]" placeholder="请输入姓名" />
+        </n-form-item>
+        <n-form-item path="phone" label="联系方式">
+          <n-input v-model:value="customer.phone" class="h-[55px] leading-[55px]" placeholder="请输入联系方式" />
+        </n-form-item>
+        <n-form-item path="verifyCode" label="验证码" class="">
+          <n-input v-model:value="customer.verifyCode" class="h-[55px] leading-[55px]" placeholder="请输入验证码" />
+          <n-button type="info" class="w-[100px] h-[50px] text-[#fff] bg-[#1f4df5] ml-[10px]" :disabled="countdown != 0"
+            @click="verifyCodeFn">
+            {{ countdown == 0 ? '获取验证码' : countdown }}
+          </n-button>
+        </n-form-item>
+        <div class="flex justify-center">
+          <n-button type="info" class="w-[300px] h-[50px] text-[#fff] bg-[#1f4df5]" @click="handleValidateButtonClick">
+            立即提交
+          </n-button>
+        </div>
+      </n-form>
+    </n-card>
+  </n-modal>
+  <!-- <nuxt-link to="/list/123">news-1</nuxt-link> -->
+</template>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { postListData, downInfo, sendSms, postCustomer } from '~/server/api/index'
+import { provice } from '~/utils/city'
+import {
+  FormRules,
+  useMessage,
+  FormInst,
+} from 'naive-ui'
+// console.log('provice',provice)
+const router = useRouter()
+const headerTitle = reactive([
+  {
+    title: '首页',
+    go: 'home'
+  },
+  {
+    title: '解决方案',
+    go: 'solution'
+  },
+  {
+    title: '联系我们',
+    go: 'contact'
+  },
+  {
+    title: '申请试用',
+    go: 'probation'
+  }
+]
+)
+const activeNames = ref(['1']);
+const titleRight = (i: string) => {
+  if (i == 'probation') {
+    btn()
+    return
+  }
+  document.querySelector('#' + i)?.scrollIntoView()
+
+}
+const freeList = reactive(['3', '0', '7', '0', '1', '3', '7', '4'])
+const message = useMessage()
+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'
+
+}
+])
+// console.log('import.meta.url', import.meta.url)
+const getImg = (name: number) => {
+  return new URL(`/public/image/p_img_home_qs_0_${name}.png`, import.meta.url).href;
+}
+const currentIndex = ref(1)
+const customFn = (i: number) => {
+  console.log('i', i)
+  currentIndex.value = i
+}
+const go = (i: number) => {
+  currentIndex.value = currentIndex.value + i
+  if (currentIndex.value > homeList.value.length - 1) {
+    currentIndex.value = 0
+    return
+  }
+  if (currentIndex.value < 0) {
+    currentIndex.value = homeList.value.length - 1
+    return
+  }
+}
+const btnContent = (i: number) => {
+  // 跳转
+  console.log('跳转', i)
+  router.push({
+    path: `/list/${homeList.value[i].id}`
+  })
+
+}
+let homeList: any = ref([])
+const postListDataFn = async () => {
+  let list = await postListData({
+    "categoryId": 1
+  })
+  console.log('postListDataFn', list)
+  list.data.data ? homeList.value = list.data.data.list : ''
+}
+let bottomCode: any = ref([])
+postListDataFn()
+const downInfoFn = async () => {
+  const list = await downInfo()
+  console.log('list', list)
+  bottomCode.value = list.data.data
+}
+downInfoFn()
+// 框显示隐藏
+let showModal = ref<boolean>(false)
+const rules: FormRules = {
+  companyName: [
+    {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入公司名称'
+    }
+  ],
+  customName: [
+    {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入姓名'
+    }
+  ],
+  city: [
+    {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请选择所在城市'
+    }
+  ],
+  phone: [
+    {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入手机号'
+    }
+  ],
+  verifyCode: [
+    {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入验证码'
+    }
+  ],
+}
+interface customerType {
+  sceneType?: string;
+  companyName?: null | string;
+  customName?: null | string;
+  city?: null | string;
+  phone?: null | string;
+  verifyCode?: null | string;
+  channel?: number;
+
+}
+let countdown = ref(0)
+const customer = ref<customerType>({
+  sceneType: "loanofficial", // 场景
+  companyName: null,// 公司名称
+  customName: null, // 姓名
+  city: null, // 所在城市
+  phone: null, // 手机号
+  verifyCode: null, //验证码
+  channel: 16, //pc官网16 手机端17
+})
+const verifyCodeFn = async () => {
+  if (customer.value.phone) {
+    if (new RegExp('^1[0-9]{10}$').test(customer.value.phone)) {
+      let z = await sendSms({
+        sceneType: "loanofficial",
+        userMobile: customer.value.phone
+      })
+      if (z.data.code == 0) {
+        message.success('发送成功')
+        countdown.value = 60
+        // this.countDown()
+        countDown()
+        // console.log('进来了', this.countdown)
+      } else {
+        message.error('发送失败')
+      }
+    } else {
+      message.error('请输入正确手机号')
+    }
+  } else {
+    // 唤起提示
+    message.error('请输入手机号')
+
+  }
+}
+// 倒计时
+const countDown = () => {
+  // 设置倒计时
+  const intervalBtn = setInterval(() => {
+    if (countdown.value == 1) {
+      // 清除定时器
+      clearInterval(intervalBtn)
+      // 重置倒计时状态
+      countdown.value = 0
+    };
+    // 倒计时
+    countdown.value--
+  }, 1000)
+}
+const formRef = ref<FormInst | null>(null)
+const handleValidateButtonClick = (e: MouseEvent) => {
+  e.preventDefault()
+  formRef.value?.validate(async (errors) => {
+    if (!errors) {
+      message.success('验证成功')
+      console.log('customer.value', customer.value)
+      let z = await postCustomer(customer.value)
+      console.log('zzz', z)
+      if (z.data.msg == '成功') {
+        // 关闭页面
+        fouse()
+      }
+    } else {
+      console.log(errors)
+      message.error('验证失败')
+    }
+  })
+}
+const fouse = () => {
+  showModal.value = false
+}
+const btn = () => {
+  showModal.value = true
+}
+
+const handleUpdateValue = (value: string) => {
+  console.log(value, '进来了')
+}
+</script>
+<style scoped lang="scss">
+p {
+  color: var(--link-color)
+}
+
+.relatives {
+  width: 100%;
+  height: 210px;
+  background: url(~/public/image/img_home.png) no-repeat;
+  background-size: cover;
+}
+
+.trial {
+  background: url(~/public/image/try_out.png) no-repeat;
+  background-size: cover;
+
+}
+
+.n-carousel {
+  width: 529px !important;
+}
+
+.carousel-img {
+  width: 343px;
+  height: 163px;
+  margin: 0 auto;
+}
+
+.custom-dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  // margin: 0;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.custom-dots li {
+  display: inline-block;
+  width: 20px;
+  height: 4px;
+  margin: 0 3px;
+  border-radius: 4px;
+  background: #888888;
+  transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.custom-dots li.is-active {
+  width: 50px;
+  background: #0047FF;
+}
+
+.custom-indicator {
+  // position: absolute;
+  // right: 5px;
+  // bottom: 5px;
+  padding: 2px 5px;
+  font-size: 12px;
+  background: #fafafa;
+}
+
+// 框
+::v-deep(.n-card-header__main) {
+  flex: inherit !important;
+  margin: 0 auto !important;
+}
+
+::v-deep(.n-card-header) {
+  padding: 0;
+  padding-top: 50px;
+}
+
+::v-deep(.n-card__content) {
+  flex: inherit;
+  margin: 0 auto;
+}
+
+::v-deep(.n-form-item-label) {
+  display: none !important;
+}
+
+::v-deep(.n-carousel__dots) {
+  display: none !important;
+}
+
+::v-deep(.n-input__input-el) {
+  height: 55px !important;
+  line-height: 55px !important;
+}
+
+// 移动
+::v-deep(.van-cell) {
+  color: #fff !important;
+  background: #131820 !important;
+}
+
+::v-deep(.van-collapse-item__content) {
+  color: #fff !important;
+  background: #131820 !important;
+}
+</style>

BIN
public/image/img_home_modal_3.png


BIN
public/image/m_advantage.png


BIN
public/image/title-left.png


BIN
public/image/title-right.png


File diff suppressed because it is too large
+ 710 - 920
yarn.lock


Some files were not shown because too many files changed in this diff