<template>
  <!-- 模板部分，定义了组件的HTML结构 -->
  <div class="footer">
    <div class="links">
      <!-- 链接区域 -->
      <a href="https://github.com/19920625lsg/spring-boot-online-exam#34; target="_blank">代码仓</a> <!-- 链接到GitHub仓库 -->
      <a href="https://19920625lsg.github.io#34; target="_blank">关于我</a> <!-- 链接到个人网站 -->
      <a href="mailto:liangshanguang2@gmail.com">联系我</a> <!-- 邮件联系链接 -->
    </div>
    <div class="copyright">
      Copyright <!-- 版权信息 -->
      <a-icon type="copyright" /> 2020 <span>Liang Shan Guang</span> <!-- 版权所有者 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'GlobalFooter', // 组件名称
  data () {
    return {} // 返回一个空对象，这里没有定义额外的数据属性
  }
}
</script>

<style lang="less" scoped>
.footer {
  padding: 0 16px; // 底部内边距
  margin: 24px 0 24px; // 外边距
  text-align: center; // 文本居中对齐

  .links {
    margin-bottom: 8px; // 链接区域底部外边距

    a {
      color: rgba(0, 0, 0, 0.45); // 链接颜色为半透明黑色

      &:hover {
        color: rgba(0, 0, 0, 0.65); // 鼠标悬停时链接颜色为深灰色
      }

      &:not(:last-child) {
        margin-right: 40px; // 除最后一个链接外，其他链接右边距为40px
      }
    }
    .copyright {
      color: rgba(0, 0, 0, 0.45); // 版权信息颜色为半透明黑色
      font-size: 14px; // 字体大小为14px
    }
  }
</style>