DX-LargeScreen/src/App.vue

<template>
  <div
    id="app"
    :style="{'transform':`scale(${scalesNum}) translate(0%,-50%)`,
    '-webkit-transform':`scale(${scalesNum}) translate(0%,-50%)`,
    '-moz-transform':`scale(${scalesNum}) translate(-50%,-50%)`,
    '-o-transform':`scale(${scalesNum}) translate(-50%,-50%)`,
    '-ms-transform':`scale(${scalesNum}) translate(-50%,-50%)`}">

    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      scalesNum: 1, // 缩放比例:1
    };
  },
  mounted() {
    // 计算缩放比例

    this.resize_window();

    window.addEventListener("resize", () => {
      this.resize_window();
    });
  },
  methods: {
    resize_window() {
      // 因为设计图是带3840*1080的，但是浏览器本身带顶部工具栏，所以缩放到时候稍微更小一点，这样不会有滚动条，这个值可以选择更大些，比如2300，这样左右两边会有空白
      let myWidth = document.documentElement.clientWidth;
      let myHeight = document.documentElement.clientHeight;
      if (myHeight / 3840 !== 0 && myWidth / 3840 / (myHeight / 1080) >= 1) {

        this.scalesNum = myHeight / 1080;
      } else {
        this.scalesNum = myWidth / 3840;
      }

    },
  },
  metaInfo() {
    return {
      title:
        this.$store.state.settings.dynamicTitle &&
        this.$store.state.settings.title,
      titleTemplate: (title) => {
        return title
          ? `${title} - ${process.env.VUE_APP_TITLE}`
          : process.env.VUE_APP_TITLE;
      },
    };
  },
};
</script>
<style lang="scss">
@import "@/assets/styles/common.scss";
#app{
  margin: auto !important;

  padding: 0;

  transform-origin: 0 0;

  position:relative;

  width:3840px;

  height: 1080px;
  top:50%;

  overflow: hidden;
}
.app-container {
  padding: 0 !important;
  width: 100%;
  height: 100%;
  background-color: $bodyBackGround;
}
.el-input__inner {
  height: 28px !important;
  line-height: 28px !important;
}
.el-input-number--small {
  height: 26px !important;
  line-height: 26px !important;
}
.el-textarea .el-input__count,
.el-input .el-input__count .el-input__count-inner {
  font-size: 8px;
  height: 12px;
  line-height: 12px;
  background: transparent !important;
}

.el-input-number--medium {
  width: auto;
  line-height: 28px;
}

::-webkit-scrollbar {
  width: 0px;
}

::-webkit-scrollbar-thumb {
  background-color: #b6b6b6;
}

/* el-table 滚动条样式 */
.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
  width: 0px;
}

.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background: rgba(0, 0, 0, 0.2);
}

.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 0px;
  background: rgba(0, 0, 0, 0.1);
}

.el-table__header-wrapper .has-gutter th:nth-last-child(2) {
  border-right: 0;
}

.handle {
  color: $handle;
}
.handle2 {
  color: $green;
}
.untreated {
  color: $white;
}
.untreated2 {
  color: $red;
}


* {
  -webkit-text-size-adjust: auto !important;
}
.el-table::before {
  height: 0 !important;
}
.el-table,
.el-table__expanded-cell {
  background-color: $modularBackGround !important;
  border: 0 !important;
}
/* 表格内背景颜色 */
.el-table th,
.el-table tr,
.el-table td {
  background-color: transparent !important;
  border: 0 !important;
  font-size: 16px;
  color: $white;
  height: 40px;
  line-height: 20px;
  overflow: hidden;
  padding:0;
  cursor: pointer;
}
.el-table th > .cell {
  font-size: 16px;
}
/*去除底边框*/
.el-table td.el-table__cell {
  border: 0;

}
.el-table th.el-table__cell.is-leaf {
  border: 0;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: $tableHover !important;
  color:#FFC46D;
}
.el-table thead {
  background-color: $tableHover !important;
}
.el-table th > .cell{
  color: #A1A8B3;
}
.el-table__empty-text {
  color: #fff !important;
  font-size: 16px;
  margin-top: 10px;
}
.el-table__body tr.current-row > td {
  background-color: $tableHover !important;
}
.el-table--medium th, .el-table--medium td{
  padding:0 !important;
  color:$white2;
}
tr .cell{
  padding-left:40px !important;
  text-align: left;
}
.el-loading-mask{
  background-color:transparent !important;
}
</style>