Browse Source

fix:pc样式修改

shenchunlv 2 years ago
parent
commit
0b8f3b38b5

+ 1 - 0
nuxt.config.ts

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

+ 133 - 36
pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex w-full">
+  <div class="flex w-full title">
     <div class="flex-[1]"></div>
     <div id="home" class="h-[100px] bg-[#fff] flex items-center justify-between w-[1200px]">
       <!-- 头部title -->
@@ -15,13 +15,15 @@
       <!-- 右边 -->
       <ul class='flex items-center'>
         <li v-for="i in headerTitle" :key="i.go" @click="titleRight(i.go)"
-          class="pr-[80px] text-[#999999] cursor-pointer text-[18px]">
+          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]" >
+          <!-- <n-button type="info" class="bg-[#165DFF] text-[18px] w-[130px] h-[42px]" style="border-radius: 6px;" >
             登录/注册
-          </n-button>
+          </n-button> -->
+        <van-button type="primary"> 登录/注册</van-button>
+
         </li>
       </ul>
 
@@ -43,9 +45,11 @@
           </div>
         </div>
         <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 type="info" class="bg-[#165DFF] w-[256px] h-[67px] text-[26px]" @click="btn">
           立即申请试用
         </n-button>
+        <br> -->
+        <van-button type="primary"  class="bg-[#165DFF] w-[256px] h-[67px] text-[26px]" @click="btn">立即申请试用</van-button>
       </div>
       <div class="flex-[1]">
 
@@ -54,9 +58,9 @@
   </div>
 
   <!-- 传统问题 traditional-->
-  <div class="flex flex-col items-center justify-center py-[100px]">
-    <h2 class="text-[40px] font-medium">传统方式管理难点</h2>
-    <span class="text-[#999999] pt-[20px] pb-[60px] text-[18px]">传统方式管理过程中有哪些问题?</span>
+  <div class="flex flex-col items-center justify-center py-[100px] bg-[#fafafa]">
+    <h2 class="text-[36px] font-medium">传统方式管理难点</h2>
+    <span class="text-[#999999] pt-[10px] pb-[60px] text-[18px]">传统方式管理过程中有哪些问题?</span>
     <div class="flex">
       <div></div>
       <ul class="flex items-center justify-between w-[1200px]">
@@ -73,13 +77,30 @@
       <div></div>
     </div>
   </div>
-  <div class="w-full">
-    <img src="~/public/image/advantage.png" class="w-full" alt="">
+  <div class="w-full advantage flex flex-col items-center justify-center text-[#fff]">
+    <h2 class="text-[36px] font-medium mt-[100px]">我们的优势</h2>
+    <span class=" pb-[60px] text-[18px] mt-[10px]">与传统方式相比较,惠融易客的优势又有哪些?</span>
+    <div class="flex mb-[102px]">
+      <div></div>
+      <ul class="flex items-center justify-between w-[1200px]">
+        <li class="w-[386px] h-[294px]">
+          <img src="~/public/image/advant-01.png" alt="">
+        </li>
+        <li class="w-[386px] h-[294px]">
+          <img src="~/public/image/advant-02.png" alt="">
+        </li>
+        <li class="w-[386px] h-[294px]">
+          <img src="~/public/image/advant-03.png" alt="">
+        </li>
+      </ul>
+      <div></div>
+    </div>
+    <!-- <img src="~/public/image/advantage-title.png" class="w-[1200px] mx-auto" alt=""> -->
   </div>
   <!-- 精准获客 -->
   <div id="solution" class="flex flex-col items-center justify-center pt-[100px] pb-[100px]">
-    <h2 class="text-[40px] font-medium">精准获客</h2>
-    <span class="text-[#999999] pt-[20px] pb-[60px] text-[18px]">多渠道投放对接,帮助企业精准推广产品矩阵</span>
+    <h2 class="text-[36px] font-medium">精准获客</h2>
+    <span class="text-[#999999] pt-[10px] pb-[60px] text-[18px]">多渠道投放对接,帮助企业精准推广产品矩阵</span>
     <div class="flex w-full">
       <div class="flex-[1]"></div>
       <ul class="w-[1200px] flex items-center flex-wrap justify-center mx-auto">
@@ -119,14 +140,14 @@
   <div class="w-full h-full trial">
     <div></div>
     <div class="w-[1200px] mx-auto flex flex-col items-center text-[#161616] pt-[100px] pb-[110px]">
-      <h2 class="font-medium text-[40px]" @click="btn">免费试用</h2>
-      <div class="mt-[12px] mb-[18px] text-[18px] text-[#999999]">
+      <h2 class="font-medium text-[36px]" @click="btn">免费试用</h2>
+      <div class="mt-[10px] mb-[18px] text-[18px] text-[#999999]">
         立即免费试用惠融易客CRM 提升企业业绩
       </div>
       <div class="mb-[25px] flex items-center font-medium text-[30px]">
         <span>已有</span>
