crowd-test-service-frontend/src/components/commons/Footer.vue

<template>
  <div class="footer-nav">
    <div class="container">
      <nav class="pull-left">
        <ul>
          <li>
            <a href="#">商务合作</a>
          </li>
          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
          <li>
            <a href="#">关于众测</a>
          </li>
          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
          <li>
            <a href="#">友情链接</a>
          </li>
          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
          <li>
            <a href="#">用户协议</a>
          </li>
          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
           <li>
            <a href="#">隐私政策</a>
          </li>
        </ul>
      </nav>
      <div class="copyright pull-right">
        ©{{time}}
        <a target="_blank" href="http://www.beian.miit.gov.cn">  粤ICP备09019504号</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "footer-container",
  data() {
    return {
      time: new Date().getFullYear()
    };
  }
};
</script>

<style scoped>
.footer-nav {
    background-color:#f0f0f0;
    padding: 15px 0;
    text-align: center;
    display: flex;
    font-size: 1.2rem;
    color: #666;
}
.footer-nav ul{
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.footer-nav ul li {
    display: inline-block;
}

.footer-nav ul li a {
    color: inherit;
    padding: 5px;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 3px;
    position: relative;
    display: block;
}

.footer-nav .copyright {
    padding: 5px 0;
    color:#333;
}
.copyright a{
    color:#666;
}
</style>