qp_onemap_ui/src/App.vue

<template>
  <div class="main">
    <Header @scroll-update="scrollUpdate"></Header>
    <el-scrollbar ref="pagescrollbar" view-style="height:100%">
      <router-view />
      <Footer></Footer>
    </el-scrollbar>
  </div>
</template>
<script>
import { defineAsyncComponent } from "vue";
import api from "@/api/common";
export default {
  name: "App",
  components: {
    Header: defineAsyncComponent(() =>
      import("@/components/AppVue/Header.vue")
    ),
    Footer: defineAsyncComponent(() => import("@/components/AppVue/Footer.vue"))
  },
  mounted() {
    let that = this;
    document.querySelector("#app").style.transform = `scale(${this.getScale()}) translate(-50%, 0%)`
    document.querySelector("#app").style.height = window.innerHeight / this.getScale() + "px"
    window.onresize = () => {
      document.querySelector("#app").style.transform = `scale(${this.getScale()}) translate(-50%, 0%)`
      document.querySelector("#app").style.height = window.innerHeight / this.getScale() + "px"
    }
    this.$nextTick(() => {
      this.scrollUpdate();
    });
    api.login({
      userName: systemConfig.defaultAccount.userName,
      password: systemConfig.defaultAccount.password,
      clientId: "1",
      serviceId: "0",
    }).then((result) => {
      if (result.code == 200) {
        that.$store.commit("setUserInfo", result.content);
        that.$store.commit("setToken", result.message);
        that.$store.commit("setUserState", true);
      } else {
        that.$message({
          type: "error",
          message: result.content,
        });
      }
    }).catch((err) => {
      that.$message({
        type: "error",
        message: "服务器忙碌，请稍后重试！",
      });
    });
  },
  methods: {
    scrollUpdate() {
      let that = this;
      setTimeout(() => {
        that.$refs.pagescrollbar.update();
      }, 1000);
    },
    getScale() {
      const ww = window.innerWidth / 1920
      // const wh = window.innerHeight / 945
      // return ww < wh ? ww : wh;
      return ww
    }
  }
};
</script>
<style lang="less">
body,
html {
  width: 100vw;
  height: 100vh;
  margin: 0 0;
  padding: 0 0;
  overflow: hidden;
}

#app {
  // width: 100vw;
  // height: 100vw;
  width: 1920px;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 0%;
  transform-origin: left top;
  transform: translate(-50%, 0%);
}

.main {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;

  .el-scrollbar {
    width: 100%;
    // height: calc(100% - 90px);
    box-sizing: border-box;
    overflow: hidden;
  }
}
</style>