<template>
    <view>
        <view  v-for="(item, index) in list" style="position: relative;margin-bottom: 10px;"
            class="">
            <view v-if="index==0&&isBlur">
                <image class="icon1" mode="widthFix" :src="'/static/icon/' + theme + '_xysz_rect@2x.png'" />
                <view class="lucktext">数字{{ item.id }}</view>
                <text>
                    {{ item.caiYun }}
                </text>
                <view>
                    {{ item.taoHua }}
                </view>
            </view>
            <view class="blur-medium" v-else-if="index==1&&isBlur">
                <image class="icon1" mode="widthFix" :src="'/static/icon/' + theme + '_xysz_rect@2x.png'" />
                <view class="lucktext">数字{{ item.id }}</view>
                <text>
                    {{ item.caiYun }}
                </text>
                <view>
                    {{ item.taoHua }}
                </view>
            </view>
            <view class="blur-heavy" v-else-if="index>1&&isBlur">
                <image class="icon1" mode="widthFix" :src="'/static/icon/' + theme + '_xysz_rect@2x.png'" />
                <view class="lucktext">数字{{ item.id }}</view>
                <text>
                    {{ item.caiYun }}
                </text>
                <view>
                    {{ item.taoHua }}
                </view>
            </view>
            <view v-else>
                <image class="icon1" mode="widthFix" :src="'/static/icon/' + theme + '_xysz_rect@2x.png'" />
                <view class="lucktext">数字{{ item.id }}</view>
                <text>
                    {{ item.caiYun }}
                </text>
                <view>
                    {{ item.taoHua }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'm-number-blur',
    props: {
        list: {
            type: Array,
            default: []
        },
        isBlur:{
            type:Boolean,
            default:true

        },
        theme: {
            type: String,
            default: 'yellow'
        }
    },

}
</script>

<style lang="less" scoped>
.icon1 {
    width: 119rpx;
    display: inline-block;
    margin-right: 15rpx;
}

.lucktext {
    text-align: center;
    width: 119rpx;
    line-height: 54rpx;
    left: 0;
    top: 0;
    position: absolute;
}


.blur-light {
    color: transparent;
    text-shadow: 2rpx 2rpx 4rpx #000000;
}

.blur-medium {
    color: transparent;
    text-shadow: 2rpx 2rpx 6rpx #000000;
}

.blur-heavy {
    color: transparent;
    text-shadow: 2rpx 2rpx 16rpx #000000;
}
</style>