Blizzard
179 lines
3.4 KiB
Plaintext
179 lines
3.4 KiB
Plaintext
/* 全局底部悬浮播放控制条 */
|
|
|
|
.player-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 128rpx;
|
|
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(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);
|
|
}
|
|
.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, #FF9E6D, #FF9E6D);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
box-shadow: 0 4rpx 16rpx rgba(255, 158, 109, 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, 158, 109, 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: var(--color-text-primary);
|
|
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: var(--color-text-secondary);
|
|
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: var(--color-primary);
|
|
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: var(--color-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 6rpx 20rpx rgba(255, 158, 109, 0.35);
|
|
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;
|
|
}
|
|
|
|
/* ── 底部进度 slider ── */
|
|
.bar-slider {
|
|
position: absolute;
|
|
bottom: -4rpx;
|
|
left: -16rpx;
|
|
right: -16rpx;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|