laws_weilai/jero-web/src/App.vue

<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view v-if="isRouterAlive"/>
    </div>
  </a-config-provider>
</template>
<script>
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
  import enUS from 'ant-design-vue/lib/locale-provider/en_US'
  import enquireScreen from '@/utils/device'
  import moment from 'moment'
  import 'moment/locale/zh-cn'
  import Vue from 'vue'
  import { mapGetters } from 'vuex'

  moment.locale('zh-cn')

  const EN = 'en-us'
  const ZH = 'zh-cn'

  export default {
    data() {
      return {
        locale: zhCN,
        isRouterAlive: true
      }
    },
    created() {
      let that = this
      enquireScreen(deviceType => {
        // tablet
        if (deviceType === 0) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        // mobile
        else if (deviceType === 1) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        } else {
          that.$store.commit('TOGGLE_DEVICE', 'desktop')
          that.$store.dispatch('setSidebar', true)
        }
      })
      let langCn = localStorage.language
      // 默认中文
      if (!langCn) {
        localStorage.setItem('language', 'zh-cn')
      } else if (langCn == 'en-us') {
        this.locale = enUS
        moment.locale('en-us')
        this.$i18n.locale = EN
      } else if (langCn == 'zh-cn') {
        this.locale = zhCN
        moment.locale('zh-cn')
        this.$i18n.locale = ZH
      }
      // 自己配置多语言适配
      this.$root.Bus.$on('switchLanguage', value => {
        let router_path = this.$route.path
        // 刷新页面
        this.isRouterAlive = false //先关闭，
        this.$nextTick(function() {
          this.isRouterAlive = true //再打开
        })
        // 系统组件适配
        let lang = localStorage.language
        if (lang == 'zh-cn') {
          this.locale = zhCN
          moment.locale('zh-cn')
        } else if (lang == 'en-us') {
          this.locale = enUS
          moment.locale('en-us')
        }
      })
    },
    mounted() {

    },
    watch: {
      $route: function(val) {
        this.$nextTick(() => {
          if (this.userInfo() && this.userInfo().username) {
            this.$watermark.set(this.userInfo().username + ' ' + this.userInfo().realname)
          }
        })
      }
    },
    computed: {},

    methods: {
      ...mapGetters(['userInfo'])
    }
  }
</script>
<style>
  @font-face {
    font-family: 'BlueSkyNoto';
    src: url("./assets/fontStyle/BlueSkyNotoRegular.otf");
  }

  * {
    font-family: 'BlueSkyNoto';
  }

  body {
    font-family: "Blue Sky Noto" !important;
  }

  #app {
    height: 100%;
  }

  .doc-detail {
    background: #fff
  }

  .ant-layout {
    background: transparent !important;
  }

  .ant-table-tbody > tr.ant-table-row-selected td {
    background: transparent !important;
  }

  .ant-pagination-disabled .anticon-right {
    cursor: not-allowed !important;
  }

  .ant-pagination-disabled .anticon-left {
    cursor: not-allowed !important;
  }

  .itemModel-multi {
    width: calc(100% - 130px) !important;
    display: inline-block !important;
    margin-top: 2px !important;
    height: 40px !important;
  }

  .itemModel-multi .ant-form-explain, .ant-form-extra {
    margin-top: -10px;
  }


  .anticon-exclamation-circle {
    display: none !important;
  }

  .ant-select-selection--single {
    height: 38px !important;
  }

  .ant-select-selection--multiple {
    height: 38px !important;
  }

  .ant-select-selection__rendered {
    line-height: 38px !important;
    height: 38px !important;
  }

  .ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
    margin-top: 6px;
  }

  .ant-calendar-picker {
    line-height: 38px !important;
    height: 38px !important;
  }

  .ant-calendar-picker-input {
    height: 38px !important;
  }

  .ant-input-number-input-wrap {
    line-height: 38px !important;
    height: 38px !important;
  }

  .ant-table-column-title {
    font-weight: bold !important;
  }

  .ant-table-thead > tr > th {
    background: #f3f6f6 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .ant-table-tbody > tr > td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .ant-tooltip-inner {
    color: #333;
    background-color: #fff !important;
  }

  .ant-tooltip-arrow::before {
    background-color: #fff !important;
  }

  .ant-menu-inline-collapsed-tooltip a {
    color: #333 !important;
  }

  .page .ant-select-selection--single {
    height: 32px !important;
    line-height: 32px !important;
  }
  .page .ant-select-selection__rendered{
    height: 32px !important;
    line-height: 32px !important;
  }
</style>