<!--
 * @Description: 科普专题
 * @Author: yantingxi
 * @Date: 2019-08-20 14:12:36
 * @LastEditors: yantingxi
 * @LastEditTime: 2019-09-15 17:55:00
 -->
<template>
    <view class="spe-topic__detail-header">
        <view class="spe-topic__detail-header__title c-gap-bottom">{{ title }}</view>
        <view class="spe-topic__detail-header__infos">
            <view
                v-for="(info, index) in infos"
                :key="index"
            >
                <text v-if="info" class="c-gap-right c-color-gray">{{ info }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    config: {
        component: true
    },
    props: {
        title: String,
        infos: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {};
    },
    components: {},
    methods: {}
};
</script>

<style lang="less" scoped>
.spe-topic__detail-header {
    position: relative;
    padding: 0.18rem 0;

    &__title {
        font-size: 0.24rem;
        font-weight: bold;
        line-height: .3rem;
    }

    &__infos {
        display: flex;
        line-height: 0.14rem;
    }
}
</style>