feat: 样式调整
This commit is contained in:
@@ -6,16 +6,15 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 128rpx;
|
||||
/* 暖奶油白 + 轻磨砂,与播放器主题呼应但不突兀 */
|
||||
background: rgba(255, 251, 243, 0.97);
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 28rpx;
|
||||
z-index: 999;
|
||||
border-top: 1rpx solid rgba(255, 157, 66, 0.12);
|
||||
box-shadow: 0 -8rpx 32rpx rgba(200, 120, 40, 0.08);
|
||||
border-top: 1rpx solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
|
||||
}
|
||||
@@ -38,12 +37,12 @@
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #FF9D42, #FFB366);
|
||||
background: linear-gradient(135deg, #FF9E6D, #FF9E6D);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 157, 66, 0.35);
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 158, 109, 0.35);
|
||||
}
|
||||
.disc-spin {
|
||||
animation: disc-rotate 8s linear infinite;
|
||||
@@ -75,7 +74,7 @@
|
||||
position: absolute;
|
||||
inset: -6rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid rgba(255, 157, 66, 0.35);
|
||||
border: 3rpx solid rgba(255, 158, 109, 0.35);
|
||||
animation: pulse-ring 1.8s ease-out infinite;
|
||||
}
|
||||
@keyframes pulse-ring {
|
||||
@@ -93,7 +92,7 @@
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #2C1A08;
|
||||
color: var(--color-text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -106,7 +105,7 @@
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 20rpx;
|
||||
color: rgba(180, 120, 60, 0.7);
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -121,7 +120,7 @@
|
||||
.mw-bar {
|
||||
width: 4rpx;
|
||||
height: 12rpx;
|
||||
background: #FF9D42;
|
||||
background: var(--color-primary);
|
||||
border-radius: 2rpx;
|
||||
animation: mw-dance 0.7s ease-in-out infinite alternate;
|
||||
}
|
||||
@@ -135,12 +134,12 @@
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
background: #FF9D42;
|
||||
background: var(--color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 6rpx 20rpx rgba(255, 157, 66, 0.4);
|
||||
box-shadow: 0 6rpx 20rpx rgba(255, 158, 109, 0.35);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.ctrl-btn:active {
|
||||
@@ -168,18 +167,12 @@
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
/* ── 底部进度线 ── */
|
||||
.progress-track {
|
||||
/* ── 底部进度 slider ── */
|
||||
.bar-slider {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3rpx;
|
||||
background: rgba(255, 157, 66, 0.1);
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #FF9D42, #FFB366);
|
||||
transition: width 0.5s linear;
|
||||
border-radius: 0 2rpx 2rpx 0;
|
||||
bottom: -4rpx;
|
||||
left: -16rpx;
|
||||
right: -16rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user