<template>
  <footer class="banner_footer">
    <div class="bottom-text">
      <span style="margin-left: 20px">
        <i class="el-icon-message" style="margin-right: 5px"></i>
        <a href="mailto:support@jomalls.com">support@jomalls.com</a>
      </span>
      <span style="margin-left: 50px">
        <i class="el-icon-map-location" style="margin-right: 5px"></i>
        广州市南沙区丰泽东路106号
      </span>
      <span class="record-number">
        <a href="https://beian.miit.gov.cn" target="_black">
          粤ICP备2022141405号-1
        </a>
      </span>
      <span style="margin-left: 50px">
        九猫科技 Copyright © {{ currentYear }}
      </span>
    </div>
  </footer>
</template>
<script>
export default {
  name: 'PageFooter',
  data() {
    return {
      currentYear: new Date().getFullYear(),
    }
  },
}
</script>
<style scoped lang="scss">
.banner_footer {
  color: #fff;
  background-color: #20222e;
  padding: 0 100px;
}

.record-number {
  text-align: center;
  margin-left: 50px;
}
.record-number a {
  text-decoration: none;
  color: #fff;
}

.bottom-text {
  padding: 20px 0;
  text-align: center;
}

.bottom-text span {
  display: inline-block;
}

.bottom-text a {
  color: #fff;
  text-decoration: none;
}

@media screen and (max-width: 1100px) {
  .banner_footer {
    padding: 20px;

    .bottom-text {
      padding: 0;
    }
    .bottom-text > span {
      margin-left: 0 !important;
      line-height: 26px;
    }
  }
}
</style>
