<template>
  <div class="top_nav clear">
    <img class="logo" src="~@/assets/image/hbpay.png" alt="" />
  </div>
</template>

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

<style lang='less' scoped>
.top_nav {
  height: 80 / @rem;
  line-height: 80 / @rem;
  margin: 20 / @rem;
  background-color: #f5f5f5;

  .logo {
    height: 70 / @rem;
    margin-top: 5 / @rem;
    float: left;
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  // 横屏最大高度
  // height: 260 / @rem;
  //   overflow-y: auto;
  .top_nav {
    height: 40 / @rem;
    line-height: 40 / @rem;
    margin: 10 / @rem;
    background-color: #f5f5f5;

    .logo {
      height: 35 / @rem;
      margin-top: 2.5 / @rem;
      float: left;
    }
  }
}

// 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) {
}
</style>