<template>
    <div class="teacter-intro-container">
        <div class="basic-title">讲师介绍</div>
        <div class="leader-info" v-for="(item,index) in doctorList" :key="index">
            <img :src="item.appImageUrl"/>
            <div class="leader-text">
                <div class="leader-con">
                    <span>{{item.name}}</span>
                    <span class="leader-title">{{item.title}}</span>
                </div>
                <div class="address">{{item.hospital}}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        doctorList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {

        }
    },
    created() {

    },
    mounted() {

    },
    methods: {

    }
}
</script>
<style lang="less" scoped>
.teacter-intro-container {
    margin: 30px 15px 0px;
    .basic-title {
        font-size: 18px;
        line-height: 18px;
        color: #373839;
        font-weight: 700;
    }
    .leader-info {
        display: flex;
        flex-direction: row;
        margin-top: 16px;
        padding-bottom: 16px;
        img {
            display: inline-block;
            width: 44px;
            height: 44px;
            border-radius: 50%;
        }
        .leader-text {
            flex: 1;
            width: 100px;
            margin-left: 16px;
            margin-top: 6px;
            .leader-con {
                line-height: 14px;
                display: flex;
                flex-direction: row;
                white-space: nowrap;
                span {
                    font-size: 16px;
                    color: #676869;
                }
                span:first-child {
                    font-size: 16px;
                    color: #373839;
                    font-weight: 700;
                    line-height: 1.1;
                }
                .leader-title {
                    width: 220px;
                    overflow : hidden;
                    text-overflow: ellipsis;
                    white-space:nowrap;
                    line-height: 16px;
                    margin-left: 10px;
                }
            }
            .address {
                margin-top: 5px;
                font-size: 13px;
                color: #979899;
                width: 240px;
                overflow : hidden;
                text-overflow: ellipsis;
                white-space:nowrap;
            }
        }
    }
}
</style>
