|
@@ -551,17 +551,20 @@ export default {
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
|
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
|
|
|
|
|
+$c-canvas-bg: #FCFCFC; // 图表画布近白底
|
|
|
|
|
+
|
|
|
.trend-container {
|
|
.trend-container {
|
|
|
min-height: 100vh;
|
|
min-height: 100vh;
|
|
|
- background: #F8F8F8;
|
|
|
|
|
|
|
+ background: $facade-fill-page;
|
|
|
padding-bottom: 40rpx;
|
|
padding-bottom: 40rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.stats-overview {
|
|
.stats-overview {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
margin: 24rpx 32rpx;
|
|
margin: 24rpx 32rpx;
|
|
|
- background: linear-gradient(135deg, #FF6B9D, #FF8CB3);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, $dim-mind, $dim-mind-light);
|
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
padding: 28rpx 16rpx;
|
|
padding: 28rpx 16rpx;
|
|
|
}
|
|
}
|
|
@@ -574,7 +577,7 @@ export default {
|
|
|
.stat-value {
|
|
.stat-value {
|
|
|
font-size: 36rpx;
|
|
font-size: 36rpx;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ color: $app-surface;
|
|
|
display: block;
|
|
display: block;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -588,7 +591,7 @@ export default {
|
|
|
.period-tabs {
|
|
.period-tabs {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
margin: 0 32rpx;
|
|
margin: 0 32rpx;
|
|
|
- background: #fff;
|
|
|
|
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 12rpx;
|
|
border-radius: 12rpx;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
@@ -598,19 +601,19 @@ export default {
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
padding: 16rpx 0;
|
|
padding: 16rpx 0;
|
|
|
font-size: 26rpx;
|
|
font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
|
|
|
|
+ color: $facade-text-body;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.period-active {
|
|
.period-active {
|
|
|
- background: #FF6B9D;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ background: $dim-mind;
|
|
|
|
|
+ color: $app-surface;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ===== 图表卡片 ===== */
|
|
/* ===== 图表卡片 ===== */
|
|
|
.chart-card {
|
|
.chart-card {
|
|
|
margin: 24rpx 32rpx;
|
|
margin: 24rpx 32rpx;
|
|
|
- background: #fff;
|
|
|
|
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
padding: 28rpx;
|
|
padding: 28rpx;
|
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
@@ -619,14 +622,14 @@ export default {
|
|
|
.chart-card .card-title {
|
|
.chart-card .card-title {
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
- color: #333;
|
|
|
|
|
|
|
+ color: $facade-text-strong;
|
|
|
display: block;
|
|
display: block;
|
|
|
margin-bottom: 4rpx;
|
|
margin-bottom: 4rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.chart-card .card-subtitle {
|
|
.chart-card .card-subtitle {
|
|
|
font-size: 22rpx;
|
|
font-size: 22rpx;
|
|
|
- color: #999;
|
|
|
|
|
|
|
+ color: $facade-text-muted;
|
|
|
display: block;
|
|
display: block;
|
|
|
margin-bottom: 16rpx;
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
}
|
|
@@ -636,14 +639,14 @@ export default {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 360rpx;
|
|
height: 360rpx;
|
|
|
border-radius: 12rpx;
|
|
border-radius: 12rpx;
|
|
|
- background: #FCFCFC;
|
|
|
|
|
|
|
+ background: $c-canvas-bg;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.calendar-card,
|
|
.calendar-card,
|
|
|
.distribution-card,
|
|
.distribution-card,
|
|
|
.daily-list-card {
|
|
.daily-list-card {
|
|
|
margin: 24rpx 32rpx;
|
|
margin: 24rpx 32rpx;
|
|
|
- background: #fff;
|
|
|
|
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
padding: 28rpx;
|
|
padding: 28rpx;
|
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
@@ -652,7 +655,7 @@ export default {
|
|
|
.card-title {
|
|
.card-title {
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
- color: #333;
|
|
|
|
|
|
|
+ color: $facade-text-strong;
|
|
|
display: block;
|
|
display: block;
|
|
|
margin-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
}
|
|
@@ -666,7 +669,7 @@ export default {
|
|
|
width: 14.28%;
|
|
width: 14.28%;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
font-size: 22rpx;
|
|
font-size: 22rpx;
|
|
|
- color: #999;
|
|
|
|
|
|
|
+ color: $facade-text-muted;
|
|
|
padding: 10rpx 0;
|
|
padding: 10rpx 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -687,13 +690,13 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.is-today {
|
|
.is-today {
|
|
|
- border: 2rpx solid #FF6B9D;
|
|
|
|
|
|
|
+ border: 2rpx solid $dim-mind;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.day-num {
|
|
.day-num {
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
- color: #333;
|
|
|
|
|
|
|
+ color: $facade-text-strong;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.day-emoji-small {
|
|
.day-emoji-small {
|
|
@@ -703,7 +706,7 @@ export default {
|
|
|
|
|
|
|
|
.day-score {
|
|
.day-score {
|
|
|
font-size: 18rpx;
|
|
font-size: 18rpx;
|
|
|
- color: #888;
|
|
|
|
|
|
|
+ color: $facade-text-faint;
|
|
|
margin-top: 2rpx;
|
|
margin-top: 2rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -718,7 +721,7 @@ export default {
|
|
|
|
|
|
|
|
.legend-label {
|
|
.legend-label {
|
|
|
font-size: 20rpx;
|
|
font-size: 20rpx;
|
|
|
- color: #999;
|
|
|
|
|
|
|
+ color: $facade-text-muted;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.legend-bar {
|
|
.legend-bar {
|
|
@@ -754,14 +757,14 @@ export default {
|
|
|
|
|
|
|
|
.dist-label {
|
|
.dist-label {
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
- color: #666;
|
|
|
|
|
|
|
+ color: $facade-text-body;
|
|
|
width: 120rpx;
|
|
width: 120rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.dist-bar-track {
|
|
.dist-bar-track {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
height: 20rpx;
|
|
height: 20rpx;
|
|
|
- background: #F0F0F0;
|
|
|
|
|
|
|
+ background: $facade-fill;
|
|
|
border-radius: 10rpx;
|
|
border-radius: 10rpx;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
@@ -774,7 +777,7 @@ export default {
|
|
|
|
|
|
|
|
.dist-count {
|
|
.dist-count {
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
|
|
|
|
+ color: $facade-text-muted;
|
|
|
width: 60rpx;
|
|
width: 60rpx;
|
|
|
text-align: right;
|
|
text-align: right;
|
|
|
}
|
|
}
|
|
@@ -784,13 +787,13 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
padding: 16rpx 0;
|
|
padding: 16rpx 0;
|
|
|
- border-bottom: 2rpx solid #F5F5F5;
|
|
|
|
|
|
|
+ border-bottom: 2rpx solid $facade-fill-2;
|
|
|
gap: 16rpx;
|
|
gap: 16rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.daily-date {
|
|
.daily-date {
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
|
|
|
|
+ color: $facade-text-muted;
|
|
|
width: 100rpx;
|
|
width: 100rpx;
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
}
|
|
}
|
|
@@ -804,7 +807,7 @@ export default {
|
|
|
|
|
|
|
|
.daily-weather {
|
|
.daily-weather {
|
|
|
font-size: 26rpx;
|
|
font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
|
|
|
|
+ color: $facade-text-body;
|
|
|
width: 120rpx;
|
|
width: 120rpx;
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
}
|
|
}
|
|
@@ -819,12 +822,12 @@ export default {
|
|
|
font-size: 20rpx;
|
|
font-size: 20rpx;
|
|
|
padding: 4rpx 12rpx;
|
|
padding: 4rpx 12rpx;
|
|
|
border-radius: 12rpx;
|
|
border-radius: 12rpx;
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ color: $app-surface;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.score-tag { background: #FF6B9D; }
|
|
|
|
|
-.type-tag { background: #8B5CF6; }
|
|
|
|
|
-.arousal-tag { background: #3B82F6; }
|
|
|
|
|
|
|
+.score-tag { background: $dim-mind; }
|
|
|
|
|
+.type-tag { background: $facade-violet; }
|
|
|
|
|
+.arousal-tag { background: $status-info; }
|
|
|
|
|
|
|
|
.empty-state {
|
|
.empty-state {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -840,13 +843,13 @@ export default {
|
|
|
|
|
|
|
|
.empty-text {
|
|
.empty-text {
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
- color: #999;
|
|
|
|
|
|
|
+ color: $facade-text-muted;
|
|
|
margin-bottom: 40rpx;
|
|
margin-bottom: 40rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.empty-btn {
|
|
.empty-btn {
|
|
|
- background: #FF6B9D;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ background: $dim-mind;
|
|
|
|
|
+ color: $app-surface;
|
|
|
padding: 16rpx 60rpx;
|
|
padding: 16rpx 60rpx;
|
|
|
border-radius: 40rpx;
|
|
border-radius: 40rpx;
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|