IDCOL/webConfig/src/App.vue

<template>
    <div id="app">
        <Header/>
        <div class="scrollbar_style">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    Number.prototype.formatNumberRgx = function() {
        var parts = this.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
    };

    import Header from './components/header.vue'
    import { mapGetters } from 'vuex'
    import allUel  from './api/allUel.js'

    export default {
        name: 'App',
        computed:{
            ...mapGetters({
                token:'token',
                client_key:'client_key',
                username:'username',
                version:'version',
                
                routerStr:'routerStr',

                avatar:'avatar',

            }),
        },
        components: {
            Header
        },
        created(){
            let linkTypeArr =  window.location.href.split("/");
            let linkType = linkTypeArr[linkTypeArr.length-1];
            this.$store.commit('ROUTERSTRFUN',{
                routerStr:'/'+linkType
            })
            document.title = 'inHealth-'+linkType

            this.$router.beforeEach((to, from, next) => {
                // console.log(to.path,'--------')
                if(to.path == '/login'||to.path == '/retrievePassword'){
                    this.headersShow = false
                }else{
                    this.headersShow = true
                }
                console.log(this.headersShow)
                this.$store.commit('ROUTERSTRFUN',{
                    routerStr:to.path
                })

                next();
            })
        },
        mounted(){
            let this_ = this;
            let width = document.body.offsetWidth;
            if(width >= 1920){
                $('html').css({'font-size':'95.01%'})
                this.$store.commit('REMRATIOFUN',{
                    remRatio:0.9501*16,
                })
            }else{
                $('html').css({'font-size':width*62.5/1200+'%'})
                this.$store.commit('REMRATIOFUN',{
                    remRatio:width*62.5/1200/100*16,
                })
            }
            window.onresize = function(){
                width = document.body.offsetWidth;
                // console.log(width)
                if(width >= 1920){
                    $('html').css({'font-size':'95.01%'})
                    this_.$store.commit('REMRATIOFUN',{
                        remRatio:0.9501*16,
                    })
                }else{
                    $('html').css({'font-size':width*62.5/1200+'%'})
                    this_.$store.commit('REMRATIOFUN',{
                        remRatio:width*62.5/1200/100*16,
                    })
                }
                this_.$store.commit('UPDATEREMRATIOFUN',{
                    updateRemRatio:this_.updateRemRatio+1,
                })
            }

            // var storage = window.localStorage;
            // var url = window.location.hash.split("?")[1]; //获取url中"?"符后的字串
            // var theRequest = new Object();
            var street = window.location.href.split("/")[2];
            let protocolStr = document.location.protocol;
            let subStrT = new RegExp('https:');//创建正则表达式对象
            if(street == 'localhost:8080' || street == '127.0.0.1:8080'){
                // street = 'newtest.solar-iot.com'
                street = 'new.solar-iot.com'
                // street = '10.0.0.123';
                this.webType = 2;
                protocolStr = 'http:';
                // this.webType = 1;
            }else if(street == 'solar.iotena.com'){
                street = 'new.solar-iot.com'
            }else if(street == 'www.gammausa.solar-iot.com'){
                /*en*/
                this.webType = 2;
            }else if(street == 'www.solar.flyingsmart.net'){
                /*正翔科技*/
                this.webType = 1;
            }
            for(let i in allUel){
                for(let key in allUel[i]){
                    if(i == 'websocket'){
                        allUel[i][key]=allUel[i][key].replace(new RegExp('ws:'),subStrW);
                    }else{
                        allUel[i][key]=allUel[i][key].replace(subStrT,protocolStr);
                    }
                }
            }
            let subStr=new RegExp('newtest.solar-iot.com');//创建正则表达式对象
            for(let i in allUel){
                for(let key in allUel[i]){
                    allUel[i][key]=allUel[i][key].replace(subStr,street);
                }
            }
        }
    }
</script>

