<template>
    <div class="voice-manage-page">
        <div class="top-tab-box">
            <span :class="tabActive=='voiceRole'?'active':''" @click="tabActive='voiceRole'">语音管理员配置</span>
            <span :class="tabActive=='voicePlate'?'active':''" @click="tabActive='voicePlate'">版块配置</span>
        </div>
        <component :is="tabActive"></component>
    </div>
</template>

<script>
import voiceRole from './components/voiceRole.vue'
import voicePlate from './components/voicePlate.vue'
export default {
    components:{
        voiceRole,
        voicePlate
    },
    data() {
        return {
            tabActive:'voiceRole',// voiceRole语音管理员配置  voicePlate版块配置
        }
    },
}
</script>

<style lang="scss" scoped>
.voice-manage-page{
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    padding: 30px;
    min-height: 80vh;
    .top-tab-box{
        margin-bottom: 30px;
        span{
            font-size: 16px;
            margin-right: 50px;
            cursor: pointer;
            padding-bottom: 5px;
        }
        .active{
            color: #409EFF;
            border-bottom: 2px solid #409EFF;
        }
    }
}
</style>