update
This commit is contained in:
@@ -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: #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;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user