96 lines
3.1 KiB
Plaintext
96 lines
3.1 KiB
Plaintext
<view class="container timer-page" style="{{themeStyle}}">
|
|
|
|
<!-- 呼吸引导环 + 进度条 -->
|
|
<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}}">
|
|
<text class="overtime-icon">🔥</text>
|
|
<text>+{{overtime}}s</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 状态提示 -->
|
|
<view class="hint-section">
|
|
<view class="hint-row" wx:if="{{status === 'idle'}}">
|
|
<text class="hint-emoji">🧘</text>
|
|
<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'}}">
|
|
<text class="hint-emoji running-pulse">💪</text>
|
|
<text class="hint-text running">保持姿势，核心收紧!</text>
|
|
</view>
|
|
<view class="hint-row" wx:elif="{{status === 'paused'}}">
|
|
<text class="hint-emoji">⏸</text>
|
|
<text class="hint-text paused">已暂停</text>
|
|
</view>
|
|
<view class="hint-row completed-hint" wx:elif="{{status === 'completed'}}">
|
|
<text class="hint-emoji completed-bounce">🎉</text>
|
|
<text class="hint-text completed">目标完成! 继续坚持!</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 控制按钮 -->
|
|
<view class="controls">
|
|
<button
|
|
wx:if="{{!isRunning && !isPaused}}"
|
|
class="ctrl-btn start-btn"
|
|
bindtap="onStart"
|
|
>
|
|
<text class="ctrl-icon">▶</text>
|
|
<text>开始</text>
|
|
</button>
|
|
|
|
<view class="ctrl-row" wx:if="{{isRunning || isPaused}}">
|
|
<button
|
|
wx:if="{{!isPaused}}"
|
|
class="ctrl-btn pause-btn"
|
|
bindtap="onPause"
|
|
>
|
|
<text class="ctrl-icon">⏸</text>
|
|
<text>暂停</text>
|
|
</button>
|
|
<button
|
|
wx:if="{{isPaused}}"
|
|
class="ctrl-btn resume-btn"
|
|
bindtap="onStart"
|
|
>
|
|
<text class="ctrl-icon">▶</text>
|
|
<text>继续</text>
|
|
</button>
|
|
<button class="ctrl-btn stop-btn" bindtap="onStop">
|
|
<text class="ctrl-icon">⏹</text>
|
|
<text>结束</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|