dq_webcode/src/components/page/Workbench.vue

<template>
    <div class="bgw">
        <router-view></router-view>
        <div class="container_bg" :class="url?'dn':''">
            <div class="flex-center pdt40 border-b pdb30" >
                <img src="../../assets/img/Basics-icon.png" alt class="mgr10 icon-size" />
                <p class="fz-16">基础应用</p>
            </div>
            <div class="flex-center">
                <!-- v-if="$router.currentRoute.meta.btn.includes('人力资源管理系统')" -->
                <div  class="card mgr40 manpower" @click="goto('workbench-manpower')">
                </div>
                <div v-if="$router.currentRoute.meta.btn.includes('客户资源管理系统')" class="card client" @click="goto('workbench-client')">
                </div>
            </div>
            <div v-if="$router.currentRoute.meta.btn.includes('担保业务管理系统') || $router.currentRoute.meta.btn.includes('保后业务管理系统')">
                <div class="flex-center pdt40 border-b pdb30">
                    <img src="../../assets/img/Business-icon.png" alt class="mgr10 icon-size" />
                    <p class="fz-16">业务应用</p>
                </div>
                <div class="flex-center">
                    <div v-if="$router.currentRoute.meta.btn.includes('担保业务管理系统')" class="card mgr40 guarantee mrb30" @click="goto('workbench-guarantee')"></div>
                    <div v-if="$router.currentRoute.meta.btn.includes('保后业务管理系统')" class="card after-guarantee mrb30" @click="goto('afterLoan')"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            url:false,
            
        }
    },
    watch:{
    },
    created(){
        if(this.$route.query.token){
            sessionStorage.setItem("token",this.$route.query.token)
            if(this.$route.query.account){
                if(this.$route.query.headerImg){
                    this.$store.commit("userNameData", { userName: this.$route.query.account,headerImg: this.changePercent(this.$route.query.headerImg) });
                }else{
                    this.$store.commit("userNameData", { userName: this.$route.query.account });
                }
            }
        }

    },
    mounted(){
        if(this.$route.fullPath!=='/workbench')this.url = true
    },
    methods:{
         // 跳转方法,传一个字符串地址
        goto(path) {
            this.$router.push('/' + path);
        }
    },
    beforeRouteUpdate:function(to,from,next){
        if(to.path!=='/workbench')this.url = true
        else this.url = false
        next()
    },
    // 删除%转换成/
    changePercent(str){
        return str.replace(/%2F/g,'/').replace(/%3A/g,':')
    },
}
</script>

<style lang="scss" scoped>
@import url('../../assets/css/common.scss');
.Workbench{
    width: 100%;
    height: 100%;
}
.dn{
    display: none;
}
.icon{
    width: 20px;
}

.manpower {
    background: url('../../assets/img/work-man.png') no-repeat;
    background-size: 100%;
    position: relative;
    cursor: pointer;
}

.span-text {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 20%;
    width: 130px;
    font-size: 30px;
    word-break: break-all;
}
.guarantee {
    background: url('../../assets/img/work-guarantee.png') no-repeat;
    background-size: 100%;
    position: relative;
    cursor: pointer;
}
.after-guarantee {
    background: url('../../assets/img/work-afterLoans.png') no-repeat;
    background-size: 100%;
    position: relative;
    cursor: pointer;
}
.client {
    background: url('../../assets/img/work-client.png') no-repeat;
    background-size: 100%;
    position: relative;
    cursor: pointer;
}
.card {
    width: 480px;
    height: 250px;
    margin-top: 30px;
}
</style>