feat: 优化UI

pages/channel-detail/index.wxss

@@ -86,6 +86,24 @@
   color: rgba(255, 255, 255, 0.7);
   letter-spacing: 0.5rpx;
 }
+/* 到期日 + 续订按钮 同一行 */
+.hero-sub-row {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  margin-top: 12rpx;
+}
+.renew-inline-btn {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1rpx solid rgba(255, 255, 255, 0.5);
+  border-radius: 32rpx;
+  padding: 6rpx 20rpx;
+}
+.renew-inline-text {
+  font-size: 20rpx;
+  color: #FFF;
+  font-weight: 600;
+}
 
 /* 徽标（免费 / VIP / 到期）*/
 .hero-badge {
@@ -286,10 +304,39 @@
   border-color: transparent;
   box-shadow: 0 4rpx 16rpx rgba(255, 157, 66, 0.3);
 }
-.item-play-icon {
-  width: 28rpx;
-  height: 28rpx;
+/* 锁定状态的圆圈 */
+.item-play-btn.locked-btn {
+  background: #F0F0F0;
+  border-color: #E0E0E0;
+  opacity: 0.6;
 }
-.item-play-btn.active .item-play-icon {
-  filter: brightness(0) invert(1);
+.lock-icon {
+  font-size: 28rpx;
+}
+/* 纯文字播放三角 */
+.play-tri {
+  font-size: 22rpx;
+  color: #888;
+  padding-left: 4rpx;
+}
+.item-play-btn.active .play-tri {
+  color: #FFF;
+}
+/* 迷你暂停两条竖线 */
+.mini-pause {
+  display: flex;
+  gap: 6rpx;
+  align-items: center;
+}
+.mp-bar {
+  width: 5rpx;
+  height: 26rpx;
+  background: #FFF;
+  border-radius: 3rpx;
+}
+
+/* 全锁定提示条（橙色调） */
+.locked-notice {
+  background: rgba(255, 157, 66, 0.06);
+  border-color: rgba(255, 157, 66, 0.25);
 }