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="expanded" class="menu-list" @click.stop>
|
||||
<!-- "练一练" 暂时隐藏,后续恢复时取消注释即可
|
||||
<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>
|
||||
</view>
|
||||
<view class="menu-info">
|
||||
@@ -12,6 +13,7 @@
|
||||
</view>
|
||||
<view class="menu-arrow">›</view>
|
||||
</view>
|
||||
-->
|
||||
<view class="menu-item" @click="goto('/pages/training/metronome')">
|
||||
<view class="menu-icon menu-icon--metro">
|
||||
<view class="metro-bar metro-bar-1" />
|
||||
@@ -35,7 +37,8 @@
|
||||
<view class="cross-bar bar-1" />
|
||||
<view class="cross-bar bar-2" />
|
||||
</view>
|
||||
<text v-else class="fab-text">练</text>
|
||||
<!-- 心跳波形 icon: 健康主题,SVG 折线 -->
|
||||
<view v-else class="fab-icon" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -125,13 +128,26 @@ $brand-light: #34d399;
|
||||
inset 0 6rpx 14rpx rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.fab-text {
|
||||
font-size: 48rpx;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
letter-spacing: 2rpx;
|
||||
text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.18);
|
||||
.fab-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
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>");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
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