yihuo/pages/award_detail/level_ratio.vue

<template>
    <view class="wrapper flex-align-between">
        <view class="flex1 flex-align-center" v-for="item in data" :key="item.level">
            <view class="dot" :style="{background: LEVEL_MAP[item.level].bgColor}"></view>
            <view class="marginL10 font0 color-white">
                <view>{{$common.ignoreRatio0(item.probability)}}%</view>
                <view class="paddingT6">{{LEVEL_MAP[item.level].title}}</view>
            </view>
        </view>
    </view>
</template>
<script>
import { LEVEL_MAP } from '@/utils/config'
export default {
    props: {
        data: Array
    },
    data() {
        return {
            LEVEL_MAP
        }
    }
}
</script>
<style lang="scss" scoped>
.wrapper {
    margin: 20rpx 28rpx 10rpx;
    border-radius: 20rpx;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 4px 2px rgba(147, 67, 255, 0.3);
    border: 2rpx solid rgba(174, 231, 255, 0.5);
    padding: 20rpx 8rpx;
    .dot {
        width: 12rpx;
        height: 12rpx;
        border-radius: 6rpx;
    }
}
</style>