首页联系我们效果

components/mobile/Home.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="home">
+    <div class="mobile-modal" v-if="showStoreInfo">
+      <div class="mobile-modal-box">
+        <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
+        <div class="mobile-modal-content">
+          <div>商家地址：深圳市南山区英唐大厦6楼</div>
+          <div class="content-line link-url">在线咨询</div>
+          <div>致电：<span class="content-line link-url">0755-96586323</span></div>
+        </div>
+      </div>
+    </div>
     <div class="home-header">
       <div class="home-top">
         <p>
@@ -56,12 +66,12 @@
         </div>
         <p>我的收藏</p>
       </nuxt-link>
-      <nuxt-link to="/brand" class="home-main-content">
+      <a @click="showStoreInfo = true" class="home-main-content">
         <div>
           <img src="/imgs/home/phonebrand@2x.png" alt="1">
         </div>
         <p>联系我们</p>
-      </nuxt-link>
+      </a>
     </div>
     <div class="home-search-list" v-if="associate && keyword">
       <div>
@@ -94,7 +104,8 @@
       return {
         keyword: '',
         activeType: 'model',
-        associate: ''
+        associate: '',
+        showStoreInfo: false
       }
     },
     props: {
@@ -126,6 +137,7 @@
 </script>
 
 <style lang="scss" scoped>
+  @import '~assets/scss/mobileCommon';
   .home{
     margin-top: .88rem;
     font-size:.28rem;

components/mobile/brand/BrandDetail.vue

@@ -203,15 +203,14 @@
     margin-bottom: .98rem;
     text-align: center;
     .brand-logo {
-      text-align: center;
       height: 2.21rem;
-      line-height: 2.21rem;
       width: 3.73rem;
       display: inline-block;
       border: .01rem solid #e75610;
       margin: .38rem auto;
       img {
-        max-height: 2.21rem;
+        max-height: 2.17rem;
+        margin-top: .01rem;
       }
     }
     .brand-switch-item {

components/mobile/brand/ComponentDetail.vue

@@ -168,7 +168,8 @@
     margin-top: .88rem;
     margin-bottom: .98rem;
     .base-detail {
-      margin: .34rem .66rem .34rem .40rem;
+      margin: 0 .66rem .34rem .40rem;
+      padding-top: .34rem;
       .base-detail-item {
         margin-bottom: .3rem;
         &:last-child {