|
|
@@ -518,10 +518,10 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
.report-container {
|
|
|
min-height: 100vh;
|
|
|
- background: #f5f7fa;
|
|
|
+ background: $app-bg;
|
|
|
}
|
|
|
|
|
|
/* ===== 导航栏 ===== */
|
|
|
@@ -531,15 +531,15 @@ export default {
|
|
|
|
|
|
/* ===== 报告头部 ===== */
|
|
|
.report-header {
|
|
|
- background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
|
|
|
+ background: linear-gradient(135deg, $mat-blue-tint, $mat-blue-light);
|
|
|
margin: 20rpx 30rpx;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 30rpx 24rpx;
|
|
|
}
|
|
|
.report-type-tag {
|
|
|
display: inline-block;
|
|
|
- background: #1565C0;
|
|
|
- color: #fff;
|
|
|
+ background: $mat-blue-strong;
|
|
|
+ color: $app-surface;
|
|
|
font-size: 22rpx;
|
|
|
padding: 6rpx 20rpx;
|
|
|
border-radius: 20rpx;
|
|
|
@@ -560,7 +560,7 @@ export default {
|
|
|
width: 140rpx;
|
|
|
height: 140rpx;
|
|
|
border-radius: 70rpx;
|
|
|
- background: #fff;
|
|
|
+ background: $app-surface;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
@@ -568,26 +568,26 @@ export default {
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
.score-circle-green {
|
|
|
- background: #E8F5E9;
|
|
|
+ background: $mat-green-tint;
|
|
|
}
|
|
|
.score-num {
|
|
|
font-size: 48rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #1565C0;
|
|
|
+ color: $mat-blue-strong;
|
|
|
}
|
|
|
.score-circle-green .score-num {
|
|
|
- color: #2E7D32;
|
|
|
+ color: $mat-green-strong;
|
|
|
}
|
|
|
.score-unit {
|
|
|
font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
- color: #64B5F6;
|
|
|
+ color: $mat-blue-light-2;
|
|
|
}
|
|
|
.score-circle-green .score-unit {
|
|
|
- color: #81C784;
|
|
|
+ color: $mat-green-light;
|
|
|
}
|
|
|
.score-label {
|
|
|
font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
- color: #666;
|
|
|
+ color: $facade-text-body;
|
|
|
}
|
|
|
.report-info-row {
|
|
|
display: flex;
|
|
|
@@ -595,8 +595,8 @@ export default {
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
.info-chip {
|
|
|
- background: #fff;
|
|
|
- color: #333;
|
|
|
+ background: $app-surface;
|
|
|
+ color: $facade-text-strong;
|
|
|
font-size: 24rpx;
|
|
|
padding: 8rpx 20rpx;
|
|
|
border-radius: 20rpx;
|
|
|
@@ -604,7 +604,7 @@ export default {
|
|
|
}
|
|
|
.report-date {
|
|
|
font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
- color: #888;
|
|
|
+ color: $facade-text-faint;
|
|
|
}
|
|
|
|
|
|
/* ===== 指标明细 ===== */
|
|
|
@@ -618,11 +618,11 @@ export default {
|
|
|
margin-bottom: 20rpx;
|
|
|
font-size: calc(30rpx * var(--font-scale, 1));
|
|
|
font-weight: bold;
|
|
|
- color: #333;
|
|
|
+ color: $facade-text-strong;
|
|
|
}
|
|
|
.section-sub {
|
|
|
font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
font-weight: normal;
|
|
|
margin-left: 12rpx;
|
|
|
}
|
|
|
@@ -639,14 +639,14 @@ export default {
|
|
|
.category-name {
|
|
|
font-size: calc(26rpx * var(--font-scale, 1));
|
|
|
font-weight: bold;
|
|
|
- color: #333;
|
|
|
+ color: $facade-text-strong;
|
|
|
}
|
|
|
.category-count {
|
|
|
font-size: 22rpx;
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
}
|
|
|
.indicator-card {
|
|
|
- background: #fff;
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 20rpx;
|
|
|
margin-bottom: 12rpx;
|
|
|
@@ -661,7 +661,7 @@ export default {
|
|
|
}
|
|
|
.ind-name {
|
|
|
font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
- color: #333;
|
|
|
+ color: $facade-text-strong;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.ind-status {
|
|
|
@@ -670,16 +670,16 @@ export default {
|
|
|
border-radius: 16rpx;
|
|
|
}
|
|
|
.status-normal {
|
|
|
- background: #E8F5E9;
|
|
|
- color: #2E7D32;
|
|
|
+ background: $mat-green-tint;
|
|
|
+ color: $mat-green-strong;
|
|
|
}
|
|
|
.status-warning {
|
|
|
- background: #FFF3E0;
|
|
|
- color: #E65100;
|
|
|
+ background: $fortune-1-tint;
|
|
|
+ color: $mat-orange-strong;
|
|
|
}
|
|
|
.status-warn {
|
|
|
- background: #F3E5F5;
|
|
|
- color: #7B1FA2;
|
|
|
+ background: $fortune-3-tint;
|
|
|
+ color: $fortune-3-ink;
|
|
|
}
|
|
|
.ind-body {
|
|
|
display: flex;
|
|
|
@@ -695,21 +695,21 @@ export default {
|
|
|
.ind-value {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #1565C0;
|
|
|
+ color: $mat-blue-strong;
|
|
|
}
|
|
|
.ind-unit {
|
|
|
font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
margin-left: 8rpx;
|
|
|
}
|
|
|
.ind-ref {
|
|
|
font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
- color: #bbb;
|
|
|
+ color: $facade-text-ghost-light;
|
|
|
}
|
|
|
.empty-indicators {
|
|
|
text-align: center;
|
|
|
padding: 60rpx;
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
}
|
|
|
|
|
|
@@ -724,8 +724,8 @@ export default {
|
|
|
bottom: 40rpx;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
- background: linear-gradient(135deg, #43A047, #66BB6A);
|
|
|
- color: #fff;
|
|
|
+ background: linear-gradient(135deg, $mat-green-base-2, $mat-green-light-2);
|
|
|
+ color: $app-surface;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
@@ -747,7 +747,7 @@ export default {
|
|
|
|
|
|
.score-dashboard {
|
|
|
margin: 20rpx 30rpx;
|
|
|
- background: #fff;
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 24rpx;
|
|
|
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
|
|
@@ -770,7 +770,7 @@ export default {
|
|
|
}
|
|
|
.main-score-label {
|
|
|
font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
- color: #666;
|
|
|
+ color: $facade-text-body;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.flora-score-row {
|
|
|
@@ -779,7 +779,7 @@ export default {
|
|
|
justify-content: space-around;
|
|
|
margin-top: 16rpx;
|
|
|
padding-top: 20rpx;
|
|
|
- border-top: 2rpx solid #F0F0F0;
|
|
|
+ border-top: 2rpx solid $facade-fill;
|
|
|
}
|
|
|
.flora-score-item {
|
|
|
display: flex;
|
|
|
@@ -798,11 +798,11 @@ export default {
|
|
|
.flora-score-num {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #fff;
|
|
|
+ color: $app-surface;
|
|
|
}
|
|
|
.flora-score-label {
|
|
|
font-size: calc(20rpx * var(--font-scale, 1));
|
|
|
- color: #888;
|
|
|
+ color: $facade-text-faint;
|
|
|
}
|
|
|
|
|
|
/* ===== 营养缺乏分析 ===== */
|
|
|
@@ -811,7 +811,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
.deficiency-card {
|
|
|
- background: #FAFAFA;
|
|
|
+ background: $facade-fill-ghost;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 20rpx;
|
|
|
margin-bottom: 12rpx;
|
|
|
@@ -826,30 +826,30 @@ export default {
|
|
|
.deficiency-nutrient {
|
|
|
font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
font-weight: bold;
|
|
|
- color: #333;
|
|
|
+ color: $facade-text-strong;
|
|
|
}
|
|
|
.deficiency-type-tag {
|
|
|
font-size: 22rpx;
|
|
|
padding: 4rpx 16rpx;
|
|
|
border-radius: 16rpx;
|
|
|
- background: #FFF3E0;
|
|
|
- color: #E65100;
|
|
|
+ background: $fortune-1-tint;
|
|
|
+ color: $mat-orange-strong;
|
|
|
}
|
|
|
.dtype-deficiency {
|
|
|
- background: #FEE2E2;
|
|
|
- color: #DC2626;
|
|
|
+ background: $status-danger-soft;
|
|
|
+ color: $status-danger-deep;
|
|
|
}
|
|
|
.dtype-excess {
|
|
|
- background: #FFF3E0;
|
|
|
- color: #E65100;
|
|
|
+ background: $fortune-1-tint;
|
|
|
+ color: $mat-orange-strong;
|
|
|
}
|
|
|
.dtype-borderline {
|
|
|
- background: #FEF3C7;
|
|
|
- color: #D97706;
|
|
|
+ background: $status-warning-soft;
|
|
|
+ color: $status-warning-deep;
|
|
|
}
|
|
|
.dtype-unclassified {
|
|
|
- background: #F3F4F6;
|
|
|
- color: #6B7280;
|
|
|
+ background: $facade-fill-gray-100;
|
|
|
+ color: $facade-text-slate;
|
|
|
}
|
|
|
.deficiency-severity-row {
|
|
|
display: flex;
|
|
|
@@ -860,7 +860,7 @@ export default {
|
|
|
.severity-bar {
|
|
|
flex: 1;
|
|
|
height: 12rpx;
|
|
|
- background: #F3F4F6;
|
|
|
+ background: $facade-fill-gray-100;
|
|
|
border-radius: 6rpx;
|
|
|
overflow: hidden;
|
|
|
margin-right: 16rpx;
|
|
|
@@ -871,25 +871,25 @@ export default {
|
|
|
}
|
|
|
.severity-val {
|
|
|
font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
- color: #9CA3AF;
|
|
|
+ color: $facade-text-gray-400;
|
|
|
width: 60rpx;
|
|
|
text-align: right;
|
|
|
}
|
|
|
.deficiency-meta {
|
|
|
font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
- color: #6B7280;
|
|
|
+ color: $facade-text-slate;
|
|
|
margin-bottom: 6rpx;
|
|
|
}
|
|
|
.deficiency-foods {
|
|
|
font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
- color: #374151;
|
|
|
+ color: $facade-text-gray-700;
|
|
|
margin-top: 8rpx;
|
|
|
}
|
|
|
.foods-label {
|
|
|
- color: #9CA3AF;
|
|
|
+ color: $facade-text-gray-400;
|
|
|
}
|
|
|
.foods-value {
|
|
|
- color: #2E7D32;
|
|
|
+ color: $mat-green-strong;
|
|
|
}
|
|
|
|
|
|
/* ===== 雷达图 ===== */
|
|
|
@@ -910,7 +910,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
.food-card {
|
|
|
- background: #fff;
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 20rpx;
|
|
|
margin-bottom: 12rpx;
|
|
|
@@ -926,7 +926,7 @@ export default {
|
|
|
.food-name {
|
|
|
font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
font-weight: bold;
|
|
|
- color: #333;
|
|
|
+ color: $facade-text-strong;
|
|
|
}
|
|
|
.food-score {
|
|
|
font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
@@ -935,28 +935,28 @@ export default {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.score-high {
|
|
|
- background: #DCFCE7;
|
|
|
- color: #16A34A;
|
|
|
+ background: $status-success-soft-2;
|
|
|
+ color: $status-success-strong-2;
|
|
|
}
|
|
|
.score-mid {
|
|
|
- background: #FEF3C7;
|
|
|
- color: #D97706;
|
|
|
+ background: $status-warning-soft;
|
|
|
+ color: $status-warning-deep;
|
|
|
}
|
|
|
.score-low {
|
|
|
- background: #FEE2E2;
|
|
|
- color: #DC2626;
|
|
|
+ background: $status-danger-soft;
|
|
|
+ color: $status-danger-deep;
|
|
|
}
|
|
|
.score-unknown {
|
|
|
- background: #F3F4F6;
|
|
|
- color: #6B7280;
|
|
|
+ background: $facade-fill-gray-100;
|
|
|
+ color: $facade-text-slate;
|
|
|
}
|
|
|
.food-meta {
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
.food-category {
|
|
|
font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
- color: #6B7280;
|
|
|
- background: #F3F4F6;
|
|
|
+ color: $facade-text-slate;
|
|
|
+ background: $facade-fill-gray-100;
|
|
|
padding: 2rpx 12rpx;
|
|
|
border-radius: 12rpx;
|
|
|
}
|
|
|
@@ -975,11 +975,11 @@ export default {
|
|
|
}
|
|
|
.n-label {
|
|
|
font-size: calc(20rpx * var(--font-scale, 1));
|
|
|
- color: #9CA3AF;
|
|
|
+ color: $facade-text-gray-400;
|
|
|
}
|
|
|
.n-value {
|
|
|
font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
- color: #374151;
|
|
|
+ color: $facade-text-gray-700;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
</style>
|