fix:pc样式修改

pages/user/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <!-- <img class="home-back" src={require('../../assets/img_home.png')} /> -->
-    <a-modal v-model="amodal" title="申请试用" on-ok="handleOk" width="720px"  @afterClose="fouse" destroyOnClose>
+    <a-modal v-model="amodal" title="申请试用" on-ok="handleOk" width="720px" @afterClose="fouse" destroyOnClose>
       <template slot="footer">
         <div class="sub">
           <a-button key="submit" type="primary" @click="handleSubmit">
@@ -54,15 +54,15 @@
       </a-form>
     </a-modal>
     <div class="home-back">
-    <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"> -->
+      <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="">
         </div>
         <div class="home-right">
           <span>
-            <a href="#"> 首页</a>  
+            <a href="#"> 首页</a>
           </span>
           <span>
             <a href="#solution"> 解决方案</a>
@@ -77,47 +77,47 @@
       </div>
     </div>
 
-      <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 homeList1" :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="">
+        <div class="home-qa-img-row">
+          <div class="container">
+            <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_1_' + i + '.png')" alt="">
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="home-qa-img-row">
-        <div class="container">
-          <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_0_' + i + '.png')" alt="">
+        <div class="home-qa-img-row">
+          <div class="container">
+            <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_0_' + i + '.png')" alt="">
+              </div>
             </div>
           </div>
         </div>
       </div>
-      </div>
 
-    <div class="home-ad">
-      <div>
-        <div class="home-title">精准获客</div>
-        <div class="home-title-sub">
-          多渠道投放对接，帮助企业搭建推广产品矩阵
-        </div>
-        <div class="home-ad-row">
-          <div v-for="(index, i) in 6" :key="i" class="home-row-single">
-            <img :src="require('../../static/image/img_home_ad_' + i + '.png')" alt="">
+      <div class="home-ad">
+        <div>
+          <div class="home-title">精准获客</div>
+          <div class="home-title-sub">
+            多渠道投放对接，帮助企业搭建推广产品矩阵
           </div>
+          <div class="home-ad-row">
+            <div v-for="(index, i) in 6" :key="i" class="home-row-single">
+              <img :src="require('../../static/image/img_home_ad_' + i + '.png')" alt="">
+            </div>
 
+          </div>
         </div>
       </div>
     </div>
-    </div>
 
     <div class="home-static">
       <div class="home-content">
@@ -185,18 +185,21 @@
     <!-- 底部 -->
     <div class="home-bottom" id="contact">
       <div class="home-bottom-c">
-              <!-- 联系我们 -->
-      <div class="contact">
-        <span class="contact-1">
-          联系我们
-        </span>
-        <span class="contact-2">不要犹豫，现在就来联系我们吧 !</span>
-      </div>
-      <!-- 咨询 -->
-      <div class="home-consult">
-        <!-- 左边 -->
-        <div class="consult-tel">
-          <!-- <div style="width: 40%;">
+        <div class="header-contact">
+          <!-- 左侧 -->
+          <div>
+            <!-- 联系我们 -->
+            <div class="contact">
+              <span class="contact-1">
+                联系我们
+              </span>
+              <span class="contact-2">不要犹豫，现在就来联系我们吧 !</span>
+            </div>
+            <!-- 咨询 -->
+            <div class="home-consult">
+              <!-- 左边 -->
+              <div class="consult-tel">
+                <!-- <div style="width: 40%;">
             <span>
               <img src="../../static/image/001.png" alt="" class="w-20 h-20">
             </span>
@@ -204,15 +207,15 @@
               咨询： 23232322
             </span>
           </div> -->
