Blizzard
186 lines
3.6 KiB
Plaintext
186 lines
3.6 KiB
Plaintext
/* 全局底部悬浮播放控制条 */
|
|
|
|
.player-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 128rpx;
|
|
/* 暖奶油白 + 轻磨砂，与播放器主题呼应但不突兀 */
|
|
background: rgba(255, 251, 243, 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);
|
|
transform: translateY(100%);
|
|
transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
|
|
}
|
|
.player-bar.show {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ── 封面圆盘 ── */
|
|
.disc-wrap {
|
|
position: relative;
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.disc {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #FF9D42, #FFB366);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
box-shadow: 0 4rpx 16rpx rgba(255, 157, 66, 0.35);
|
|
}
|
|
.disc-spin {
|
|
animation: disc-rotate 8s linear infinite;
|
|
}
|
|
@keyframes disc-rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
/* 圆盘外环纹路 */
|
|
.disc-ring {
|
|
position: absolute;
|
|
inset: 6rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid rgba(255,255,255,0.35);
|
|
}
|
|
.disc-emoji {
|
|
font-size: 34rpx;
|
|
line-height: 1;
|
|
}
|
|
/* 图片模式：填满圆盘内圈 */
|
|
.disc-img {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
/* 播放时的呼吸光晕 */
|
|
.disc-pulse {
|
|
position: absolute;
|
|
inset: -6rpx;
|
|
border-radius: 50%;
|
|
border: 3rpx solid rgba(255, 157, 66, 0.35);
|
|
animation: pulse-ring 1.8s ease-out infinite;
|
|
}
|
|
@keyframes pulse-ring {
|
|
0% { transform: scale(0.9); opacity: 0.8; }
|
|
100% { transform: scale(1.35); opacity: 0; }
|
|
}
|
|
|
|
/* ── 标题区 ── */
|
|
.info {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
margin-right: 20rpx;
|
|
}
|
|
.title {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
color: #2C1A08;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.subtitle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 6rpx;
|
|
gap: 8rpx;
|
|
}
|
|
.subtitle {
|
|
font-size: 20rpx;
|
|
color: rgba(180, 120, 60, 0.7);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 迷你声波（3 根小柱） */
|
|
.mini-wave {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 3rpx;
|
|
height: 22rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.mw-bar {
|
|
width: 4rpx;
|
|
height: 12rpx;
|
|
background: #FF9D42;
|
|
border-radius: 2rpx;
|
|
animation: mw-dance 0.7s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes mw-dance {
|
|
0% { height: 4rpx; opacity: 0.4; }
|
|
100% { height: 20rpx; opacity: 1; }
|
|
}
|
|
|
|
/* ── 播放/暂停按钮 ── */
|
|
.ctrl-btn {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 50%;
|
|
background: #FF9D42;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 6rpx 20rpx rgba(255, 157, 66, 0.4);
|
|
transition: transform 0.15s;
|
|
}
|
|
.ctrl-btn:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* 播放三角 */
|
|
.play-icon {
|
|
font-size: 30rpx;
|
|
color: #FFF;
|
|
margin-left: 5rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* 暂停双竖线 */
|
|
.pause-icon {
|
|
display: flex;
|
|
gap: 8rpx;
|
|
align-items: center;
|
|
}
|
|
.p-bar {
|
|
width: 6rpx;
|
|
height: 26rpx;
|
|
background: #FFF;
|
|
border-radius: 3rpx;
|
|
}
|
|
|
|
/* ── 底部进度线 ── */
|
|
.progress-track {
|
|
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;
|
|
}
|