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

<template>
  <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 lang="scss" scoped>
  @import '~assets/scss/mobileCommon';
  .mobile-header{
    width:100%;
    z-index:10000;
    height: .88rem;
    line-height: .88rem;
    display:flex;
    justify-content:space-around;
    align-items:center;
    border-bottom:.01rem solid #ccc;
    background: #3e82f5;
    padding:0 .2rem 0 .1rem;
    color:#fff;
  }
  .mobile-header p{
    flex:1;
    font-size:.3rem;
    text-align: center;
    margin-top:.1rem;
  }
  .mobile-header a{
    color:#fff;
  }
</style>