<template>


    <div>
        <div class="coentent">
         
            <div class="contents-area">
                <div class="contentss">
                    <div class="contentss-header">
                        <div class="header-table"  v-for="(item,index) in tableDate" 
                        :key="index"
                        :class="{'active':active==index}"
                        @click="btnHeder(index)"
                        >
                            {{ item.name }}
                            <div class="heng"  v-if="active==index"></div>
                        </div>
                       
                    </div>
                </div>
                <div class="areas">
                    <div v-if="active==0">
                        <zhuangjia @getPiliang="getPiliang" @getExtract="getExtract"></zhuangjia>
                    </div>
                    <div v-if="active==1">
                      
                    </div>
                  
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import zhuangjia from './conponent/zhuangjia.vue'
import chouqu from './conponent/chouqu.vue'
export default {
    data(){
        return{
            active:0,
            tableDate:[
                {
                    name:'专家管理'
                },
                {
                    name:'抽取记录'
                },
              
            ]
        }
    },
 
    methods:{
      
    
        //抽取
        getExtract(){
            this.$router.push('/selectexperts')
        },
        //批量
        getPiliang(){
            this.$router.push('/technologypiliang')
        },
       
        btnHeder(e){
            this.active=e
        }
    },
    components:{
        zhuangjia,
        chouqu
    }
    
}
</script>
<style scoped>
.areas{
 
    padding-bottom: 15px;
    width: 97%;
    margin: 0 auto;
    padding-top: 20px;
}
.active{
    color: #5165f7 !important;
}
.heng{
    width: 20px;
    height: 6px;
    background: #5165f7;
    margin: 0 auto;
    margin-top: 6px;
}
.header-table{
 cursor: pointer;
}
.contentss-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    width: 150px;
}
.contentss{
    width: 97%;
    margin: 0 auto;
    padding-top: 12px;
}
.contents-area{
    width: 100%;
    
    background: white;
    margin-top: 20px;

}
.header-title{
    position: relative;
    top: 20px;
    left: 25px;
}
.numbers{
    position: relative;
    top: -7px;
    color: #2AB95F;
}
.number-name2{
    margin-top: 8px;
    font-size: 14px;
    color: #979BBC;
}
.number-name{
    font-weight: bold;
    font-size:25px;
    color: #17192C;
}
.header-names{
  display: flex;
  width: 82%;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: 20px;
}
.headers{
    width: 304px;
    height: 102px;
    background: #F7F7FA;
    margin-top: 38px;
    border-radius: 8px;
    
}
.header-area{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 97%;
    margin: 0 auto;
}
.content-header{
    width: 100%;
   
    background:white;
    padding-bottom: 22px;
   
}
    .coentent{
      
    }
</style>