From 49a5dd689d6fd5c063decc3b96795f9629b1dd53 Mon Sep 17 00:00:00 2001 From: wangfukang <15630117759@163.com> Date: Tue, 2 Jun 2026 15:59:54 +0800 Subject: [PATCH] 1 --- package1/planet/adventure.vue | 53 +++++++++++++++++++++++++++++++++-- 1 file changed, 50 insertions(+), 3 deletions(-) diff --git a/package1/planet/adventure.vue b/package1/planet/adventure.vue index 9eb3f9a..b21899a 100644 --- a/package1/planet/adventure.vue +++ b/package1/planet/adventure.vue @@ -41,7 +41,9 @@ 今日关卡 - {{cleared ? '已通关' : timerText}} + + {{cleared ? '已通关' : timerText}} + 开始助推 @@ -54,7 +56,20 @@ 规则：点选未被压住的卡牌，底部槽内3张相同自动消除，宇宙垃圾2张会触发清理。 - 陷阱难度 · 剩余 {{remainingCount}} 张 · 当前可点 {{availableCount}} 张 · 倒计时 {{timeLeft}} 秒 · {{riskText}} + 陷阱难度 · 剩余 {{remainingCount}} 张 · 当前可点 {{availableCount}} 张 · {{riskText}} + + + + + ⏱ + + {{timeLeft}}秒 + {{timerHint}} + + + + + @@ -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; }