sundynix/sundynix-radio-mp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 样式调整

Browse Source
This commit is contained in:
Blizzard
2026-04-28 10:32:19 +08:00
parent 7f51b2a0a8
commit ce91e2cbbe
33 changed files with 1553 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/player/index.js
+160 -6
View File
@@ -14,6 +14,7 @@ Page({
isPlaying: false,
isVip: false,
isLiked: false,
isFavorited: false,
currentTime: 0,
duration: 0,
currentTimeText: '00:00',
@@ -27,7 +28,21 @@ Page({
commentList: [],
commentText: '',
commentLoading: false,
submitting: false
submitting: false,
// 分享面板
// 分享面板
showSharePanel: false,
// 倍速 ActionSheet
showSpeedSheet: false,
speedItems: [
{ label: '0.75x' },
{ label: '1.0x' },
{ label: '1.25x' },
{ label: '1.5x' },
{ label: '2.0x' }
],
// 频道节目列表（用于上/下期切换）
_channelPrograms: []
},
_isSeeking: false,
@@ -102,10 +117,13 @@ Page({
durationText: util.formatTime(gd.duration || content.duration),
displayDate: dateStr,
playbackRate: gd.playbackRate,
statusBarHeight: gd.statusBarHeight || 0
statusBarHeight: gd.statusBarHeight || 0,
isLiked: !!content.hasLiked,
isFavorited: content.HasFavorite === 1 || content.hasFavorite === 1
})
this._updateDomain()
this._loadChannelPrograms()
},
/**
@@ -136,7 +154,7 @@ Page({
},
/**
* 查询当前节目点赞状态
* 查询当前节目点赞和收藏状态（刷新最新值）
*/
_loadLikeStatus() {
const content = this.data.activeContent
@@ -144,11 +162,74 @@ Page({
var self = this
api.getProgramDetail(content.id).then(function (res) {
if (res.code === 200 && res.data) {
self.setData({ isLiked: !!res.data.isLiked })
self.setData({
isLiked: res.data.hasLiked === 1,
isFavorited: res.data.HasFavorite === 1 || res.data.hasFavorite === 1
})
}
}).catch(function () { })
},
/**
* 加载当前频道的节目列表（用于上/下期切换）
*/
_loadChannelPrograms() {
const content = this.data.activeContent
if (!content) return
var channelId = content.channelId || (content.channel && content.channel.id)
if (!channelId) return
var self = this
api.getProgramList({ channelId: channelId, current: 1, pageSize: 100 })
.then(function (res) {
if (res.code === 200 && res.data) {
var list = res.data.list || res.data || []
self.setData({ _channelPrograms: list })
}
}).catch(function () { })
},
/**
* 上一期
*/
onPrev() {
var programs = this.data._channelPrograms
var content = this.data.activeContent
if (!content || programs.length === 0) {
wx.showToast({ title: '没有更多了', icon: 'none' })
return
}
var idx = -1
for (var i = 0; i < programs.length; i++) {
if (programs[i].id === content.id) { idx = i; break }
}
if (idx <= 0) {
wx.showToast({ title: '已是第一期', icon: 'none' })
return
}
app.playContent(programs[idx - 1])
},
/**
* 下一期
*/
onNext() {
var programs = this.data._channelPrograms
var content = this.data.activeContent
if (!content || programs.length === 0) {
wx.showToast({ title: '没有更多了', icon: 'none' })
return
}
var idx = -1
for (var i = 0; i < programs.length; i++) {
if (programs[i].id === content.id) { idx = i; break }
}
if (idx < 0 || idx >= programs.length - 1) {
wx.showToast({ title: '已是最新一期', icon: 'none' })
return
}
app.playContent(programs[idx + 1])
},
/**
* 播放/暂停
*/
@@ -270,7 +351,6 @@ Page({
this.setData({ isLiked: !wasLiked })
api.toggleLike(content.id).then(function (res) {
if (res.code !== 200) {
// 回滚
self.setData({ isLiked: wasLiked })
wx.showToast({ title: res.msg || '操作失败', icon: 'none' })
} else {
@@ -282,6 +362,29 @@ Page({
})
},
onFavorite() {
const content = this.data.activeContent
if (!content) return
const self = this
const wasFavorited = this.data.isFavorited
// 乐观更新
this.setData({ isFavorited: !wasFavorited })
const fn = wasFavorited
? api.removeFavorite(content.id)
: api.addFavorite(content.id)
fn.then(function (res) {
if (res.code !== 200) {
self.setData({ isFavorited: wasFavorited })
wx.showToast({ title: res.msg || '操作失败', icon: 'none' })
} else {
wx.showToast({ title: wasFavorited ? '已取消收藏' : '已收藏 🔖', icon: 'none' })
}
}).catch(function () {
self.setData({ isFavorited: wasFavorited })
wx.showToast({ title: '网络异常', icon: 'none' })
})
},
// ===== 评论弹层 =====
onOpenComments() {
@@ -358,11 +461,62 @@ Page({
})
},
onShareTap() {
this.setData({ showSharePanel: true })
},
onCloseShare() {
this.setData({ showSharePanel: false })
},
/**
* 朋友圈分享按钮点击 → 引导用户使用右上角胶囊菜单
* 微信小程序限制：无法编程式触发朋友圈分享，只能从胶囊菜单触发
*/
onShareMomentTip() {
this.setData({ showSharePanel: false })
wx.showModal({
title: '分享到朋友圈',
content: '请点击右上角「···」菜单，选择「分享」即可发布到朋友圈',
showCancel: false,
confirmText: '我知道了'
})
},
onShare() {
wx.showToast({ title: '分享功能开发中', icon: 'none' })
this.onShareTap()
},
goBack() {
wx.navigateBack()
},
// ===== 小程序分享生命周期钩子 =====
/**
* 转发给朋友（胶囊菜单内「转发」，或 button open-type=share 触发）
*/
onShareAppMessage() {
const content = this.data.activeContent || {}
const domain = this.data.domain || {}
this.setData({ showSharePanel: false })
return {
title: (domain.name ? '【' + domain.name + '】' : '') + (content.title || '全声汇'),
path: '/pages/index/index',
imageUrl: ''
}
},
/**
* 分享到朋友圈（定义此函数后，胶囊菜单中「分享」自动出现）
*/
onShareTimeline() {
const content = this.data.activeContent || {}
const domain = this.data.domain || {}
return {
title: (domain.name ? '【' + domain.name + '】' : '') + (content.title || '全声汇'),
query: '',
imageUrl: ''
}
}
})
pages/player/index.wxml
+77 -70
View File
@@ -1,16 +1,16 @@
<!-- 播放器详情页 -->
<page-meta page-style="overflow:hidden; background:#1A1208;" />
<page-meta page-style="overflow:hidden; background:#FAFAF8;" />
<view class="player-page">
<!-- 状态栏占位 -->
<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%);">
style="background: radial-gradient(ellipse at 50% -10%, {{domain.bgColor || '#FF9E6D'}}26 0%, transparent 60%);">
</view>
<!-- 顶部：返回 + 标题 + 评论 -->
<!-- 顶部：返回 + 标题 -->
<view class="top-bar">
<view class="top-btn tap-active" bindtap="goBack">
<text class="top-back">‹</text>
@@ -19,9 +19,7 @@
<text class="top-label">正在播放</text>
<text class="top-title">{{activeContent.title || '加载中...'}}</text>
</view>
<view class="top-btn tap-active" bindtap="onOpenComments">
<text class="top-comment-icon">💬</text>
</view>
<view class="top-btn" style="visibility: hidden;"></view>
</view>
<!-- 中央 Banner：封面 ↔ 文案 -->
@@ -42,27 +40,37 @@
<!-- 频道名 -->
<text class="cover-channel">{{domain.name}}</text>
<text class="banner-hint">点击查看文案</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>
<text class="transcript-empty-icon">📝</text>
<text class="transcript-empty-text">暂无文案内容</text>
<text class="transcript-empty-sub">主播未上传此期文稿</text>
</view>
</scroll-view>
<text class="banner-hint">点击返回封面</text>
<view class="transcript-close-hint">
<text class="transcript-close-text">点击任意区域返回播放</text>
</view>
</view>
</view>
<!-- 日期 + like 同行 -->
<!-- 日期 + 收藏 + 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 {{isLiked ? 'liked' : ''}}">{{isLiked ? '♥' : '♡'}}</text>
<view class="action-btns">
<!-- 收藏按鈕 -->
<view class="action-btn tap-active" bindtap="onFavorite">
<text class="action-icon {{isFavorited ? 'favorited' : ''}}">{{isFavorited ? '🔖' : '📄'}}</text>
</view>
<!-- 点赞按钮 -->
<view class="action-btn tap-active" bindtap="onLike">
<text class="like-icon {{isLiked ? 'liked' : ''}}">{{isLiked ? '❤️' : '♡'}}</text>
</view>
</view>
</view>
@@ -73,10 +81,10 @@
min="0"
max="{{duration}}"
value="{{currentTime}}"
activeColor="#FF9D42"
activeColor="#FF9E6D"
backgroundColor="rgba(255,255,255,0.12)"
block-size="14"
block-color="#FF9D42"
block-color="#FF9E6D"
bindchange="onSliderChange"
bindchanging="onSliderChanging"
/>
@@ -86,8 +94,13 @@
</view>
</view>
<!-- 控制区：← 15s | 播放/暂停 | 15s → -->
<!-- 控制区：|◁ ← 15s | 播放/暂停 | 15s → ▷| -->
<view class="controls-row">
<!-- 上一期 -->
<view class="prev-next-btn tap-active" bindtap="onPrev">
<text class="pn-icon">⏮</text>
</view>
<view class="skip-btn tap-active" bindtap="onBackward">
<text class="skip-arrow">↺</text>
<text class="skip-sec">15</text>
@@ -105,64 +118,58 @@
<text class="skip-arrow">↻</text>
<text class="skip-sec">15</text>
</view>
<!-- 下一期 -->
<view class="prev-next-btn tap-active" bindtap="onNext">
<text class="pn-icon">⏭</text>
</view>
</view>
<!-- 评论弹层 -->
<view class="comment-mask" wx:if="{{showComments}}" bindtap="onCloseComments"></view>
<view class="comment-sheet {{showComments ? 'sheet-up' : ''}}">
<view class="sheet-handle"></view>
<view class="sheet-header">
<text class="sheet-title">评论 ({{commentList.length}})</text>
<view class="sheet-close tap-active" bindtap="onCloseComments">
<text class="sheet-close-icon">✕</text>
</view>
<!-- 倍速按钮行 -->
<view class="speed-row">
<view class="speed-btn tap-active" bindtap="onSpeed">
<text class="speed-label">{{playbackRate === 1 ? '倍速' : playbackRate + 'x'}}</text>
</view>
</view>
<!-- 输入区 -->
<view class="comment-input-row">
<input
class="comment-input"
placeholder="说点什么..."
placeholder-style="color:rgba(255,200,120,0.3);"
value="{{commentText}}"
bindinput="onCommentInput"
confirm-type="send"
bindconfirm="onSubmitComment"
maxlength="200"
/>
<view class="send-btn tap-active {{submitting ? 'sending' : ''}}" bindtap="onSubmitComment">
<text class="send-text">发送</text>
<!-- 倍速选择 ActionSheet -->
<t-action-sheet
visible="{{showSpeedSheet}}"
items="{{speedItems}}"
bind:selected="onSpeedSelect"
bind:cancel="onSpeedCancel"
cancel-text="取消"
/>
<!-- 分享面板遮罩 -->
<view class="share-mask" wx:if="{{showSharePanel}}" bindtap="onCloseShare"></view>
<!-- 分享面板 -->
<view class="share-sheet {{showSharePanel ? 'sheet-up' : ''}}">
<view class="share-sheet-handle"></view>
<view class="share-sheet-title">分享到</view>
<view class="share-options">
<!-- 发给朋友（open-type=share 触发 onShareAppMessage） -->
<button class="share-option-btn" open-type="share">
<view class="share-option">
<view class="share-opt-icon share-opt-friend">
<text class="share-opt-emoji">💬</text>
</view>
<text class="share-opt-label">小程序好友</text>
</view>
</button>
<!-- 分享到朋友圈 -->
<view class="share-option tap-active" bindtap="onShareMomentTip">
<view class="share-opt-icon share-opt-moment">
<text class="share-opt-emoji">🌐</text>
</view>
<text class="share-opt-label">朋友圈</text>
</view>
</view>
<!-- 评论列表 -->
<scroll-view scroll-y class="comment-list-scroll" enhanced show-scrollbar="{{false}}">
<view wx:if="{{commentLoading}}" class="comment-loading">
<text class="comment-loading-text">加载中...</text>
</view>
<view wx:elif="{{commentList.length === 0}}" class="comment-empty">
<text class="comment-empty-icon">💬</text>
<text class="comment-empty-text">还没有评论，来说第一句话</text>
</view>
<view
wx:for="{{commentList}}"
wx:key="id"
class="comment-item"
>
<view class="comment-avatar">
<text class="comment-avatar-text">{{item.userName ? item.userName[0] : '?'}}</text>
</view>
<view class="comment-body">
<text class="comment-author">{{item.userName || '匿名'}}</text>
<text class="comment-text">{{item.content}}</text>
<text class="comment-time">{{item.createdAtStr || item.createdAt}}</text>
</view>
<view wx:if="{{item._isOwn}}" class="comment-del tap-active" bindtap="onDeleteComment" data-id="{{item.id}}">
<text class="comment-del-icon">🗑</text>
</view>
</view>
<view style="height: 40rpx;"></view>
</scroll-view>
<view class="share-cancel tap-active" bindtap="onCloseShare">取消</view>
</view>
</view>
pages/player/index.wxss
+277 -232
View File
@@ -1,29 +1,36 @@
/* 播放器 — 暖棕沉浸主题 */
/* 播放器 — 深空沉浸主题 · 重设计 */
::-webkit-scrollbar { display: none !important; }
.player-page {
height: 100vh;
background: #1A1208;
background: #FAFAF8;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
animation: player-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* 环境光 */
@keyframes player-slide-up {
0% { transform: translateY(40%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* 环境光 — 日间柔和光晕 */
.bg-glow {
position: absolute;
top: 0; left: 0; right: 0;
height: 60vh;
pointer-events: none;
z-index: 0;
opacity: 1;
}
/* ── 顶部栏 ── */
.top-bar {
display: flex;
align-items: center;
padding: 16rpx 32rpx 12rpx;
padding: 12rpx 24rpx 8rpx;
position: relative;
z-index: 10;
}
@@ -34,21 +41,15 @@
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.06);
flex-shrink: 0;
}
.top-back {
font-size: 48rpx;
color: rgba(255,240,210,0.9);
font-size: 52rpx;
color: #333333;
font-weight: 300;
line-height: 1;
margin-top: -4rpx;
}
.top-share {
font-size: 32rpx;
color: rgba(255,220,160,0.6);
font-weight: 600;
}
.top-title-wrap {
flex: 1;
text-align: center;
@@ -58,15 +59,16 @@
.top-label {
display: block;
font-size: 18rpx;
color: rgba(255,200,120,0.45);
letter-spacing: 2rpx;
margin-bottom: 6rpx;
color: #999999;
letter-spacing: 4rpx;
text-transform: uppercase;
margin-bottom: 4rpx;
}
.top-title {
display: block;
font-size: 26rpx;
font-weight: 700;
color: rgba(255,240,210,0.95);
font-weight: 600;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -81,6 +83,7 @@
position: relative;
z-index: 10;
padding: 0 40rpx;
min-height: 0;
}
.banner-cover,
@@ -91,140 +94,196 @@
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.35s ease, transform 0.35s ease;
transition: opacity 0.4s ease, transform 0.4s ease;
opacity: 1;
transform: scale(1);
}
.banner-hidden {
opacity: 0;
transform: scale(0.96);
transform: scale(0.92);
pointer-events: none;
}
/* ── 涟漪声波 ── */
.ripple-wrap {
position: absolute;
width: 300rpx;
height: 300rpx;
width: 360rpx;
height: 360rpx;
display: flex;
align-items: center;
justify-content: center;
}
.ripple-ring {
position: absolute;
width: 220rpx;
height: 220rpx;
width: 240rpx;
height: 240rpx;
border-radius: 50%;
border: 2rpx solid rgba(255, 157, 66, 0.5);
animation: ripple-out 2.1s ease-out infinite;
border: 2rpx solid rgba(255, 158, 109, 0.25);
animation: ripple-out 2.4s ease-out infinite;
}
@keyframes ripple-out {
0% { transform: scale(0.6); opacity: 0.8; }
100% { transform: scale(2.4); opacity: 0; }
0% { transform: scale(0.5); opacity: 0.7; }
100% { transform: scale(2.6); opacity: 0; }
}
/* ── 大 Emoji（无卡片背景） ── */
/* ── 大 Emoji ── */
.cover-emoji {
font-size: 180rpx;
font-size: 200rpx;
position: relative;
z-index: 2;
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
transform: scale(0.9);
filter: drop-shadow(0 20rpx 40rpx rgba(0,0,0,0.5));
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
transform: scale(0.85);
filter: drop-shadow(0 16rpx 32rpx rgba(255, 158, 109, 0.3));
}
.cover-emoji.emoji-active {
transform: scale(1.05);
transform: scale(1.08);
}
.cover-channel {
font-size: 22rpx;
font-weight: 600;
color: rgba(255,200,120,0.45);
letter-spacing: 2rpx;
margin-top: 24rpx;
font-size: 24rpx;
font-weight: 700;
color: #999999;
letter-spacing: 6rpx;
text-transform: uppercase;
margin-top: 32rpx;
position: relative;
z-index: 2;
}
/* 提示文字 */
/* 提示文字 — 胶囊按钮风格 */
.banner-hint {
display: block;
margin-top: 20rpx;
font-size: 20rpx;
color: rgba(255,200,120,0.3);
letter-spacing: 1rpx;
display: inline-block;
margin-top: 28rpx;
font-size: 22rpx;
color: #999999;
letter-spacing: 2rpx;
position: relative;
z-index: 2;
background: rgba(0, 0, 0, 0.03);
border: 1rpx solid rgba(0, 0, 0, 0.05);
border-radius: 999rpx;
padding: 10rpx 28rpx;
}
/* ── 文案视图 ── */
/* ── 文案视图（阅读模式） ── */
.banner-transcript {
padding: 24rpx 48rpx 16rpx;
padding: 16rpx 40rpx 16rpx;
flex-direction: column;
}
.transcript-scroll {
flex: 1;
width: 100%;
max-height: 480rpx;
background: rgba(255,200,120,0.05);
border-radius: 32rpx;
border: 1rpx solid rgba(255,200,120,0.12);
padding: 32rpx;
max-height: 55vh;
background: rgba(255, 255, 255, 0.85);
border-radius: 24rpx;
border: 1rpx solid rgba(0, 0, 0, 0.04);
padding: 36rpx 32rpx;
box-sizing: border-box;
backdrop-filter: blur(24px);
box-shadow: 0 16rpx 48rpx rgba(255, 158, 109, 0.12);
}
.transcript-content {
font-size: 28rpx;
line-height: 1.95;
color: rgba(255,240,210,0.8);
font-size: 30rpx;
line-height: 2.1;
color: #666666;
white-space: pre-wrap;
letter-spacing: 1rpx;
}
.transcript-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 40rpx 0;
padding: 56rpx 0;
}
.transcript-empty-icon { font-size: 60rpx; }
.transcript-empty-icon { font-size: 72rpx; }
.transcript-empty-text {
font-size: 24rpx;
color: rgba(255,200,120,0.4);
margin-top: 12rpx;
font-size: 28rpx;
color: #999999;
margin-top: 20rpx;
font-weight: 600;
}
.transcript-empty-sub {
font-size: 22rpx;
color: #CCCCCC;
margin-top: 8rpx;
}
.transcript-close-hint {
display: flex;
justify-content: center;
margin-top: 20rpx;
}
.transcript-close-text {
font-size: 20rpx;
color: #999999;
letter-spacing: 2rpx;
}
/* 日期 + like 同行 */
/* ── 日期 + 操作行 ── */
.date-like-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48rpx;
margin-bottom: 4rpx;
padding: 0 52rpx;
margin-bottom: 8rpx;
position: relative;
z-index: 10;
}
.date-text {
font-size: 22rpx;
color: rgba(255,200,120,0.4);
letter-spacing: 1rpx;
color: #999999;
letter-spacing: 2rpx;
font-weight: 500;
}
.like-btn-inline {
.action-btns {
display: flex;
align-items: center;
gap: 8rpx;
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 4rpx 0;
width: 72rpx;
height: 72rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.04);
transition: all 0.2s;
}
.action-btn:active {
background: rgba(0, 0, 0, 0.08);
transform: scale(1.1);
}
.action-icon {
font-size: 34rpx;
color: #666666;
transition: color 0.2s;
}
.action-icon.favorited {
color: #FF9E6D;
}
.like-icon {
font-size: 40rpx;
color: rgba(255,200,120,0.55);
font-size: 36rpx;
color: #666666;
transition: all 0.25s;
}
.like-icon.liked {
color: #EF4444;
filter: drop-shadow(0 0 8rpx rgba(239, 68, 68, 0.6));
animation: like-pop 0.35s ease;
}
@keyframes like-pop {
0% { transform: scale(1); }
40% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/* ── 进度条 + like 浮动 ── */
/* ── 进度条 ── */
.progress-section {
padding: 0 48rpx;
margin-bottom: 16rpx;
margin-bottom: 12rpx;
position: relative;
z-index: 10;
}
/* like 按钮已内联至 time-row，旧绝对定位样式已移除 */
.progress-slider { margin: 0; }
.time-row {
display: flex;
@@ -234,20 +293,10 @@
}
.time-text {
font-size: 22rpx;
color: rgba(255,200,120,0.4);
font-family: 'Menlo', 'SF Mono', monospace;
font-weight: 600;
}
/* like 按鈕内联在时间行中间 */
.like-btn-inline {
display: flex;
align-items: center;
justify-content: center;
padding: 4rpx 16rpx;
}
.like-icon {
font-size: 40rpx;
color: rgba(255,200,120,0.55);
color: #999999;
font-family: 'SF Mono', 'Menlo', monospace;
font-weight: 500;
letter-spacing: 1rpx;
}
/* ── 控制区 ── */
@@ -255,215 +304,211 @@
display: flex;
align-items: center;
justify-content: center;
gap: 64rpx;
padding: 16rpx 48rpx 64rpx;
gap: 24rpx;
padding: 8rpx 48rpx 16rpx;
position: relative;
z-index: 10;
}
/* 上/下期按钮 */
.prev-next-btn {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.2s;
}
.prev-next-btn:active {
background: rgba(0, 0, 0, 0.04);
}
.pn-icon {
font-size: 36rpx;
color: #666666;
}
.prev-next-btn:active .pn-icon {
color: #333333;
}
/* 快退/快进 */
.skip-btn {
width: 96rpx;
height: 96rpx;
width: 88rpx;
height: 88rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
border-radius: 50%;
transition: background 0.2s;
}
.skip-btn:active {
background: rgba(0, 0, 0, 0.04);
}
.skip-arrow {
font-size: 76rpx;
color: rgba(255,220,160,0.8);
font-size: 64rpx;
color: #666666;
font-weight: 300;
line-height: 1;
}
.skip-sec {
position: absolute;
font-size: 19rpx;
font-size: 18rpx;
font-weight: 800;
color: rgba(255,220,160,0.8);
color: #999999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -46%);
letter-spacing: -1rpx;
transform: translate(-50%, -50%);
margin-top: 2rpx;
}
/* 播放/暂停主按钮 */
.play-btn {
width: 136rpx;
height: 136rpx;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: #FF9D42;
background: linear-gradient(135deg, #FF8C42 0%, #FF6B2C 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 16rpx 48rpx rgba(255, 157, 66, 0.5),
0 0 0 12rpx rgba(255, 157, 66, 0.15);
box-shadow: 0 16rpx 32rpx rgba(255, 107, 44, 0.25);
transition: transform 0.15s, box-shadow 0.15s;
}
.play-btn:active {
transform: scale(0.92);
box-shadow:
0 8rpx 24rpx rgba(255, 157, 66, 0.4),
0 0 0 8rpx rgba(255, 157, 66, 0.1);
}
.play-tri {
font-size: 52rpx;
color: #FFF8EE;
margin-left: 8rpx;
line-height: 1;
box-shadow: 0 4rpx 16rpx rgba(255, 107, 44, 0.5);
}
.pause-group {
display: flex;
gap: 12rpx;
gap: 10rpx;
align-items: center;
}
.pause-bar {
width: 10rpx;
height: 44rpx;
background: #FFF8EE;
border-radius: 5rpx;
width: 8rpx;
height: 36rpx;
background: #FFF;
border-radius: 4rpx;
}
.play-tri {
font-size: 40rpx;
color: #FFF;
padding-left: 6rpx;
}
/* ── like 状态 ── */
.like-icon.liked {
color: #FF4D6D;
/* ── 倍速按钮行 ── */
.speed-row {
display: flex;
justify-content: center;
padding: 0 48rpx 40rpx;
position: relative;
z-index: 10;
}
.top-comment-icon {
font-size: 38rpx;
line-height: 1;
.speed-btn {
background: rgba(0, 0, 0, 0.04);
border: 1rpx solid rgba(0, 0, 0, 0.06);
border-radius: 999rpx;
padding: 12rpx 36rpx;
transition: all 0.2s;
}
.speed-btn:active {
background: rgba(0, 0, 0, 0.08);
}
.speed-label {
font-size: 24rpx;
font-weight: 700;
color: #666666;
letter-spacing: 1rpx;
}
/* ── 评论弹层 ── */
.comment-mask {
/* ── 分享面板 ── */
.share-mask {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 200;
background: rgba(0, 0, 0, 0.5);
z-index: 100;
animation: fadeIn 0.25s ease;
}
.comment-sheet {
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.share-sheet {
position: fixed;
bottom: -100%;
bottom: 0;
left: 0;
right: 0;
height: 70vh;
background: #231808;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 40rpx 40rpx 0 0;
z-index: 201;
display: flex;
flex-direction: column;
padding: 0 0 env(safe-area-inset-bottom);
transition: bottom 0.3s cubic-bezier(0.32,0.72,0,1);
padding: 24rpx 48rpx calc(48rpx + env(safe-area-inset-bottom));
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 200;
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.05);
}
.comment-sheet.sheet-up {
bottom: 0;
.share-sheet.sheet-up {
transform: translateY(0);
}
.sheet-handle {
width: 72rpx;
height: 6rpx;
background: rgba(255,200,120,0.2);
border-radius: 3rpx;
margin: 20rpx auto 0;
.share-sheet-handle {
width: 64rpx;
height: 8rpx;
background: #CCCCCC;
border-radius: 4rpx;
margin: 0 auto 28rpx;
}
.sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 40rpx;
border-bottom: 1rpx solid rgba(255,200,120,0.08);
}
.sheet-title {
.share-sheet-title {
font-size: 30rpx;
font-weight: 700;
color: rgba(255,240,210,0.9);
color: #333333;
text-align: center;
margin-bottom: 40rpx;
}
.sheet-close-icon {
font-size: 32rpx;
color: rgba(255,200,120,0.4);
}
.comment-input-row {
.share-options {
display: flex;
align-items: center;
gap: 16rpx;
padding: 20rpx 32rpx;
border-bottom: 1rpx solid rgba(255,200,120,0.08);
justify-content: center;
gap: 64rpx;
margin-bottom: 40rpx;
}
.comment-input {
flex: 1;
background: rgba(255,200,120,0.07);
border-radius: 40rpx;
padding: 16rpx 28rpx;
font-size: 28rpx;
color: rgba(255,240,210,0.9);
min-height: 0;
.share-option-btn {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
line-height: normal !important;
}
.send-btn {
background: #FF9D42;
border-radius: 32rpx;
padding: 14rpx 28rpx;
}
.send-btn.sending { opacity: 0.5; }
.send-text {
font-size: 26rpx;
font-weight: 700;
color: #FFF;
}
.comment-list-scroll {
flex: 1;
padding: 8rpx 0;
}
.comment-loading, .comment-empty {
.share-option-btn::after { border: none !important; }
.share-option {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80rpx 0;
gap: 16rpx;
}
.comment-loading-text, .comment-empty-text {
font-size: 26rpx;
color: rgba(255,200,120,0.3);
}
.comment-empty-icon { font-size: 60rpx; }
.comment-item {
display: flex;
align-items: flex-start;
gap: 20rpx;
padding: 24rpx 32rpx;
border-bottom: 1rpx solid rgba(255,200,120,0.05);
}
.comment-avatar {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: rgba(255,157,66,0.25);
.share-opt-icon {
width: 100rpx;
height: 100rpx;
border-radius: 28rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.comment-avatar-text {
font-size: 28rpx;
color: #FF9D42;
font-weight: 700;
}
.comment-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 6rpx;
}
.comment-author {
font-size: 24rpx;
font-weight: 600;
color: rgba(255,200,120,0.6);
}
.comment-text {
font-size: 28rpx;
color: rgba(255,240,210,0.85);
line-height: 1.6;
}
.comment-time {
.share-opt-emoji { font-size: 44rpx; }
.share-opt-friend { background: rgba(7, 193, 96, 0.15); }
.share-opt-moment { background: rgba(255, 157, 66, 0.15); }
.share-opt-label {
font-size: 22rpx;
color: rgba(255,200,120,0.3);
color: #666666;
}
.comment-del {
padding: 8rpx;
.share-cancel {
text-align: center;
font-size: 28rpx;
color: #999999;
padding: 20rpx 0;
border-top: 1rpx solid #EEEEEE;
}
/* ── 分享图标（顶部栏） ── */
.top-share-icon {
font-size: 36rpx;
color: #333333;
}
.comment-del-icon { font-size: 32rpx; }