yihuo/pages/lottery/trans_card.vue

<template>
    <div class="item flex-column-align-center" :style="{width: itemWidth + 'px', height: height + 'px'}" @click="showDetail(item, index)">
        <image class="super" :src="LEVEL_MAP[item.level].bg" mode="scaleToFill" :style="{width: width + 'px', left: fill + 'px'}" />
        <image class="image" :src="item.cover" mode="aspectFit" :style="{width: imageWidth + 'px', height: imageHeight + 'px'}" />
    </div>
</template>

<script>
import { LEVEL_MAP } from '@/utils/config'

export default {
    props: {
        item: Object,
        width: {
            type: Number,
            default: 67
        },
        height: {
            type: Number,
            default: 90
        },
        fill: {
            type: Number,
            default: 2
        },
        imageWidth: {
            type: Number,
            default: 55
        },
        imageHeight: {
            type: Number,
            default: 70
        }
    },
    data() {
        return {
            LEVEL_MAP,
            itemWidth: 0
        }
    },
    created() {
        this.itemWidth = this.width + this.fill * 2
    }
}
</script>
<style lang="scss" scoped>
.item {
    position: relative;
    .super {
        position: absolute;
        top: 0;
        height: 100%;
    }
}
</style>