From 8d635bb7ed85eb476cc6a20f29327577477e919b Mon Sep 17 00:00:00 2001
From: long <452591453@qq.com>
Date: Thu, 28 May 2026 15:10:06 +0800
Subject: [PATCH 1/2] update
---
.../pages/components/grip-ring-canvas.vue | 98 +--
TUICallKit-Vue3/training/pages/grip-ring.vue | 802 ++++++++++++++----
2 files changed, 680 insertions(+), 220 deletions(-)
diff --git a/TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue b/TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue
index a6361748..5e0f040b 100644
--- a/TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue
+++ b/TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue
@@ -23,7 +23,7 @@
- 点击开始
+ {{ hintText || '点击开始' }}
@@ -42,9 +42,12 @@ import CrushCanvas from './crush-canvas.vue'
interface Props {
bpm: number
isPlaying: boolean
+ hintText?: string
}
-const props = defineProps()
+const props = withDefaults(defineProps(), {
+ hintText: '点击开始',
+})
const emit = defineEmits<{
togglePlay: []
@@ -78,25 +81,24 @@ defineExpose({
justify-content: center;
position: relative;
overflow: hidden;
- /* 与页面背景一致,无可见边界 */
- background: #f8fafc;
+ background: linear-gradient(180deg, #f0fdfa 0%, #f8fafc 55%, #f1f5f9 100%);
}
-/* 环境氛围 - 中心大放射光晕,营造空间感 */
+/* 环境氛围 - 中心放射光晕 */
.ambient-glow {
position: absolute;
- width: 1400rpx;
- height: 1400rpx;
+ width: 1200rpx;
+ height: 1200rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(circle,
- rgba(255, 255, 255, 1) 0%,
- rgba(241, 245, 249, 0.6) 25%,
- rgba(226, 232, 240, 0.3) 50%,
- transparent 75%);
+ rgba(204, 251, 241, 0.9) 0%,
+ rgba(240, 253, 250, 0.5) 30%,
+ rgba(241, 245, 249, 0.2) 55%,
+ transparent 72%);
pointer-events: none;
}
@@ -105,8 +107,8 @@ defineExpose({
* ============================================================ */
.ring-container {
position: relative;
- width: 640rpx;
- height: 640rpx;
+ width: 560rpx;
+ height: 560rpx;
display: flex;
align-items: center;
justify-content: center;
@@ -117,13 +119,13 @@ defineExpose({
/* 外发光 - 只在播放时显示(节省 GPU) */
.ring-aura {
position: absolute;
- width: 700rpx;
- height: 700rpx;
+ width: 620rpx;
+ height: 620rpx;
border-radius: 50%;
background: radial-gradient(circle,
- rgba(244, 114, 182, 0.45) 0%,
- rgba(244, 114, 182, 0.15) 35%,
- rgba(244, 114, 182, 0) 70%);
+ rgba(20, 184, 166, 0.4) 0%,
+ rgba(45, 212, 191, 0.15) 35%,
+ rgba(20, 184, 166, 0) 70%);
opacity: 0;
transition: opacity 0.3s ease;
will-change: transform, opacity;
@@ -150,8 +152,8 @@ defineExpose({
* ============================================================ */
.grip-ring {
position: relative;
- width: 520rpx;
- height: 520rpx;
+ width: 460rpx;
+ height: 460rpx;
display: flex;
align-items: center;
justify-content: center;
@@ -163,28 +165,28 @@ defineExpose({
transform: scale(0.96);
}
-/* 外圈 - 粉色渐变(精致质感) */
+/* 外圈 - 青绿渐变(与页面品牌色一致) */
.ring-outer-circle {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg,
- #fda4af 0%,
- #f472b6 50%,
- #ec4899 100%);
+ #5eead4 0%,
+ #2dd4bf 45%,
+ #14b8a6 100%);
box-shadow:
- 0 24rpx 64rpx rgba(236, 72, 153, 0.4),
- 0 12rpx 32rpx rgba(244, 114, 182, 0.3),
- inset 0 -20rpx 40rpx rgba(190, 24, 93, 0.35),
- inset 0 20rpx 40rpx rgba(255, 255, 255, 0.5);
+ 0 20rpx 56rpx rgba(20, 184, 166, 0.35),
+ 0 10rpx 28rpx rgba(45, 212, 191, 0.25),
+ inset 0 -18rpx 36rpx rgba(15, 118, 110, 0.3),
+ inset 0 18rpx 36rpx rgba(255, 255, 255, 0.45);
}
/* 顶部高光 - 模拟材质感 */
.ring-highlight {
position: absolute;
- width: 420rpx;
- height: 120rpx;
+ width: 360rpx;
+ height: 100rpx;
top: 40rpx;
border-radius: 50%;
background: radial-gradient(ellipse,
@@ -196,13 +198,13 @@ defineExpose({
/* 内圈中空 */
.ring-inner-circle {
position: absolute;
- width: 280rpx;
- height: 280rpx;
+ width: 250rpx;
+ height: 250rpx;
border-radius: 50%;
- background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+ background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
box-shadow:
- inset 0 8rpx 20rpx rgba(190, 24, 93, 0.3),
- inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.8);
+ inset 0 8rpx 20rpx rgba(15, 118, 110, 0.25),
+ inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.85);
}
/* 播放时的挤压动画(只影响 transform,GPU 加速) */
@@ -245,15 +247,15 @@ defineExpose({
}
.hint-icon {
- width: 108rpx;
- height: 108rpx;
+ width: 96rpx;
+ height: 96rpx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.98);
border-radius: 50%;
box-shadow:
- 0 12rpx 32rpx rgba(236, 72, 153, 0.35),
+ 0 12rpx 32rpx rgba(20, 184, 166, 0.28),
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.9);
animation: hint-bounce 2s ease-in-out infinite;
will-change: transform;
@@ -262,10 +264,10 @@ defineExpose({
.play-triangle {
width: 0;
height: 0;
- border-left: 36rpx solid #ec4899;
- border-top: 24rpx solid transparent;
- border-bottom: 24rpx solid transparent;
- margin-left: 10rpx;
+ border-left: 32rpx solid #0f766e;
+ border-top: 22rpx solid transparent;
+ border-bottom: 22rpx solid transparent;
+ margin-left: 8rpx;
}
@keyframes hint-bounce {
@@ -278,10 +280,10 @@ defineExpose({
}
.hint-text {
- font-size: 28rpx;
- color: #be185d;
+ font-size: 26rpx;
+ color: #0f766e;
font-weight: 700;
- letter-spacing: 4rpx;
+ letter-spacing: 3rpx;
text-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.9);
}
@@ -299,8 +301,8 @@ defineExpose({
}
.bpm-value {
- font-size: 88rpx;
- color: #be185d;
+ font-size: 80rpx;
+ color: #0f766e;
font-weight: 900;
line-height: 1;
letter-spacing: -2rpx;
@@ -310,7 +312,7 @@ defineExpose({
.bpm-label {
font-size: 22rpx;
- color: #ec4899;
+ color: #14b8a6;
font-weight: 700;
letter-spacing: 6rpx;
margin-top: 2rpx;
diff --git a/TUICallKit-Vue3/training/pages/grip-ring.vue b/TUICallKit-Vue3/training/pages/grip-ring.vue
index 300aecb6..1e2d63e1 100644
--- a/TUICallKit-Vue3/training/pages/grip-ring.vue
+++ b/TUICallKit-Vue3/training/pages/grip-ring.vue
@@ -1,48 +1,102 @@
+
+
+
-
{{ bgmEnabled ? '🎵' : '🔇' }}
-
-
-
-
- 次数
- {{ totalReps }}
-
-
- 时长
- {{ formatTime(elapsedSeconds) }}
-
-
- 消耗糖分
- {{ totalSugar.toFixed(1) }}g
+
+
+ 剩余
+ {{ formatTime(remainingSeconds) }}
-
-
-
- {{ p.label }}
- {{ p.bpm }} BPM
- {{ p.desc }}
+
+
+
+
+ 次数
+ {{ hasStats ? totalReps : '—' }}
+
+
+ 时长
+ {{ hasStats ? formatTime(elapsedSeconds) : '—' }}
+
+
+ 糖分
+ {{ hasStats ? `${totalSugar.toFixed(1)}g` : '—' }}
+
+
+
+
+
+
+
+
+
+ {{ PRESET_ICONS[p.id] }}
+ {{ p.label }}
+ {{ p.bpm }} BPM
+ {{ p.desc }}
+
+
+
+
+
+
+
+
+
+
+ {{ t.label }}
+
+
+
+
+
+
+ 已暂停 · 点击握力环继续
+ 结束训练 ›
@@ -57,8 +111,16 @@
-
-
+
+
+
+ {{ tip }}
+
+
+
+
+
+
+
+
-
-
-
-
- 动作要领
- • 完全握紧停顿 1 秒
- • 完全张开放松
- • 左右手交替训练
+