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

<template>
  <div class="footer-nav">
    <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>
</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>