ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
long
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
Download Patch File Download Diff File Expand all files Collapse all files
TUICallKit-Vue3/pages/training/metronome.vue
+13 -70
View File
@@ -29,25 +29,19 @@
<view class="walker" :class="{ playing: isPlaying }">
<view class="foot foot-left">
<view class="footprint">
<view class="heel" />
<view class="toe toe-1" />
<view class="toe toe-2" />
<view class="toe toe-3" />
<view class="toe toe-4" />
<view class="toe toe-5" />
</view>
<image
class="footprint"
src="/static/training/footprint.svg"
mode="aspectFit"
/>
<view class="shadow" />
</view>
<view class="foot foot-right">
<view class="footprint">
<view class="heel" />
<view class="toe toe-1" />
<view class="toe toe-2" />
<view class="toe toe-3" />
<view class="toe toe-4" />
<view class="toe toe-5" />
</view>
<image
class="footprint"
src="/static/training/footprint.svg"
mode="aspectFit"
/>
<view class="shadow" />
</view>
<view class="ground" />
@@ -440,72 +434,21 @@ $radius-btn: 20rpx;
}
/* ============================================================
* 拟真脚印(单色,内敛)
* 拟真脚印(SVG 矢量,单笔成型)
* ============================================================ */
.foot {
position: absolute;
bottom: 18rpx;
width: 100rpx;
height: 130rpx;
height: 140rpx;
.footprint {
position: relative;
display: block;
width: 100%;
height: 100%;
transform-origin: bottom center;
}
/* 脚跟+脚掌一体椭圆,不规则更像真实脚印 */
.heel {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 72rpx;
height: 86rpx;
background: rgba(241, 245, 249, 0.92);
border-radius: 48% 48% 50% 50% / 56% 56% 44% 44%;
}
/* 5 个脚趾 - 紧贴脚掌,大小递减,呈弧形排布 */
.toe {
position: absolute;
background: rgba(241, 245, 249, 0.92);
border-radius: 50%;
}
.toe-1 {
/* 大脚趾,内侧最大 */
width: 22rpx;
height: 22rpx;
bottom: 86rpx;
left: 16rpx;
}
.toe-2 {
width: 18rpx;
height: 18rpx;
bottom: 92rpx;
left: 36rpx;
}
.toe-3 {
width: 16rpx;
height: 16rpx;
bottom: 92rpx;
left: 52rpx;
}
.toe-4 {
width: 14rpx;
height: 14rpx;
bottom: 88rpx;
left: 66rpx;
}
.toe-5 {
/* 小脚趾,外侧最小 */
width: 12rpx;
height: 12rpx;
bottom: 82rpx;
left: 78rpx;
}
.shadow {
position: absolute;
bottom: -6rpx;