feat:移动端样式修改，爱番番接入

app.vue

@@ -13,5 +13,7 @@ import {
   NMessageProvider,
   NDialogProvider
 } from 'naive-ui'
+// import { aff } from './public/aff';
+// aff()
 </script>
 

nuxt.config.ts

@@ -10,7 +10,8 @@ export default defineNuxtConfig({
         { name: "viewport",content:"width=device-width; initial-scale=1;"}
       ],
       script: [
-        { src: "isMobile.js" }
+        { src: "isMobile.js" },
+        { src: "aff.js" },
       ]
     },
   },

pages/m_user.vue

@@ -10,9 +10,9 @@
       <img src="~/public/favicon.ico" style="width: 24px;" alt="">
     </div>
     <div class="w-[24px]">
-      <a href="tel:17723267692">          
-      <img src="~/public/image/title-right.png" style="width: 24px;" alt="">
-        </a>
+      <a href="tel:17723267692">
+        <img src="~/public/image/title-right.png" style="width: 24px;" alt="">
+      </a>
     </div>
   </div>
   <!-- 图片 -->
@@ -50,15 +50,32 @@
     <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="">
+          <img src="~/public/image/m_img_home_qs_0_0.png" style="width: 343px; margin: 0 auto;" alt="">
+          <img src="~/public/image/m_img_home_qs_0_1.png" style="width: 343px; margin: 0 auto;" alt="">
+          <img src="~/public/image/m_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 class="flex flex-col items-center justify-center py-[30px] advantage text-[#fff]">
+    <h2 class="text-[18px] font-medium">我们的优势</h2>
+    <span class="pt-[5px] pb-[10px] text-[12px]">与传统方式相比较，惠融易客的优势又有哪些？</span>
+    <div class="flex">
+      <!-- <div></div> -->
+      <ul class="flex flex-col items-center justify-between">
+        <li class="w-[343px] h-[175px] mt-[10px]">
+          <img src="~/public/image/m_advant-01.png" alt="">
+        </li>
+        <li class="w-[343px] h-[175px] my-[20px]">
+          <img src="~/public/image/m_advant-02.png" alt="">
+        </li>
+        <li class="w-[343px] h-[175px]">
+          <img src="~/public/image/m_advant-03.png" alt="">
+        </li>
+      </ul>
+      <!-- <div></div> -->
+    </div>
+    <!-- <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]">
@@ -104,12 +121,12 @@
     <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]">
+      <div class="mt-[12px] mb-[10px] text-[12px] text-[#999999]">
         立即免费试用惠融易客CRM 提升企业业绩
       </div>
-      <div class="mb-[20px] flex items-center font-medium text-[13px]">
+      <div class="mb-[10px] flex items-center font-medium text-[13px]">
         <span>已有</span>
-        <ul class="flex justify-center items-center mx-[10px] my-[20px] bg-[#f7f8fa]">
+        <ul class="flex justify-center items-center mx-[10px] my-[20px]">
           <li v-for="item in freeList" class=" py-[2px] px-[3px] bg-[#fff] mx-[5px] text-[16px]">
             {{ item }}
           </li>
@@ -138,7 +155,7 @@
         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] ">
+          <span class="text-[12px] text1">
             {{ homeList[currentIndex].summary }}
           </span>
           <n-button type="info" class="bg-[#165DFF]" @click="btnContent(currentIndex)">
@@ -154,7 +171,7 @@
     </div>
   </div>
 
-  <div class="w-full bg-[#1f1d2a] pt-[20px] pb-[10px]" id="contact">
+  <div class="w-full bg-[#131820] pt-[20px] pb-[10px]" id="contact">
     <van-collapse v-model="activeNames" :border="false">
       <van-collapse-item title="联系方式" name="1">
         <div class="flex flex-col">
@@ -198,25 +215,45 @@
     </van-collapse>
     <div class=" m-auto">
       <!-- 备案号 -->
