style(entry): 主按钮换心跳波形 icon,暂时隐藏练一练菜单
主按钮: - "练" 单字改为 EKG 心跳波形 SVG icon - 内联 data-uri SVG, 60rpx, 白色 stroke 2.6, 圆角线 - 加 1.6s 心跳脉动动画,模拟两次收缩(20%/40%), 跟外圈呼吸光环错频,层次感更强 - 健康主题更直观,跟运动/节拍场景契合 菜单: - "练一练" 项暂时注释隐藏(后续恢复直接取消注释) - 当前展开只剩"节拍器"一个入口 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -2,8 +2,9 @@
|
|||||||
<view v-if="visible" class="dev-entry-wrap" :style="{ bottom: props.bottom + 'rpx' }">
|
<view v-if="visible" class="dev-entry-wrap" :style="{ bottom: props.bottom + 'rpx' }">
|
||||||
<!-- 展开后的菜单卡片(从下往上动画) -->
|
<!-- 展开后的菜单卡片(从下往上动画) -->
|
||||||
<view v-if="expanded" class="menu-list" @click.stop>
|
<view v-if="expanded" class="menu-list" @click.stop>
|
||||||
|
<!-- "练一练" 暂时隐藏,后续恢复时取消注释即可
|
||||||
<view class="menu-item" @click="goto('/pages/training/index')">
|
<view class="menu-item" @click="goto('/pages/training/index')">
|
||||||
<view class="menu-icon menu-icon--train">
|
<view class="menu-icon menu-icon--train">
|
||||||
<text class="menu-icon-text">💪</text>
|
<text class="menu-icon-text">💪</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="menu-info">
|
<view class="menu-info">
|
||||||
@@ -12,6 +13,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="menu-arrow">›</view>
|
<view class="menu-arrow">›</view>
|
||||||
</view>
|
</view>
|
||||||
|
-->
|
||||||
<view class="menu-item" @click="goto('/pages/training/metronome')">
|
<view class="menu-item" @click="goto('/pages/training/metronome')">
|
||||||
<view class="menu-icon menu-icon--metro">
|
<view class="menu-icon menu-icon--metro">
|
||||||
<view class="metro-bar metro-bar-1" />
|
<view class="metro-bar metro-bar-1" />
|
||||||
@@ -35,7 +37,8 @@
|
|||||||
<view class="cross-bar bar-1" />
|
<view class="cross-bar bar-1" />
|
||||||
<view class="cross-bar bar-2" />
|
<view class="cross-bar bar-2" />
|
||||||
</view>
|
</view>
|
||||||
<text v-else class="fab-text">练</text>
|
<!-- 心跳波形 icon: 健康主题,SVG 折线 -->
|
||||||
|
<view v-else class="fab-icon" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -125,13 +128,26 @@ $brand-light: #34d399;
|
|||||||
inset 0 6rpx 14rpx rgba(255, 255, 255, 0.12);
|
inset 0 6rpx 14rpx rgba(255, 255, 255, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab-text {
|
.fab-icon {
|
||||||
font-size: 48rpx;
|
width: 60rpx;
|
||||||
font-weight: 800;
|
height: 60rpx;
|
||||||
color: #fff;
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,12 7,12 9.5,7 12,17 14.5,9 16.5,12 22,12'/></svg>");
|
||||||
line-height: 1;
|
background-size: contain;
|
||||||
letter-spacing: 2rpx;
|
background-repeat: no-repeat;
|
||||||
text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.18);
|
background-position: center;
|
||||||
|
filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.22));
|
||||||
|
animation: fab-icon-beat 1.6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fab-icon-beat {
|
||||||
|
0%, 60%, 100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: scale(1.12);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user