feat: 样式调整
This commit is contained in:
Blizzard
+43
-23
@@ -5,7 +5,7 @@
|
||||
<view class="index-page">
|
||||
|
||||
<!-- 状态栏占位 -->
|
||||
<view style="height: {{statusBarHeight}}px; flex-shrink: 0; background: #FCFCFC;"></view>
|
||||
<view style="height: {{statusBarHeight}}px; flex-shrink: 0; background: #FAFAF8;"></view>
|
||||
|
||||
<!-- ===== 自定义导航栏 ===== -->
|
||||
<view class="custom-nav">
|
||||
@@ -14,12 +14,12 @@
|
||||
|
||||
<!-- ===== 顶部问候栏（吸顶） ===== -->
|
||||
<view class="meta-bar">
|
||||
<!-- 时段文案（根据时间变化） -->
|
||||
<!-- 行1: 问候语 -->
|
||||
<text class="greeting-sub">{{greetingSub}}</text>
|
||||
<!-- 信息行 -->
|
||||
<!-- 行2: 位置 · 日期 · 天气（紧凑） -->
|
||||
<view class="info-row">
|
||||
<view class="info-item" wx:if="{{locationName}}">
|
||||
<t-icon name="location" size="26rpx" color="#FF9D42" />
|
||||
<t-icon name="location" size="26rpx" color="#FF9E6D" />
|
||||
<text class="info-text loc-name-text">{{locationName}}</text>
|
||||
</view>
|
||||
<text class="info-dot" wx:if="{{locationName}}">·</text>
|
||||
@@ -27,7 +27,7 @@
|
||||
<block wx:if="{{weather}}">
|
||||
<text class="info-dot">·</text>
|
||||
<text class="weather-icon-sm">{{weather.icon}}</text>
|
||||
<text class="info-text">{{weather.desc}} {{weather.temp}}°C</text>
|
||||
<text class="info-text">{{weather.temp}}°C</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
@@ -96,15 +96,29 @@
|
||||
<view
|
||||
wx:for="{{subscribedData}}"
|
||||
wx:key="id"
|
||||
class="channel-card card"
|
||||
class="swipe-container"
|
||||
>
|
||||
<!-- 滑动露出的取消订阅按钮 -->
|
||||
<view class="swipe-action" bindtap="onUnsubscribe" data-id="{{item.id}}" data-name="{{item.name}}">
|
||||
<text class="swipe-action-text">取消订阅</text>
|
||||
</view>
|
||||
<!-- 可滑动的卡片主体 -->
|
||||
<view
|
||||
class="channel-card card swipe-card"
|
||||
style="transform: translateX({{item._swipeX || 0}}rpx);"
|
||||
data-idx="{{index}}"
|
||||
bindtouchstart="onSwipeStart"
|
||||
bindtouchmove="onSwipeMove"
|
||||
bindtouchend="onSwipeEnd"
|
||||
>
|
||||
<!-- 左侧色条 -->
|
||||
<view class="card-accent" style="background: {{item.bgColor}};"></view>
|
||||
|
||||
<!-- 频道头部 -->
|
||||
<view class="card-header" bindtap="goChannel" data-id="{{item.id}}">
|
||||
<view class="channel-icon" style="background: {{item.bgColor || '#FFE8CC'}};">
|
||||
<text class="icon-emoji">{{item.cover || '📻'}}</text>
|
||||
<view class="channel-icon {{item._isDefaultCover ? 'initial-avatar' : ''}}" style="background: {{item.bgColor || '#FFE8CC'}};">
|
||||
<text wx:if="{{item._isDefaultCover}}" class="icon-initial">{{item._initial}}</text>
|
||||
<text wx:else class="icon-emoji">{{item.cover}}</text>
|
||||
</view>
|
||||
<view class="channel-info">
|
||||
<text class="channel-name">{{item.name}}</text>
|
||||
@@ -124,36 +138,41 @@
|
||||
bindtap="onPlayContent"
|
||||
data-content-id="{{item._todayContent.id}}"
|
||||
>
|
||||
<!-- 左：音波动画 or 音乐图标 -->
|
||||
<!-- 左侧装饰色条 -->
|
||||
<view class="play-row-accent" style="background: {{item.bgColor || '#FF9E6D'}};"></view>
|
||||
<!-- 左：音波动画 or 音乐图标（带圆形背景） -->
|
||||
<view class="play-left">
|
||||
<view wx:if="{{item._isThisPlaying && isPlaying}}" class="sound-wave">
|
||||
<view class="wave-bar wave-1"></view>
|
||||
<view class="wave-bar wave-2"></view>
|
||||
<view class="wave-bar wave-3"></view>
|
||||
<view class="wave-bar wave-4"></view>
|
||||
<view class="play-left-circle" style="background: {{item.bgColor || '#FF9E6D'}}20;">
|
||||
<view wx:if="{{item._isThisPlaying && isPlaying}}" class="sound-wave">
|
||||
<view class="wave-bar wave-1"></view>
|
||||
<view class="wave-bar wave-2"></view>
|
||||
<view class="wave-bar wave-3"></view>
|
||||
<view class="wave-bar wave-4"></view>
|
||||
</view>
|
||||
<t-icon wx:else name="sound" size="34rpx" color="{{item._isThisPlaying ? '#FF9E6D' : item.bgColor || '#FF9E6D'}}" />
|
||||
</view>
|
||||
<t-icon wx:else name="sound" size="36rpx" color="{{item._isThisPlaying ? '#FF9D42' : '#BBB'}}" />
|
||||
</view>
|
||||
<!-- 中：标题 + 时长 -->
|
||||
<!-- 中：标题 -->
|
||||
<view class="play-info">
|
||||
<text class="play-title {{item._isThisPlaying ? 'text-primary' : ''}}">{{item._todayContent.title}}</text>
|
||||
<text class="play-duration">{{item._todayContent.durationText}}</text>
|
||||
</view>
|
||||
<!-- 右：播放按钮 -->
|
||||
<view class="play-btn-wrap">
|
||||
<view class="play-btn-ring {{item._isThisPlaying ? 'active' : ''}}"></view>
|
||||
<view class="play-btn {{item._isThisPlaying ? 'active' : ''}}">
|
||||
<t-icon wx:if="{{item._isThisPlaying && isPlaying}}" name="pause" size="32rpx" color="#FFF" />
|
||||
<t-icon wx:else name="play" size="32rpx" color="{{item._isThisPlaying ? '#FFF' : '#555'}}" />
|
||||
<t-icon wx:if="{{item._isThisPlaying && isPlaying}}" name="pause" size="36rpx" color="#FFF" />
|
||||
<t-icon wx:else name="play" size="36rpx" color="{{item._isThisPlaying ? '#FFF' : '#888'}}" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 该频道暂无节目 -->
|
||||
<view wx:else class="no-content">
|
||||
<t-icon name="sound" size="32rpx" color="#DDD" />
|
||||
<text class="no-content-text">暂无节目，敬请期待</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> <!-- /swipe-card -->
|
||||
</view> <!-- /swipe-container -->
|
||||
</block>
|
||||
|
||||
<!-- ─── Section 2: 免费频道 ─── -->
|
||||
@@ -197,8 +216,9 @@
|
||||
bindtap="goChannel"
|
||||
data-id="{{item.id}}"
|
||||
>
|
||||
<view class="free-icon" style="background: {{item.bgColor || '#FFE8CC'}};">
|
||||
<text class="free-emoji">{{item.cover || '📻'}}</text>
|
||||
<view class="free-icon {{item._isDefaultCover ? 'initial-avatar' : ''}}" style="background: {{item.bgColor || '#FFE8CC'}};">
|
||||
<text wx:if="{{item._isDefaultCover}}" class="free-initial">{{item._initial}}</text>
|
||||
<text wx:else class="free-emoji">{{item.cover}}</text>
|
||||
</view>
|
||||
<text class="free-name">{{item.name}}</text>
|
||||
<!-- VIP 用户显示频道类型，普通用户只显免费帘记 -->
|
||||
@@ -216,7 +236,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 底部占位 -->
|
||||
<view style="height: 200rpx;"></view>
|
||||
<view class="player-bottom-spacer"></view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
Reference in New Issue
Block a user