30 lines
641 B
Vue
30 lines
641 B
Vue
|
<template>
|
||
|
|
<view class="stat-item">
|
||
|
|
<text v-if="icon" class="stat-item__icon">{{ icon }}</text>
|
||
|
|
<text class="stat-item__label">{{ label }}</text>
|
||
|
|
<text class="stat-item__value" :style="{ color }">{{ value }}</text>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
defineProps({
|
||
|
|
label: String,
|
||
|
|
value: [Number, String],
|
||
|
|
icon: String,
|
||
|
|
color: { type: String, default: '#e0e0e0' }
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.stat-item {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8rpx;
|
||
|
|
padding: 8rpx 16rpx;
|
||
|
|
|
||
|
|
&__icon { font-size: 28rpx; }
|
||
|
|
&__label { color: $text-secondary; }
|
||
|
|
&__value { font-weight: bold; }
|
||
|
|
}
|
||
|
|
</style>
|