-          <div style="margin-right: 30px;">
-            <span>
-              <img src="../../static/image/002.png" alt="" class="w-20 h-20">
-            </span>
-            <span class="color-fff-12">
-              客服： kefu@meloinfo.com
-            </span>
-          </div>
-          <!-- <div style="width: 40%;">
+                <div style="margin-right: 30px;">
+                  <span>
+                    <img src="../../static/image/002.png" alt="" class="w-20 h-20">
+                  </span>
+                  <span class="color-fff-12">
+                    客服： kefu@meloinfo.com
+                  </span>
+                </div>
+                <!-- <div style="width: 40%;">
             <span>
               <img src="../../static/image/003.png" alt="" class="w-20 h-20">
             </span>
@@ -220,54 +223,53 @@
               市场： 3333 44333 4311
             </span>
           </div> -->
-          <div >
-            <span>
-              <img src="../../static/image/004.png" alt="" class="w-20 h-20">
-            </span>
-            <span class="color-fff-12">
-              商务： 17723267692（微信同号）
-            </span>
-          </div>
+                <div>
+                  <span>
+                    <img src="../../static/image/004.png" alt="" class="w-20 h-20">
+                  </span>
+                  <span class="color-fff-12">
+                    商务： 17723267692（微信同号）
+                  </span>
+                </div>
+              </div>
+            </div>
+                 <!-- 地址 -->
+        <div class="site color-fff">
+          <img src="../../static/image/005.png" class="w-20 h-20 " alt="">
+          <span>
+            地址 重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
+          </span>
         </div>
-        <!-- 二维码 -->
-        <div class="consult-code">
-          <div class="code-content" v-if="bottomCode.wxQrUrl">
-            <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
-              关注公众号
-            </span>
-            <img :src="bottomCode.wxQrUrl"
-              style="width:100px;height:100px" alt="">
           </div>
-          <div class="code-content" v-if="bottomCode.iosQrUrl" style="margin: 0 15px 0 45px">
-            <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
-              iosAPP下载
-            </span>
-            <img :src="bottomCode.iosQrUrl"
-              style="width:100px;height:100px" alt="">
-          </div>
-          <div class="code-content" v-if="bottomCode.androidQrUrl">
-            <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
-              安卓APP下载
-            </span>
-            <img :src="bottomCode.androidQrUrl"
-              style="width:100px;height:100px" alt="">
+          <!-- 二维码 -->
+          <div class="consult-code">
+            <div class="code-content" v-if="bottomCode.wxQrUrl">
+              <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
+                关注公众号
+              </span>
+              <img :src="bottomCode.wxQrUrl" style="width:100px;height:100px" alt="">
+            </div>
+            <div class="code-content" v-if="bottomCode.iosQrUrl" style="margin: 0 30px">
+              <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
+                iosAPP下载
+              </span>
+              <img :src="bottomCode.iosQrUrl" style="width:100px;height:100px" alt="">
+            </div>
+            <div class="code-content" v-if="bottomCode.androidQrUrl">
+              <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
+                安卓APP下载
+              </span>
+              <img :src="bottomCode.androidQrUrl" style="width:100px;height:100px" alt="">
+            </div>
           </div>
         </div>
-      </div>
-      <!-- 地址 -->
-      <div class="site color-fff">
-        <img src="../../static/image/005.png" class="w-20 h-20 " alt="">
-        <span>
-          地址 重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
-        </span>
-      </div>
-      <!-- 备案号 -->
-      <div class="reference">
-        <span>重庆惠融数字科技有限公司版权所有</span>
-        <span>
-          渝ICP备2023000211号-4
-        </span>
-      </div>
+        <!-- 备案号 -->
+        <div class="reference">
+          <span>重庆惠融数字科技有限公司版权所有</span>
+          <span>
+            渝ICP备2023000211号-4
+          </span>
+        </div>
       </div>
 
     </div>
@@ -275,7 +277,7 @@
 </template>
 
 <script>
