feat(miniprogram): 老年友好版本全面重设计 — 5→4 Tab + 首页/健康/消息/我的重写
- TabBar 从 5 Tab 调整为 4 Tab(首页/健康/消息/我的) - 首页重写为 5 区域布局:问候+进度环+体征2x2+待办+快捷操作 - 健康页重写:体征录入大输入框+趋势柱状图+BLE设备卡片 - 新建消息页:咨询对话+系统通知双 Tab - 我的页调整:菜单高度64px+新增积分商城入口 - 设计系统更新:色彩对比度提升(WCAG AA)+触控参数+老年友好 mixin - 新增 ProgressRing 组件(CSS conic-gradient 实现) - 修复 diagnoses 页面 $suc-l 未定义变量
This commit is contained in:
29
apps/miniprogram/src/components/ProgressRing.scss
Normal file
29
apps/miniprogram/src/components/ProgressRing.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
@import '../styles/variables.scss';
|
||||
|
||||
.progress-ring {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.progress-ring-inner {
|
||||
background: $card;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.progress-ring-percent {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.progress-ring-unit {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
40
apps/miniprogram/src/components/ProgressRing.tsx
Normal file
40
apps/miniprogram/src/components/ProgressRing.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import './ProgressRing.scss';
|
||||
|
||||
interface ProgressRingProps {
|
||||
percent: number;
|
||||
size?: number;
|
||||
strokeWidth?: number;
|
||||
color?: string;
|
||||
trackColor?: string;
|
||||
}
|
||||
|
||||
export default function ProgressRing({
|
||||
percent,
|
||||
size = 72,
|
||||
strokeWidth = 7,
|
||||
color = '#C4623A',
|
||||
trackColor = '#E8E2DC',
|
||||
}: ProgressRingProps) {
|
||||
const clamped = Math.max(0, Math.min(100, percent));
|
||||
const innerSize = size - strokeWidth * 2;
|
||||
|
||||
return (
|
||||
<View
|
||||
className='progress-ring'
|
||||
style={`width:${size}px;height:${size}px;background:conic-gradient(${color} ${clamped}%, ${trackColor} ${clamped}%);border-radius:50%;padding:${strokeWidth}px;`}
|
||||
>
|
||||
<View
|
||||
className='progress-ring-inner'
|
||||
style={`width:${innerSize}px;height:${innerSize}px;`}
|
||||
>
|
||||
<Text className='progress-ring-percent' style={`color:${color};`}>
|
||||
{clamped}
|
||||
</Text>
|
||||
<Text className='progress-ring-unit' style={`color:${color};`}>
|
||||
%
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user