log.vue

<template>
  <div class="log-wrapper height100">
      <ul class="btn-tab-group">
          <li v-for="(item,index) in tabs" :key="index" @click="changeActive(index)" :class="{'active':activeIndex===index}">
              {{item}}
          </li>
      </ul>
      <div class="tab-content">
         <platformlog v-if="activeIndex===0"/> 
         <userlog v-if="activeIndex===1"/> 
         <settoplog v-if="activeIndex===2"/> 
         <devops v-if="activeIndex===3"/>
      </div>   
  </div>
</template>
<script>
import { 
     platformlog,
     userlog,
     settoplog,
     devops
} from './log/index'
export default {
    data(){
        return{
            tabs:['平台操作日志','用户操作日志','机顶盒运行日志', '运维日志'],
            activeIndex:0
        }
    },
    components:{platformlog, userlog, settoplog, devops },
    mounted(){

    },
    methods:{
       changeActive(index){
           this.activeIndex = index
       }
    }
}
</script>
<style lang="less" scoped>
.btn-tab-group{
    display: flex;
    li{
        width: 160px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: rgba(172,147,116,0.10);
        border: 1px solid #AC9374;
        border-radius: 8px 8px 0 0;
        border-bottom: none;
        font-size: 16px;
        color: @party-btn-color;
        cursor: default;
        &.active{
            background-color: @party-btn-color;
            border-color: @party-btn-color;
            color: @party-white;
        }
    }
}
.tab-content{
    height: calc(100% - 40px);
}
</style>