分享、提示等公共模态框

assets/scss/mobileCommon.scss

@@ -0,0 +1,61 @@
+.mobile-modal {
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background: rgba(0,0,0,.3);
+  position: fixed;
+  .mobile-modal-box {
+    position: fixed;
+    width: 5.92rem;
+    font-size: .28rem;
+    top: 27%;
+    left: 11%;
+    z-index: 1000;
+    .mobile-modal-header {
+      line-height: .96rem;
+      background: rgb(65,141,246);
+      color: #fff;
+      text-align: center;
+      font-size: .32rem;
+    }
+    .mobile-modal-content {
+      background: #fff;
+      color: #333;
+      padding: .27rem .54rem;
+    }
+  }
+  .mobile-share-box {
+    position: fixed;
+    width: 100%;
+    font-size: .28rem;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    background: #fff;
+    color: #333;
+    .cancel-share {
+      height: .98rem;
+      line-height: .98rem;
+      font-size: .3rem;
+      text-align: center;
+    }
+    .share-area {
+      .share-item {
+        display: inline-block;
+        padding: .3rem .47rem;
+        img {
+          margin: 0 auto;
+          display: block;
+        }
+        span {
+          display: block;
+          text-align: center;
+          margin-top: .1rem;
+        }
+      }
+    }
+  }
+}
+.link-url {
+  color: #01a44e;
+}

components/mobile/MobileHeader.vue

@@ -1,39 +1,82 @@
 <template>
-  <div class="mobile-header">
-    <nuxt-link class="fa fa-camera-retro fa-2x" to="/">返回</nuxt-link>
-    <p>优软商城</p>
-    <nuxt-link class="fa fa-camera-retro fa-2x" to="/"></nuxt-link>
+  <div>
+    <div class="mobile-modal">
+      <div class="mobile-modal-box">
+        <div class="mobile-modal-header">联系方式</div>
+        <div class="mobile-modal-content">
+          <p>商家地址：啊沙发沙发发撒发沙发沙发发沙发沙发</p>
+          <div class="link-url">在线咨询</div>
+          <div>致电：<span class="link-url">0791-21312322</span></div>
+        </div>
+      </div>
+      <div class="mobile-share-box">
+        <div class="share-area">
+          <ul>
+            <li class="share-item">
+              <img src="/images/mobile/@2x/share/weChat@2x.png" alt="">
+              <span>微信</span>
+            </li>
+            <li class="share-item">
+              <img src="/images/mobile/@2x/share/QQ@2x.png" alt="">
+              <span>QQ</span>
+            </li>
+            <li class="share-item">
+              <img src="/images/mobile/@2x/share/sina@2x.png" alt="">
+              <span>微博</span>
+            </li>
+            <li class="share-item">
+              <img src="/images/mobile/@2x/share/message@2x.png" alt="">
+              <span>短信</span>
+            </li>
+            <li class="share-item">
+              <img src="/images/mobile/@2x/share/email@2x.png" alt="">
+              <span>邮件</span>
+            </li>
+            <li class="share-item">
+              <img src="/images/mobile/@2x/share/flash@2x.png" alt="">
+              <span>刷新</span>
+            </li>
+            <li class="share-item">
+              <img src="/images/mobile/@2x/share/copylink@2x.png" alt="">
+              <span>复制链接</span>
+            </li>
+          </ul>
+        </div>
+        <div class="cancel-share">取消</div>
+      </div>
+    </div>
+    <div class="mobile-header">
+      <nuxt-link class="iconfont icon-fanhui" to="/">返回</nuxt-link>
+      <p>优软商城</p>
+      <i class="iconfont icon-fenxiang"></i>
+    </div>
   </div>
 </template>
 <script>
 
 </script>
-<style>
+<style lang="scss" scoped>
+  @import '~assets/scss/mobileCommon';
   .mobile-header{
     width:100%;
-    position:fixed;
-    top:0;
     z-index:10000;
-    height:44px;
+    height: .88rem;
+    line-height: .88rem;
     display:flex;
     justify-content:space-around;
     align-items:center;
-    border-bottom:1px solid #ccc;
+    border-bottom:.01rem solid #ccc;
     background: #3e82f5;
-    padding:0 20px 0 10px;
+    padding:0 .2rem 0 .1rem;
     color:#fff;
   }
   .mobile-header p{
     flex:1;
-    font-size:18px;
+    font-size:.3rem;
     text-align: center;
-    margin-top:10px;
+    margin-top:.1rem;
   }
   .mobile-header a{
-    font-size:14px;
     color:#fff;
   }
-  .mobile-header a:last-child{
-    font-size:16px;
-  }
 </style>