Browse Source

Merge remote-tracking branch 'origin/feature/yc-mobile-1020' into feature/yc-mobile-1020

# Conflicts:
#	components/mobile/MobileHeader.vue
yangc 8 years ago
parent
commit
5fdfcebe11
1 changed files with 100 additions and 0 deletions
  1. 100 0
      components/mobile/MobileHeader.vue

+ 100 - 0
components/mobile/MobileHeader.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <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>商家地址:深圳市南山区英唐大厦6楼</div>
+          <div class="content-line link-url">在线咨询</div>
+          <div>致电:<span class="content-line link-url">0755-96586323</span></div>
+        </div>
+      </div>
+      <div class="mobile-share-box" v-if="showShare">
+        <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" @click="showShare=false">取消</div>
+      </div>
+    </div>
+    <div class="mobile-header">
+      <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%;
+    z-index:10000;
+    height:.88rem;
+    display:flex;
+    justify-content:space-around;
+    align-items:center;
+    border-bottom:.02rem solid #ccc;
+    background: #3e82f5;
+    padding:0 .2rem 0 .1rem;
+    color:#fff;
+  }
+  .mobile-header p{
+    flex:1;
+    font-size:.36rem;
+    text-align: center;
+    margin-top:.2rem;
+  }
+  .mobile-header a{
+    font-size:.28rem;
+    color:#fff;
+  }
+  .mobile-header a:last-child{
+    font-size:.4rem;
+  }
+</style>