src/components/VFooter.vue

<template>
    <div class="footer">
      <div class="footer-top">
        <ul class="fl footer-nav">
          <router-link
            tag="li"
            :to="{path:list.routerLink}"
            v-for="(list, index) in navList"
            :key="index"
            >
            {{list.name}}
          </router-link>
        </ul>
        <div class="fr footer-rem">
          <div class="footer-tit">黄石停车APP</div>
          <div class="footer-icon"></div>
        </div>
      </div>
      <div class="footer-bottom">
        <div >《隐私权政策》    《权益保障承诺书》     鄂ICP备19013449号</div>
      </div>
    </div>
</template>
<script>
export default {
  name: 'VFooter',
  data(){
    return {
      navList:[
        {name:'官网中心',routerLink:'/center'},
        {name:'黄石停车',routerLink:'/park'},
        {name:'关于我们',routerLink:'/about'},
      ],
    }
  }
}
</script>
<style scoped lang="scss">
.footer{
  height: 200px;
  width:100%;
  background:rgba(6,8,10,1);
  .footer-top{
    /*height: 216px;*/
    height: 150px;
    margin: 0 auto;
    width: 1010px;
    .footer-nav{
      margin-top: 10px;
      li{
        width:56px;
        height:20px;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:20px;
        margin-top: 20px;
      }
    }
    .footer-rem{
      margin-top: 20px;
      width: 129px;
      height: 140px;
      .footer-tit{
        width:84px;
        height:20px;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:20px;
        margin-bottom: 5px;
      }
      .footer-icon{
        width: 88px;
        height: 88px;
        background: url("../assets/footer_ico.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,0.25);;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,0.65);
    div{
      font-size:14px;
      width: 500px;
      margin: 0 auto;
      text-align: center;
    }
    /*text-align: center;*/
  }
}
</style>