update

TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue

@@ -23,7 +23,7 @@
                 <view class="hint-icon">
                     <view class="play-triangle" />
                 </view>
-                <text class="hint-text">点击开始</text>
+                <text class="hint-text">{{ hintText || '点击开始' }}</text>
             </view>
 
             <!-- BPM 显示 (播放时显示) -->
@@ -42,9 +42,12 @@ import CrushCanvas from './crush-canvas.vue'
 interface Props {
     bpm: number
     isPlaying: boolean
+    hintText?: string
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+    hintText: '点击开始',
+})
 
 const emit = defineEmits<{
     togglePlay: []
@@ -78,25 +81,24 @@ defineExpose({
     justify-content: center;
     position: relative;
     overflow: hidden;
-    /* 与页面背景一致,无可见边界 */
+    background: linear-gradient(180deg, #f0fdfa 0%, #f8fafc 55%, #f1f5f9 100%);
-    background: #f8fafc;
 }
 
-/* 环境氛围 - 中心大放射光晕,营造空间感 */
+/* 环境氛围 - 中心放射光晕 */
 .ambient-glow {
     position: absolute;
-    width: 1400rpx;
+    width: 1200rpx;
-    height: 1400rpx;
+    height: 1200rpx;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
     background:
         radial-gradient(circle,
-            rgba(255, 255, 255, 1) 0%,
+            rgba(204, 251, 241, 0.9) 0%,
-            rgba(241, 245, 249, 0.6) 25%,
+            rgba(240, 253, 250, 0.5) 30%,
-            rgba(226, 232, 240, 0.3) 50%,
+            rgba(241, 245, 249, 0.2) 55%,
-            transparent 75%);
+            transparent 72%);
     pointer-events: none;
 }
 
@@ -105,8 +107,8 @@ defineExpose({
  * ============================================================ */
 .ring-container {
     position: relative;
-    width: 640rpx;
+    width: 560rpx;
-    height: 640rpx;
+    height: 560rpx;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -117,13 +119,13 @@ defineExpose({
 /* 外发光 - 只在播放时显示(节省 GPU) */
 .ring-aura {
     position: absolute;
-    width: 700rpx;
+    width: 620rpx;
-    height: 700rpx;
+    height: 620rpx;
     border-radius: 50%;
     background: radial-gradient(circle,
-        rgba(244, 114, 182, 0.45) 0%,
+        rgba(20, 184, 166, 0.4) 0%,
-        rgba(244, 114, 182, 0.15) 35%,
+        rgba(45, 212, 191, 0.15) 35%,
-        rgba(244, 114, 182, 0) 70%);
+        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;
+    width: 460rpx;
-    height: 520rpx;
+    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%,
+        #5eead4 0%,
-        #f472b6 50%,
+        #2dd4bf 45%,
-        #ec4899 100%);
+        #14b8a6 100%);
     box-shadow:
-        0 24rpx 64rpx rgba(236, 72, 153, 0.4),
+        0 20rpx 56rpx rgba(20, 184, 166, 0.35),
-        0 12rpx 32rpx rgba(244, 114, 182, 0.3),
+        0 10rpx 28rpx rgba(45, 212, 191, 0.25),
-        inset 0 -20rpx 40rpx rgba(190, 24, 93, 0.35),
+        inset 0 -18rpx 36rpx rgba(15, 118, 110, 0.3),
-        inset 0 20rpx 40rpx rgba(255, 255, 255, 0.5);
+        inset 0 18rpx 36rpx rgba(255, 255, 255, 0.45);
 }
 
 /* 顶部高光 - 模拟材质感 */
 .ring-highlight {
     position: absolute;
-    width: 420rpx;
+    width: 360rpx;
-    height: 120rpx;
+    height: 100rpx;
     top: 40rpx;
     border-radius: 50%;
     background: radial-gradient(ellipse,
@@ -196,13 +198,13 @@ defineExpose({
 /* 内圈中空 */
 .ring-inner-circle {
     position: absolute;
-    width: 280rpx;
+    width: 250rpx;
-    height: 280rpx;
+    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 8rpx 20rpx rgba(15, 118, 110, 0.25),
-        inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.8);
+        inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.85);
 }
 
 /* 播放时的挤压动画(只影响 transform,GPU 加速) */
@@ -245,15 +247,15 @@ defineExpose({
 }
 
 .hint-icon {
-    width: 108rpx;
+    width: 96rpx;
-    height: 108rpx;
+    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-left: 32rpx solid #0f766e;
-    border-top: 24rpx solid transparent;
+    border-top: 22rpx solid transparent;
-    border-bottom: 24rpx solid transparent;
+    border-bottom: 22rpx solid transparent;
-    margin-left: 10rpx;
+    margin-left: 8rpx;
 }
 
 @keyframes hint-bounce {
@@ -278,10 +280,10 @@ defineExpose({
 }
 
 .hint-text {
-    font-size: 28rpx;
+    font-size: 26rpx;
-    color: #be185d;
+    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;
+    font-size: 80rpx;
-    color: #be185d;
+    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;