fix:移动端修改

pages/user/m_user.vue

@@ -54,11 +54,34 @@
       </a-form>
     </a-modal>
     <div>
-      <van-nav-bar title="惠融易客"  safe-area-inset-top placeholder >
+      <van-nav-bar safe-area-inset-top placeholder>
+        <template #left>
+          <div class="dropdown">
+            <button class="dropbtn">下拉菜单</button>
+            <div class="dropdown-content">
+              <a href="#solution">解决方案</a>
+              <a href="#contact">联系我们</a>
+            </div>
+          </div>
+          <item android:width="40dp" android:height="27dp">
+            <shape android:shape="rectangle">
+              <solid android:color="#ffffffff" />
+            </shape>
+          </item>
+        </template>
+        <template #title>
+          <!-- <van-icon name="search" size="18" /> -->
+          <img src="../../static/image/icon-title.png" style="width: 20px;" alt="">
+        </template>
+        <template #right>
+          <a href="tel:17723267692">
+            <img src="../../static/image/phone.png" style="width: 20px;" alt="">
+          </a>
+        </template>
       </van-nav-bar>
     </div>
     <img src="../../static/image/img_home.png" class="home-back" style="cursor: pointer;" alt="" @click="amodalFn">
-    <div class="home-qa">
+    <div class="home-qa" id="solution">
       <div class="home-title">为什么选择惠融易客</div>
       <div class="home-title-sub">
         与传统方式相比较,惠融易客的优势又都有哪些?
@@ -68,15 +91,15 @@
           <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/img_home_qs_0_' + i + '.png')" alt="">
-                <div class="home-qa-img-row-item-absolute">
+                <img :src="require('../../static/image/m_img_home_qs_0_' + i + '.png')" alt="">
+                <!-- <div class="home-qa-img-row-item-absolute">
                   <div class="home-qa-img-row-item-absolute-title">
                     {{ p.title }}
                   </div>
                   <div class="home-qa-img-row-item-absolute-subtitle yc-3">
                     {{ p.content }}
                   </div>
-                </div>
+                </div> -->
               </div>
               <!-- </a-col>
           </a-row> -->
@@ -87,15 +110,15 @@
           <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/img_home_qs_1_' + i + '.png')" alt="">
-                <div class="home-qa-img-row-item-absolute">
+                <img :src="require('../../static/image/m_img_home_qs_1_' + i + '.png')" alt="">
+                <!-- <div class="home-qa-img-row-item-absolute">
                   <div class="home-qa-img-row-item-absolute-title">
                     <span>0{{ i + 1 }}</span> {{ p.title }}
                   </div>
                   <div class="home-qa-img-row-item-absolute-subtitle yc-3">
                     {{ p.content }}
                   </div>
-                </div>
+                </div> -->
               </div>
               <!-- </a-col>
           </a-row> -->
@@ -182,34 +205,15 @@
         </div>
       </div>
     </div>
-    <!-- 底部 -->
-    <!-- <div class="home-bottom">
-      <div>
-         <van-icon name="phone" />
-        <a-button type="dashed" shape="round" icon="phone">
-          电话咨询
-        </a-button>
-      </div>
-      <div>
-        <a-button type="dashed" shape="round" icon="search">
-          加入我们
-        </a-button>
-      </div>
-      <div>
-        <a-button type="primary" shape="round" icon="search">
-          申请试用
-        </a-button>
-      </div>
-    </div> -->
-    <div class="home-bottom">
+    <div class="home-bottom" id="contact">
       <div>
         <!-- <van-icon name="phone" /> -->
         <a-button type="dashed" shape="round">
-          电话咨询
+          <a href="tel:17723267692">电话咨询</a>
         </a-button>
       </div>
       <div>
-        <a-button type="dashed" shape="round">
+        <a-button type="dashed" shape="round" disabled>
           加入我们
         </a-button>
       </div>
