<template>
    <view class="score" :class="type">
        <text class="tag">{{ getTag }}</text>
        <text class="count">{{ count }}</text>
    </view>
</template>

<script setup>
import { computed } from 'vue'

const ps = defineProps({
    type: {
        type: String,
        default: 'success'
    },
    count: {
        type: Number,
        default: 8
    }
})
const getTag = computed(() => {
    if (ps.type == 'success') {
        return '加分'
    } else {
        return '扣分'
    }
})
</script>
<style lang="scss" scoped>
.score {
    border-radius: 6rpx;
    width: 108rpx;
    color: #fff;
    font-size: 22rpx;
    display: flex;
    align-items: center;
    .tag {
        width: 58rpx;
        border-radius: 6rpx;
        text-align: center;
        padding: 2px 0;
        margin-right: 16rpx;
    }
    &.success {
        background: #e8ffea;
        .tag {
            background: #00b42a;
        }
        .count {
            color: #00b42a;
        }
    }
    &.warning {
        background: #ffece8;
        .tag {
            background: #f53f3f;
        }
        .count {
            color: #f53f3f;
        }
    }
}
</style>
