<template>
  <div class="js_h5_title">
    <span>{{ title }}</span>
  </div>
</template>

<script>
export default {
  name: "Title",
  components: {},
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang='less' scoped>
.js_h5_title {
  margin-left: 20 / @rem;
  border-left: 8 / @rem solid #42a5f5;
  text-align: left;

  span {
    margin-left: 20 / @rem;
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  // 横屏最大高度
  // height: 260 / @rem;
  //   overflow-y: auto;
  .js_h5_title {
    margin-left: 10 / @rem;
    border-left: 4 / @rem solid #42a5f5;

    span {
      margin-left: 10 / @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) {
}
</style>