Browse Source

fix:移动端适配

shenchunlv 2 years ago
parent
commit
891db323ef

+ 13 - 8
pages/user/index.vue

@@ -54,7 +54,8 @@
       </a-form>
     </a-modal>
     <div class="home-back">
-    <img src="../../static/image/img_home.png"  style="cursor: pointer;width: 100%;" alt="" @click="amodalFn">
+    <img src="../../static/image/img_home1.png"  style="cursor: pointer;width: 100%;" alt="" @click="amodalFn">
+    <!-- <img src="../../static/image/img_home1.png"  style="cursor: pointer;width: 100%;" alt="" @click="amodalFn"> -->
       <div class="home-head">
         <div>
           <img src="../../static/image/hryk.png" style="width: 200px;" alt="">
@@ -75,31 +76,33 @@
         </div>
       </div>
     </div>
-    <!-- <img src="../../static/image/img_home.png" class="home-back" style="cursor: pointer;" alt="" @click="amodalFn"> -->
-    <div class="home-qa" id="solution">
+
+      <div class="home-qa" id="solution">
       <div class="home-title">为什么选择惠融易客</div>
       <div class="home-title-sub">
         与传统方式相比较,惠融易客的优势又都有哪些?
       </div>
+      <div class="home-img">
       <div class="home-qa-img-row">
         <div class="container">
-          <div v-for="(p, i) in homeList0" :key="i" class="container-row">
+          <div v-for="(p, i) in homeList1" :key="i" class="container-row">
             <div class='home-qa-img-row-item'>
-              <img :src="require('../../static/image/p_img_home_qs_0_' + i + '.png')" alt="">
+              <img :src="require('../../static/image/p_img_home_qs_1_' + i + '.png')" alt="">
             </div>
           </div>
         </div>
       </div>
       <div class="home-qa-img-row">
         <div class="container">
-          <div v-for="(p, i) in homeList1" :key="i" class="container-row">
+          <div v-for="(p, i) in homeList0" :key="i" class="container-row">
             <div class='home-qa-img-row-item'>
-              <img :src="require('../../static/image/p_img_home_qs_1_' + i + '.png')" alt="">
+              <img :src="require('../../static/image/p_img_home_qs_0_' + i + '.png')" alt="">
             </div>
           </div>
         </div>
       </div>
-    </div>
+      </div>
+
     <div class="home-ad">
       <div>
         <div class="home-title">精准获客</div>
@@ -114,6 +117,8 @@
         </div>
       </div>
     </div>
+    </div>
+
     <div class="home-static">
       <div class="home-content">
         <div class="home-title">免费试用</div>

+ 22 - 13
pages/user/m_user.vue

@@ -14,7 +14,7 @@
           <!-- 公司名称 -->
           <a-input v-decorator="['companyName', { rules: [{ required: true, message: '请输入您的公司名称' }] }]"
             v-model="customer.companyName" placeholder="请输入您的公司名称*">
-            <img src="../../static/image/img_home_modal_0.png" class="w-15 h-15" slot="prefix" alt="">
+            <!-- <img src="../../static/image/img_home_modal_0.png" class="w-15 h-15" slot="prefix" alt=""> -->
           </a-input>
         </a-form-item>
         <a-form-item label="City">
@@ -22,7 +22,7 @@
           <a-input v-decorator="['city', { rules: [{ required: true, message: '请输入所在城市' }] }]" v-model="customer.city"
             placeholder="请输入所在城市*">
             <!-- <a-icon slot="prefix" type="bank" /> -->
-            <img src="../../static/image/img_home_modal_1.png" class="w-15 h-15" slot="prefix" alt="">
+            <!-- <img src="../../static/image/img_home_modal_1.png" class="w-15 h-15" slot="prefix" alt=""> -->
           </a-input>
         </a-form-item>
         <a-form-item label="CustomName">
@@ -30,7 +30,7 @@
           <a-input v-decorator="['customName', { rules: [{ required: true, message: '请输入您的姓名' }] }]"
             v-model="customer.customName" placeholder="请输入您的姓名*">
             <!-- <a-icon slot="prefix" type="UserOutlined" /> -->
-            <img src="../../static/image/img_home_modal_2.png" class="w-15 h-15" slot="prefix" alt="">
+            <!-- <img src="../../static/image/img_home_modal_2.png" class="w-15 h-15" slot="prefix" alt=""> -->
           </a-input>
         </a-form-item>
         <a-form-item label="Phone">
@@ -38,15 +38,15 @@
           <a-input v-decorator="['phone', { rules: [{ required: true, message: '请输入您的联系方式' }] }]" v-model="customer.phone"
             placeholder="请输入您的联系方式*">
             <!-- <a-icon slot="prefix" type="phone" /> -->
-            <img src="../../static/image/img_home_modal_3.png" class="w-15 h-15" slot="prefix" alt="">
+            <!-- <img src="../../static/image/img_home_modal_3.png" class="w-15 h-15" slot="prefix" alt=""> -->
           </a-input>
         </a-form-item>
         <!-- 验证码 -->
         <a-form-item label="VerifyCode">
           <a-input v-decorator="['verifyCode', { rules: [{ required: true, message: '请输入验证码' }] }]" placeholder="输入验证码"
             v-model="customer.verifyCode" size="large">
