feat(health): 健康卡片增加状态色(正常绿/异常红)+ 参考范围显示
This commit is contained in:
@@ -57,6 +57,24 @@
|
||||
border-radius: $r-sm;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-left: 4px solid transparent;
|
||||
|
||||
&.health-item-ok { border-left-color: $acc; }
|
||||
&.health-item-warn { border-left-color: $dan; }
|
||||
}
|
||||
|
||||
.health-item-bottom {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.health-status {
|
||||
font-size: 20px;
|
||||
|
||||
&.normal { color: $acc; }
|
||||
&.high, &.low { color: $dan; font-weight: bold; }
|
||||
}
|
||||
|
||||
.health-label {
|
||||
|
||||
@@ -31,12 +31,19 @@ export default function Index() {
|
||||
};
|
||||
|
||||
const healthItems = [
|
||||
{ label: '血压', value: todaySummary?.blood_pressure ? `${todaySummary.blood_pressure.systolic}/${todaySummary.blood_pressure.diastolic}` : '--/--', unit: 'mmHg' },
|
||||
{ label: '心率', value: todaySummary?.heart_rate ? `${todaySummary.heart_rate.value}` : '--', unit: 'bpm' },
|
||||
{ label: '血糖', value: todaySummary?.blood_sugar ? `${todaySummary.blood_sugar.value}` : '--', unit: 'mmol/L' },
|
||||
{ label: '体重', value: todaySummary?.weight ? `${todaySummary.weight.value}` : '--', unit: 'kg' },
|
||||
{ label: '血压', value: todaySummary?.blood_pressure ? `${todaySummary.blood_pressure.systolic}/${todaySummary.blood_pressure.diastolic}` : '--/--', unit: 'mmHg', status: todaySummary?.blood_pressure?.status },
|
||||
{ label: '心率', value: todaySummary?.heart_rate ? `${todaySummary.heart_rate.value}` : '--', unit: 'bpm', status: todaySummary?.heart_rate?.status },
|
||||
{ label: '血糖', value: todaySummary?.blood_sugar ? `${todaySummary.blood_sugar.value}` : '--', unit: 'mmol/L', status: todaySummary?.blood_sugar?.status },
|
||||
{ label: '体重', value: todaySummary?.weight ? `${todaySummary.weight.value}` : '--', unit: 'kg', status: todaySummary?.weight?.status },
|
||||
];
|
||||
|
||||
const getStatusLabel = (status?: string) => {
|
||||
if (status === 'high') return '偏高 ▲';
|
||||
if (status === 'low') return '偏低 ▼';
|
||||
if (status === 'normal') return '正常';
|
||||
return '';
|
||||
};
|
||||
|
||||
return (
|
||||
<View className='index-page'>
|
||||
<View className='greeting-bar'>
|
||||
@@ -54,10 +61,13 @@ export default function Index() {
|
||||
) : (
|
||||
<View className='health-grid'>
|
||||
{healthItems.map((item) => (
|
||||
<View className='health-item' key={item.label}>
|
||||
<View className={`health-item ${item.status === 'high' || item.status === 'low' ? 'health-item-warn' : item.status === 'normal' ? 'health-item-ok' : ''}`} key={item.label}>
|
||||
<Text className='health-label'>{item.label}</Text>
|
||||
<Text className='health-value'>{item.value}</Text>
|
||||
<Text className='health-unit'>{item.unit}</Text>
|
||||
<View className='health-item-bottom'>
|
||||
<Text className='health-unit'>{item.unit}</Text>
|
||||
{item.status && <Text className={`health-status ${item.status}`}>{getStatusLabel(item.status)}</Text>}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user