Blizzard
118 lines
3.9 KiB
Plaintext
118 lines
3.9 KiB
Plaintext
<!-- 播放器详情页 -->
|
||
<page-meta page-style="overflow:hidden; background:#1A1208;" />
|
||
<view class="player-page">
|
||
|
||
<!-- 状态栏占位（custom 导航模式必须手动留出状态栏高度） -->
|
||
<view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>
|
||
|
||
<!-- 环境光背景 -->
|
||
<view class="bg-glow"
|
||
style="background: radial-gradient(ellipse at 50% -10%, {{domain.bgColor || '#FF9D42'}}44 0%, transparent 65%);">
|
||
</view>
|
||
|
||
<!-- 顶部：返回 + 标题 + 分享 -->
|
||
<view class="top-bar">
|
||
<view class="top-btn tap-active" bindtap="goBack">
|
||
<text class="top-back">‹</text>
|
||
</view>
|
||
<view class="top-title-wrap">
|
||
<text class="top-label">正在播放</text>
|
||
<text class="top-title">{{activeContent.title || '加载中...'}}</text>
|
||
</view>
|
||
<view class="top-btn tap-active" bindtap="onShare">
|
||
<text class="top-share">↑</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 中央 Banner：封面 ↔ 文案 -->
|
||
<view class="banner-area" bindtap="onBannerTap">
|
||
|
||
<!-- 封面视图（默认） -->
|
||
<view class="banner-cover {{showTranscript ? 'banner-hidden' : ''}}">
|
||
<!-- 涟漪声波（播放中才显示） -->
|
||
<view class="ripple-wrap" wx:if="{{isPlaying}}">
|
||
<view class="ripple-ring" style="animation-delay: 0s;"></view>
|
||
<view class="ripple-ring" style="animation-delay: 0.7s;"></view>
|
||
<view class="ripple-ring" style="animation-delay: 1.4s;"></view>
|
||
</view>
|
||
|
||
<!-- 大 emoji，无卡片背景 -->
|
||
<text class="cover-emoji {{isPlaying ? 'emoji-active' : ''}}">📻</text>
|
||
|
||
<!-- 频道名 -->
|
||
<text class="cover-channel">{{domain.name}}</text>
|
||
|
||
<text class="banner-hint">点击查看文案</text>
|
||
</view>
|
||
|
||
<!-- 文案视图 -->
|
||
<view class="banner-transcript {{showTranscript ? '' : 'banner-hidden'}}">
|
||
<scroll-view scroll-y enhanced show-scrollbar="{{false}}" class="transcript-scroll">
|
||
<text class="transcript-content" wx:if="{{activeContent.content}}">{{activeContent.content}}</text>
|
||
<view wx:else class="transcript-empty">
|
||
<text class="transcript-empty-icon">📄</text>
|
||
<text class="transcript-empty-text">暂无文案</text>
|
||
</view>
|
||
</scroll-view>
|
||
<text class="banner-hint">点击返回封面</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日期 + like 同行，进度条上方 -->
|
||
<view class="date-like-row">
|
||
<text class="date-text">{{displayDate}}</text>
|
||
<view class="like-btn-inline tap-active" bindtap="onLike">
|
||
<text class="like-icon">♡</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 进度条 -->
|
||
<view class="progress-section">
|
||
<slider
|
||
class="progress-slider"
|
||
min="0"
|
||
max="{{duration}}"
|
||
value="{{currentTime}}"
|
||
activeColor="#FF9D42"
|
||
backgroundColor="rgba(255,255,255,0.12)"
|
||
block-size="14"
|
||
block-color="#FF9D42"
|
||
bindchange="onSliderChange"
|
||
bindchanging="onSliderChanging"
|
||
/>
|
||
<view class="time-row">
|
||
<text class="time-text">{{currentTimeText}}</text>
|
||
<text class="time-text">{{durationText}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 控制区：← 15s | 播放/暂停 | 15s → -->
|
||
<view class="controls-row">
|
||
<view class="skip-btn tap-active" bindtap="onBackward">
|
||
<text class="skip-arrow">↺</text>
|
||
<text class="skip-sec">15</text>
|
||
</view>
|
||
|
||
<view class="play-btn tap-active" bindtap="onTogglePlay">
|
||
<view wx:if="{{isPlaying}}" class="pause-group">
|
||
<view class="pause-bar"></view>
|
||
<view class="pause-bar"></view>
|
||
</view>
|
||
<text wx:else class="play-tri">▶</text>
|
||
</view>
|
||
|
||
<view class="skip-btn tap-active" bindtap="onForward">
|
||
<text class="skip-arrow">↻</text>
|
||
<text class="skip-sec">15</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 倍速选择面板 -->
|
||
<t-action-sheet
|
||
visible="{{showSpeedSheet}}"
|
||
items="{{speedItems}}"
|
||
bind:selected="onSpeedSelect"
|
||
bind:cancel="onSpeedCancel"
|
||
/>
|
||
</view>
|