1

package1/planet/adventure.vue

@@ -41,8 +41,10 @@
 			<view class="game-card">
 				<view class="section-head">
 					<text>今日关卡</text>
+					<view class="timer-pill" :class="timerClass">
 						<text>{{cleared ? '已通关' : timerText}}</text>
 					</view>
+				</view>
 				<view class="start-strip" v-if="!playing && !cleared" @tap="startLevel">
 					<text>开始助推</text>
 					<text>先点这里，再开始消除卡牌</text>
@@ -54,7 +56,20 @@
 
 				<view class="tips">
 					<text>规则：点选未被压住的卡牌，底部槽内3张相同自动消除，宇宙垃圾2张会触发清理。</text>
-					<text>陷阱难度 · 剩余 {{remainingCount}} 张 · 当前可点 {{availableCount}} 张 · 倒计时 {{timeLeft}} 秒 · {{riskText}}</text>
+					<text>陷阱难度 · 剩余 {{remainingCount}} 张 · 当前可点 {{availableCount}} 张 · {{riskText}}</text>
+				</view>
+
+				<view class="countdown-card" :class="timerClass">
+					<view class="countdown-main">
+						<text>⏱</text>
+						<view>
+							<text>{{timeLeft}}秒</text>
+							<text>{{timerHint}}</text>
+						</view>
+					</view>
+					<view class="countdown-track">
+						<view class="countdown-progress" :style="{width: timerPercent + '%'}"></view>
+					</view>
 				</view>
 
 				<view class="debug-panel">
@@ -209,7 +224,22 @@
 				return cells
 			},
 			timerText() {
-				return this.playing ? `剩余 ${this.timeLeft} 秒` : '限时150秒'
+				return this.playing ? `${this.timeLeft}s` : '150s限时'
+			},
+			timerPercent() {
+				return Math.max(0, Math.min(100, Math.round(this.timeLeft * 100 / this.timeLimit)))
+			},
+			timerClass() {
+				if (!this.playing) return ''
+				if (this.timeLeft <= 30) return 'danger'
+				if (this.timeLeft <= 60) return 'warning'
+				return ''
+			},
+			timerHint() {
+				if (!this.playing) return '开始后进入倒计时'
+				if (this.timeLeft <= 30) return '最后冲刺，槽位别满'
+				if (this.timeLeft <= 60) return '时间紧张，加快决策'
+				return '150秒内完成助推'
 			},
 			riskText() {
 				if (this.slots.length >= this.slotLimit - 1) return '危险：差1格就满'
@@ -843,6 +873,20 @@
 	.hero-title { margin-top: 10rpx; font-size: 42rpx; font-weight: 900; }
 	.hero-sub, .tips { margin-top: 16rpx; color: #6B817D; font-size: 24rpx; line-height: 1.55; }
 	.tips { display: flex; flex-direction: column; gap: 6rpx; }
+	.countdown-card { margin-top: 16rpx; padding: 18rpx 20rpx; border-radius: 28rpx; background: linear-gradient(135deg, rgba(53,214,166,0.14), rgba(79,183,255,0.16)); border: 2rpx solid rgba(53,214,166,0.22); }
+	.countdown-card.warning { background: linear-gradient(135deg, rgba(255,184,77,0.18), rgba(255,244,215,0.9)); border-color: rgba(255,184,77,0.42); }
+	.countdown-card.danger { background: linear-gradient(135deg, rgba(255,76,76,0.18), rgba(255,232,232,0.96)); border-color: rgba(255,76,76,0.42); }
+	.countdown-main { display: flex; align-items: center; gap: 16rpx; }
+	.countdown-main > text { width: 58rpx; height: 58rpx; line-height: 58rpx; border-radius: 50%; text-align: center; background: #fff; font-size: 32rpx; box-shadow: 0 8rpx 18rpx rgba(18,52,47,0.08); }
+	.countdown-main view { display: flex; flex-direction: column; }
+	.countdown-main view text:first-child { color: #12342F; font-size: 42rpx; font-weight: 900; line-height: 1; }
+	.countdown-main view text:last-child { margin-top: 8rpx; color: #6B817D; font-size: 22rpx; }
+	.countdown-card.warning .countdown-main view text:first-child { color: #D88400; }
+	.countdown-card.danger .countdown-main view text:first-child { color: #F04444; }
+	.countdown-track { margin-top: 16rpx; height: 14rpx; border-radius: 999rpx; background: rgba(255,255,255,0.72); overflow: hidden; }
+	.countdown-progress { height: 100%; border-radius: 999rpx; background: linear-gradient(90deg, #35D6A6, #4FB7FF); transition: width .25s linear; }
+	.countdown-card.warning .countdown-progress { background: linear-gradient(90deg, #FFB84D, #FF8A3D); }
+	.countdown-card.danger .countdown-progress { background: linear-gradient(90deg, #FF6B6B, #F04444); }
 	.debug-panel { margin-top: 16rpx; display: flex; gap: 10rpx; }
 	.debug-panel view { flex: 1; border-radius: 20rpx; padding: 12rpx 6rpx; background: rgba(255,255,255,0.76); text-align: center; border: 1rpx solid rgba(53,214,166,0.16); }
 	.debug-panel text:first-child { display: block; color: #22B889; font-size: 28rpx; font-weight: 900; }
@@ -855,6 +899,9 @@
 	.rocket-progress { height: 100%; border-radius: 999rpx; background: linear-gradient(90deg, #35D6A6, #4FB7FF, #FFB84D); }
 	.section-head { display: flex; justify-content: space-between; align-items: center; font-size: 24rpx; color: #6B817D; }
 	.section-head text:first-child { color: #12342F; font-size: 31rpx; font-weight: 900; }
+	.timer-pill { min-width: 126rpx; height: 48rpx; padding: 0 18rpx; border-radius: 999rpx; background: #EFFFF8; color: #20B486; display: flex; align-items: center; justify-content: center; font-size: 26rpx; font-weight: 900; box-shadow: 0 8rpx 20rpx rgba(32,180,134,0.12); }
+	.timer-pill.warning { background: #FFF4D7; color: #D88400; box-shadow: 0 8rpx 22rpx rgba(216,132,0,0.16); }
+	.timer-pill.danger { background: #FFE8E8; color: #F04444; box-shadow: 0 8rpx 24rpx rgba(240,68,68,0.2); }
 	.start-strip { margin-top: 20rpx; padding: 20rpx 24rpx; border-radius: 28rpx; background: linear-gradient(135deg, #35D6A6, #4FB7FF); color: #fff; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 14rpx 34rpx rgba(53,214,166,0.2); }
 	.start-strip text:first-child { font-size: 30rpx; font-weight: 900; }
 	.start-strip text:last-child { font-size: 22rpx; opacity: .88; }