301hospital/web/src/App.vue

<template>
  <div id="app" :class="`theme${theme}`">
    <layout v-if="canUse"/>
    <div class="banbentips" v-else>
      <div>浏览器版内核版本过低,无法正常浏览网页，建议使用Chrome(谷歌)浏览器，Firefox(火狐)浏览器（版本号80或以上），360安全浏览器（版本10或以上）</div>
      <div>
        <p v-html="tips[0]"></p>
        <p v-html="tips[1]"></p>
      </div>
      <div>{{link}}</div>
    </div>
  </div>
</template>


<script>
import '@/assets/style/reset.less'
import '@/assets/style/public.less'
import '@/assets/theme/color.less'
import layout from '@/views/layout/index.vue'
import {mapState} from 'vuex'
import broswer from './config/broswer'
import whatBrowser from './config/core'

export default {
  components:{
    layout
  },
  data(){
    return {
      broswer,
      link: window.location.href,
      tips:[],
      canUse:false
    }
  },
  methods:{
    changeColor(){
      document.getElementById('app').className = 'theme2'
    }
  },

  mounted(){
    this.tips = whatBrowser()
    if(broswer.trident){
      return this.canUse = false
    }
    // 火狐
    else if(broswer.gecko){
      let version = broswer.firefoxCore[1].split(".")[0]
      if(Number(version)<80)
      return this.canUse = false
    }
    // 谷歌
     else if(broswer.webKit){
      let version = broswer.chromeCore[1].split(".")[0]
      if(Number(version)<69)
      return this.canUse = false
    }

    this.canUse = true
  },
  computed:{
    ...mapState({
      theme: state => state.common.theme
    })
  }
}
</script>

<style lang="less">
#app {
  text-align: center;
  width: 100%;
  height: 100%;
}

.banbentips{
  color: #000;
  width: 100%;
  line-height: 2;
}

</style>