-import { postListData, sendSms,postCustomer,downInfo } from '../../api/index'
+import { postListData, sendSms, postCustomer, downInfo } from '../../api/index'
 import { message } from 'ant-design-vue'
 export default {
   name: 'IndexPage',
@@ -327,9 +329,9 @@ export default {
         city: '', // 所在城市
         phone: '', // 手机号
         verifyCode: '', //验证码
-        channel:16, //pc官网16 手机端17
+        channel: 16, //pc官网16 手机端17
       },
-      bottomCode:{
+      bottomCode: {
 
       },
       // 定时器
@@ -352,41 +354,41 @@ export default {
     },
     // 底部内容
     async downInfoFn() {
-    // const list  = await this.$axios.$get(`https://official.webapi.bicredit.xin/api/app/down/info`)
-    const list  = await downInfo()
-    console.log('list',list)
-    this.bottomCode= list.data.data
+      // const list  = await this.$axios.$get(`https://official.webapi.bicredit.xin/api/app/down/info`)
+      const list = await downInfo()
+      console.log('list', list)
+      this.bottomCode = list.data.data
     },
     collapseChange(e) {
       console.log(this.activeKey, 'collapseChange', e)
     },
     btnContent(item) {
       console.log('item', item)
-      this.$router.push({ path: `/user/content?id=${item.id}`})
+      this.$router.push({ path: `/user/content?id=${item.id}` })
     },
     // 发送
     handleSubmit(e) {
       e.preventDefault();
-      this.form.validateFields(async(err, values) => {
+      this.form.validateFields(async (err, values) => {
         if (!err) {
           // console.log('Received values of form: ', values);
-         let z = await postCustomer(this.customer)
-         console.log('zzz',z)
-         if(z.data.msg=='成功'){
-          // 关闭页面
-          this.fouse()
-         }
+          let z = await postCustomer(this.customer)
+          console.log('zzz', z)
+          if (z.data.msg == '成功') {
+            // 关闭页面
+            this.fouse()
+          }
         } else {
           console.log('进来了')
         }
       });
     },
     // 打开
-    amodalFn(){
+    amodalFn() {
       this.amodal = true
     },
     // 关闭
-    fouse(){
+    fouse() {
       console.log('关闭了')
       this.amodal = false
     },
@@ -401,18 +403,18 @@ export default {
       if (this.customer.phone) {
         if (new RegExp('^1[0-9]{10}$').test(this.customer.phone)) {
           let z = await sendSms({
-          sceneType: "loanofficial",
-          userMobile: this.customer.phone
-        })
-        // console.log('zzz', z)
-        if (z.data.code == 0) {
-          message.success('发送成功')
-          this.countdown = 60
-          this.countDown()
-          // console.log('进来了', this.countdown)
-        } else {
-          message.error('发送失败')
-        }
+            sceneType: "loanofficial",
+            userMobile: this.customer.phone
+          })
+          // console.log('zzz', z)
+          if (z.data.code == 0) {
+            message.success('发送成功')
+            this.countdown = 60
+            this.countDown()
+            // console.log('进来了', this.countdown)
+          } else {
+            message.error('发送失败')
+          }
         } else {
           message.error('请输入正确的手机号');
         }
@@ -453,7 +455,7 @@ export default {
   color: #fff !important;
 }
 
- .ant-btn-primary {
+.ant-btn-primary {
   background-color: #fff !important;
   border-color: #fff !important;
   color: #1890ff !important;
@@ -474,6 +476,7 @@ export default {
   width: 150px;
   height: 40px;
 }
+
 .ant-collapse {
   background: #fff !important;
 }

static/index.less

@@ -229,11 +229,27 @@ body {
   width: 100%;
   background: #1F1D2A;
   padding: 20px 50px 10px;
-
   .home-bottom-c {
     width: 70%;
     margin: 0 auto;
-
+    .header-contact{
+      display: flex;
+      justify-content: space-between;
+      .consult-code {
+        // margin-left: 5%;
+        // width: 60%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+  
+        .code-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
   }
 
   .contact {
@@ -263,20 +279,6 @@ body {
       flex-wrap: wrap;
     }
 
-    .consult-code {
-      margin-left: 5%;
-      width: 60%;
-      display: flex;
-      align-items: center;
-      justify-content: end;
-
-      .code-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
-    }
   }
 
   .reference {