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

/* 频道广场样式 */
::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

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

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

/* 网格滚动区 */
.grid-scroll {
  flex: 1;
  overflow: hidden;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 20rpx 0;
  gap: 16rpx;
}
.grid-item {
  width: calc(33.33% - 12rpx);
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 12rpx 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
}

.item-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14rpx;
  overflow: hidden;
}
.icon-emoji { font-size: 44rpx; }

.item-name {
  font-size: 24rpx;
  font-weight: 700;
  color: #333;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* 类型标签行 */
.item-tag-row {
  margin-bottom: 14rpx;
  min-height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 行动按钮（通用容器） */
.sub-btn {
  width: 100%;
  height: 60rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  font-size: 22rpx;
  font-weight: 700;
  transition: opacity 0.2s, transform 0.15s;
}
.sub-btn:active { transform: scale(0.95); opacity: 0.85; }

/* 已订阅 */
.sub-btn.subscribed {
  background: #F0F0F0;
  color: #999;
}
/* 免费收听 */
.sub-btn.free {
  background: linear-gradient(135deg, #2ECC71, #27AE60);
  color: #FFF;
  box-shadow: 0 4rpx 12rpx rgba(0, 200, 83, 0.25);
}
/* VIP专享 */
.sub-btn.vip {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #FFF;
  box-shadow: 0 4rpx 12rpx rgba(245, 158, 11, 0.3);
}
/* 付费订阅 */
.sub-btn.paid {
  background: linear-gradient(135deg, #FF9E6D, #FF7832);
  color: #FFF;
  box-shadow: 0 4rpx 12rpx rgba(255, 157, 66, 0.3);
}
/* VIP畅听（VIP用户看到VIP专享频道） */
.sub-btn.vip-listen {
  background: linear-gradient(135deg, #FBBF24, #D97706);
  color: #FFF;
  box-shadow: 0 4rpx 12rpx rgba(251, 191, 36, 0.3);
}

/* ========== 骨架屏 ========== */
@keyframes skele-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skele-bg {
  background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 37%, #F0F0F0 63%);
  background-size: 400% 100%;
  animation: skele-shimmer 1.4s ease infinite;
}
.skeleton-item {
  background: #FFF;
}
.skele-circle {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  margin-bottom: 14rpx;
}
.skele-line {
  width: 80%;
  height: 28rpx;
  border-radius: 6rpx;
  margin-bottom: 24rpx;
}
.skele-btn {
  width: 100%;
  height: 60rpx;
  border-radius: 999rpx;
}

/* 空状态 */
.empty-wrap { padding: 80rpx 0; }

/* VIP横幅 */
.vip-banner {
  margin: 32rpx 20rpx;
  padding: 28rpx;
  background: linear-gradient(135deg, #1F2937, #111827);
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
}
.vip-banner-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
  font-size: 36rpx;
}
.vip-banner-info { flex: 1; overflow: hidden; }
.vip-banner-title {
  display: block;
  font-size: 26rpx;
  font-weight: 700;
  color: #FDE68A;
}
.vip-banner-desc {
  display: block;
  font-size: 20rpx;
  color: #9CA3AF;
  margin-top: 4rpx;
}
.vip-banner-price {
  background: #FBBF24;
  color: #1F2937;
  padding: 12rpx 20rpx;
  border-radius: 999rpx;
  font-size: 22rpx;
  font-weight: 700;
  flex-shrink: 0;
}