@@ -281,12 +285,20 @@ export default {
       intervalBtn: {},
       formLayout: 'horizontal',
       form: this.$form.createForm(this, { name: 'coordinated' }),
+      option1: [
+        { text: '二', value: 0, titleClass: '解决方案' },
+        { text: '联系我们', value: 1, titleClass: '联系我们' },
+      ],
+      value1: 0,
     }
   },
   created() {
     this.postListDataFn()
   },
   methods: {
+    // tel(){
+    //   window.location.href=tel://123456789；
+    // },
     async postListDataFn() {
       let list = await postListData({
         "categoryId": 1
@@ -388,6 +400,7 @@ export default {
   background-color: #526eea !important;
   border-color: #526eea !important;
 }
+
 .ad-free-content .ant-btn-primary {
   background-color: #526eea !important;
   border-color: #526eea !important;
@@ -417,6 +430,7 @@ export default {
 }
 
 .home-bottom .ant-btn {
+  width: 500px !important;
   height: 200px !important;
 }
 
@@ -424,14 +438,35 @@ export default {
   background-color: #526eea !important;
   color: #fff !important;
 }
-.ant-collapse{
+
+.ant-collapse {
   background-color: #fff !important;
 }
-.ant-collapse > .ant-collapse-item > .ant-collapse-header{
+
+.ant-collapse>.ant-collapse-item>.ant-collapse-header {
   height: 200px;
   line-height: 200px;
 }
-.ant-btn-primary{
+
+.ant-btn-primary {
   height: 200px;
 }
+
+.van-nav-bar {
+  background-color: #1f1d29 !important;
+}
+
+.van-nav-bar__right {
+  right: 30px;
+}
+
+//
+.van-dropdown-menu__item {
+  background: #1f1d28 !important;
+}
+
+.van-dropdown-menu__title {
+  font-weight: 700;
+  color: #fff;
+}
 </style>

plugins/vant-ui.js

@@ -1,4 +1,6 @@
 import Vue from 'vue'
-import { NavBar } from 'vant';
+import { NavBar,DropdownMenu, DropdownItem } from 'vant';
 import 'vant/lib/index.less'
-Vue.use(NavBar);
+Vue.use(NavBar);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);

postcss.config.js

@@ -27,7 +27,9 @@ module.exports = {
        * 如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配：例如 selectorBlackList 为 ['body'] 的话， 那么 .body-class 就会被忽略
        * 如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则：例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会
        */
-      selectorBlackList: [/^.ant-modal$/,/^.ant-input$/,/^.ant-form-item$/,/^.ant-form$/,/^.ant-modal-body$/,/^.ant-modal-header$/,/^.ant-modal-content$/,/^.ant-input-lg$/,/^.van-nav-bar$/,/^.van-nav-bar__content$/,/^.van-nav-bar__title$/],       
+      selectorBlackList: [/^.ant-modal$/,/^.ant-input$/,/^.ant-form-item$/,/^.ant-form$/,/^.ant-modal-body$/,/^.ant-modal-header$/,/^.ant-modal-content$/,
+      /^.ant-input-lg$/,/^.van-nav-bar$/,/^.van-nav-bar__content$/,/^.van-nav-bar__title$/,/^.van-nav-bar__right$/,/^.van-dropdown-menu__title$/,/^.van-cell$/,
+    /^.van-dropdown-menu__bar$/,/^.van-nav-bar__left$/],       
       // (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
       minPixelValue: 1,
       // (Boolean) 媒体查询里的单位是否需要转换单位

static/m_index.less

@@ -1,8 +1,8 @@
-
-.m-content{
+.m-content {
   width: 100%;
   display: flex;
 }
+
 .container {
   // max-width: 1200px;
   /* max-width: 1200px; */
@@ -77,7 +77,7 @@ body {
 
         &>img {
           width: 100%;
-          height: 400px;
+          height: 500px;
         }
 
         .home-qa-img-row-item-absolute {
@@ -212,34 +212,37 @@ body {
   justify-content: space-around;
 
 
-    .contact-1 {
-      color: #FFFFFF;
-      font-size: 20px;
-    }
+  .contact-1 {
+    color: #FFFFFF;
+    font-size: 20px;
+  }
 
-    .contact-2 {
-      font-size: 14px;
-      color: #b4b4b8;
-    }
-    .consult-tel{
-      width: 50%;
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-    }
-    .consult-code{
-      margin-left: 10%;
-      width: 40%;
+  .contact-2 {
+    font-size: 14px;
+    color: #b4b4b8;
+  }
+
+  .consult-tel {
+    width: 50%;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .consult-code {
+    margin-left: 10%;
+    width: 40%;
+    display: flex;
+
+    .code-content {
       display: flex;
-      .code-content{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-      }
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
     }
-  
-  .reference{
+  }
+
+  .reference {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -252,55 +255,112 @@ body {
 .ant-modal-body {
   padding: 40px !important;
 }
-.color-fff-12{
+
+.color-fff-12 {
   color: #2f2f2f;
   font-size: 12px;
 }
-.color-fff{
+
+.color-fff {
   color: #2f2f2f;
 }
+
 .w-15 {
   width: 15px;
 }
+
 .h-15 {
   height: 15px;
 }
-.w-20{
+
+.w-20 {
   width: 20px;
 }
-.h-20{
+
+.h-20 {
   height: 20px;
 }
 
 .home-ad-xw {
   display: flex;
   flex-direction: column;
+
   // align-items: center;
-  .ad-free-img{
+  .ad-free-img {
     width: 100%;
     // height: 100%;
     // margin-right: 50px;
   }
-  .ad-free-content{
+
+  .ad-free-content {
     flex: 1;
     height: 800px;
     border: 1px solid #ECECEC;
   }
 }
-.yc{
-  white-space: nowrap; 
+
+.yc {
+  white-space: nowrap;
   text-overflow: ellipsis;
-  overflow: hidden; 
+  overflow: hidden;
 }
-.yc-3{
+
+.yc-3 {
   display: -webkit-box;
--webkit-line-clamp:3;
--webkit-box-orient: vertical;
-overflow: hidden;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
-.yc-4{
+
+.yc-4 {
   display: -webkit-box;
--webkit-line-clamp:4;
--webkit-box-orient: vertical;
-overflow: hidden;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+
+
+
+// 
+.dropbtn {
+  background-color: #1f1d28;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
 }
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  width: 100%;
+  ;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content a:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown:hover .dropbtn {
+  background-color: #1f1d28;
+}