Browse Source

各页面与header footer边距处理

yangc 8 years ago
parent
commit
9104dd74ca

+ 4 - 0
assets/scss/mobileCommon.scss

@@ -26,9 +26,13 @@
         padding: .2rem 0;
         line-height: .31rem;
         border-bottom: .01rem solid rgb(183,213,254);
+        text-align: center;
         &:last-child {
           border-bottom: none;
         }
+        &:first-child {
+          text-align: left;
+        }
       }
     }
   }

+ 0 - 1
components/mobile/Home.vue

@@ -130,7 +130,6 @@
   .home{
     font-size:.28rem;
     margin-bottom:1rem;
-    margin-top:.88rem;
     .home-header{
       width:100%;
       padding-top:1.3rem;

+ 25 - 12
components/mobile/MobileHeader.vue

@@ -1,15 +1,15 @@
 <template>
   <div>
-    <div class="mobile-modal" v-if="false">
-      <div class="mobile-modal-box">
+    <div class="mobile-modal" v-if="showStoreInfo || showShare">
+      <div class="mobile-modal-box" v-if="showStoreInfo">
         <div class="mobile-modal-header">联系方式</div>
         <div class="mobile-modal-content">
-          <div>商家地址:啊沙发沙发发撒发沙发沙发发沙发沙发</div>
+          <div>商家地址:深圳市南山区英唐大厦6楼</div>
           <div class="content-line link-url">在线咨询</div>
-          <div>致电:<span class="content-line link-url">0791-21312322</span></div>
+          <div>致电:<span class="content-line link-url">0755-96586323</span></div>
         </div>
       </div>
-      <div class="mobile-share-box">
+      <div class="mobile-share-box" v-if="showShare">
         <div class="share-area">
           <ul>
             <li class="share-item">
@@ -42,25 +42,38 @@
             </li>
           </ul>
         </div>
-        <div class="cancel-share">取消</div>
+        <div class="cancel-share" @click="showShare=false">取消</div>
       </div>
     </div>
     <div class="mobile-header">
-      <nuxt-link class="iconfont icon-fanhui" to="/">返回</nuxt-link>
-      <p>优软商城</p>
-      <i class="iconfont icon-fenxiang"></i>
+      <a class="iconfont icon-fanhui" @click="goLastPage">返回</a>
+      <p>{{title}}</p>
+      <i class="iconfont icon-fenxiang" @click="showShare = !showShare"></i>
     </div>
   </div>
 </template>
 <script>
-
+  export default {
+    data () {
+      return {
+        showStoreInfo: false,
+        showShare: false,
+        title: '优软商城'
+      }
+    },
+    computed: {
+    },
+    methods: {
+      goLastPage: function () {
+        window.history.back(-1)
+      }
+    }
+  }
 </script>
 <style lang="scss" scoped>
   @import '~assets/scss/mobileCommon';
   .mobile-header{
     width:100%;
-    position:fixed;
-    top:0;
     z-index:10000;
     height:.88rem;
     display:flex;

+ 1 - 0
components/mobile/brand/BrandDetail.vue

@@ -199,6 +199,7 @@
 <style lang="scss" scoped>
   .brand-detail {
     margin: 0 auto;
+    margin-bottom: .98rem;
     text-align: center;
     .brand-logo {
       text-align: center;

+ 1 - 0
components/mobile/brand/ComponentDetail.vue

@@ -165,6 +165,7 @@
 <style lang="scss" scoped>
   .component-detail {
     font-size: .28rem;
+    margin-bottom: .98rem;
     .base-detail {
       margin: .34rem .66rem .34rem .40rem;
       .base-detail-item {

+ 1 - 1
pages/mobile/search/_keycode.vue

@@ -38,8 +38,8 @@
 
 <style scoped lang="scss">
   .search-list{
-    margin-top:.88rem;
     width:100%;
+    margin-bottom: .98rem;
   .search-item{
     justify-content: space-around;
     text-align: center;

+ 1 - 1
pages/mobile/shop/index.vue

@@ -47,7 +47,7 @@
 
 <style scoped lang="scss">
   .shop{
-    margin-top:1rem;
+    margin-bottom: .98rem;
     min-height: 10rem;
     background: #e2e4e6;
   .shop-top{

+ 1 - 1
pages/mobile/user/_uuid.vue

@@ -41,7 +41,7 @@
 
 <style scoped lang="scss">
   .user-content{
-    margin-top:1rem;
+    margin-bottom: .98rem;
     min-height: 10rem;
     background: #e2e4e6;
     .user-name{