-            <img src="../../static/image/img_home_modal_4.png" class="w-15 h-15" slot="prefix" alt="">
-            <div slot="suffix" style="cursor: pointer; color: #1890ff;" @click="verifyCodeFn">
+            <!-- <img src="../../static/image/img_home_modal_4.png" class="w-15 h-15" slot="prefix" alt=""> -->
+            <div slot="suffix" class="yc" style="cursor: pointer; color: #1890ff;font-size: 20px;" @click="verifyCodeFn">
               {{ countdown == 0 ? '获取验证码' : countdown }}
             </div>
           </a-input>
@@ -57,11 +57,12 @@
       <van-nav-bar safe-area-inset-top placeholder>
         <template #left>
           <div class="dropdown">
-            <button class="dropbtn">下拉菜单</button>
-            <div class="dropdown-content">
+            <!-- <button class="dropbtn">下拉菜单</button> -->
+            <img class="dropbtn" src="../../static/image/two.png" alt="">
+            <!-- <div class="dropdown-content">
               <a href="#solution">解决方案</a>
               <a href="#contact">联系我们</a>
-            </div>
+            </div> -->
           </div>
           <item android:width="40dp" android:height="27dp">
             <shape android:shape="rectangle">
@@ -80,7 +81,7 @@
         </template>
       </van-nav-bar>
     </div>
-    <img src="../../static/image/img_home.png" class="home-back" style="cursor: pointer;" alt="" @click="amodalFn">
+    <img src="../../static/image/img_home1.png" class="home-back" style="cursor: pointer;" alt="" @click="amodalFn">
     <div class="home-qa" id="solution">
       <div class="home-title">为什么选择惠融易客</div>
       <div class="home-title-sub">
@@ -402,6 +403,7 @@ export default {
 }
 
 .ad-free-content .ant-btn-primary {
+  width: 500px;
   background-color: #526eea !important;
   border-color: #526eea !important;
   color: #fff !important;
@@ -426,12 +428,15 @@ export default {
   border-color: #526eea !important;
   color: #fff !important;
   // width: 150px;
-  height: 200px;
+  width: 500px !important;
+  height: 200px !important;
+  font-size: 60px !important;
 }
 
 .home-bottom .ant-btn {
   width: 500px !important;
   height: 200px !important;
+  font-size: 60px;
 }
 
 .home-bottom .ant-btn-primary {
@@ -444,13 +449,17 @@ export default {
 }
 
 .ant-collapse>.ant-collapse-item>.ant-collapse-header {
-  height: 200px;
-  line-height: 200px;
+  height: 400px;
+  line-height: 400px;
+  font-size: 80px;
 }
 
 .ant-btn-primary {
   height: 200px;
 }
+.ant-modal-title {
+  font-size: 20px;
+}
 
 .van-nav-bar {
   background-color: #1f1d29 !important;

BIN
static/image/bgc-img.png


BIN
static/image/img_home1.png


BIN
static/image/two.png


+ 8 - 4
static/index.less

@@ -62,7 +62,7 @@ body {
   }
 
   .home-title {
-    font-size: 18px;
+    font-size: 25px;
     font-weight: 400;
     text-align: center;
 
@@ -74,7 +74,11 @@ body {
       color: #888888;
     }
   }
-
+.home-img{
+  width: 100%;
+  background: url(../static/image/bgc-img.png) no-repeat bottom;
+  background-size: 100% auto;
+}
   .home-qa {
     padding: 50px 30px;
     display: flex;
@@ -85,7 +89,7 @@ body {
     .home-qa-img-row {
       // margin-top: 20px;
       // padding: 0 200px;
-      margin: 0 auto 10px;
+      margin: 0 auto 30px;
       // margin: 103px 169px 0;
       // width: 100%;
       width: 60%;
@@ -96,7 +100,7 @@ body {
 
         &>img {
           width: 100%;
-          height: 100%;
+          height: 150px;
         }
 
         .home-qa-img-row-item-absolute {

+ 7 - 3
static/m_index.less

@@ -24,6 +24,7 @@
   // width: 33%;
   height: 100%;
   width: 90%;
+  margin-bottom: 50px;
   // background-color: #5cf;
 }
 
@@ -44,13 +45,13 @@ body {
   }
 
   .home-title {
-    font-size: 18px;
+    font-size: 80px;
     font-weight: 400;
     text-align: center;
 
     &-sub {
       text-align: center;
-      font-size: 12px;
+      font-size: 40px;
       font-weight: 400;
       margin: 20px 0;
       color: #888888;
@@ -324,7 +325,9 @@ body {
 
 // 
 .dropbtn {
-  background-color: #1f1d28;
+  width: 120px;
+  margin-left: 10px;
+  // background-color: #1f1d28;
   color: white;
   padding: 16px;
   font-size: 16px;
@@ -351,6 +354,7 @@ body {
   padding: 12px 16px;
   text-decoration: none;
   display: block;
+  width: 100%;
 }
 
 .dropdown-content a:hover {