116 lines
4.0 KiB
Plaintext
116 lines
4.0 KiB
Plaintext
<view class="container timer-page page-enter" style="{{themeStyle}}">
|
|
|
|
<!-- 全屏彩带完成庆祝 -->
|
|
<view class="confetti" wx:if="{{isCompleted}}">
|
|
<view class="confetti-piece c1"></view>
|
|
<view class="confetti-piece c2"></view>
|
|
<view class="confetti-piece c3"></view>
|
|
<view class="confetti-piece c4"></view>
|
|
<view class="confetti-piece c5"></view>
|
|
<view class="confetti-piece c6"></view>
|
|
<view class="confetti-piece c7"></view>
|
|
<view class="confetti-piece c8"></view>
|
|
<view class="confetti-piece c9"></view>
|
|
<view class="confetti-piece c10"></view>
|
|
</view>
|
|
|
|
<!-- 呼吸引导环 + 进度条 -->
|
|
<view class="ring-wrapper">
|
|
<view class="breathe-ring breathe-ring-1 {{status === 'running' ? 'fast' : ''}}"
|
|
wx:if="{{status !== 'completed'}}"></view>
|
|
<view class="breathe-ring breathe-ring-2 {{status === 'running' ? 'fast' : ''}}"
|
|
wx:if="{{status !== 'completed'}}"></view>
|
|
<view class="breathe-ring breathe-ring-3 {{status === 'running' ? 'fast' : ''}}"
|
|
wx:if="{{status !== 'completed'}}"></view>
|
|
|
|
<progress-ring
|
|
duration="{{duration}}"
|
|
remaining="{{isCompleted ? 0 : remaining}}"
|
|
size="{{360}}"
|
|
ringWidth="{{16}}"
|
|
status="{{status}}"
|
|
primaryColor="{{theme.primary}}"
|
|
primaryLightColor="{{theme.primaryLight}}"
|
|
></progress-ring>
|
|
|
|
<!-- 完成庆祝粒子 -->
|
|
<view class="celebrate-burst" wx:if="{{isCompleted}}">
|
|
<view class="spark s1">✨</view>
|
|
<view class="spark s2">⭐</view>
|
|
<view class="spark s3">💫</view>
|
|
<view class="spark s4">🌟</view>
|
|
<view class="spark s5">✨</view>
|
|
<view class="spark s6">💪</view>
|
|
</view>
|
|
|
|
<view class="overtime-badge" wx:if="{{isCompleted && overtime > 0}}">
|
|
<image class="overtime-icon" src="{{icons.hotFill}}" mode="aspectFit"></image>
|
|
<text>+{{overtime}}s</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 状态提示 -->
|
|
<view class="hint-section">
|
|
<view class="hint-row" wx:if="{{status === 'idle'}}">
|
|
<image class="hint-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
|
|
<text class="hint-text">
|
|
<block wx:if="{{isFreeMode}}">自由训练 · 目标 {{duration}} 秒</block>
|
|
<block wx:else>今日目标 {{duration}} 秒 · 第 {{planDay}} 天</block>
|
|
</text>
|
|
</view>
|
|
<view class="hint-row" wx:elif="{{status === 'running'}}">
|
|
<image class="hint-icon running-pulse" src="{{icons.likeFill}}" mode="aspectFit"></image>
|
|
<text class="hint-text running">保持姿势，核心收紧!</text>
|
|
</view>
|
|
<view class="hint-row" wx:elif="{{status === 'paused'}}">
|
|
<image class="hint-icon" src="{{icons.notificationForbidFill}}" mode="aspectFit"></image>
|
|
<text class="hint-text paused">已暂停</text>
|
|
</view>
|
|
<view class="hint-row completed-hint" wx:elif="{{status === 'completed'}}">
|
|
<image class="hint-icon completed-bounce" src="{{icons.roundCheckFill}}" mode="aspectFit"></image>
|
|
<text class="hint-text completed">目标完成! 继续坚持!</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 控制按钮 -->
|
|
<view class="controls">
|
|
<ui-btn
|
|
wx:if="{{!isRunning && !isPaused}}"
|
|
variant="primary"
|
|
size="xl"
|
|
block
|
|
text="开始"
|
|
icon-src="{{icons.playFill}}"
|
|
bindtap="onStart"
|
|
></ui-btn>
|
|
|
|
<view class="ctrl-row" wx:if="{{isRunning || isPaused}}">
|
|
<ui-btn
|
|
wx:if="{{!isPaused}}"
|
|
variant="ghost"
|
|
size="xl"
|
|
text="暂停"
|
|
icon-src="{{icons.notificationForbidFill}}"
|
|
custom-style="margin-right: 28rpx;"
|
|
bindtap="onPause"
|
|
></ui-btn>
|
|
<ui-btn
|
|
wx:if="{{isPaused}}"
|
|
variant="primary"
|
|
size="xl"
|
|
text="继续"
|
|
icon-src="{{icons.playFill}}"
|
|
custom-style="margin-right: 28rpx;"
|
|
bindtap="onStart"
|
|
></ui-btn>
|
|
<ui-btn
|
|
variant="outline"
|
|
size="xl"
|
|
text="结束"
|
|
icon-src="{{icons.stop}}"
|
|
bindtap="onStop"
|
|
></ui-btn>
|
|
</view>
|
|
</view>
|
|
</view>
|