50772878da
- TabBar 从 5 Tab 调整为 4 Tab（首页/健康/消息/我的） - 首页重写为 5 区域布局：问候+进度环+体征2x2+待办+快捷操作 - 健康页重写：体征录入大输入框+趋势柱状图+BLE设备卡片 - 新建消息页：咨询对话+系统通知双 Tab - 我的页调整：菜单高度64px+新增积分商城入口 - 设计系统更新：色彩对比度提升(WCAG AA)+触控参数+老年友好 mixin - 新增 ProgressRing 组件（CSS conic-gradient 实现） - 修复 diagnoses 页面 $suc-l 未定义变量
41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
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>
|
|
);
|
|
}
|