caimei-applets-caimei/pages/seller/remarks/components/analysis-card-item.vue

<template>
    <view class="analysis-card-item">
        <view class="analysis-card-title">
            <slot name="title"></slot>
        </view>
        <view class="analysis-card-title" v-if="isSubtitle">
            <slot name="subtitle"></slot>
        </view>
        <view class="analysis-card-num">
            <count-up 
                :num="num"
                :width="24"
                :height="56"
                :fontSize="40"
                color="#333333"/>
            <text v-if="isPercentage">%</text>
        </view>
    </view>
</template>

<script>
import countUp from './countUp.vue'
export default {
    components: {
        countUp
    },
    props: {
        isPercentage: {
            type: Boolean,
            default: false
        },
        isSubtitle: {
            type: Boolean,
            default: false
        },
        num: {
            type: Number,
            default: 60
        }
    },
}
</script>

<style lang="scss">
.analysis-card-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 210rpx;
    align-items: center;
    box-sizing: border-box;
    .analysis-card-num {
        color: #333333;
        font-weight: bold;
        font-size: 40rpx;
        display: flex;
        align-items: center;
    }
}
.analysis-card-title {
    margin-bottom: 16rpx;
}
.analysis-card-title:nth-child(1) {
    font-size: 28rpx;
    color: #333333;
}
.analysis-card-title:nth-child(2) {
    font-size: 24rpx;
    color: #999999;
}
</style>