-        <ul class="flex justify-center items-center mx-[5px] my-[20px] bg-[#f7f8fa]">
-          <li v-for="item in freeList" class=" py-[10px] px-[15px] bg-[#fff] mx-[5px] text-[36px]">
+        <ul class="flex justify-center items-center mx-[5px] my-[20px]">
+          <li v-for="item in freeList" class=" bg-[#fff] w-[50px] h-[60px] text-[36px] text-center mx-[5px] rounded-[4px]">
             {{ item }}
           </li>
         </ul>
@@ -134,18 +155,20 @@
           人加入
         </span>
       </div>
-      <n-button type="info" class="bg-[#165DFF] w-[400px] h-[70px] text-[24px]" @click="btn">
+      <!-- <n-button type="info" class="bg-[#165DFF] w-[400px] h-[70px] text-[24px]" @click="btn">
         立即申请试用
       </n-button>
+      <br> -->
+        <van-button type="primary">立即申请试用</van-button>
     </div>
     <div>
 
     </div>
   </div>
   <!-- 咨询信息 message-->
-  <div class="flex flex-col items-center justify-center pt-[70px] pb-[70px] mx-[50px]" v-if="homeList[0]">
-    <h2 class="text-[40px] font-medium">资讯信息</h2>
-    <span class="text-[#999999] px-[12px] pt-[15px] pb-[40px] text-[18px]">点击了解惠融易客的更多信息</span>
+  <div class="flex flex-col items-center justify-center pt-[70px] pb-[70px] mx-[50px] message" v-if="homeList[0]">
+    <h2 class="text-[36px] font-medium">资讯信息</h2>
+    <span class="text-[#999999] px-[10px] pt-[10px] pb-[40px] text-[18px]">点击了解惠融易客的更多信息</span>
     <div class="flex flex-row items-center w-[100%] 2xl:px-[100px] box-border">
       <div @click="go(-1)" class="w-[50px]">
         <img src="~/public/image/left.png" class="w-[50px] h-[40px]" alt="">
@@ -158,12 +181,14 @@
           <div class="flex flex-col justify-between ml-[30px] font-medium text-[24px] w-[500px]">
             <h1>{{ homeList[currentIndex].title }}</h1>
             <div class="flex items-center justify-between h-[50px]">
-              <span class="text-[18px] text-[#666]">
+              <span class="text-[18px] text-[#666] text1">
                 {{ homeList[currentIndex].summary }}
               </span>
-              <n-button type="info" class="bg-[#165DFF] text-[18px] w-[130px] h-[42px]" @click="btnContent(currentIndex)">
+              <!-- <n-button type="info" class="bg-[#165DFF] text-[18px] w-[130px] h-[42px]" @click="btnContent(currentIndex)">
                 查看详情
-              </n-button>
+              </n-button> -->
+            <van-button type="primary" @click="btnContent(currentIndex)">查看详情</van-button>
+
             </div>
           </div>
         </div>
@@ -179,7 +204,7 @@
     </div>
 
   </div>
-  <div class="w-full bg-[#1f1d2a] pt-[20px] pb-[10px]" id="contact">
+  <div class="w-full bg-[#1f1d2a] pt-[20px] pb-[10px] relative" id="contact">
     <div class="w-[1200px] m-auto">
       <div class="flex justify-between">
         <!-- 左侧 -->
@@ -189,7 +214,7 @@
             <h3 class="text-[16px] font-medium text-[#fff]">
               联系方式
             </h3>
-            <span class="text-[12px] my-[16px]">
+            <span class="text-[12px] my-[20px]">
               客服: kefu@meloinfo.com
             </span>
             <span class="text-[12px]">
@@ -198,7 +223,7 @@
           </div>
           <!-- 地址 -->
           <div class="text-[#999999]">
-            <h3 class="text-[16px] font-medium mb-[16px] text-[#fff]">
+            <h3 class="text-[16px] font-medium mb-[20px] text-[#fff]">
               公司地址
             </h3>
             <span class="text-[12px]">
@@ -208,15 +233,15 @@
         </div>
         <!-- 二维码 -->
         <div class="flex items-center justify-center">
-          <div class="flex flex-col items-center justify-center" v-if="bottomCode.wxQrUrl">
+          <div class="flex flex-col items-center justify-center ml-" v-if="bottomCode.wxQrUrl">
             <!-- <div class="flex flex-col items-center justify-center"> -->
-            <span class="text-[#fff] text-[12px]" style="font-size: 11px; margin-bottom: 5px;">
+            <span class="text-[#fff] text-[16px] mb-[20px]">
               关注公众号
             </span>
             <img :src="bottomCode.wxQrUrl" style="width:100px;height:100px" alt="">
           </div>
