<template>
  <div
    id="app"
    :style="appWH"
    :class="{shu:shu}"
  >
    <!-- 页面 -->
    <Pages />

  </div>
</template>

<script>
import Pages from "./pages";
import { HS, remJs, getBodyWH } from "@/tools";
export default {
  name: "app",
  components: {
    Pages
  },
  data() {
    return {
      appWH: null, // 动态设置宽高
      shu: false, // 动态添加class
      w: 0, // 盒子的宽度
      h: 0, // 盒子的高度
    };
  },
  created() {
    this.Hav(); // 初始化盒子宽高
    this.setWH(); // 动态设置盒子的宽高
  },
  methods: {
    Hav() {
      HS(t => {
        this.setWH();
        if (t) {
          // 横屏
          this.shu = true;
          remJs(1236);
        } else {
          // 竖屏
          this.shu = false;
          remJs(640);
        }
      });
    },
    setWH() {
      setTimeout(() => {
        let bodyWH = getBodyWH();
        this.w = bodyWH.width;
        this.h = bodyWH.height;
        if (bodyWH.width > bodyWH.height) {
          this.w = bodyWH.height;
          this.h = bodyWH.width;
        }
        this.appWH = {
          width: this.w + "px",
          height: this.h + "px"
        };
      }, 150);
    },
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/com.scss";
#app {
  @include wh(100%, 100%);
  @include LTRBcenter;
}
.shu {
  transform: translate(-50%, -50%) rotate(-90deg) !important;
}
</style>