<template>
    <view 
        class="hospital-adv" 
    >
        <view
            v-for="(advDetails, advDetailsIndex) in advantages" 
            :key="advDetailsIndex"
            class="container"   
        >
            <view class="title"> {{ advDetails.title }}：</view>
            <view class="details">
                <view 
                    v-for="(adv, advIndex) in advDetails.data"
                    :key="advIndex"
                    class="details-content"
                >
                    {{ adv }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 医院主页第二版/医院优势
 * @author chenhongfan
 * @categories 医院主页
 * @tags [sub-component]
 */
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 医院擅长
         */
        advantages: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            
        };
    },
    components: {

    },
    methods: {

    }
};
</script>

<style lang="less" scoped>
.hospital-adv{
    padding: 10px 0 0px;
    .container{
        display: flex;
        .details{
            flex: 1;
            .details-content{
                    display: inline-block;
                    position: relative;
                    flex-shrink: 0;
                    padding-right: 8px;
                    margin-right: 6px;
                &::after{
                    content: "";
                    display: block;
                    width: 1px;
                    height: 14px;
                    background: #EEEEEE;
                    position: absolute;
                    right: 0px;
                    top: 50%;
                    transform: translateY(-50%);
                }

                &:last-child::after {
                    width: 0px;
                }
            }
        }
    }

}
</style>
