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

<template>
  <div class="mobile-footer">
    <span :class="activeType=='home'?'active':''" @click="activeType='home'">
      <nuxt-link to="/"><i class="fa fa-camera-retro"></i><p>首页</p></nuxt-link>
    </span>
    <span :class="activeType=='shops'?'active':''" @click="activeType='shops'">
      <nuxt-link to="/mobile/shop"><i class="fa fa-camera-retro"></i><p>店铺</p></nuxt-link>
    </span>
    <span :class="activeType=='user'?'active':''" @click="activeType='user'">
      <nuxt-link to="/mobile/user"><i class="fa fa-camera-retro"></i><p>我</p></nuxt-link>
    </span>
  </div>
</template>
<script>
  export default{
    name: 'MobileFooter',
    data () {
      return {
        activeType: ''
      }
    }
  }
</script>
<style scoped>
  .mobile-footer{
    position:fixed;
    bottom:0;
    width:100%;
    height:49px;
    display:flex;
    text-align: center;
    justify-content:space-between;
    border-top:1px solid #ccc;
    background: #ffffff;
  }
  .mobile-footer span{
    flex:1;
    font-size:16px;
    color:#b0b0b0;
    padding-top:5px;
  }

  .mobile-footer span a{
    color:#b0b0b0;
  }

  .mobile-footer span.active a{
    color:#3976f4;
  }
</style>