174 lines
3.3 KiB
Vue
174 lines
3.3 KiB
Vue
<template>
|
|
<view class="today-progress">
|
|
<view class="progress-header">
|
|
<FaIcon icon="chart-column" :size="22" color="#ff9f43" />
|
|
<text class="progress-title">今日进度</text>
|
|
<view class="exp-display">
|
|
<text class="exp-current">{{ todayProgress.totalExp }}</text>
|
|
<text class="exp-separator">/</text>
|
|
<text class="exp-max">{{ todayProgress.maxDailyExp }}</text>
|
|
<text class="exp-unit">EXP</text>
|
|
</view>
|
|
</view>
|
|
<view class="progress-stats">
|
|
<view class="stat-item">
|
|
<FaIcon icon="list-check" :size="22" color="#4cb8c6" />
|
|
<text class="stat-value">{{ todayProgress.tasksCompleted }}</text>
|
|
<text class="stat-label">任务完成</text>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item">
|
|
<FaIcon icon="money-bill" :size="22" color="#ff9f43" />
|
|
<text class="stat-value">{{ todayProgress.billsRecorded }}</text>
|
|
<text class="stat-label">记账记录</text>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item">
|
|
<FaIcon :icon="todayProgress.moodRecorded ? 'face-smile' : 'calendar-xmark'" :size="22" :color="todayProgress.moodRecorded ? '#52c41a' : '#999'" />
|
|
<view class="stat-value" v-if="todayProgress.moodRecorded">
|
|
<FaIcon icon="check" :size="16" color="#52c41a" />
|
|
</view>
|
|
<text class="stat-value" v-else>-</text>
|
|
<text class="stat-label">心情记录</text>
|
|
</view>
|
|
</view>
|
|
<view class="bonus-info">
|
|
<view class="bonus-item">
|
|
<FaIcon icon="fire" :size="14" color="#ff9f43" />
|
|
<text>连续加成: +{{ todayProgress.streakBonus }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import FaIcon from '@/components/FaIcon.vue'
|
|
|
|
export default {
|
|
name: 'TodayProgress',
|
|
components: { FaIcon },
|
|
props: {
|
|
todayProgress: {
|
|
type: Object,
|
|
default: () => ({
|
|
tasksCompleted: 0,
|
|
billsRecorded: 0,
|
|
moodRecorded: false,
|
|
streakBonus: 0,
|
|
totalExp: 0,
|
|
maxDailyExp: 120
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.today-progress {
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 28rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.progress-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.progress-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.progress-title {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
|
|
.exp-display {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4rpx;
|
|
}
|
|
|
|
.exp-current {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #ff9f43;
|
|
}
|
|
|
|
.exp-separator {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.exp-max {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.exp-unit {
|
|
font-size: 18rpx;
|
|
color: #aaa;
|
|
}
|
|
|
|
.progress-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.stat-divider {
|
|
width: 1px;
|
|
height: 48rpx;
|
|
background: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.bonus-info {
|
|
margin-top: 20rpx;
|
|
padding-top: 20rpx;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.bonus-item {
|
|
font-size: 22rpx;
|
|
color: #ff9f43;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6rpx;
|
|
}
|
|
</style>
|