lc/wx_pbzc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(timer): 循环训练组进度改为圆环分段弧 + 信息气泡三行合一

Browse Source 
- progress-ring 新增 sets/currentSet/resting/successColor 属性,
  圆环外圈绘制分段弧(已完成=主色/当前=呼吸光点/休息下一组=绿),单组模式零渲染
- timer 删除顶部 circuit-bar 进度面板,布局骨架三模式统一
- 呼吸环淡化(描边 0.55→0.20,柔光渐变强度减半)
- 目标卡与提示气泡合并为 info-bubble,状态文案(撑住/休息中/已暂停)并入气泡顶部
This commit is contained in:
cnliucheng
2026-08-12 09:39:41 +08:00
parent 0464eeaba6
commit 05c4763e49
18 changed files with 720 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/timer/timer.js
+13 -27
View File
@@ -37,13 +37,8 @@ Page({
workTotal: 0, // effective held seconds (excludes rest)
isResting: false,
phaseTip: '', // 阶段切换提示文本(如"最后一组！"/"休息 15 秒")
// 顶部循环进度面板:组进度胶囊点阵
circuitDots: [], // [1..sets],仅用于 wx:for 渲染,组数过多时不渲染
circuitShowDots: true, // 组数 > DOTS_MAX 时退化为线性进度条
circuitTotalWork: 0, // sets × holdPerSet,面板里作为"目标秒数"展示
dotsDone: 0, // 已完成组数
dotsActive: 0, // 正在进行的组序号(休息时为 0)
dotsNext: 0, // 休息时即将开始的组序号(工作时为 0)
// 组进度改由 progress-ring 外圈分段弧呈现,仅需传 sets/currentSet/resting,
// 页面不再维护点阵渲染数据(circuitDots/dotsDone 等已随旧面板一并删除)。
celebrationLevel: 'normal', // normal / first / milestone / record
celebrationMessage: '',
confettiPieces: [],
@@ -222,8 +217,8 @@ Page({
sets,
restPerSet: rest,
onTick: (t) => {
// 组进度点阵三态。休息阶段 CircuitTimer 的 setIndex 仍指向"刚做完
// 的那一组",所以 resting 时 setIndex 组算已完成、下一组标为 next。
// 组进度语义与旧点阵一致:休息时 setIndex 仍指向"刚做完的那一组",
// 组件按 resting 自行推导已完成/进行中/下一组三态(外圈分段弧)。
const resting = t.phase === 'resting'
this.setData({
currentSet: t.setIndex,
@@ -233,9 +228,6 @@ Page({
phaseElapsed: t.phaseElapsed,
workTotal: t.workTotal,
isResting: resting,
dotsDone: resting ? t.setIndex : Math.max(0, t.setIndex - 1),
dotsActive: resting ? 0 : t.setIndex,
dotsNext: resting ? t.setIndex + 1 : 0,
// Reuse the single-hold display fields so progress-ring / completion
// number keep working: the ring shows the CURRENT set's countdown.
remaining: t.phaseRemaining,
@@ -244,7 +236,9 @@ Page({
statusText: resting ? '休息中' : '撑住',
runningTip: resting ? '' : this.data.phaseTip,
tipType: 'phase',
tipIcon: this.data.icons.peopleFill
tipIcon: this.data.icons.peopleFill,
// 环内副标题:宏观进度(第几组)交给外圈分段弧,这里只报当前组位次。
ringSubText: `第 ${t.setIndex}/${t.sets} 组`
})
this._circuitCue(t)
},
@@ -252,13 +246,9 @@ Page({
onComplete: () => this._onCircuitComplete()
})
// 点阵超过 DOTS_MAX 个就挤成头发丝了,退化成一条线性进度条。
const DOTS_MAX = 15
const dots = []
if (sets <= DOTS_MAX) {
for (let i = 1; i <= sets; i++) dots.push(i)
}
// 组数上限 50(见 _int 的 clamp),环形外圈 360° 空间充裕,即使 50 段也
// 不至于挤成线(旧点阵的 DOTS_MAX=15 是受横向卡片宽度限制,环形无此问题),
// 因此分段弧不做数量降级,页面也无须维护点阵渲染数据。
const durText = this._durationText(hold)
this.setData({
isCircuitMode: true,
@@ -268,12 +258,6 @@ Page({
circuitHold: hold,
circuitRest: rest,
circuitSessions: this._circuitCfg.sessionsPerWeek,
circuitDots: dots,
circuitShowDots: sets <= DOTS_MAX,
circuitTotalWork: sets * hold,
dotsDone: 0,
dotsActive: 0,
dotsNext: 0,
currentSet: 0,
totalSets: sets,
phase: 'idle',
@@ -294,7 +278,9 @@ Page({
showCompletion: false,
goalLine: `每组 ${durText} · 共 ${sets} 组`,
ringTicks: Math.min(hold, 60),
ringSubText: `每组 ${durText}`,
// idle 时环内副标题承载配置摘要(组数 + 休息时长),运行时由 onTick
// 换成"第 X/Y 组"。休息时长为 0 时不展示"休息"段。
ringSubText: `共 ${sets} 组${rest > 0 ? ' · 休息 ' + rest + ' 秒' : ''}`,
statusText: '准备开始',
runningTip: '',
tipType: 'posture',
pages/timer/timer.wxml
+27 -51
View File
@@ -15,44 +15,9 @@
<text class="achievement-text">{{celebrationMessage}}</text>
</view>
<!-- 循环训练进度面板:组点阵 + 第 X/Y 组 + 阶段徽章 + 累计秒数。
层次分工:这里管「第几组」(宏观),中间的进度环管「本组还剩几秒」(微观)。 -->
<view
class="circuit-bar {{isResting ? 'is-rest' : ''}} {{status === 'paused' ? 'is-paused' : ''}}"
wx:if="{{isCircuitMode && status !== 'completed'}}"
>
<!-- 组进度点阵:已完成 / 进行中 / 下一组 三态 -->
<view class="circuit-dots" wx:if="{{circuitShowDots}}">
<view
wx:for="{{circuitDots}}"
wx:key="*this"
class="circuit-dot {{item <= dotsDone ? 'is-done' : ''}} {{item === dotsActive ? 'is-active' : ''}} {{item === dotsNext ? 'is-next' : ''}}"
></view>
</view>
<!-- 组数过多(>15)时退化为线性进度条,避免点阵挤成头发丝 -->
<view class="circuit-track" wx:else>
<view class="circuit-track-fill" style="width: {{dotsDone * 100 / totalSets}}%"></view>
</view>
<view class="circuit-meta">
<view class="circuit-count">
<text class="circuit-count-num">{{status === 'idle' ? totalSets : currentSet}}</text>
<text class="circuit-count-total" wx:if="{{status !== 'idle'}}">/{{totalSets}}</text>
<text class="circuit-count-unit">组</text>
</view>
<view class="circuit-phase circuit-phase--{{status === 'paused' ? 'pause' : (status === 'idle' ? 'idle' : (isResting ? 'rest' : 'work'))}}">
<view class="circuit-phase-dot"></view>
<text class="circuit-phase-text">{{status === 'paused' ? '已暂停' : (status === 'idle' ? '准备开始' : (isResting ? '休息中' : '撑住'))}}</text>
</view>
</view>
<text class="circuit-sub">
<block wx:if="{{status === 'idle'}}">每组 {{circuitHold}} 秒{{circuitRest > 0 ? ' · 休息 ' + circuitRest + ' 秒' : ''}}</block>
<block wx:else>已撑 {{workTotal}} 秒 · 目标 {{circuitTotalWork}} 秒</block>
</text>
</view>
<!-- 呼吸引导环 + 进度条 -->
<!-- 呼吸引导环 + 进度条。循环训练的组进度不再占一块独立面板,
而是由 progress-ring 在圆环外圈画一圈分段弧(见组件的 sets/currentSet/resting 属性),
保证单组/自由/循环三模式共用同一套页面骨架,切换零跳动。 -->
<view class="ring-wrapper">
<view class="breathe-ring breathe-ring-1 {{status === 'running' ? 'fast' : ''}}"
wx:if="{{status !== 'completed'}}"></view>
@@ -60,13 +25,16 @@
wx:if="{{status !== 'completed'}}"></view>
<view class="breathe-ring breathe-ring-3 {{status === 'running' ? 'fast' : ''}}"
wx:if="{{status !== 'completed'}}"></view>
<!-- 呼吸光环:进度环外侧一圈可见的描边辉光,随呼吸收放(idle 慢/running 快) -->
<view class="breath-aura {{status === 'running' ? 'fast' : ''}}"
wx:if="{{status !== 'completed'}}"></view>
<progress-ring
wx:if="{{status !== 'completed'}}"
duration="{{duration}}"
remaining="{{isCompleted ? 0 : remaining}}"
elapsed="{{elapsed}}"
size="{{360}}"
size="{{420}}"
ringWidth="{{22}}"
status="{{status}}"
primaryColor="{{theme.primary}}"
@@ -74,6 +42,9 @@
trackColor="{{isCircuitMode ? '#EEEEEE' : (elapsed >= duration ? '#00B578' : '#EEEEEE')}}"
ticks="{{ringTicks}}"
subText="{{ringSubText}}"
sets="{{totalSets}}"
currentSet="{{currentSet}}"
resting="{{isResting}}"
></progress-ring>
<!-- 完成庆祝粒子 -->
@@ -87,18 +58,23 @@
</view>
</view>
<!-- 状态文案(环下方) + 目标信息卡 + 运行提示 -->
<view class="timer-status status--{{status}}" wx:if="{{status !== 'completed'}}">{{statusText}}</view>
<view class="goal-card" wx:if="{{status !== 'completed'}}">
<image class="goal-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
<text class="goal-text">{{goalLine}}</text>
<text class="goal-arrow">›</text>
</view>
<view class="timer-tip timer-tip--{{tipType}}" wx:if="{{runningTip}}">
<image class="timer-tip-icon" src="{{tipIcon}}" mode="aspectFit"></image>
<text class="timer-tip-text">{{runningTip}}</text>
<!-- 信息气泡:状态 + 目标摘要 + 运行提示 三行合一(三模式公用)。
环下方原 statusText(撑住/休息中/已暂停)并入气泡顶部,圆环下只留一张卡。 -->
<view class="info-bubble" wx:if="{{status !== 'completed'}}">
<view class="info-line info-line--status info-line--{{status}} {{isResting ? 'info-line--rest' : ''}}">
<view class="info-status-dot"></view>
<text class="info-status-text">{{statusText}}</text>
</view>
<view class="info-divider"></view>
<view class="info-line info-line--goal">
<image class="info-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
<text class="info-text">{{goalLine}}</text>
</view>
<view class="info-divider" wx:if="{{runningTip}}"></view>
<view class="info-line info-line--tip info-line--{{tipType}}" wx:if="{{runningTip}}">
<image class="info-icon" src="{{tipIcon}}" mode="aspectFit"></image>
<text class="info-text">{{runningTip}}</text>
</view>
</view>
<!-- 控制按钮 -->
pages/timer/timer.wxss
+118 -309
View File
@@ -9,227 +9,14 @@
box-sizing: border-box;
}
/* ---- 循环训练进度面板 ----
注意:整块不设固定 height,靠 padding 撑开。真机大字体档下文字会被微信
放大,固定高度 + overflow 会把数字裁掉(项目里踩过这个坑)。 */
.circuit-bar {
/* 抬一层:呼吸光晕(.breathe-ring, z-index:0)在 DOM 里排在本面板之后,
不抬层会把橙色晕染盖到卡片上。 */
position: relative;
z-index: 1;
width: 620rpx;
max-width: 86%;
box-sizing: border-box;
padding: 26rpx 32rpx 22rpx;
margin-bottom: 12rpx;
background: var(--card-bg);
border: 1rpx solid rgba(var(--primary-rgb), 0.14);
border-radius: 28rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
transition: border-color 0.35s ease, box-shadow 0.35s ease;
animation: circuitBarIn 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
/* 休息态整块降温:边框转成 success 绿,和"撑住"的主色态形成对比 */
.circuit-bar.is-rest {
border-color: rgba(var(--success-rgb), 0.32);
box-shadow: 0 6rpx 20rpx rgba(var(--success-rgb), 0.10);
}
@keyframes circuitBarIn {
0% { opacity: 0; transform: translateY(-16rpx); }
100% { opacity: 1; transform: translateY(0); }
}
/* --- 组进度点阵 ---
整行铺满面板内宽,每段按组数严格等分(分段进度条式)。 */
.circuit-dots {
display: flex;
align-items: center;
width: 100%;
/* 锁住行高:当前组比其它段高 6rpx,不锁行高会在 idle→running 时整块跳一下 */
min-height: 18rpx;
gap: 8rpx;
margin-bottom: 22rpx;
}
/* flex:1 1 0 + min-width:0 → 每段等分剩余宽度,与内容无关。
不设 max-width:一旦封顶,组数少时点阵就只占左边一截(此前的问题)。
当前组不再靠"加宽"强调(那会破坏等分),改为增高+发光,宽度恒等分。 */
.circuit-dot {
flex: 1 1 0;
min-width: 0;
height: 12rpx;
border-radius: 6rpx;
background: var(--bg-soft);
transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.circuit-dot.is-done {
background: var(--primary);
opacity: 0.85;
}
/* 当前组:增高 + 渐变 + 发光呼吸,一眼锁定进度位置(宽度仍等分) */
.circuit-dot.is-active {
height: 18rpx;
border-radius: 9rpx;
opacity: 1;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
box-shadow: 0 0 14rpx rgba(var(--primary-rgb), 0.55);
animation: circuitDotPulse 1.5s ease-in-out infinite;
}
/* 休息时高亮"下一组",给用户一个即将开始的预告焦点 */
.circuit-dot.is-next {
height: 18rpx;
border-radius: 9rpx;
background: rgba(var(--success-rgb), 0.45);
animation: circuitDotPulse 1.8s ease-in-out infinite;
}
@keyframes circuitDotPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* 暂停时冻结所有呼吸动画,静止本身就是"已暂停"的信号 */
.circuit-bar.is-paused .circuit-dot {
animation: none;
}
/* --- 组数过多时的线性降级条 --- */
.circuit-track {
height: 12rpx;
border-radius: 6rpx;
background: var(--bg-soft);
overflow: hidden;
margin-bottom: 22rpx;
}
.circuit-track-fill {
height: 100%;
border-radius: 6rpx;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
transition: width 0.4s ease;
}
/* --- 主信息行:大数字 + 阶段徽章 --- */
.circuit-meta {
display: flex;
align-items: center;
justify-content: space-between;
}
.circuit-count {
display: flex;
align-items: baseline;
}
.circuit-count-num {
font-size: 56rpx;
font-weight: 800;
color: var(--text);
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -1rpx;
}
.circuit-count-total {
font-size: 32rpx;
font-weight: 600;
color: var(--text-secondary);
line-height: 1;
margin-left: 2rpx;
}
.circuit-count-unit {
font-size: 26rpx;
color: var(--text-secondary);
margin-left: 8rpx;
}
/* --- 阶段徽章 --- */
.circuit-phase {
display: flex;
align-items: center;
gap: 10rpx;
padding: 12rpx 24rpx;
border-radius: 30rpx;
transition: background 0.3s ease;
}
/* 状态指示灯用 CSS 画而非 icon:项目里的 SVG 图标颜色烤死在 data URI 里,
CSS 改不动;这里需要跟随状态换色,纯 CSS 圆点是唯一干净的做法。 */
.circuit-phase-dot {
width: 14rpx;
height: 14rpx;
border-radius: 50%;
flex-shrink: 0;
}
.circuit-phase-text {
font-size: 26rpx;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
/* 工作态:主色渐变实心 + 白灯白字 */
.circuit-phase--work {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
box-shadow: 0 4rpx 14rpx rgba(var(--primary-rgb), 0.32);
}
.circuit-phase--work .circuit-phase-dot {
background: #FFFFFF;
animation: phaseDotBlink 1.2s ease-in-out infinite;
}
.circuit-phase--work .circuit-phase-text { color: #FFFFFF; }
/* 休息态:绿色淡底,视觉降温 */
.circuit-phase--rest {
background: rgba(var(--success-rgb), 0.14);
}
.circuit-phase--rest .circuit-phase-dot {
background: var(--success);
animation: phaseDotBlink 1.8s ease-in-out infinite;
}
.circuit-phase--rest .circuit-phase-text { color: var(--success); }
/* 待机态 / 暂停态:中性灰,不抢视觉 */
.circuit-phase--idle,
.circuit-phase--pause {
background: var(--bg-soft);
}
.circuit-phase--idle .circuit-phase-dot,
.circuit-phase--pause .circuit-phase-dot {
background: var(--text-secondary);
}
.circuit-phase--idle .circuit-phase-text,
.circuit-phase--pause .circuit-phase-text {
color: var(--text-secondary);
}
@keyframes phaseDotBlink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* --- 副信息行 --- */
.circuit-sub {
display: block;
margin-top: 14rpx;
font-size: 24rpx;
color: var(--text-secondary);
line-height: 1.3;
}
/* ---- ring wrapper ---- */
.ring-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* 圆环与下方(状态词/目标卡/提示)整组拉开间距,按钮靠 margin-top:auto 贴底不受影响 */
margin-bottom: 44rpx;
}
/* breathing guide rings — soft radial glows instead of hard outline circles,
@@ -237,21 +24,53 @@
.breathe-ring {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--primary-rgb), 0.10) 0%, rgba(var(--primary-rgb), 0) 65%);
background: radial-gradient(circle, rgba(var(--primary-rgb), 0.13) 0%, rgba(var(--primary-rgb), 0) 68%);
animation: breathePulse 3.5s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.breathe-ring-1 { width: 520rpx; height: 520rpx; animation-delay: 0s; }
.breathe-ring-2 { width: 440rpx; height: 440rpx; animation-delay: 0.5s; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.14) 0%, rgba(var(--primary-rgb), 0) 65%); }
.breathe-ring-3 { width: 380rpx; height: 380rpx; animation-delay: 1s; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.18) 0%, rgba(var(--primary-rgb), 0) 65%); }
.breathe-ring-1 { width: 620rpx; height: 620rpx; animation-delay: 0s; }
.breathe-ring-2 { width: 540rpx; height: 540rpx; animation-delay: 0.5s; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.17) 0%, rgba(var(--primary-rgb), 0) 66%); }
.breathe-ring-3 { width: 460rpx; height: 460rpx; animation-delay: 1s; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.22) 0%, rgba(var(--primary-rgb), 0) 63%); }
.breathe-ring.fast { animation: breathePulseFast 1.4s ease-in-out infinite; }
.breathe-ring.fast.breathe-ring-1 { animation-delay: 0s; }
.breathe-ring.fast.breathe-ring-2 { animation-delay: 0.25s; }
.breathe-ring.fast.breathe-ring-3 { animation-delay: 0.5s; }
/* ---- 呼吸光环:进度环外侧一圈淡化的描边辉光 ---- */
.breath-aura {
position: absolute;
/* 直径略大于进度环(420),落在刻度/进度弧外侧,不遮挡中间时钟 */
width: 488rpx;
height: 488rpx;
border-radius: 50%;
/* 细线 + 低透明度:只是隐约的呼吸边界,不跟倒计时环抢视觉 */
border: 4rpx solid rgba(var(--primary-rgb), 0.20);
box-shadow:
0 0 30rpx rgba(var(--primary-rgb), 0.22),
inset 0 0 20rpx rgba(var(--primary-rgb), 0.10);
animation: auraBreathe 4s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.breath-aura.fast {
animation: auraBreatheFast 2.4s ease-in-out infinite;
}
/* 柔和呼吸:幅度小(scale 0.96↔1.04)、透明度压低(0.3↔0.5),留出呼吸感但始终很淡 */
@keyframes auraBreathe {
0%, 100% { transform: scale(0.96); opacity: 0.30; }
50% { transform: scale(1.04); opacity: 0.50; }
}
@keyframes auraBreatheFast {
0%, 100% { transform: scale(0.97); opacity: 0.34; }
50% { transform: scale(1.05); opacity: 0.55; }
}
/* celebration burst */
.celebrate-burst {
position: absolute;
@@ -281,115 +100,105 @@
100% { opacity: 0; transform: translate(0, -80rpx) scale(0.4); }
}
/* ---- 状态文案(环下方) ---- */
.timer-status {
margin-top: 40rpx;
font-size: 36rpx;
font-weight: 700;
color: var(--text);
line-height: 1.2;
text-align: center;
/* ---- 信息气泡·状态行(原环下方 statusText 并入气泡顶部) ----
状态色:running=主色 / 休息中=绿 / idle、paused=中性灰。
resting 时 status 字段仍是 running,额外用 .info-line--rest 覆盖为绿。
小圆点用 currentColor 跟随状态色,纯 CSS 画(项目 SVG 图标色烤死改不动)。 */
.info-line--status {
gap: 12rpx;
}
.timer-status.status--running { color: var(--primary); }
.timer-status.status--paused { color: var(--text-secondary); }
.info-status-dot {
width: 14rpx;
height: 14rpx;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* ---- 目标信息卡 ---- */
.goal-card {
.info-status-text {
font-size: 32rpx;
font-weight: 700;
line-height: 1.3;
color: var(--text);
}
.info-line--status.status--running { color: var(--primary); }
.info-line--status.status--running .info-status-dot {
animation: statusDotBlink 1.6s ease-in-out infinite;
}
.info-line--status.info-line--rest { color: var(--success); }
.info-line--status.info-line--rest .info-status-dot {
animation: statusDotBlink 1.8s ease-in-out infinite;
}
.info-line--status.status--paused,
.info-line--status.status--idle { color: var(--text-secondary); }
/* 暂停时冻结呼吸,静止本身就是"已暂停"的信号 */
.info-line--status.status--paused .info-status-dot { animation: none; }
@keyframes statusDotBlink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.75); }
}
/* ---- 信息气泡:状态 + 目标摘要 + 运行提示 合并为一张卡(三模式公用) ----
三行结构:上=状态(最醒目,状态色) / 中=目标常驻(小字次级) / 下=动态提示。
休息/暂停/待机时提示行为空,分隔线和提示行整体消失,气泡自动收缩。 */
.info-bubble {
display: flex;
align-items: center;
flex-direction: column;
box-sizing: border-box;
width: 620rpx;
max-width: 86%;
box-sizing: border-box;
margin-top: 28rpx;
/* 承接原 timer-status 的 40rpx 间距,圆环与卡片保持呼吸感 */
margin-top: 40rpx;
padding: 24rpx 28rpx;
background: var(--card-bg);
border: 1rpx solid rgba(var(--primary-rgb), 0.12);
border-radius: 24rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
background: rgba(var(--primary-rgb), 0.08);
border-radius: 26rpx;
}
.goal-icon {
width: 40rpx;
height: 40rpx;
.info-line {
display: flex;
align-items: center;
}
.info-icon {
width: 32rpx;
height: 32rpx;
flex-shrink: 0;
margin-right: 16rpx;
margin-right: 12rpx;
}
.goal-text {
.info-text {
flex: 1;
min-width: 0;
font-size: 28rpx;
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.goal-arrow {
font-size: 40rpx;
color: var(--text-secondary);
line-height: 1;
margin-left: 8rpx;
}
/* ---- 运行提示(气泡卡片:姿态 / 阶段 / 目标达成) ---- */
.timer-tip {
position: relative;
display: inline-flex;
align-items: center;
gap: 14rpx;
margin-top: 18rpx;
max-width: 100%;
padding: 20rpx 32rpx;
background: #fff;
border-left: 8rpx solid var(--primary);
border-radius: 20rpx;
box-shadow: 0 8rpx 24rpx rgba(var(--primary-rgb), 0.14);
animation: tipPulse 2.4s ease-in-out infinite;
}
/* 小三角指向圆环 */
.timer-tip::before {
content: '';
position: absolute;
top: -16rpx;
left: 50%;
transform: translateX(-50%);
border-left: 16rpx solid transparent;
border-right: 16rpx solid transparent;
border-bottom: 16rpx solid #fff;
}
.timer-tip--done {
border-left-color: var(--success);
}
.timer-tip-icon {
width: 40rpx;
height: 40rpx;
flex-shrink: 0;
}
.timer-tip-text {
font-size: 30rpx;
font-weight: 600;
color: var(--text);
line-height: 1.4;
}
.timer-tip--done .timer-tip-text {
color: var(--success);
/* 目标行:静态摘要,主色小字 */
.info-line--goal .info-text {
font-size: 26rpx;
font-weight: 500;
color: var(--primary);
}
@keyframes tipPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 8rpx 24rpx rgba(var(--primary-rgb), 0.14);
}
50% {
transform: scale(1.03);
box-shadow: 0 12rpx 32rpx rgba(var(--primary-rgb), 0.22);
}
/* 分隔线:提示行出现时才渲染 */
.info-divider {
height: 1rpx;
background: rgba(var(--primary-rgb), 0.14);
margin: 14rpx 0;
}
/* 提示行:动态信息,比目标行大一号更突出 */
.info-line--tip .info-text {
font-size: 30rpx;
font-weight: 600;
color: var(--text);
}
.info-line--done .info-text {
color: var(--success);
}
/* ---- controls ---- */