豎版

豎版：

1. 根據依賴引入tools工具，github地址：https://github.com/chen8000/toolsJs/blob/master/index.js

app.vue代碼

<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() {　　　remJs(640);
    this.Hav(); // 初始化盒子寬高
    this.setWH(); // 動態設置盒子的寬高
  },
  methods: {
    Hav() {
      HS(t => {
        this.setWH();
        if (t) {
          // 橫屏
          this.shu = true;
        } else {
          // 豎屏
          this.shu = false;
        }
      });
    },
    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>