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

<template>
<div class="mobile-header">
  <nuxt-link class="fa fa-camera-retro fa-3x span" to="/news"></nuxt-link>
  <p>优软商城</p>
  <span class="fa fa-camera-retro fa-3x"></span>
</div>
</template>
<script>

</script>
<style>
.mobile-header{
  position:fixed;
  top:0;
  width:100%;
  height:60px;
  display:flex;
  padding:.9rem;
  justify-content:space-around;
  border-bottom:1px solid #ccc;
  background: #f8f8f8;
}
  .mobile-header p{
    flex:1;
    font-size:2.4rem;
    text-align: center;
    margin-top:10px;
  }
</style>