mall-web-ssr/components/mobile/MobileHeader.vue

<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>