yihuo/pages/lottery/king.vue

<template>
    <view class="cu-modal" :class="{'show': visible}">
        <view class="mask" @click="close"></view>
        <view class="cu-dialog" style="background-color: transparent; width:100%">
            <view class="relative wrapper" v-if="data">
                <image class="super" :src="LEVEL_MAP[data.level].bg" mode="scaleToFill" />
                <image class="super-image translateX" :src="data.cover" mode="aspectFit"
                    :style="{top: coverSize.top + 'rpx',width: coverSize.width + 'rpx', height: coverSize.height + 'rpx'}" />
                <image class="super-text translateX" :src="LEVEL_MAP[data.level].titleImg"
                    :style="{bottom: textSize.bottom + 'rpx',width: textSize.width + 'rpx', height: textSize.height + 'rpx'}" />
            </view>
            <view class="paddingT30 flex-align-center">
                <image :src="resource.close" class="x" @click="close"/>
            </view>
        </view>
    </view>
</template>
<script>
import { LEVEL_MAP } from '@/utils/config'
import resource from '@/utils/resource'

export default {
    data() {
        return {
            resource,
            LEVEL_MAP,
            coverSize: { width: 293, height: 370, top: 33 },
            textSize: { width: 230, height: 102, bottom: 40 },
            data: null,
            visible: false
        }
    },
    methods: {
        open(data) {
            this.data = data
            this.visible = true
        },
        close() {
            this.visible = false
            this.data = null
        }
    }
}
</script>

<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    z-index: 1001;
    width: 353rpx; height: 545rpx;
    background-color: transparent;
    margin: 0 auto;
    .super {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .super-image {
        position: absolute;
        border-radius: 8rpx;
    }
    .super-text {
        width: 182rpx;
        height: 56rpx;
        position: absolute;
        bottom: 40rpx;
    }
}
.x {
    width: 60rpx;
    height: 60rpx;
}
</style>