sundynix-radio-mp/pages/history/index.wxss

/* 收听历史 / 收藏 */

.history-page {
  min-height: 100vh;
  background: #F7F3EE;
}

/* ── Tab 头部 ── */
.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  background: #FFFFFF;
  border-bottom: 1rpx solid #F0EAE2;
}
.filter-tabs {
  display: flex;
  gap: 8rpx;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 24rpx 0;
  position: relative;
}
.tab-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #AAA;
  padding-bottom: 18rpx;
  font-family: 'PingFang SC', sans-serif;
  transition: color 0.2s;
}
.tab-item.active .tab-text {
  color: #2C1A08;
}
.tab-underline {
  height: 4rpx;
  width: 0;
  background: #FF9D42;
  border-radius: 2rpx;
  transition: width 0.25s;
}
.tab-item.active .tab-underline {
  width: 100%;
}

/* 清空按钮 */
.clear-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 0;
}
.clear-text {
  font-size: 24rpx;
  color: #BBBBBB;
  font-weight: 500;
}

/* ── 列表区 ── */
.list-area {
  padding: 24rpx 28rpx;
}

/* ── 骨架屏 ── */
.skeleton-wrap { display: flex; flex-direction: column; gap: 20rpx; }
.skeleton-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
}
.sk-icon {
  width: 88rpx;
  height: 88rpx;
  border-radius: 20rpx;
  background: linear-gradient(90deg, #F0EAE2 0%, #E8DFD5 50%, #F0EAE2 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  flex-shrink: 0;
}
.sk-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.sk-line {
  height: 18rpx;
  background: linear-gradient(90deg, #F0EAE2 0%, #E8DFD5 50%, #F0EAE2 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 9rpx;
}
.sk-line-short { width: 40%; }
.sk-line-long  { width: 80%; }
.sk-line-mid   { width: 55%; }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 空状态 ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 48rpx 48rpx;
}
.empty-icon {
  font-size: 96rpx;
  margin-bottom: 32rpx;
  filter: drop-shadow(0 8rpx 16rpx rgba(255,157,66,0.2));
}
.empty-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #2C1A08;
  margin-bottom: 16rpx;
  font-family: 'PingFang SC', sans-serif;
}
.empty-desc {
  font-size: 26rpx;
  color: #B0A090;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 48rpx;
}
.empty-actions {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  width: 100%;
  max-width: 480rpx;
}
.btn-primary {
  background: linear-gradient(135deg, #FF9D42, #E07020);
  border-radius: 48rpx;
  padding: 28rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(255,157,66,0.35);
}
.btn-text {
  font-size: 30rpx;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 1rpx;
}
.btn-ghost {
  border: 2rpx solid #E8DFD5;
  border-radius: 48rpx;
  padding: 26rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
}
.btn-ghost-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #8C7B6A;
}

/* VIP upsell 卡片 */
.upsell-card {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background: linear-gradient(135deg, #FFF8EE, #FFF3E0);
  border: 1rpx solid #FFDFA0;
  border-radius: 20rpx;
  padding: 24rpx 28rpx;
  margin-top: 40rpx;
  width: 100%;
  max-width: 480rpx;
  box-sizing: border-box;
}
.upsell-icon { font-size: 48rpx; }
.upsell-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}
.upsell-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #C07000;
}
.upsell-desc {
  font-size: 22rpx;
  color: #C09040;
}
.upsell-btn {
  background: #FF9D42;
  border-radius: 28rpx;
  padding: 12rpx 28rpx;
}
.upsell-btn-text {
  font-size: 24rpx;
  font-weight: 700;
  color: #FFF;
}

/* ── 历史条目 ── */
.history-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  margin-bottom: 16rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(44,26,8,0.04);
}
.history-item:active {
  box-shadow: 0 4rpx 20rpx rgba(44,26,8,0.08);
  transform: scale(0.99);
}

.h-icon {
  width: 88rpx;
  height: 88rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.h-emoji { font-size: 42rpx; }

.h-info {
  flex: 1;
  padding: 0 20rpx;
  overflow: hidden;
}
.h-channel {
  display: block;
  font-size: 20rpx;
  font-weight: 700;
  color: #FF9D42;
  letter-spacing: 1rpx;
  margin-bottom: 6rpx;
  text-transform: uppercase;
}
.h-title {
  display: block;
  font-size: 28rpx;
  font-weight: 700;
  color: #2C1A08;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'PingFang SC', sans-serif;
}
.h-title.text-primary { color: #FF9D42; }
.h-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8rpx;
}
.h-meta {
  display: inline;
  font-size: 22rpx;
  color: #C8BAAA;
  font-weight: 500;
}
/* 播放进度条 */
.h-progress-wrap {
  width: 100%;
  height: 4rpx;
  background: #F0EAE2;
  border-radius: 2rpx;
  margin-top: 12rpx;
  overflow: hidden;
}
.h-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #FF9D42, #E07020);
  border-radius: 2rpx;
  max-width: 100%;
}

.h-right {
  flex-shrink: 0;
}

/* 播放指示器 */
.playing-indicator {
  display: flex;
  align-items: flex-end;
  gap: 4rpx;
  width: 40rpx;
  height: 40rpx;
  justify-content: center;
  padding-bottom: 4rpx;
}
.bar {
  width: 6rpx;
  border-radius: 4rpx;
  background: #FF9D42;
  animation: bounce 0.6s ease-in-out infinite;
}
.bar-1 { height: 24rpx; animation-delay: 0s; }
.bar-2 { height: 40rpx; animation-delay: 0.1s; }
.bar-3 { height: 16rpx; animation-delay: 0.2s; }
@keyframes bounce {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.play-mini {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #FFF4E8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.play-mini-icon {
  font-size: 22rpx;
  color: #FF9D42;
  padding-left: 4rpx;
}

/* 单条删除按钮 */
.h-del {
  width: 52rpx;
  height: 52rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4rpx;
  flex-shrink: 0;
}

/* ── 纯 view 垃圾桶图标 ── */
.icon-trash {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rpx;
  width: 28rpx;
  padding-top: 6rpx;
  position: relative;
}
.trash-handle {
  width: 12rpx;
  height: 6rpx;
  border: 3rpx solid #BBBBBB;
  border-bottom: none;
  border-radius: 4rpx 4rpx 0 0;
  box-sizing: border-box;
  margin-bottom: 2rpx;
}
.trash-lid-bar {
  width: 28rpx;
  height: 4rpx;
  background: #BBBBBB;
  border-radius: 2rpx;
}
.trash-body {
  width: 22rpx;
  height: 24rpx;
  border: 3rpx solid #BBBBBB;
  border-top: none;
  border-radius: 0 0 5rpx 5rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 4rpx;
  padding: 4rpx 3rpx 3rpx;
}
.trash-stripe {
  flex: 1;
  background: #BBBBBB;
  border-radius: 2rpx;
  max-width: 2rpx;
}

/* 行内小号 */
.icon-trash-sm .trash-handle,
.icon-trash-sm .trash-lid-bar,
.icon-trash-sm .trash-stripe {
  border-color: #D0C8C0;
  background: #D0C8C0;
}
.icon-trash-sm .trash-body {
  border-color: #D0C8C0;
  background: transparent;
}