<!--
 * @Description: 科普专题
 * @Author: yantingxi
 * @Date: 2019-08-20 14:12:36
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2019-12-03 14:08:27
 -->
<template>
    <view class="spe-topic__doctor c-gap-inner-top c-gap-inner-bottom">
        <c-avatar :src="image" :size="35" border="1px solid #eee" class="c-gap-right" />
        <view class="spe-topic__doctor__infos">
            <view class="spe-topic__doctor__infos__name">{{ name }}</view>
            <view class="spe-topic__doctor__infos__sub-info c-color-gray">
                <text v-for="(info, index) in subInfo" :key="index" class="c-gap-right">{{ info }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import Avatar from "@baidu/med-ui/components/Avatar/Avatar";

export default {
    config: {
        component: true
    },
    props: {
        image: String,
        name: String,
        subInfo: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {};
    },
    components: {
        "c-avatar": Avatar
    },
    methods: {}
};
</script>

<style lang="less" scoped>
.spe-topic__doctor {
    display: flex;
    align-items: center;

    &__image {
        width: 35px;
        height: 35px;
        background-size: cover;
    }

    &__infos {
        &__name {
            font-size: 0.16rem;
        }

        &__sub-info {
            margin-top: 2px;
            font-size: 0.13rem;
            line-height: 0.14rem;
        }
    }
}
</style>