<template>
    <div class="item" v-if="data">
        <van-image
            width="100"
            height="100"
            :src="imageUrl"
        />
        <div class="title">
            <span>{{sort}}.{{ data.problem_desc }}</span>
        </div>
    </div>
</template>

<script>
export default {
    props: ['sort', 'data'],
    computed: {
        imageUrl() {
            if (this.data && this.data.problem_images && this.data.problem_images.length > 0) {
                return this.data.problem_images[0];
            }
            return ''
        }
    }
}
</script>

<style lang="scss" scoped>
.item {
    position: relative;
    margin-left: 10px;
    .title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        background-color: rgba($color: #000000, $alpha: 0.6);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: #FFFFFF;
    }
}
</style>