- 运动精神：体现铁人三项的挑战性和成就感
- 数据驱动：清晰展示运动数据和训练分析
- 专业工具：为运动员提供实用的训练参考
- 现代简约：简洁界面突出核心功能
- 主色调：深海蓝 (#1e3a8a) - 代表游泳的深邃水域
- 辅助色：活力橙 (#f97316) - 象征运动的激情活力
- 背景色：深蓝渐变 (#0f172a → #1e293b) - 营造专业运动氛围
- 文本色：纯白 (#ffffff) 和浅灰 (#e2e8f0) - 确保高对比度可读性
- 强调色：青绿 (#10b981) - 用于成功状态和积极反馈
- 标题字体：Noto Sans SC Bold - 现代无衬线，力量感强
- 正文字体：Noto Sans SC Regular - 清晰易读，适合数据展示
- 数字字体：等宽字体用于配速和时间显示
- 使用shader-park创建动态波浪背景
- 模拟水流的抽象几何动画
- 渐变色彩随用户交互变化
- Anime.js：用于数字计数动画、卡片切换效果
- ECharts.js：创建配速分析的雷达图和饼图
- Matter.js：实现物理效果的下拉刷新动画
- p5.js：绘制动态粒子背景效果
- 按钮点击时的涟漪效果
- 输入框聚焦时的边框发光
- 结果更新时的数字滚动动画
- 卡片选中时的3D倾斜效果
- 游泳：波浪图标
- 骑车：齿轮图标
- 跑步：闪电图标
- 时间：秒表图标
- 分析：图表图标
- 单列布局，垂直滚动
- 大按钮设计（最小44px点击区域）
- 合理的间距和留白
- 底部导航固定
- 应用标题和图标
- 比赛距离选择器
- 配速输入区域
- 计算结果展示
- 分析图表和建议
- 使用ECharts创建响应式图表
- 配色与整体设计保持一致
- 悬停和点击交互效果
- 移动端触控优化
- 圆角矩形设计
- 微妙的阴影效果
- 聚焦时的边框变化
- 错误状态的红色提示
- 渐变背景色彩
- 圆角处理
- 点击时的缩放反馈
- 禁用状态的透明度处理
- 白色半透明背景
- 模糊玻璃效果
- 微妙的边框
- 选中时的高亮状态
- 适配320px-768px屏幕宽度
- 字体大小随屏幕缩放
- 图表自适应容器尺寸
- 触控友好的交互元素