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

/* 收听历史 / 收藏 */
::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

.history-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--color-bg-page);
  overflow: hidden;
}

/* 列表滚动区域 */
.list-scroll {
  flex: 1;
  overflow: hidden;
}

/* 频道筛选栏 */
.channel-filter-bar {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 12rpx 32rpx;
  background: #FFF;
  border-bottom: 1rpx solid var(--color-border);
}
.ch-filter-tag {
  display: inline-block;
  padding: 8rpx 24rpx;
  margin-right: 12rpx;
  border-radius: 999rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #999;
  background: #F5F5F5;
  transition: all 0.2s;
}
.ch-filter-tag.active {
  color: #FFF;
  background: var(--color-primary);
}

/* ── Tab 头部 ── */
.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  background: #FFFFFF;
  border-bottom: 1rpx solid var(--color-border);
}
.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: var(--color-primary-dark);
}
.tab-underline {
  height: 4rpx;
  width: 0;
  background: var(--color-primary);
  border-radius: 2rpx;
  transition: width 0.25s;
}
.tab-item.active .tab-underline {
  width: 100%;
}
/* 赞过 tab 用粉红色下划线 */
.tab-item.active .tab-underline-like {
  background: #FF4D6D;
}

/* 赞过 tab 取消点赞心形按钮 */
.like-del-btn {
  width: 52rpx;
  height: 52rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.like-heart-icon {
  font-size: 36rpx;
  color: #FF4D6D;
  line-height: 1;
}

/* 清空按钮 */
.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, #EEEEEE 0%, #E8E8E8 50%, #EEEEEE 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, #EEEEEE 0%, #E8E8E8 50%, #EEEEEE 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: 100rpx 48rpx 64rpx;
  animation: fade-up 0.4s ease-out;
}
@keyframes fade-up {
  0% { opacity: 0; transform: translateY(20rpx); }
  100% { opacity: 1; transform: translateY(0); }
}

.empty-icon-wrap {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
}
.empty-halo {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,157,66,0.15) 0%, transparent 60%);
  animation: pulse-halo 2.5s infinite alternate ease-in-out;
}
.favored-halo { background: radial-gradient(circle, rgba(103,194,58,0.15) 0%, transparent 60%); }
.liked-halo { background: radial-gradient(circle, rgba(255,77,109,0.15) 0%, transparent 60%); }

@keyframes pulse-halo {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 1; }
}
.empty-icon {
  font-size: 100rpx;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 12rpx 20rpx rgba(0,0,0,0.08));
}

.empty-title {
  font-size: 38rpx;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 16rpx;
  font-family: 'PingFang SC', sans-serif;
  letter-spacing: 1rpx;
}
.empty-desc {
  font-size: 26rpx;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 32rpx;
}

.empty-guide-badge {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 12rpx 32rpx;
  background: rgba(255,157,66,0.1);
  border-radius: 40rpx;
  margin-bottom: 64rpx;
}
.guide-dot { width: 10rpx; height: 10rpx; border-radius: 50%; background: #FF9E6D; }
.guide-icon { font-size: 24rpx; margin-top: -2rpx; color: rgba(0,0,0,0.4); }
.guide-text {
  font-size: 24rpx;
  color: var(--color-primary);
  font-weight: 500;
}
.warning-badge { background: rgba(5,150,105,0.08); }
.warning-badge .guide-text { color: #059669; }
.danger-badge { background: rgba(255,77,109,0.08); }
.danger-badge .guide-text { color: #E11D48; }

.empty-actions {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  width: 100%;
  max-width: 480rpx;
}
.empty-upsell {
  margin-top: 48rpx;
  box-sizing: border-box;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), #FF5722);
  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 var(--color-border);
  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: var(--color-text-secondary);
}

/* 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: #B45309;
}
.upsell-desc {
  font-size: 22rpx;
  color: #D97706;
}
.upsell-btn {
  background: #FF9E6D;
  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(0, 0, 0, 0.04);
}
.history-item:active {
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 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: #FF9E6D;
  letter-spacing: 1rpx;
  margin-bottom: 6rpx;
  text-transform: uppercase;
}
.h-title {
  display: block;
  font-size: 28rpx;
  font-weight: 700;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'PingFang SC', sans-serif;
}
.h-title.text-primary { color: #FF9E6D; }
.h-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8rpx;
}
.h-meta {
  display: inline;
  font-size: 22rpx;
  color: var(--color-text-placeholder);
  font-weight: 500;
}
/* 播放进度条 */
.h-progress-wrap {
  width: 100%;
  height: 4rpx;
  background: var(--color-border);
  border-radius: 2rpx;
  margin-top: 12rpx;
  overflow: hidden;
}
.h-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #FF5722);
  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: #FF9E6D;
  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: #FFF7ED;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.play-mini-icon {
  font-size: 22rpx;
  color: #FF9E6D;
  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: #CCCCCC;
  background: #CCCCCC;
}
.icon-trash-sm .trash-body {
  border-color: #CCCCCC;
  background: transparent;
}