<style type="text/css" lang="less">

    @font-face {
        font-family: 'PingFang-SC-Heavy';
        src: url('./style/font-pf/PingFangHeavy.eot');
        src:
          url('./style/font-pf/PingFangHeavy.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-pf/PingFangHeavy.woff') format('woff'),
          url('./style/font-pf/PingFangHeavy.ttf') format('truetype'),
          url('./style/font-pf/PingFangHeavy.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'PingFangSC-Medium';
        src: url('./style/font-pf/PingFangMedium.ttf');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'AlibabaPuHuiTiR';
        src: url('./style/font-al/Alibaba-PuHuiTi-Regular.eot');
        src:
          url('./style/font-al/Alibaba-PuHuiTi-Regular.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-al/Alibaba-PuHuiTi-Regular.woff') format('woff'),
          url('./style/font-al/Alibaba-PuHuiTi-Regular.ttf') format('truetype'),
          url('./style/font-al/Alibaba-PuHuiTi-Regular.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'AlibabaPuHuiTiH';
        src: url('./style/font-al/Alibaba-PuHuiTi-Heavy.ttf');
        src:
          url('./style/font-al/Alibaba-PuHuiTi-Heavy.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-al/Alibaba-PuHuiTi-Heavy.woff') format('woff'),
          url('./style/font-al/Alibaba-PuHuiTi-Heavy.ttf') format('truetype'),
          url('./style/font-al/Alibaba-PuHuiTi-Heavy.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'AlibabaPuHuiTiB';
        src: url('./style/font-al/Alibaba-PuHuiTi-Bold.ttf');
        src:
          url('./style/font-al/Alibaba-PuHuiTi-Bold.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-al/Alibaba-PuHuiTi-Bold.woff') format('woff'),
          url('./style/font-al/Alibaba-PuHuiTi-Bold.ttf') format('truetype'),
          url('./style/font-al/Alibaba-PuHuiTi-Bold.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'AlibabaPuHuiTiL';
        src: url('./style/font-al/Alibaba-PuHuiTi-Light.ttf');
        src:
          url('./style/font-al/Alibaba-PuHuiTi-Light.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-al/Alibaba-PuHuiTi-Light.woff') format('woff'),
          url('./style/font-al/Alibaba-PuHuiTi-Light.ttf') format('truetype'),
          url('./style/font-al/Alibaba-PuHuiTi-Light.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'AlibabaPuHuiTiM';
        src: url('./style/font-al/Alibaba-PuHuiTi-Medium.ttf');
        src:
          url('./style/font-al/Alibaba-PuHuiTi-Medium.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-al/Alibaba-PuHuiTi-Medium.woff') format('woff'),
          url('./style/font-al/Alibaba-PuHuiTi-Medium.ttf') format('truetype'),
          url('./style/font-al/Alibaba-PuHuiTi-Medium.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    // @font-face {
    //     font-family: 'bodoni-MT';
    //     src: url('./style/bodoniMT/bodoniMT.ttf');
    // }

    html,body,p,h1,h2,h3,h4,h5,ul,li{
        margin: 0px;
        padding: 0px;
    }
    html,body,#app{
          height: 100%;
          width:100%;
    }
    li{
        list-style:none;/*li去点*/
        box-sizing: border-box;
    }
    a{
        text-decoration: none;
        box-sizing: border-box;
    }
    i{
        font-style: inherit;
    }
    input{
        padding:0;
        outline-style: none;
        box-sizing: border-box;
    }
    div{
        box-sizing: border-box; //border、padding并入宽度。
    }
      /*滚动条样式*/
    .el-table__body-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
        width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 5px;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 3px;
        background: #DAE6E0;
    }
    .el-table__body-wrapper::-webkit-scrollbar-track {/*滚动条里面轨道*/
        background: #F6F8F7;
    }
    .el-table{
        th>.cell,td>.cell{
            padding: 0;
        }
        .el-table__body-wrapper{
            width: calc(100% - 8px);
            margin-right: 8px;
        }
    }

    .scrollbar_style{
        // margin-right: 8px;
        overflow: auto;
    }
      /*.scrollbar_style::-webkit-scrollbar-button{
         width: 10px;
         height: 10px;
      }*/
    .scrollbar_style::-webkit-scrollbar {/*滚动条整体样式*/
        width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 5px;
    }
    .scrollbar_style::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 3px;
        background: #DAE6E0;
    }
    .scrollbar_style::-webkit-scrollbar-track {/*滚动条里面轨道*/
        background: #F6F8F7;
    }
    #app{

        >.scrollbar_style{
            // width: calc(100% - 8px);
            width: calc(100%);
            height: calc(100% - 4.1rem);
            &.padding{
                padding-top: 4.2rem;
            }
        }
    }
    .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
        color: initial;
        background-color: #f5f7fa;
    }
    .el-dropdown-menu{
        max-height: 360px;
        .el-dropdown-menu__item{
            &.select{
                color: #409eff;
                font-weight: 700;
            }
        }
    }
    /*弹框样式*/
    .solar_dialig{
        .el-dialog__header{
            border-bottom: 1px solid #E8E8E8;
            span{
                color: #444444; 
            }
        }
        .el-dialog__headerbtn {
            top: 13px;
            font-size: 30px;
        }
        .el-dialog__body{
            .dialog_foot{
                text-align:center;padding: 60px 0 20px 0;
                .el-button{
                    width:320px;
                    height:60px;
                    border-radius: 6px;
                    font-size:16px;
                }
            }
        }
    }
</style>