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

<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>
</template>
<script>

</script>
<style>
.mobile-header{
  width:100%;
  position:fixed;
  top:0;
  z-index:10000;
  height:44px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  border-bottom:1px solid #ccc;
  background: #3e82f5;
  padding:0 20px 0 10px;
  color:#fff;
}
  .mobile-header p{
    flex:1;
    font-size:18px;
    text-align: center;
    margin-top:10px;
  }
  .mobile-header a{
    font-size:14px;
    color:#fff;
  }
  .mobile-header a:last-child{
    font-size:16px;
  }
</style>