|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <view class="page">
|
|
|
+ <view class="page" :style="{ '--font-scale': fontScale }">
|
|
|
<scroll-view class="content" scroll-y>
|
|
|
<!-- 报告头部 -->
|
|
|
<view class="report-header">
|
|
|
@@ -359,6 +359,7 @@ import HealthKnowledgePopup from '@/pages/health/components/health-knowledge-pop
|
|
|
import FeedbackPopup from '@/pages/health/components/feedback-popup.vue'
|
|
|
import { parseDate } from '../../utils/format.js'
|
|
|
import { resolveChangeStyle, formatDelta, colorClassFor } from '../../utils/indicator-change.js'
|
|
|
+import fontScaleMixin from '@/mixins/font-scale.js'
|
|
|
|
|
|
var INDICATOR_TYPE_MAP = {
|
|
|
'维生素': 'vitamin',
|
|
|
@@ -371,6 +372,7 @@ var INDICATOR_TYPE_MAP = {
|
|
|
}
|
|
|
|
|
|
export default {
|
|
|
+ mixins: [fontScaleMixin],
|
|
|
components: { HealthKnowledgePopup, FeedbackPopup },
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -1071,16 +1073,16 @@ applyDraftPayload: function(payload) {
|
|
|
.content { height: calc(100vh - 100rpx); }
|
|
|
|
|
|
.report-header { background: linear-gradient(135deg, #4A9BD7, #6366F1); padding: 40rpx 30rpx; color: #fff; }
|
|
|
-.report-title { font-size: 36rpx; font-weight: 700; display: block; margin-bottom: 16rpx; }
|
|
|
+.report-title { font-size: calc(36rpx * var(--font-scale, 1)); font-weight: 700; display: block; margin-bottom: 16rpx; }
|
|
|
.report-meta { display: flex; gap: 20rpx; margin-bottom: 6rpx; }
|
|
|
-.meta-item { font-size: 24rpx; opacity: 0.9; }
|
|
|
+.meta-item { font-size: calc(24rpx * var(--font-scale, 1)); opacity: 0.9; }
|
|
|
.badge-row { display: flex; gap: 16rpx; margin-top: 12rpx; }
|
|
|
.badge { padding: 6rpx 20rpx; background: rgba(255,255,255,0.2); border-radius: 20rpx; font-size: 22rpx; }
|
|
|
|
|
|
.scores-wrap { display: flex; flex-wrap: wrap; padding: 20rpx 10rpx; background: #fff; }
|
|
|
.score-item { display: flex; flex-direction: column; align-items: center; margin: 12rpx 10rpx; width: calc(25% - 20rpx); }
|
|
|
.score-ring { width: 100rpx; height: 100rpx; border-radius: 50%; border: 6rpx solid; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 700; margin-bottom: 8rpx; }
|
|
|
-.score-label { font-size: 22rpx; color: #666; }
|
|
|
+.score-label { font-size: calc(22rpx * var(--font-scale, 1)); color: #666; }
|
|
|
|
|
|
.quick-nav { display: flex; padding: 20rpx; background: #fff; margin-bottom: 16rpx; }
|
|
|
.nav-card { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 16rpx 0; }
|
|
|
@@ -1091,13 +1093,13 @@ applyDraftPayload: function(payload) {
|
|
|
}
|
|
|
.caution-count { color: #DC2626; font-weight: 700; }
|
|
|
.nav-icon { font-size: 40rpx; margin-bottom: 6rpx; }
|
|
|
-.nav-label { font-size: 24rpx; color: #333; }
|
|
|
+.nav-label { font-size: calc(24rpx * var(--font-scale, 1)); color: #333; }
|
|
|
.nav-count { font-size: 20rpx; color: #999; }
|
|
|
|
|
|
.accordion-section { background: #fff; margin-bottom: 16rpx; }
|
|
|
.accordion-header { display: flex; justify-content: space-between; padding: 30rpx; border-bottom: 1rpx solid #f0f0f0; }
|
|
|
-.accordion-title { font-size: 30rpx; font-weight: 600; color: #333; }
|
|
|
-.accordion-stats { font-size: 22rpx; color: #999; margin-left: 16rpx; }
|
|
|
+.accordion-title { font-size: calc(30rpx * var(--font-scale, 1)); font-weight: 600; color: #333; }
|
|
|
+.accordion-stats { font-size: calc(22rpx * var(--font-scale, 1)); color: #999; margin-left: 16rpx; }
|
|
|
.abnormal-num { color: #C62828; font-weight: 700; }
|
|
|
.accordion-arrow { font-size: 24rpx; color: #999; }
|
|
|
.accordion-body { padding: 10rpx 30rpx 20rpx; }
|
|
|
@@ -1114,37 +1116,37 @@ applyDraftPayload: function(payload) {
|
|
|
.risk-card-inline.risk-level-warning { border-left-color: #F59E0B; }
|
|
|
.risk-card-inline.risk-level-high { border-left-color: #EF4444; }
|
|
|
.risk-card-inline.risk-level-abnormal { border-left-color: #C62828; }
|
|
|
-.risk-name-inline { font-size: 28rpx; color: #333; flex: 1; }
|
|
|
+.risk-name-inline { font-size: calc(28rpx * var(--font-scale, 1)); color: #333; flex: 1; }
|
|
|
.risk-badge-inline { padding: 4rpx 16rpx; border-radius: 20rpx; font-size: 22rpx; flex-shrink: 0; }
|
|
|
.risk-badge-inline.badge-low { background: #E8F5E9; color: #2E7D32; }
|
|
|
.risk-badge-inline.badge-warning { background: #FFF3E0; color: #E65100; }
|
|
|
.risk-badge-inline.badge-high { background: #FFEBEE; color: #C62828; }
|
|
|
.risk-badge-inline.badge-abnormal { background: #C62828; color: #fff; }
|
|
|
-.risk-value-inline { font-size: 22rpx; color: #999; margin-left: 16rpx; }
|
|
|
+.risk-value-inline { font-size: calc(22rpx * var(--font-scale, 1)); color: #999; margin-left: 16rpx; }
|
|
|
|
|
|
/* 菌群风险分组手风琴 */
|
|
|
.risk-group-item { padding: 12rpx 0; border-bottom: 1rpx solid #f5f5f5; }
|
|
|
.risk-group-header { display: flex; align-items: center; gap: 12rpx; padding: 8rpx 0; }
|
|
|
-.risk-group-name { font-size: 28rpx; color: #333; flex: 1; }
|
|
|
+.risk-group-name { font-size: calc(28rpx * var(--font-scale, 1)); color: #333; flex: 1; }
|
|
|
.risk-group-arrow { font-size: 24rpx; color: #999; }
|
|
|
.risk-group-body { padding: 8rpx 0 12rpx; }
|
|
|
-.risk-level { font-size: 22rpx; padding: 4rpx 14rpx; border-radius: 8rpx; }
|
|
|
+.risk-level { font-size: calc(22rpx * var(--font-scale, 1)); padding: 4rpx 14rpx; border-radius: 8rpx; }
|
|
|
.risk-level.risk-good { background: #E8F5E9; color: #2E7D32; }
|
|
|
.risk-level.risk-warning { background: #FFF3E0; color: #E65100; }
|
|
|
.risk-level.risk-danger { background: #FFEBEE; color: #C62828; }
|
|
|
-.risk-bacteria { font-size: 24rpx; color: #666; line-height: 1.6; }
|
|
|
+.risk-bacteria { font-size: calc(24rpx * var(--font-scale, 1)); color: #666; line-height: 1.6; }
|
|
|
|
|
|
.sub-group { margin-bottom: 16rpx; }
|
|
|
-.sub-group-title { font-size: 26rpx; color: #4A9BD7; font-weight: 600; display: block; margin: 12rpx 0 8rpx; }
|
|
|
+.sub-group-title { font-size: calc(26rpx * var(--font-scale, 1)); color: #4A9BD7; font-weight: 600; display: block; margin: 12rpx 0 8rpx; }
|
|
|
|
|
|
.indicator-card { padding: 16rpx 0; border-bottom: 1rpx solid #f5f5f5; }
|
|
|
.indicator-row { display: flex; align-items: center; justify-content: space-between; }
|
|
|
-.indicator-name { font-size: 28rpx; color: #333; flex: 1; }
|
|
|
+.indicator-name { font-size: calc(28rpx * var(--font-scale, 1)); color: #333; flex: 1; }
|
|
|
.arrow-up { color: #C62828; font-size: 22rpx; }
|
|
|
.arrow-down { color: #E65100; font-size: 22rpx; }
|
|
|
.arrow-warn { color: #F59E0B; font-size: 22rpx; }
|
|
|
|
|
|
-.val-text { font-size: 28rpx; font-weight: 600; color: #333; }
|
|
|
+.val-text { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: #333; }
|
|
|
.val-high { color: #C62828; }
|
|
|
.val-excess { color: #C62828; }
|
|
|
.val-low { color: #C62828; }
|
|
|
@@ -1153,22 +1155,22 @@ applyDraftPayload: function(payload) {
|
|
|
.val-abnormal { color: #C62828; }
|
|
|
.val-warning { color: #F59E0B; }
|
|
|
|
|
|
-.indicator-range { font-size: 22rpx; color: #bbb; display: block; margin-top: 4rpx; }
|
|
|
+.indicator-range { font-size: calc(22rpx * var(--font-scale, 1)); color: #bbb; display: block; margin-top: 4rpx; }
|
|
|
|
|
|
/* 指标知识库 "?" 按钮(与通用报告页一致) */
|
|
|
.ind-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 36rpx; height: 36rpx; border-radius: 50%; background: #E3F2FD; color: #1976D2; font-size: 22rpx; font-weight: 600; margin-left: 8rpx; flex-shrink: 0; }
|
|
|
|
|
|
/* 综合评级行 */
|
|
|
.rating-line { margin: 12rpx 0 0; }
|
|
|
-.rating-text { font-size: 24rpx; color: #666; display: block; }
|
|
|
+.rating-text { font-size: calc(24rpx * var(--font-scale, 1)); color: #666; display: block; }
|
|
|
|
|
|
/* 指标单位与症状 */
|
|
|
-.indicator-unit { font-size: 22rpx; color: #999; margin-left: 6rpx; }
|
|
|
-.indicator-symptoms { font-size: 22rpx; color: #E65100; display: block; margin-top: 4rpx; }
|
|
|
+.indicator-unit { font-size: calc(22rpx * var(--font-scale, 1)); color: #999; margin-left: 6rpx; }
|
|
|
+.indicator-symptoms { font-size: calc(22rpx * var(--font-scale, 1)); color: #E65100; display: block; margin-top: 4rpx; }
|
|
|
|
|
|
.indicator-edit { display: flex; gap: 8rpx; align-items: center; }
|
|
|
-.edit-input { border: 1rpx solid #ddd; border-radius: 8rpx; padding: 6rpx 10rpx; font-size: 26rpx; width: 100rpx; }
|
|
|
-.edit-picker { border: 1rpx solid #ddd; border-radius: 8rpx; padding: 6rpx 10rpx; font-size: 24rpx; color: #333; }
|
|
|
+.edit-input { border: 1rpx solid #ddd; border-radius: 8rpx; padding: 6rpx 10rpx; font-size: calc(26rpx * var(--font-scale, 1)); width: 100rpx; }
|
|
|
+.edit-picker { border: 1rpx solid #ddd; border-radius: 8rpx; padding: 6rpx 10rpx; font-size: calc(24rpx * var(--font-scale, 1)); color: #333; }
|
|
|
|
|
|
.fab { position: fixed; right: 30rpx; bottom: 40rpx; width: 100rpx; height: 100rpx; background: #4A9BD7; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 16rpx rgba(74,155,215,0.4); }
|
|
|
.fab-icon { font-size: 40rpx; color: #fff; }
|
|
|
@@ -1177,7 +1179,7 @@ applyDraftPayload: function(payload) {
|
|
|
.btn-discard { flex: 1; padding: 20rpx; border: 1rpx solid #ddd; border-radius: 12rpx; text-align: center; font-size: 28rpx; color: #666; }
|
|
|
.btn-confirm { flex: 1; padding: 20rpx; background: #4A9BD7; border-radius: 12rpx; text-align: center; font-size: 28rpx; color: #fff; }
|
|
|
.btn-parsing { flex: 1; padding: 20rpx; background: #f0f0f0; border-radius: 12rpx; text-align: center; }
|
|
|
-.parsing-text { font-size: 28rpx; color: #999; }
|
|
|
+.parsing-text { font-size: calc(28rpx * var(--font-scale, 1)); color: #999; }
|
|
|
|
|
|
.bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; padding: 20rpx 30rpx; background: #fff; border-top: 1rpx solid #eee; gap: 20rpx; z-index: 100; }
|
|
|
.btn-cancel { flex: 1; padding: 20rpx; border: 1rpx solid #ddd; border-radius: 12rpx; text-align: center; font-size: 28rpx; color: #666; }
|
|
|
@@ -1192,7 +1194,7 @@ applyDraftPayload: function(payload) {
|
|
|
border: 1rpx solid #f0f0f0;
|
|
|
}
|
|
|
.feedback-icon { font-size: 32rpx; margin-right: 12rpx; }
|
|
|
-.feedback-text { flex: 1; font-size: 26rpx; color: #4A9BD7; }
|
|
|
+.feedback-text { flex: 1; font-size: calc(26rpx * var(--font-scale, 1)); color: #4A9BD7; }
|
|
|
.feedback-arrow { font-size: 28rpx; color: #ccc; }
|
|
|
|
|
|
.bottom-spacer { height: 40rpx; }
|
|
|
@@ -1206,7 +1208,7 @@ applyDraftPayload: function(payload) {
|
|
|
border-left: 6rpx solid #FFB300;
|
|
|
}
|
|
|
.interp-text {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
color: #795548;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
@@ -1217,7 +1219,7 @@ applyDraftPayload: function(payload) {
|
|
|
border-left-color: #00897B;
|
|
|
}
|
|
|
.interp-label {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
font-weight: 600;
|
|
|
color: #00695C;
|
|
|
display: block;
|
|
|
@@ -1238,13 +1240,13 @@ applyDraftPayload: function(payload) {
|
|
|
gap: 8rpx;
|
|
|
}
|
|
|
.summary-title {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
font-weight: 600;
|
|
|
color: #fff;
|
|
|
opacity: 0.95;
|
|
|
}
|
|
|
.summary-text {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
color: #fff;
|
|
|
line-height: 1.6;
|
|
|
opacity: 0.95;
|
|
|
@@ -1275,13 +1277,13 @@ applyDraftPayload: function(payload) {
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
.analysis-title {
|
|
|
- font-size: 30rpx;
|
|
|
+ font-size: calc(30rpx * var(--font-scale, 1));
|
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
|
display: block;
|
|
|
}
|
|
|
.analysis-subtitle {
|
|
|
- font-size: 22rpx;
|
|
|
+ font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
color: #999;
|
|
|
display: block;
|
|
|
margin-top: 4rpx;
|
|
|
@@ -1301,7 +1303,7 @@ applyDraftPayload: function(payload) {
|
|
|
align-items: center;
|
|
|
padding: 12rpx 0;
|
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
}
|
|
|
.change-row:last-child { border-bottom: none; }
|
|
|
.change-name {
|
|
|
@@ -1335,7 +1337,7 @@ applyDraftPayload: function(payload) {
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
.change-trend {
|
|
|
- font-size: 22rpx;
|
|
|
+ font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
color: #888;
|
|
|
margin-left: 8rpx;
|
|
|
flex: 1;
|
|
|
@@ -1346,7 +1348,7 @@ applyDraftPayload: function(payload) {
|
|
|
border-top: 1rpx solid #f0f0f0;
|
|
|
}
|
|
|
.change-more-text {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
color: #4A9BD7;
|
|
|
}
|
|
|
.analysis-card {
|
|
|
@@ -1357,7 +1359,7 @@ applyDraftPayload: function(payload) {
|
|
|
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
|
|
}
|
|
|
.card-label {
|
|
|
- font-size: 26rpx;
|
|
|
+ font-size: calc(26rpx * var(--font-scale, 1));
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
display: block;
|
|
|
@@ -1374,7 +1376,7 @@ applyDraftPayload: function(payload) {
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
.func-dim-name {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
color: #333;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
@@ -1407,7 +1409,7 @@ applyDraftPayload: function(payload) {
|
|
|
.fill-danger { background: #EF4444; }
|
|
|
.fill-normal { background: #6B7280; }
|
|
|
.func-dim-summary {
|
|
|
- font-size: 22rpx;
|
|
|
+ font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
color: #888;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
@@ -1418,16 +1420,16 @@ applyDraftPayload: function(payload) {
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
.pb-label {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
color: #666;
|
|
|
}
|
|
|
.pb-ratio {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
color: #6366F1;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.pattern-name {
|
|
|
- font-size: 28rpx;
|
|
|
+ font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
font-weight: bold;
|
|
|
color: #FF8C42;
|
|
|
display: block;
|
|
|
@@ -1443,12 +1445,12 @@ applyDraftPayload: function(payload) {
|
|
|
}
|
|
|
.risk-item:last-child { border-bottom: none; }
|
|
|
.risk-name {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
color: #333;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.risk-level {
|
|
|
- font-size: 20rpx;
|
|
|
+ font-size: calc(20rpx * var(--font-scale, 1));
|
|
|
padding: 2rpx 14rpx;
|
|
|
border-radius: 20rpx;
|
|
|
color: #fff;
|
|
|
@@ -1457,7 +1459,7 @@ applyDraftPayload: function(payload) {
|
|
|
.risk-warning { background: #F59E0B; }
|
|
|
.risk-danger { background: #EF4444; }
|
|
|
.risk-bacteria {
|
|
|
- font-size: 22rpx;
|
|
|
+ font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
color: #999;
|
|
|
width: 100%;
|
|
|
margin-top: 4rpx;
|
|
|
@@ -1472,13 +1474,13 @@ applyDraftPayload: function(payload) {
|
|
|
}
|
|
|
.probiotic-item:last-child { border-bottom: none; }
|
|
|
.probiotic-name {
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
color: #333;
|
|
|
font-weight: 500;
|
|
|
width: 120rpx;
|
|
|
}
|
|
|
.probiotic-advice {
|
|
|
- font-size: 22rpx;
|
|
|
+ font-size: calc(22rpx * var(--font-scale, 1));
|
|
|
color: #888;
|
|
|
width: 100%;
|
|
|
margin-top: 4rpx;
|