-      <div class="flex flex-col items-center justify-center text-[#999999] text-[10px] my-[30px]">
-        <span>重庆惠融数字科技有限公司版权所有</span>
+      <div class="flex flex-col items-center justify-center text-[#999999] text-[10px] my-[20px]">
+        <span>Copyright © 2023 重庆惠融数字科技有限公司版权所有</span>
         <span>
           渝ICP备2023000211号-4
         </span>
+        <span>
+          营业执照:91500000MA60U0WQ8Y
+        </span>
+        <span class="my-[20px]">
+          违法和不良信息举报邮箱:sugarpark@163.com
+        </span>
+        <span>
+          联网备案号:50019002502299
+        </span>
+        <span class="mt-[20px]">
+          中国互联网违法和不良信息举报中心
+        </span>
       </div>
     </div>
   </div>
-  <n-drawer v-model:show="active" :width="200" style="top:40px" placement="left">
+  <n-drawer v-model:show="active" :width="152" style="top:40px" placement="left">
     <n-drawer-content>
-        <div v-for="item in headerTitle" :title="item.title" class="flex flex-col " >
-           <span class="py-[20px] text-[16px] text-[#161616]" @click="titleRight(item.go)">{{ item.title }}</span>
+      <div class="flex flex-col items-center justify-between h-full">
+        <div class="h-[200px]">
+          <div v-for="item in headerTitle" :title="item.title" class="flex flex-col">
+            <span class="py-[20px] text-[16px] text-[#161616]" @click="titleRight(item.go)">{{ item.title }}</span>
           </div>
+        </div>
+        <a href="http://p.daicrm.com/#/login" class="mb-[74px] text-[16px] text-[#0047FF]">
+          登录/注册
+        </a>
+      </div>
+
     </n-drawer-content>
   </n-drawer>
   <!-- <van-overlay :show="showModal" @click="showModal = false"> -->
-    <van-dialog v-model:show="showModal" :show-confirm-button="false" :closeOnClickOverlay="true" closeDialog title="申请试用">
-  <div class="wrapper" @click.stop>
-    <div class="text-[#999999] text-[12px] pt-[10px] text-center" >
+  <van-dialog v-model:show="showModal" :show-confirm-button="false" :closeOnClickOverlay="true" closeDialog title="申请试用">
+    <div class="wrapper" @click.stop>
+      <div class="text-[#999999] text-[12px] pt-[10px] text-center">
         为了我们能更好的服务您，请您填写以下信息，
       </div>
       <div class="text-[#999999] text-[12px] pb-[20px] mx-auto text-center">
@@ -224,23 +261,23 @@
       </div>
       <n-form ref="formRef" :model="customer" :rules="rules">
         <n-form-item path="companyName" label="公司名称" style="width: 343px;">
-          <n-input v-model:value="customer.companyName" @keydown.enter.prevent  class="h-[40px] leading-[40px]"
+          <n-input v-model:value="customer.companyName" @keydown.enter.prevent class="h-[40px] leading-[40px]"
             placeholder="请输入公司名称" />
         </n-form-item>
         <n-form-item path="city" label="所在城市">
-          <n-input v-model:value="customer.city" class="h-[40px] leading-[40px]"  placeholder="请选择所在城市" />
+          <n-input v-model:value="customer.city" class="h-[40px] leading-[40px]" placeholder="请选择所在城市" />
           <!-- <n-cascader v-model:value="customer.city" placeholder="请选择所在城市" class="h-[40px] leading-[40px]"
             :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-[40px] leading-[40px]"  placeholder="请输入姓名" />
+          <n-input v-model:value="customer.customName" class="h-[40px] leading-[40px]" placeholder="请输入姓名" />
         </n-form-item>
         <n-form-item path="phone" label="联系方式">
-          <n-input v-model:value="customer.phone" class="h-[40px] leading-[40px]"  placeholder="请输入联系方式" />
+          <n-input v-model:value="customer.phone" class="h-[40px] leading-[40px]" placeholder="请输入联系方式" />
         </n-form-item>
         <n-form-item path="verifyCode" label="验证码" class="">
