epmet-oper-gov-rizhao/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";

.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;
}
.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: 8px;
    height: 8px;
    // 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: 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;
}
</style>