-          <div class="flex flex-col items-center justify-center" v-if="bottomCode.iosQrUrl" style="margin: 0 30px">
-            <span class="text-[#fff] text-[12px]" style="font-size: 11px; margin-bottom: 5px;">
+          <div class="flex flex-col items-center justify-center mx-[50px]" v-if="bottomCode.iosQrUrl">
+            <span class="text-[#fff] text-[16px] mb-[20px]">
               iosAPP下载
             </span>
             <img :src="bottomCode.iosQrUrl" style="width:100px;height:100px" alt="">
@@ -224,7 +249,7 @@
           </div>
           <div class="flex flex-col items-center justify-center" v-if="bottomCode.androidQrUrl">
             <!-- <div class="flex flex-col items-center justify-center"> -->
-            <span class="text-[#fff] text-[12px]" style="font-size: 11px; margin-bottom: 5px;">
+            <span class="text-[#fff] text-[16px] mb-[20px]">
               安卓APP下载
             </span>
             <img :src="bottomCode.androidQrUrl" style="width:100px;height:100px" alt="">
@@ -232,12 +257,34 @@
           </div>
         </div>
       </div>
+
       <!-- 备案号 -->
-      <div class="flex items-center justify-center text-[#585667] text-[10px] my-[30px]">
-        <span>重庆惠融数字科技有限公司版权所有</span>
+      <div class="h-[154px] flex flex-col items-center justify-center text-[#585667] text-[10px] py-[60px]">
+        <div class="pt-[30px]">
+          <span>Copyright © 2023 重庆惠融数字科技有限公司版权所有</span>
         <span>
           渝ICP备2023000211号-4
         </span>
+        <span class="mx-[10px]">
+          营业执照:91500000MA60U0WQ8Y
+        </span>
+        </div>
+        <div class="my-[20px]">
+          违法和不良信息举报邮箱:sugarpark@163.com
+        </div>
+        <div>
+          <span class="ml-[20px]">
+            联网备案号:50019002502299
+          </span>
+          <span>
+            中国互联网违法和不良信息举报中心
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="absolute bottom-[140px] left-0 w-full">
+      <div class="w-full h-0 opacity-[1] border-[1px] border-[#2B374A]">
+
       </div>
     </div>
   </div>
@@ -339,7 +386,8 @@ const getImg = (name: number) => {
 }
 const loginBtn =()=>{
   console.log('跳转')
-  window.location.replace('http://p.daicrm.com/#/login')
+  // window.location.replace('http://p.daicrm.com/#/login')
+  // window.location.href('http://p.daicrm.com/#/login')
 }
 const currentIndex = ref(1)
 const customFn = (i: number) => {
@@ -525,7 +573,10 @@ p {
 .trial {
   background: url(~/public/image/try_out.png) no-repeat;
   background-size: cover;
-
+}
+.advantage{
+  background: url(~/public/image/advantage.png) no-repeat;
+  background-size: cover;
 }
 img{
   height: 100%;
@@ -561,7 +612,16 @@ img{
   width: 40px;
   background: #0047FF;
 }
-
+.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;
@@ -597,4 +657,41 @@ img{
 ::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;
+}
 </style>

+ 3 - 3
pages/m_user.vue

@@ -155,7 +155,7 @@
   </div>
 
   <div class="w-full bg-[#1f1d2a] pt-[20px] pb-[10px]" id="contact">
-    <van-collapse v-model="activeNames">
+    <van-collapse v-model="activeNames" :border="false">
       <van-collapse-item title="联系方式" name="1">
         <div class="flex flex-col">
           <span class="text-[12px] my-[16px]">
@@ -206,7 +206,7 @@
       </div>
     </div>
   </div>
-  <n-drawer v-model:show="active" :width="200" style="top:50px" placement="left">
+  <n-drawer v-model:show="active" :width="200" 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>
@@ -214,7 +214,7 @@
     </n-drawer-content>
   </n-drawer>
   <!-- <van-overlay :show="showModal" @click="showModal = false"> -->
-    <van-dialog v-model:show="showModal" :show-confirm-button="false" closeDialog title="申请试用">
+    <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" >
         为了我们能更好的服务您,请您填写以下信息,

BIN
public/image/advant-01.png


BIN
public/image/advant-02.png


BIN
public/image/advant-03.png


BIN
public/image/advantage-title.png


BIN
public/image/advantage.png


BIN
public/image/m_img_home_qs_1_0.png


BIN
public/image/m_img_home_qs_1_1.png


BIN
public/image/m_img_home_qs_1_2.png


BIN
public/image/p_img_home_qs_0_0.png


BIN
public/image/p_img_home_qs_0_1.png


BIN
public/image/p_img_home_qs_0_2.png


BIN
public/image/try_out.png


+ 3 - 0
public/isMobile.js

@@ -10,6 +10,9 @@
     }
   } else {
         // PC端
+        if(window.location.pathname =='/m_user'){
+          window.location.replace('/') //跳转后没有后退功能
+          }
        console.log('pc',)
   }
 })()