<template>
  <div class="footer">
    <div class="main clearfix">
      <p>健康忠告：合理安排时间，享受健康生活.</p>
      <p>
        <a href="https://beian.miit.gov.cn" rel="nofollow" target="_blank">
          粤ICP备2021080097号
        </a>
        <br />
        © 广州惊鸿网络科技有限公司
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Bottom",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang='less' scoped>
.footer {
  width: 100%;
  line-height: 50 / @rem;
  padding: 20 / @rem;
  position: fixed;
  bottom: 0;
  color: #919395;
  background-color: #444444;
  font-size: 28 / @rem;
  box-sizing: border-box;
  a {
    color: #919395;
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  // 横屏最大高度
  // height: 260 / @rem;
  //   overflow-y: auto;
  .footer {
    padding: 10 / @rem;
    line-height: 25 / @rem;
    font-size: 14 / @rem;
    position: relative;
    margin-top: 200 / @rem;
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .footer {
    padding: 10 / @rem;
    line-height: 25 / @rem;
    font-size: 14 / @rem;
    position: fixed;
    bottom: 0;
  }
}
</style>