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

/* ============================================
   首页样式 — 订阅频道 + 免费频道
   ============================================ */
/* 强制隐藏本页所有滚动条 */
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 整体容器：flex 纵向，meta-bar 固定 + scroll 填充 */
.index-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--color-bg-page);
  overflow: hidden;
}

/* ========== 自定义导航栏 ========== */
.custom-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  background: #FFFFFF;
  flex-shrink: 0;
  position: relative;
}
.nav-brand-name {
  font-size: 34rpx;
  font-weight: 600;
  font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
  color: #333333;
  letter-spacing: 4rpx;
}

/* ========== 顶部问候栏（吸顶） ========== */
.meta-bar {
  flex-shrink: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-page) 100%);
  padding: 28rpx 36rpx 22rpx;
  border-bottom: 1rpx solid var(--color-border);
  z-index: 10;
}

/* 问候语行：emoji + 文字 */
.greeting-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;
}
.greeting-emoji {
  font-size: 52rpx;
  line-height: 1;
}
.greeting-text-wrap {
  display: flex;
  flex-direction: column;
}
.greeting {
  font-size: 48rpx;
  font-weight: 800;
  color: #2A2A2A;
  letter-spacing: 2rpx;
  line-height: 1.15;
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
}
.greeting-sub {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 1rpx;
  margin-bottom: 12rpx;
  font-family: 'PingFang SC', -apple-system, sans-serif;
}

/* 信息行：位置 · 日期 · 天气 */
.info-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8rpx;
}
.info-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
  background: var(--color-primary-light);
  padding: 6rpx 16rpx;
  border-radius: 999rpx;
}
.loc-name-text {
  font-weight: 600;
  color: var(--color-primary);
}
.info-text {
  font-size: 22rpx;
  color: var(--color-text-placeholder);
  font-weight: 500;
}
.info-dot {
  font-size: 22rpx;
  color: var(--color-text-disabled);
  margin: 0 2rpx;
}
.weather-icon-sm { font-size: 22rpx; }

/* ========== 可滚动内容区 ========== */
.main-scroll {
  flex: 1;
  overflow: hidden;
}

/* ========== 主内容区 ========== */
.content-area {
  padding: 24rpx 32rpx 0;
}
/* ========== VIP 首页状态卡 ========== */
.vip-home-card {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background: linear-gradient(135deg, #FFF9F0, #FFF3E0);
  border: 1rpx solid rgba(245, 158, 11, 0.3);
  border-radius: 24rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 32rpx;
}
.vip-home-icon { font-size: 44rpx; }
.vip-home-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}
.vip-home-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #B45309;
  font-family: 'PingFang SC', sans-serif;
}
.vip-home-desc {
  font-size: 22rpx;
  color: #D97706;
}
.vip-home-tag {
  font-size: 22rpx;
  font-weight: 600;
  color: var(--color-primary);
}


/* ========== 左滑取消订阅 ========== */
.swipe-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 24rpx;
}
.swipe-action {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 180rpx;
  background: #FF4D4F;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.swipe-action-text {
  font-size: 24rpx;
  font-weight: 700;
  color: #FFF;
}
.swipe-card {
  position: relative;
  z-index: 2;
  transition: transform 0.25s ease;
  margin-bottom: 0;
}

/* ========== Section Header ========== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.section-header-free {
  margin-top: 40rpx;
}
.section-title-wrap {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.section-dot {
  width: 8rpx;
  height: 28rpx;
  border-radius: 999rpx;
  background: var(--color-primary);
  display: block;
  flex-shrink: 0;
}
.dot-free {
  background: var(--color-success);
}
.section-title {
  font-size: 32rpx;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: 1rpx;
}
.section-subtitle {
  font-size: 22rpx;
  color: #AAAAAA;
  font-weight: 400;
}
.section-action {
  display: flex;
  align-items: center;
  gap: 4rpx;
}
.section-action-text {
  font-size: 24rpx;
  color: #999;
  font-weight: 500;
}
.section-action-arrow {
  font-size: 32rpx;
  color: #CCC;
  line-height: 1;
}

/* ========== 骨架屏动画 ========== */
@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-sub-card {
  margin-bottom: 20rpx;
  padding: 28rpx;
  border: none;
  box-shadow: none;
}
.skele-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}
.skele-avatar {
  width: 76rpx;
  height: 76rpx;
  border-radius: 22rpx;
  margin-right: 18rpx;
}
.skele-text-group { flex: 1; }
.skele-title {
  width: 40%;
  height: 32rpx;
  border-radius: 6rpx;
  margin-bottom: 12rpx;
}
.skele-subtitle {
  width: 25%;
  height: 24rpx;
  border-radius: 6rpx;
}
.skele-play-row {
  width: 100%;
  height: 100rpx;
  border-radius: 20rpx;
}

