<template>
    <div class="qa">
        <el-row :gutter="20">
            <el-col :span="5">
                <div class="left-menu">
                    <div class="tabs">
                        <div class="tab" :class="{ active: tab === 0 }" @click="tab = 0">官方问答</div>
                        <div class="tab" :class="{ active: tab === 1 }" @click="tab = 1">热议话题</div>
                        <div class="tab" :class="{ active: tab === 2 }" @click="tab = 2">常见问题</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="19">
                <div class="right-list">
                    <div class="qa-list">
                        <div class="item" v-for="n in 10" :key="n">
                            <div class="q">
                                <div class="tag">问</div>
                                <div class="content">
                                    李克强考察南昌航空城为何强调一个“捧”字？
                                </div>
                                <div class="time">05-23</div>
                            </div>
                            <div class="a">
                                <div class="tag">答</div>
                                <div class="content">
                                    李克强11月15日上午考察南昌航空城，在首款国产大飞机C919装配厂勉励员工：“安全舒适的大飞机要从你们手中捧出来、飞上天。我为什么要说‘捧’字呢？因为飞机制造是一个高精密的活儿，要像捧宝贝一样。”李克强一一考察了飞机…
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pagination-wrapper">
                        <el-pagination
                            :current-page="1"
                            :page-size="100"
                            layout="total, prev, pager, next"
                            :total="1000"
                        >
                        </el-pagination>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'list',
    data() {
        return {
            tab: 0
        };
    }
};
</script>
<style lang="less" scoped>
.qa-list {
    padding: 10px 0;
    .item {
        padding: 10px 0;
        .flex-col();
        .tag {
            margin-right: 5px;
            line-height: 18px;
            width: 18px;
            min-width: 18px;
            height: 18px;
            text-align: center;
            margin-top: 1px;
            font-size: 11px;
            color: white;
        }
        .q {
            color: black;
            font-size: 14px;
            font-weight: bold;
            .flex();
            align-items: flex-start;
            line-height: 20px;
            cursor: pointer;
            .tag {
                background: @prim;
                border-radius: 2px;
            }
            .content {
                flex-basis: 0;
                flex-grow: 1;
                .ellipsis;
            }
        }
        .a {
            margin-top: 10px;
            color: black;
            font-size: 13px;
            .flex();
            align-items: flex-start;
            line-height: 20px;
            .tag {
                background: #ffc23b;
                border-radius: 2px;
            }
            .content {
                flex-basis: 0;
                flex-grow: 1;
                .ellipsisLn(2);
            }
        }
        .time {
            font-size: 13px;
            color: @text3;
            margin-left: 10px;
            font-weight: normal;
        }
    }
}
</style>
