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

<template>
<div class="mobile-footer">
    <nuxt-link to="/provider"><i class="fa fa-camera-retro"></i><p>首页</p></nuxt-link>
    <nuxt-link to="/provider"><i class="fa fa-camera-retro"></i><p>店铺</p></nuxt-link>
    <nuxt-link to="/provider"><i class="fa fa-camera-retro"></i><p>我</p></nuxt-link>
</div>
</template>
<script>

</script>
<style scoped>
  .mobile-footer{
    position:fixed;
    bottom:0;
    width:100%;
    height:49px;
    display:flex;
    text-align: center;
    justify-content:space-between;
    /*align-items:center;*/
    border-top:1px solid #ccc;
    background: #ffffff;
  }
  .mobile-footer a{
    flex:1;
    font-size:16px;
    color:#b0b0b0;
    padding-top:5px;
  }
  .mobile-footer a:hover{
    color:#3976f4;
  }
</style>