epmet-work-pc/src/App.vue

<template>
  <transition name="el-fade-in-linear">
    <router-view />
  </transition>
</template>

<script>
import { mapActions } from "vuex";
import Cookies from "js-cookie";
import { messages } from "@/i18n";
import Vue from "vue";
export default {
  watch: {
    "$i18n.locale": "i18nHandle",
  },
  created () {
    this.i18nHandle(this.$i18n.locale);
  },
  methods: {
    i18nHandle (val, oldVal) {
      localStorage.setItem("language", val);
      document.querySelector("html").setAttribute("lang", val);
      document.title = messages[val].brand.lg;
      // 非登录页面，切换语言刷新页面
      if (this.$route.name !== "login" && oldVal) {
        window.location.reload();
      }
    },
    refreshView () {
      // In order to make the cached page re-rendered
      this.$store.dispatch("delAllCachedViews", this.$route);

      const { fullPath } = this.$route;

      this.$nextTick(() => {
        this.$router.replace({
          path: "/redirect" + fullPath,
        });
      });
    },
    ...mapActions(["setClientHeight", "setSize", "setResolution", "setEnv"]),
  },
  computed: {},
  mounted () {
    console.log("开始：：：：" + localStorage.getItem("userType"));
    if (!localStorage.getItem("userType")) {
      localStorage.setItem("userType", "oper");
    }

    //console.log("为空后设置默认值：：：：" + localStorage.getItem('userType'))
    const that = this;
    let envShow = process.env.VUE_APP_NODE_ENV;
    let env = "dev";
    if (envShow === "dev" || envShow === "prod:sit") {
      // 开发环境
      env = "dev";
    } else if (envShow === "prod:uat") {
      // 体验
      env = "test";
    } else if (envShow === "prod") {
      // 生产
      env = "prod";
    }
    // eslint-disable-next-line
    // debugger
    that.setEnv(env);
    console.log("屏幕宽度:" + document.documentElement.clientWidth);
    // 根据屏幕分辨率调整size
    if (document.documentElement.clientHeight < 800) {
      // medium大小
      that.setSize("small");
      // 屏幕分辨率
      that.setResolution("small");
      Vue.prototype.$ELEMENT = { size: "medium", zIndex: 3000 };
    } else {
      // 默认大小
      that.setSize("medium");
      // 屏幕分辨率
      that.setResolution("medium");
      Vue.prototype.$ELEMENT = { size: "medium", zIndex: 3000 };
    }

    window.onresize = () => {
      return (() => {
        if (!that.timer) {
          that.timer = true;
          // 这里的定时器是为了避免window.onresize时过于频繁的刷新vuex
          setTimeout(function () {
            that.setClientHeight(document.documentElement.clientHeight);
            // debugger
            if (document.documentElement.clientHeight < 800) {
              // medium大小
              that.setSize("medium");
            } else {
              // 默认大小
              that.setSize("medium");
            }
            that.timer = false;
          }, 150);
        }
      })();
    };
  },
};
</script>

<style lang="scss">
@import "@/assets/scss/buttonstyle.scss";
@import "@/assets/scss/c/function.scss";

.el-table {
  td {
    padding: 6px 0 !important;
    font-size: 14px !important;
  }
}

//弹框标题
.el-dialog__title {
  font-size: 16px !important;
  font-family: PingFangSC-Medium, PingFang SC !important;
  font-weight: 500 !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
.el-dialog__header {
  padding-bottom: 16px !important;
  border-bottom: 1px solid #dcdee0 !important;
}

.tox-dialog__disable-scroll {
  .tox-tinymce-aux {
    z-index: 130000000;
  }
  .tox .tox-dialog-wrap {
    z-index: 110000000;
  }
  .tox .tox-dialog-wrap__backdrop {
    z-index: 100000;
  }
  .tox .tox-dialog {
    z-index: 200000;
  }
}
.search-card {
  .el-card__body {
    padding: 20px 20px 0 20px;
  }
}
.name-a {
  cursor: pointer;
  color: #0056d6;
}
.dialog-h {
  .el-dialog__body {
    position: relative;
    max-height: 83vh;
    box-sizing: border-box;
    padding: 0 0 20px !important;
    .dialog-h-content {
      max-height: calc(83vh - 80px);
      box-sizing: border-box;
      padding: 0 10px;
      overflow: auto;
    }
  }
}
.resi-btns {
  margin-top: 20px;
  text-align: center;
}
.scroll-h {
  &::-webkit-scrollbar {
    // display: none;
    width: 4px;
    height: 1px;
    // background: linear-gradient(270deg, #0063FE, #0095FF);
  }

  &::-webkit-scrollbar-corner,
    /* 滚动条角落 */
  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-track {
    /*滚动条的轨道*/
    border-radius: 4px;
  }

  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    /* 滚动条轨道 */

    // background: rgba(12, 129, 254, .24);
    // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
  }

  &::-webkit-scrollbar-thumb {
    /* 滚动条手柄 */

    // background: rgba(0, 0, 0, 0.3);
    // background: linear-gradient(270deg, #0063FE, #0095FF);
  }
}

/* 操作栏-更多的poppover样式 */
.el-popover.btn-popper {
  min-width: 150px !important;
  margin-top: 5px !important;
  padding: 6px !important;
  background-color: rgb(247, 250, 253);
}

/* 列表-操作栏-更多的poppover样式 */
.el-popover.btn-popper-table {
  min-width: 80px !important;
  margin-top: 5px !important;
  padding: 6px !important;
  background-color: rgb(247, 250, 253);
}

//列表操作列，更多
.table-more-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

* {
  @include scrollBar;
}
</style>