aiforge/web_src/js/components/DataAnalysis.vue

<template>
    <div style="height:100%; flex:1" >
        <el-col :span="3" style="height:100%;padding-right:15px;">
        <el-menu
            default-active="this.$route.path"
            class="el-menu-vertical-demo"
            :router="true" style="height:100%; background-color: #F5F5F6;" >
            <el-menu-item index="overview" >
                <i class="ri-home-4-line"></i>
                <span slot="title">概览</span>
            </el-menu-item>
            <el-submenu index="1">
                <template slot="title">
                <i class="ri-numbers-line"></i>
                <span>项目分析</span>
                </template>
                <el-menu-item index="ProTrend">项目增长趋势分析</el-menu-item> 
                <el-menu-item index="ProAnalysis">详细数据</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                <i class="ri-contacts-line"></i>
                <span>用户分析</span>
                </template>
                <el-menu-item index="UserTrend">用户增长趋势分析</el-menu-item> 
                <el-menu-item index="UserAnalysis">活动分析</el-menu-item>
            </el-submenu>
            <el-menu-item index="BrainAnalysis">
                <i class="ri-server-fill"></i>
                <span slot="title">云脑分析(建设中..)</span>
            </el-menu-item>
        </el-menu>
        
        </el-col>
        <router-view> </router-view>
    </div>
</template>

    
<style scoped>
     /deep/ .is-active{
        color: #238BFC ;
    }
    /deep/ .ui-container{
      background-color: #FFFF;
    }
    
    
    /deep/ .el-tabs--left .el-tabs__header.is-left{
      background-color:#F5F5F6;
      width: 12.43%;
    
    }
    .el-tabs--left .el-tabs__header.is-left
    
    
    html,
    body,
    /deep/ .el-container {
      padding: 0px;
      margin: 0px;
      height: 100%;
    }
    
    /deep/ .el-tabs--left .el-tabs__item.is-left {
        text-align: left;
    }
    /deep/ .el-tabs__item {
        padding: 0px 20px 0px 20px;
    }
    /deep/ .el-tabs__item.is-active .el-image{
        filter:none
    }
    /deep/ .el-tabs__item:hover .el-image{
        filter:none
    }

    .bk{
        background-color: #F5F5F6;
    }
    .el-menu-item.is-active {
    color: #409eff;
    background-color: #FFFFFF !important;
    }
    /deep/ .el-submenu.is-active .el-submenu__title {
        color: #409eff
    }
    /deep/ .el-submenu.is-active .el-submenu__title i{
        color: #409eff
    }
    /deep/ .el-menu, .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
        background-color: #F5F5F6;
    }
    /deep/ .el-pagination {
        padding-bottom: 30px;
    }

  
</style>