-          <n-input v-model:value="customer.verifyCode" class="h-[40px] leading-[40px]"  placeholder="请输入验证码" />
+          <n-input v-model:value="customer.verifyCode" class="h-[40px] leading-[40px]" placeholder="请输入验证码" />
           <n-button type="info" class="w-[124px] h-[40px] text-[#fff] bg-[#1f4df5] ml-[10px]" :disabled="countdown != 0"
             @click="verifyCodeFn">
             {{ countdown == 0 ? '获取验证码' : countdown }}
@@ -252,8 +289,8 @@
           </n-button>
         </div>
       </n-form>
-  </div>
-</van-dialog>
+    </div>
+  </van-dialog>
   <!-- <n-modal v-model:show="showModal">
     <n-card style="width: 343px;height: 529px;" title="申请试用" :bordered="false" size="huge" role="dialog" aria-modal="true">
 
@@ -299,7 +336,7 @@ const titleRight = (i: string) => {
     return
   }
   document.querySelector('#' + i)?.scrollIntoView()
-  active.value =false
+  active.value = false
 
 }
 // 抽屉展示
@@ -342,7 +379,7 @@ const go = (i: number) => {
 const btnContent = (i: number) => {
   // 跳转
   // console.log('跳转', i)
-  localStorage.setItem('hryk-id',homeList.value[i].id)
+  localStorage.setItem('hryk-id', homeList.value[i].id)
   router.push({
     path: '/list/'
   })
@@ -505,10 +542,14 @@ p {
 }
 
 .trial {
-  background: url(~/public/image/try_out.png) no-repeat;
+  background: url(~/public/image/m_try_out.png) no-repeat;
   background-size: cover;
 
 }
+.advantage{
+  background: url(~/public/image/m_advantage.png) no-repeat;
+  background-size: cover;
+}
 
 .n-carousel {
   width: 529px !important;
@@ -549,6 +590,13 @@ p {
   font-size: 12px;
   background: #fafafa;
 }
+.text1{
+  display: inline-block;
+  white-space: nowrap; 
+  width: 200px; 
+  overflow: hidden;
+  text-overflow:ellipsis;
+}
 
 // 框
 // .n-drawer.n-drawer--left-placement
@@ -594,29 +642,41 @@ p {
   color: #fff !important;
   background: #131820 !important;
 }
+::v-deep(.van-cell:after){
+  border-bottom: 1px solid #262f3e !important;
+}
+::v-deep(.van-collapse-item--border:after){
+  border-top: 1px solid #262f3e !important;
+}
+
 // 移动端样式
-::v-deep(.n-input:not(.n-input--autosize)){
+::v-deep(.n-input:not(.n-input--autosize)) {
   width: 260px !important;
 }
-::v-deep(.n-card-header__main){
+
+::v-deep(.n-card-header__main) {
   font-size: 18px;
 }
+
 ::v-deep(.n-card-header) {
   padding: 0 !important;
   padding-top: 20px !important;
 }
-::v-deep(.n-form){
+
+::v-deep(.n-form) {
   padding: 0 20px !important;
   padding-bottom: 30px !important;
 }
-::v-deep(.van-popup--center){
+
+::v-deep(.van-popup--center) {
   width: 343px !important;
   height: 529px !important;
 }
-::v-deep(.van-button__content){
+
+::v-deep(.van-button__content) {
   display: none !important;
 }
-::v-deep(.n-form-item){
+
+::v-deep(.n-form-item) {
   --n-label-height: 5px !important;
-}
-</style>
+}</style>

public/aff.js

@@ -0,0 +1,8 @@
+var _hmt = _hmt || [];
+(function() {
+  console.log('爱番番触发')
+var hm = document.createElement("script");
+hm.src = "https://hm.baidu.com/hm.js?38416d7ccaa6b3339741246fd9fc45fd";
+var s = document.getElementsByTagName("script")[0];
+s.parentNode.insertBefore(hm, s);
+})();