<template>
    <div class="interact">
        <div class="container">
            <!-- 面包屑 -->
            <el-row>
                <el-col :span="24">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>政民互动</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>
            <!-- 内容 -->
            <el-row class="content">
                <el-col :span="4">
                    <side-bar :current="current" @change="changeTab" :tabList="tabList" :title="barTitle"></side-bar>
                </el-col>
                <el-col :span="20">
                    <!-- 官方问答 -->
                    <div v-if="current == 0" class="content_r">
                        <official></official>
                    </div>
                    <!-- 热议话题 -->
                    <div v-else-if="current == 1" class="content_r index02">
                        <topic></topic>
                    </div>
                    <!-- 互动提问 -->
                    <div v-else-if="current == 2" class="content_r index02">
                        <problem></problem>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import SideBar from '../components/SideBar';
import official from '../components/interact/official';
import topic from '../components/interact/topic';
import Problem from '../components/interact/problem.vue';
export default {
    components: { SideBar, official, topic, Problem },
    name: 'interact',
    data() {
        return {
            // tabList: ['官方问答', '热议话题', '互动提问'],
            // isactive: 0,
            currentPage: 1,
            barTitle: '政民互动',
            current: 0,
            tabList: [
                { id: 0, name: '官方问答' },
                { id: 1, name: '热议话题' },
                { id: 2, name: '互动提问' }
            ]
        };
    },
    created() {},
    methods: {
        changeTab(index, e) {
            this.current = index;
        }
    }
};
</script>
<style lang="less" scoped>
// .interact {
//     background: #f5f7fa;
// }
.container {
    width: 1200px;
    margin: 0 auto;
}
.el-breadcrumb {
    height: 60px;
    line-height: 60px;
    /deep/.el-breadcrumb__inner {
        font-size: 12px;
        color: #000 !important;
    }
}

.content {
    // margin-top: 24px;
    // .content_tab > li {
    //     width: 200px;
    //     height: 60px;
    //     line-height: 60px;
    //     text-align: center;
    //     background: #f5f7fa;
    //     cursor: pointer;
    //     &.bg {
    //         color: #fff;
    //         background-color: #bf1616;
    //     }

    .content_r {
        margin-left: 20px;
        padding: 0 40px 40px;
        background-color: #fff;
        box-sizing: border-box;
        // height: 900px;
    }
}
</style>
