|
@@ -430,96 +430,96 @@ export default {
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style>
|
|
|
|
|
-.container { min-height: 100vh; background: #f5f7fa; padding: 20rpx 30rpx 120rpx; width: 100%; box-sizing: border-box; overflow-x: hidden; }
|
|
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+.container { min-height: 100vh; background: $app-bg; padding: 20rpx 30rpx 120rpx; width: 100%; box-sizing: border-box; overflow-x: hidden; }
|
|
|
|
|
|
|
|
/* 能量提示 */
|
|
/* 能量提示 */
|
|
|
.energy-tip {
|
|
.energy-tip {
|
|
|
- background: linear-gradient(135deg, #F59E0B, #F97316);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, $dim-wealth, $brand-primary);
|
|
|
border-radius: 20rpx; padding: 24rpx 30rpx; margin-bottom: 24rpx;
|
|
border-radius: 20rpx; padding: 24rpx 30rpx; margin-bottom: 24rpx;
|
|
|
}
|
|
}
|
|
|
-.energy-tip-text { color: #fff; font-size: 28rpx; font-weight: 600; }
|
|
|
|
|
|
|
+.energy-tip-text { color: $app-surface; font-size: 28rpx; font-weight: 600; }
|
|
|
.energy-tip-sub { color: rgba(255,255,255,0.8); font-size: 22rpx; margin-top: 6rpx; }
|
|
.energy-tip-sub { color: rgba(255,255,255,0.8); font-size: 22rpx; margin-top: 6rpx; }
|
|
|
|
|
|
|
|
/* 日历 */
|
|
/* 日历 */
|
|
|
.calendar-card {
|
|
.calendar-card {
|
|
|
- background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx;
|
|
|
|
|
|
|
+ background: $app-surface; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx;
|
|
|
}
|
|
}
|
|
|
.calendar-header {
|
|
.calendar-header {
|
|
|
display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx;
|
|
display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx;
|
|
|
}
|
|
}
|
|
|
-.calendar-title { font-size: 32rpx; font-weight: 700; color: #333; }
|
|
|
|
|
-.nav-btn { font-size: 40rpx; color: #F97316; padding: 0 16rpx; }
|
|
|
|
|
|
|
+.calendar-title { font-size: 32rpx; font-weight: 700; color: $facade-text-strong; }
|
|
|
|
|
+.nav-btn { font-size: 40rpx; color: $brand-primary; padding: 0 16rpx; }
|
|
|
.calendar-weekdays {
|
|
.calendar-weekdays {
|
|
|
display: flex; flex-direction: row; margin-bottom: 12rpx;
|
|
display: flex; flex-direction: row; margin-bottom: 12rpx;
|
|
|
}
|
|
}
|
|
|
-.weekday { width: 14.28%; text-align: center; font-size: 24rpx; color: #999; }
|
|
|
|
|
|
|
+.weekday { width: 14.28%; text-align: center; font-size: 24rpx; color: $facade-text-muted; }
|
|
|
.calendar-days { display: flex; flex-direction: row; flex-wrap: wrap; }
|
|
.calendar-days { display: flex; flex-direction: row; flex-wrap: wrap; }
|
|
|
.day-cell {
|
|
.day-cell {
|
|
|
width: 14.28%; height: 72rpx; display: flex; flex-direction: column;
|
|
width: 14.28%; height: 72rpx; display: flex; flex-direction: column;
|
|
|
align-items: center; justify-content: center; position: relative;
|
|
align-items: center; justify-content: center; position: relative;
|
|
|
}
|
|
}
|
|
|
.day-cell.today .day-num {
|
|
.day-cell.today .day-num {
|
|
|
- background: #F97316; color: #fff; border-radius: 50%;
|
|
|
|
|
|
|
+ background: $brand-primary; color: $app-surface; border-radius: 50%;
|
|
|
width: 48rpx; height: 48rpx; text-align: center; line-height: 48rpx;
|
|
width: 48rpx; height: 48rpx; text-align: center; line-height: 48rpx;
|
|
|
}
|
|
}
|
|
|
-.day-num { font-size: 26rpx; color: #333; }
|
|
|
|
|
-.day-dot { font-size: 16rpx; color: #F97316; position: absolute; bottom: 4rpx; }
|
|
|
|
|
|
|
+.day-num { font-size: 26rpx; color: $facade-text-strong; }
|
|
|
|
|
+.day-dot { font-size: 16rpx; color: $brand-primary; position: absolute; bottom: 4rpx; }
|
|
|
.day-cell.empty { height: 72rpx; }
|
|
.day-cell.empty { height: 72rpx; }
|
|
|
.calendar-stats {
|
|
.calendar-stats {
|
|
|
display: flex; justify-content: space-between; margin-top: 16rpx;
|
|
display: flex; justify-content: space-between; margin-top: 16rpx;
|
|
|
- padding-top: 16rpx; border-top: 2rpx solid #f5f5f5;
|
|
|
|
|
- font-size: 24rpx; color: #999;
|
|
|
|
|
|
|
+ padding-top: 16rpx; border-top: 2rpx solid $facade-fill-2;
|
|
|
|
|
+ font-size: 24rpx; color: $facade-text-muted;
|
|
|
}
|
|
}
|
|
|
-.stat-highlight { color: #F97316; font-weight: 700; font-size: 28rpx; }
|
|
|
|
|
|
|
+.stat-highlight { color: $brand-primary; font-weight: 700; font-size: 28rpx; }
|
|
|
|
|
|
|
|
/* 快速打卡 */
|
|
/* 快速打卡 */
|
|
|
-.quick-checkin { background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx; }
|
|
|
|
|
|
|
+.quick-checkin { background: $app-surface; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx; }
|
|
|
.section-title-row {
|
|
.section-title-row {
|
|
|
display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx;
|
|
display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx;
|
|
|
}
|
|
}
|
|
|
-.section-title { font-size: 30rpx; font-weight: 700; color: #333; }
|
|
|
|
|
-.section-subtitle { font-size: 22rpx; color: #999; }
|
|
|
|
|
|
|
+.section-title { font-size: 30rpx; font-weight: 700; color: $facade-text-strong; }
|
|
|
|
|
+.section-subtitle { font-size: 22rpx; color: $facade-text-muted; }
|
|
|
.checkin-types { display: flex; flex-direction: row; justify-content: space-between; }
|
|
.checkin-types { display: flex; flex-direction: row; justify-content: space-between; }
|
|
|
.checkin-btn {
|
|
.checkin-btn {
|
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
|
- width: 150rpx; height: 130rpx; background: #FFFBEB; border-radius: 16rpx;
|
|
|
|
|
- border: 2rpx solid #FDE68A;
|
|
|
|
|
|
|
+ width: 150rpx; height: 130rpx; background: $dim-wealth-tint; border-radius: 16rpx;
|
|
|
|
|
+ border: 2rpx solid $status-warning-light;
|
|
|
}
|
|
}
|
|
|
-.checkin-btn:active { background: #FEF3C7; }
|
|
|
|
|
|
|
+.checkin-btn:active { background: $status-warning-soft; }
|
|
|
.checkin-btn.disabled { opacity: 0.5; }
|
|
.checkin-btn.disabled { opacity: 0.5; }
|
|
|
.checkin-icon { font-size: 44rpx; margin-bottom: 8rpx; }
|
|
.checkin-icon { font-size: 44rpx; margin-bottom: 8rpx; }
|
|
|
-.checkin-label { font-size: 24rpx; color: #92400E; font-weight: 500; }
|
|
|
|
|
|
|
+.checkin-label { font-size: 24rpx; color: $status-warning-strong; font-weight: 500; }
|
|
|
|
|
|
|
|
/* 统计 */
|
|
/* 统计 */
|
|
|
.stats-card {
|
|
.stats-card {
|
|
|
- background: #fff; border-radius: 20rpx; padding: 24rpx;
|
|
|
|
|
|
|
+ background: $app-surface; border-radius: 20rpx; padding: 24rpx;
|
|
|
display: flex; flex-direction: row; justify-content: space-around;
|
|
display: flex; flex-direction: row; justify-content: space-around;
|
|
|
align-items: center; margin-bottom: 24rpx;
|
|
align-items: center; margin-bottom: 24rpx;
|
|
|
}
|
|
}
|
|
|
.stat-item { display: flex; flex-direction: column; align-items: center; }
|
|
.stat-item { display: flex; flex-direction: column; align-items: center; }
|
|
|
-.stat-value { font-size: 38rpx; font-weight: 800; color: #F59E0B; }
|
|
|
|
|
-.stat-label { font-size: 22rpx; color: #999; margin-top: 4rpx; }
|
|
|
|
|
-.stat-divider { width: 2rpx; height: 60rpx; background: #eee; }
|
|
|
|
|
|
|
+.stat-value { font-size: 38rpx; font-weight: 800; color: $dim-wealth; }
|
|
|
|
|
+.stat-label { font-size: 22rpx; color: $facade-text-muted; margin-top: 4rpx; }
|
|
|
|
|
+.stat-divider { width: 2rpx; height: 60rpx; background: $facade-hairline-2; }
|
|
|
|
|
|
|
|
/* 记录 */
|
|
/* 记录 */
|
|
|
-.record-section { background: #fff; border-radius: 20rpx; padding: 24rpx; }
|
|
|
|
|
|
|
+.record-section { background: $app-surface; border-radius: 20rpx; padding: 24rpx; }
|
|
|
.empty-state { text-align: center; padding: 48rpx 0; }
|
|
.empty-state { text-align: center; padding: 48rpx 0; }
|
|
|
.empty-icon { font-size: 48rpx; }
|
|
.empty-icon { font-size: 48rpx; }
|
|
|
-.empty-text { color: #999; font-size: 26rpx; margin-top: 12rpx; }
|
|
|
|
|
|
|
+.empty-text { color: $facade-text-muted; font-size: 26rpx; margin-top: 12rpx; }
|
|
|
.record-item {
|
|
.record-item {
|
|
|
display: flex; flex-direction: row; justify-content: space-between;
|
|
display: flex; flex-direction: row; justify-content: space-between;
|
|
|
- align-items: center; padding: 20rpx 0; border-bottom: 2rpx solid #f5f5f5;
|
|
|
|
|
|
|
+ align-items: center; padding: 20rpx 0; border-bottom: 2rpx solid $facade-fill-2;
|
|
|
}
|
|
}
|
|
|
.record-item:last-child { border-bottom: none; }
|
|
.record-item:last-child { border-bottom: none; }
|
|
|
.record-left { display: flex; flex-direction: row; align-items: center; flex: 1; }
|
|
.record-left { display: flex; flex-direction: row; align-items: center; flex: 1; }
|
|
|
.record-icon { font-size: 36rpx; margin-right: 16rpx; }
|
|
.record-icon { font-size: 36rpx; margin-right: 16rpx; }
|
|
|
.record-info { display: flex; flex-direction: column; }
|
|
.record-info { display: flex; flex-direction: column; }
|
|
|
-.record-type { font-size: 28rpx; color: #333; font-weight: 500; }
|
|
|
|
|
-.record-date { font-size: 22rpx; color: #999; margin-top: 2rpx; }
|
|
|
|
|
-.record-note { font-size: 22rpx; color: #666; margin-top: 2rpx; max-width: 300rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
|
|
|
+.record-type { font-size: 28rpx; color: $facade-text-strong; font-weight: 500; }
|
|
|
|
|
+.record-date { font-size: 22rpx; color: $facade-text-muted; margin-top: 2rpx; }
|
|
|
|
|
+.record-note { font-size: 22rpx; color: $facade-text-body; margin-top: 2rpx; max-width: 300rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
.record-right { display: flex; flex-direction: column; align-items: flex-end; }
|
|
.record-right { display: flex; flex-direction: column; align-items: flex-end; }
|
|
|
-.record-energy { font-size: 28rpx; color: #F59E0B; font-weight: 700; }
|
|
|
|
|
|
|
+.record-energy { font-size: 28rpx; color: $dim-wealth; font-weight: 700; }
|
|
|
.record-mood { font-size: 28rpx; margin-top: 4rpx; }
|
|
.record-mood { font-size: 28rpx; margin-top: 4rpx; }
|
|
|
|
|
|
|
|
/* 打卡弹窗 */
|
|
/* 打卡弹窗 */
|
|
@@ -529,27 +529,27 @@ export default {
|
|
|
align-items: center; justify-content: center;
|
|
align-items: center; justify-content: center;
|
|
|
}
|
|
}
|
|
|
.dialog-card {
|
|
.dialog-card {
|
|
|
- background: #fff; border-radius: 24rpx; width: 620rpx; padding: 32rpx;
|
|
|
|
|
|
|
+ background: $app-surface; border-radius: 24rpx; width: 620rpx; padding: 32rpx;
|
|
|
}
|
|
}
|
|
|
-.dialog-title { font-size: 34rpx; font-weight: 700; color: #333; text-align: center; margin-bottom: 28rpx; }
|
|
|
|
|
|
|
+.dialog-title { font-size: 34rpx; font-weight: 700; color: $facade-text-strong; text-align: center; margin-bottom: 28rpx; }
|
|
|
.form-item { margin-bottom: 24rpx; }
|
|
.form-item { margin-bottom: 24rpx; }
|
|
|
-.form-label { font-size: 26rpx; color: #666; margin-bottom: 8rpx; display: block; }
|
|
|
|
|
|
|
+.form-label { font-size: 26rpx; color: $facade-text-body; margin-bottom: 8rpx; display: block; }
|
|
|
.form-input {
|
|
.form-input {
|
|
|
- border: 2rpx solid #E5E7EB; border-radius: 12rpx; padding: 28rpx 20rpx;
|
|
|
|
|
|
|
+ border: 2rpx solid $facade-gray-200; border-radius: 12rpx; padding: 28rpx 20rpx;
|
|
|
font-size: 28rpx; width: 100%; box-sizing: border-box; min-height: 80rpx;
|
|
font-size: 28rpx; width: 100%; box-sizing: border-box; min-height: 80rpx;
|
|
|
}
|
|
}
|
|
|
.form-picker {
|
|
.form-picker {
|
|
|
- border: 2rpx solid #E5E7EB; border-radius: 12rpx; padding: 28rpx 20rpx;
|
|
|
|
|
- font-size: 26rpx; color: #333; min-height: 80rpx; display: flex; align-items: center;
|
|
|
|
|
|
|
+ border: 2rpx solid $facade-gray-200; border-radius: 12rpx; padding: 28rpx 20rpx;
|
|
|
|
|
+ font-size: 26rpx; color: $facade-text-strong; min-height: 80rpx; display: flex; align-items: center;
|
|
|
}
|
|
}
|
|
|
-.picker-text { color: #333; }
|
|
|
|
|
|
|
+.picker-text { color: $facade-text-strong; }
|
|
|
.mood-picker { display: flex; flex-direction: row; gap: 16rpx; }
|
|
.mood-picker { display: flex; flex-direction: row; gap: 16rpx; }
|
|
|
.mood-item { font-size: 44rpx; padding: 8rpx; border-radius: 12rpx; border: 2rpx solid transparent; }
|
|
.mood-item { font-size: 44rpx; padding: 8rpx; border-radius: 12rpx; border: 2rpx solid transparent; }
|
|
|
-.mood-item.selected { border-color: #F59E0B; background: #FFFBEB; }
|
|
|
|
|
|
|
+.mood-item.selected { border-color: $dim-wealth; background: $dim-wealth-tint; }
|
|
|
.dialog-actions { display: flex; flex-direction: row; gap: 20rpx; margin-top: 32rpx; }
|
|
.dialog-actions { display: flex; flex-direction: row; gap: 20rpx; margin-top: 32rpx; }
|
|
|
.dialog-btn { flex: 1; padding: 20rpx; border-radius: 12rpx; font-size: 28rpx; text-align: center; }
|
|
.dialog-btn { flex: 1; padding: 20rpx; border-radius: 12rpx; font-size: 28rpx; text-align: center; }
|
|
|
-.dialog-btn.cancel { background: #f5f5f5; color: #666; }
|
|
|
|
|
-.dialog-btn.confirm { background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff; }
|
|
|
|
|
|
|
+.dialog-btn.cancel { background: $facade-fill-2; color: $facade-text-body; }
|
|
|
|
|
+.dialog-btn.confirm { background: linear-gradient(135deg, $dim-wealth, $brand-primary); color: $app-surface; }
|
|
|
|
|
|
|
|
/* 能量动画 */
|
|
/* 能量动画 */
|
|
|
.energy-animation {
|
|
.energy-animation {
|
|
@@ -557,7 +557,7 @@ export default {
|
|
|
z-index: 1000; pointer-events: none;
|
|
z-index: 1000; pointer-events: none;
|
|
|
}
|
|
}
|
|
|
.energy-anim-text {
|
|
.energy-anim-text {
|
|
|
- font-size: 80rpx; font-weight: 900; color: #F59E0B;
|
|
|
|
|
|
|
+ font-size: 80rpx; font-weight: 900; color: $dim-wealth;
|
|
|
text-shadow: 0 4rpx 20rpx rgba(245,158,11,0.5);
|
|
text-shadow: 0 4rpx 20rpx rgba(245,158,11,0.5);
|
|
|
animation: floatUp 1.5s ease-out forwards;
|
|
animation: floatUp 1.5s ease-out forwards;
|
|
|
}
|
|
}
|