yihuo/pages/lottery/card.vue

<template>
    <view
        class="card-wrapper"
        :style="{
            backgroundImage: 'url(' + ossurl.box.lotteryBg + ')'
        }"
    >
    <view class="level">
        <image
          :src="LEVEL_MAP[data.level].titleText"
          mode="aspectFit"

      /></view>
        <view class="title">{{ data.name }}</view>
        <image
            class="super-image"
            :src="data.cover"
            mode="aspectFit"
            :style="{
                top: coverSize.top + 'rpx',
                width: coverSize.width + 'rpx',
                height: coverSize.height + 'rpx'
            }"
        />
    </view>
</template>

<script>
    import { LEVEL_MAP } from '@/utils/config'
    import resource from '@/utils/resource'
    import ossurl from '@/utils/ossurl'
    export default {
        props: {
            data: Object,
            size: {
                default: { width: 287, height: 436 },
                type: Object
            },
            coverSize: {
                default: { width: 234, height: 296, top: 26 },
                type: Object
            },
            textSize: {
                default: { width: 184, height: 81, bottom: 32 },
                type: Object
            },
            addSize: {
                default: { width: 186, height: 42 },
                type: Object
            },
            showAdd: Boolean
        },
        data() {
            return {
                resource,
                ossurl,
                LEVEL_MAP
            }
        }
    }
</script>

<style lang="scss" scoped>
    .card-wrapper {
        position: relative;
        width: 210rpx;
        height: 300rpx;
        background-size: 100% 100%;
        padding: 24rpx;
        text-align: center;
        .level {
            font-size: 24rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            color: #000000;
            image{
              width: 90rpx;
              height: 32rpx;
            }
        }
        .title {
            font-size: 20rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 350;
            color: #b58100;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .super {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .super-image {
            width: 100%;
            height: 450rpx;
        }
        .super-text {
            width: 182rpx;
            height: 56rpx;
            position: absolute;
            bottom: 40rpx;
        }
        .add-1 {
            position: absolute;
            opacity: 0;
            bottom: 0;
            &.add-animal {
                animation: add-bottom-top 2s forwards;
            }
        }
        @keyframes add-bottom-top {
            0% {
                bottom: 30%;
                opacity: 0.3;
            }
            60% {
                bottom: 50%;
                opacity: 1;
            }
            100% {
                bottom: 65%;
                opacity: 0;
            }
        }
    }
</style>