jiaoyi-vue/src/views/service/chat/web/index.vue

<template>
    <div class="router-err" v-if="userInfo.type !== 3">
        <div class="router-err__icon">
            <img src="img/404.png" />
        </div>
        <div class="router-err__content">
            <h2>无权限或找不到页面</h2>
            <p>当前页面无权限访问或者打开了一个不存在的链接，请检查当前账户权限和链接的可访问性。</p>
        </div>
    </div>
    <el-container class="flex-column" v-else>
        <el-main class="nopadding">
            <el-container>
                <el-aside width="300px">
                    <asideMain ref="asideMain" :userInfo="userInfo"></asideMain>
                </el-aside>
                <el-container>
                    <chatMain ref="chatMain" :userInfo="userInfo"></chatMain>
                </el-container>
                <el-aside width="400px">
                    <rightMain ref="rightMain" :userInfo="userInfo"></rightMain>
                </el-aside>
            </el-container>
        </el-main>
    </el-container>
</template>

<script>
import asideMain from '../components/aside';
import rightMain from '../components/asideRight';
import chatMain from '../components/chatBody';
export default {
    components: {
        asideMain,chatMain,rightMain
    },
    data(){
        return {
            userInfo:null,
        }
    },

	created() {
		var userInfo = this.$TOOL.data.get("USER_INFO");
        this.userInfo = userInfo;
    }
}
</script>

<style scoped lang="scss">
.router-err {display: flex;width: 900px;margin: 50px auto;align-items: center;}
.router-err__icon {width: 400px;}
.router-err__icon img {width: 100%;}
.router-err__content {flex: 1;padding:40px;}
.router-err__content h2 {font-size: 26px;}
.router-err__content p {font-size: 14px;color: #999;margin: 15px 0 30px 0;line-height: 1.5;}
@media (max-width: 992px){
    .router-err {display: block;width: 100%;margin-top: 10px;text-align: center;}
    .router-err__icon {width: 280px;margin: 0 auto;}
}
</style>