<template>
    <view>
        <view v-for="(item, index) in list">
            <view v-if="index==0&&isBlur" class="">
                <text> {{ item.part }}:</text>
                <text> {{ item.symp }}</text>
            </view>
            <view v-else-if="index==1&&isBlur" class="blur-medium">
                <text> {{ item.part }}:</text>
                <text> {{ item.symp }}</text>
            </view>
            <view v-else-if="index>1&&isBlur" class="blur-heavy">
                <text> {{ item.part }}:</text>
                <text> {{ item.symp }}</text>
            </view>
            <view v-else class="">
                <text> {{ item.part }}:</text>
                <text> {{ item.symp }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default: []
        },
        isBlur:{
            type:Boolean,
            default:true

        },
    },


}
</script>

<style lang="less" scoped>
.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>