first commit

2026-03-05 09:08:21 +08:00
commit 0a61c4ddec
2189 changed files with 38610 additions and 0 deletions
@@ -0,0 +1,185 @@
+/* 全局底部悬浮播放控制条 */
+
+.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;
+}