style(metronome): 脚印改用 SVG 矢量,单笔成型告别卡通感

div 拼接(椭圆+5 个圆)无论怎么调都摆脱不了"青蛙脚"既视感,
根本原因是 div 画不出曲线轮廓。改用 SVG path 单笔成型:

- 新增 static/training/footprint.svg(775B)
  · path 一笔走完:前足→足弓凹陷→脚跟,模拟真实脚印拓印
  · 5 个脚趾用 ellipse + rotate 转角,大小递减(7.2→3.8rpx)
  · 内侧(拇趾侧)凹陷、外侧饱满,符合解剖学
  · 单色 #e2e8f0 fill-opacity 0.92,接近湿沙脚印质感

- metronome.vue:
  · 模板:删 heel + 5×toe,改用 image src=footprint.svg
  · CSS:删除 70+ 行 heel/toe 位置定位,只保留 footprint 容器
  · 左脚保持 scaleX(-1) 镜像,动画 keyframe 不变

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-05-25 12:45:17 +08:00
co-authored by Cursor
parent 9b6d9ce007
commit e104249707
2 changed files with 24 additions and 70 deletions
@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140">
<g fill="#e2e8f0" fill-opacity="0.92">
<path d="M 30,34 C 26,42 24,52 24,64 C 24,72 23,80 23,88 C 24,98 26,108 30,116 C 35,124 42,130 50,131 C 58,130 65,124 70,116 C 74,108 76,98 77,88 C 77,80 76,72 76,64 C 76,52 74,42 70,34 C 66,30 60,29 50,30 C 40,29 34,30 30,34 Z"/>
<ellipse cx="32" cy="22" rx="7.2" ry="9" transform="rotate(-12 32 22)"/>
<ellipse cx="45" cy="13" rx="5.8" ry="7.8" transform="rotate(-4 45 13)"/>
<ellipse cx="57" cy="11" rx="5" ry="7" transform="rotate(2 57 11)"/>
<ellipse cx="67" cy="14" rx="4.5" ry="6.2" transform="rotate(8 67 14)"/>
<ellipse cx="75" cy="20" rx="3.8" ry="5.2" transform="rotate(14 75 20)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 775 B