junShiGuan-5/web/src/views/layout/footer.vue

<template>
  <div class="sfooter">
    <ul>
      <li>
        <p><span>总访问量：</span><mNumber :num="count"/></p>
      </li>
      <li>
        <p><a href="/backstage/index.html" target="_blank">后台管理系统</a></p>
        <p>电话：0991-3356155</p>
        <p>友情链接：<a href="http://25.21.144.120/" target="_blank">新疆生产建设兵总队网</a></p>
      </li>
      <li>
        <p>版权所有：武警北京市总队执勤第五支队数字史馆</p>
        <p>CopyRights 2016， All Rights Reserved.</p>
      </li>
      <li>
        <img :src="require('@/assets/images/footer-logo.png')" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
import mNumber from '@/components/Number'
import { getVisit } from "@/config/api";

export default {
  components:{
    mNumber
  },
  data(){
    return{
      count: '0'
    }
  },
  methods:{
    async getCount(){
      getVisit(result=>{
        this.count = String(result.data)
      })
    },
  },
  mounted(){
    this.getCount()
  }
}
</script>

<style lang="less" scoped>
a:link,a:visited,a:active,a:hover{
  text-decoration: none;
  color: #fff;
}
.sfooter{
  width: 100%;
  background-color: #828282;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  height: 140px;
  >ul{
    width: 1320px;
    margin: 0 auto;
    display: flex;
    color: #fff;
    justify-content: space-around;
    align-items: center;
    >li{
      text-align: left;
      border-right: 1px solid #fff;
      padding:0 40px;
      overflow: hidden;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 20px 0;
      &:last-of-type{
        border-right: none;
        padding:0 40px;
      }
      p{
        margin-bottom: 10px;
        >span{
          display: inline-block;
          min-width: 100px;
          margin-right: 10px;
        }
        >a{
          min-width: 100px;
          text-align: left;
          padding-bottom: 2px;
          border-bottom: 1px solid #fff;
        }
      }
      >img{

      }
    }
  }
}
</style>