/* ========== 订阅空状态（横向卡片样式） ========== */
.sub-empty-card {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background: #FFFFFF;
  border-radius: 28rpx;
  padding: 32rpx 28rpx;
  margin-bottom: 20rpx;
  border: 2rpx dashed #EDE8E2;
  box-shadow: none;
}
.sub-empty-card:active { opacity: 0.75; }
.sub-empty-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  background: linear-gradient(135deg, rgba(255, 157, 66, 0.12), rgba(255, 120, 50, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-empty-emoji { font-size: 38rpx; }
.sub-empty-body { flex: 1; min-width: 0; }
.sub-empty-title {
  display: block;
  font-size: 28rpx;
  font-weight: 700;
  color: #333;
  margin-bottom: 8rpx;
}
.sub-empty-desc {
  display: block;
  font-size: 22rpx;
  color: #AAA;
  line-height: 1.5;
}
.sub-empty-arrow { flex-shrink: 0; }

/* ========== 订阅频道卡片 ========== */
.channel-card {
  margin-bottom: 20rpx;
  padding: 28rpx 28rpx 24rpx;
  position: relative;
  overflow: hidden;
}
.card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8rpx;
  border-radius: 0 6rpx 6rpx 0;
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  padding-left: 12rpx;
  margin-bottom: 16rpx;
}
.channel-icon {
  width: 76rpx;
  height: 76rpx;
  border-radius: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18rpx;
  flex-shrink: 0;
  overflow: hidden;
}
.icon-emoji { font-size: 36rpx; }
.icon-initial { font-size: 36rpx; color: #FFF; font-weight: 800; }

.channel-info { flex: 1; min-width: 0; }
.channel-name {
  display: block;
  font-size: 30rpx;
  font-weight: 700;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-meta {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-top: 8rpx;
}
/* t-tag 和 t-icon 已替代旧 .tag / .card-arrow */

/* 播放行 */
.play-row {
  display: flex;
  align-items: center;
  padding: 22rpx 18rpx 22rpx 24rpx;
  border-radius: 24rpx;
  background: #FFFFFF;
  border: 1rpx solid #F0F0F0;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  gap: 16rpx;
  position: relative;
  overflow: hidden;
}
.play-row:active { background: #FAFAFA; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); }
.play-row.playing {
  background: linear-gradient(135deg, rgba(255, 157, 66, 0.06) 0%, rgba(255, 120, 50, 0.12) 100%);
  border: 1rpx solid rgba(255, 157, 66, 0.2);
  box-shadow: 0 4rpx 20rpx rgba(255, 157, 66, 0.1);
}

/* 播放行左侧装饰色条 */
.play-row-accent {
  position: absolute;
  left: 0;
  top: 12rpx;
  bottom: 12rpx;
  width: 6rpx;
  border-radius: 0 6rpx 6rpx 0;
  opacity: 0.6;
}
.play-row.playing .play-row-accent {
  opacity: 1;
}

/* 左侧：音波 or 图标 */
.play-left {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* 扬声器图标圆形底板 */
.play-left-circle {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 音波动画 */
.sound-wave {
  display: flex;
  align-items: flex-end;
  gap: 5rpx;
  height: 36rpx;
}
.wave-bar {
  width: 6rpx;
  border-radius: 6rpx;
  background: var(--color-primary);
  animation: wave-bounce 0.8s ease-in-out infinite;
}
.wave-1 { height: 14rpx; animation-delay: 0s; }
.wave-2 { height: 26rpx; animation-delay: 0.15s; }
.wave-3 { height: 20rpx; animation-delay: 0.3s; }
.wave-4 { height: 30rpx; animation-delay: 0.45s; }

@keyframes wave-bounce {
  0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* 中间信息 */
.play-info { flex: 1; padding: 0 12rpx 0 4rpx; overflow: hidden; }
.play-title {
  display: block;
  font-size: 27rpx;
  font-weight: 700;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.play-title.text-primary { color: var(--color-primary); }
.play-duration { display: block; font-size: 21rpx; color: #AAA; margin-top: 6rpx; }

/* 右侧：播放按钮 + 光环 */
.play-btn-wrap {
  position: relative;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* 外圈光环 */
.play-btn-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3rpx solid transparent;
  transition: all 0.3s;
}
.play-btn-ring.active {
  border-color: rgba(255, 157, 66, 0.25);
  animation: ring-pulse 2s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.4; }
}
/* 按钮主体 */
.play-btn {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEEEEE;
  flex-shrink: 0;
  transition: all 0.25s ease;
  box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.1);
}
.play-btn:active { transform: scale(0.88); }
.play-btn.active {
  background: linear-gradient(135deg, #FF9E6D 0%, #FF7832 100%);
  box-shadow: 0 8rpx 28rpx rgba(255, 120, 50, 0.45);
}

/* 暂无节目 */
.no-content {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 20rpx 18rpx;
  background: #FAFAFA;
  border-radius: 20rpx;
  border: 1rpx dashed #ECECEC;
}
.no-content-text { font-size: 23rpx; color: #CCCCCC; }

/* ========== 免费频道横向区 ========== */

.skeleton-free-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 160rpx;
  vertical-align: top;
  margin-right: 20rpx;
}
.skele-free-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 36rpx;
  margin-bottom: 12rpx;
}
.skele-free-text {
  width: 100rpx;
  height: 26rpx;
  border-radius: 6rpx;
}

.free-scroll {
  width: 100%;
  overflow: hidden;
}
.free-list {
  padding: 4rpx 4rpx 16rpx;
  white-space: nowrap;
}
.free-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 160rpx;
  vertical-align: top;
  margin-right: 20rpx;
}
.free-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  overflow: hidden;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
}
.free-cover { width: 100%; height: 100%; }
.free-emoji { font-size: 48rpx; }
.free-initial { font-size: 40rpx; color: #FFF; font-weight: 800; }
.free-name {
  font-size: 22rpx;
  font-weight: 700;
  color: #333;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150rpx;
  margin-bottom: 8rpx;
  line-height: 1.3;
}
/* t-tag 已替代 .free-badge，t-empty 已替代 .free-empty */
.free-empty {
  padding: 40rpx 0 20rpx;
}