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/history/index.js
+154 -29
View File
@@ -7,12 +7,16 @@ const util = require('../../utils/util')
Page({
data: {
tab: 'history', // 'history' | 'favorite'
tab: 'history',
historyList: [],
isPlaying: false,
loading: true
loading: true,
channelFilters: [],
selectedChannel: '全部'
},
_allHistoryList: [],
onShow() {
const self = this
const gd = app.globalData
@@ -40,15 +44,18 @@ Page({
setTab(e) {
const tab = e.currentTarget.dataset.val
if (tab === this.data.tab) return
this.setData({ tab, historyList: [], loading: true })
this.setData({ tab, historyList: [], loading: true, channelFilters: [], selectedChannel: '全部' })
this._allHistoryList = []
this._refresh()
},
_refresh() {
if (this.data.tab === 'history') {
this._loadHistory()
} else {
} else if (this.data.tab === 'favorite') {
this._loadFavorites()
} else {
this._loadLikes()
}
},
@@ -59,31 +66,32 @@ Page({
api.getHistoryList({ current: 1, pageSize: 30 }).then(function (res) {
if (res.code === 200 && res.data) {
var list = (res.data.list || []).map(function (item) {
// program 嵌套在 item.program 下
var program = item.program || {}
// channel 可能为 null，channel cover 在 program.cover
var channel = program.channel || {}
var channel = program.channel || null
// 历史用 item.duration（记录收听时长），优先级高于 program.duration
var dur = item.duration || program.duration || 0
var bgColors = ['#FFE8CC', '#FFF0E0', '#FFE4D6', '#FFF3DC', '#FFE9F0']
var cid = program.channelId || ''
var colorIdx = cid ? (cid.charCodeAt(cid.length - 1) % bgColors.length) : 0
return {
// 播放所需字段
id: program.id,
title: program.title || '未知节目',
channelId: program.channelId || '',
content: program.content || '',
audioId: program.audioId || '',
// 用历史记录的 duration（program.duration 可能是 0）
duration: item.duration || program.duration || 0,
// 显示字段
_domainName: channel.name || '',
_icon: program.cover || channel.cover || '📻',
_bgColor: '#FFE8CC',
duration: dur,
_domainName: channel ? (channel.name || '') : '',
_icon: program.cover || (channel && channel.cover) || '📻',
_bgColor: bgColors[colorIdx],
_friendlyDate: util.getFriendlyDate(item.createdAtStr ? item.createdAtStr.substring(0, 10) : ''),
durationText: util.formatTime(item.duration || 0),
// 播放进度
durationText: dur > 0 ? util.formatTime(dur) : '',
_progress: item.progress || 0,
_isThisPlaying: gd.activeContent && gd.activeContent.id === program.id
}
})
self.setData({ historyList: list, isPlaying: gd.isPlaying, loading: false })
self._allHistoryList = list
self._extractChannelFilters(list)
} else {
self.setData({ historyList: [], loading: false })
}
@@ -100,24 +108,35 @@ Page({
api.getFavoriteList({ current: 1, pageSize: 30 }).then(function (res) {
if (res.code === 200 && res.data) {
var list = (res.data.list || []).map(function (item) {
var program = item.program || item
var channel = program.channel || {}
// program 嵌套在 item.program 下，channel 可能为 null
var program = item.program || {}
var channel = program.channel || null
var dur = program.duration || 0
// 根据 channelId 末位生成固定暖色，增加视觉区分
var bgColors = ['#FFE8CC', '#FFF0E0', '#FFE4D6', '#FFF3DC', '#FFE9F0']
var cid = program.channelId || ''
var colorIdx = cid ? (cid.charCodeAt(cid.length - 1) % bgColors.length) : 0
return {
id: program.id,
title: program.title || '未知节目',
channelId: program.channelId || '',
content: program.content || '',
audioId: program.audioId || '',
duration: program.duration || 0,
_domainName: channel.name || '',
_icon: program.cover || channel.cover || '📻',
_bgColor: '#FFE8CC',
duration: dur,
// channel 为 null 时不显示频道名
_domainName: channel ? (channel.name || '') : '',
_icon: program.cover || (channel && channel.cover) || '📻',
_bgColor: bgColors[colorIdx],
// 收藏时间用 item.createdAtStr
_friendlyDate: util.getFriendlyDate(item.createdAtStr ? item.createdAtStr.substring(0, 10) : ''),
durationText: util.formatTime(program.duration || 0),
// duration 为 0 则不显示时长
durationText: dur > 0 ? util.formatTime(dur) : '',
_isThisPlaying: gd.activeContent && gd.activeContent.id === program.id
}
})
self.setData({ historyList: list, isPlaying: gd.isPlaying, loading: false })
self._allHistoryList = list
self._extractChannelFilters(list)
} else {
self.setData({ historyList: [], loading: false })
}
@@ -127,6 +146,53 @@ Page({
})
},
_loadLikes() {
const self = this
const gd = app.globalData
api.getLikeList({ current: 1, pageSize: 30 }).then(function (res) {
if (res.code === 200 && res.data) {
var list = (res.data.list || []).map(function (item) {
// RadioLike → program → channel (可能为 null)
var program = item.program || {}
var channel = program.channel || null
// duration 为 0 时不显示时长
var dur = program.duration || 0
// 从 channelId 生成一个固定暖色背景，增加视觉区分
var bgColors = ['#FFE8CC', '#FFF0E0', '#FFE4D6', '#FFF3DC', '#FFE9F0']
var cid = program.channelId || ''
var colorIdx = cid ? (cid.charCodeAt(cid.length - 1) % bgColors.length) : 0
return {
id: program.id,
title: program.title || '未知节目',
channelId: program.channelId || '',
content: program.content || '',
audioId: program.audioId || '',
duration: dur,
// channel 为 null 时频道名不显示
_domainName: channel ? (channel.name || '') : '',
_icon: program.cover || (channel && channel.cover) || '📻',
_bgColor: bgColors[colorIdx],
// 显示"点赞时间"，用 item.createdAtStr（点赞时间）
_friendlyDate: util.getFriendlyDate(item.createdAtStr ? item.createdAtStr.substring(0, 10) : ''),
// duration 为 0 则不显示时长，避免展示 "00:00"
durationText: dur > 0 ? util.formatTime(dur) : '',
_isLiked: true,
_isThisPlaying: gd.activeContent && gd.activeContent.id === program.id
}
})
self.setData({ historyList: list, isPlaying: gd.isPlaying, loading: false })
self._allHistoryList = list
self._extractChannelFilters(list)
} else {
self.setData({ historyList: [], loading: false })
}
}).catch(function (err) {
console.error('[History] 加载点赞失败:', err)
self.setData({ loading: false })
})
},
_updatePlayState() {
var gd = app.globalData
var list = this.data.historyList.map(function (item) {
@@ -137,6 +203,32 @@ Page({
this.setData({ historyList: list, isPlaying: gd.isPlaying })
},
_extractChannelFilters(list) {
var names = {}
list.forEach(function (item) {
if (item._domainName) names[item._domainName] = true
})
var filters = ['全部'].concat(Object.keys(names).sort())
this.setData({ channelFilters: filters })
},
onChannelFilter(e) {
var name = e.currentTarget.dataset.name
this.setData({ selectedChannel: name })
this._applyChannelFilter(name)
},
_applyChannelFilter(name) {
if (name === '全部') {
this.setData({ historyList: this._allHistoryList })
} else {
var filtered = this._allHistoryList.filter(function (item) {
return item._domainName === name
})
this.setData({ historyList: filtered })
}
},
onPlay(e) {
const id = e.currentTarget.dataset.id
const gd = app.globalData
@@ -175,8 +267,30 @@ Page({
const id = e.currentTarget.dataset.id
const tab = this.data.tab
const self = this
const label = tab === 'history' ? '历史' : '收藏'
// 赞过 tab 点击爱心可取消点赞
if (tab === 'like') {
wx.showModal({
title: '取消点赞',
content: '确定取消对这个节目的点赞吗？',
success(res) {
if (!res.confirm) return
api.toggleLike(id).then(function (r) {
if (r.code === 200) {
var list = self.data.historyList.filter(function (item) { return item.id !== id })
self.setData({ historyList: list })
} else {
wx.showToast({ title: r.msg || '操作失败', icon: 'none' })
}
}).catch(function () {
wx.showToast({ title: '网络异常', icon: 'none' })
})
}
})
return
}
const label = tab === 'history' ? '历史' : '收藏'
wx.showModal({
title: '删除' + label,
content: '确定删除这条' + label + '吗？',
@@ -188,7 +302,6 @@ Page({
fn.then(function (r) {
if (r.code === 200) {
// 本地即时移除
var list = self.data.historyList.filter(function (item) { return item.id !== id })
self.setData({ historyList: list })
} else {
@@ -204,15 +317,27 @@ Page({
onClear() {
const self = this
const tab = this.data.tab
const label = tab === 'history' ? '收听历史' : '全部收藏'
var label = ''
var fn = null
if (tab === 'history') {
label = '收听历史'
fn = api.deleteAllHistory()
} else if (tab === 'favorite') {
label = '全部收藏'
fn = api.removeAllFavorites()
} else if (tab === 'like') {
label = '全部点赞'
fn = api.removeAllLikes()
}
if (!fn) return
wx.showModal({
title: '清空' + label,
content: '确定要清空所有' + label + '吗？',
success(res) {
if (!res.confirm) return
const fn = tab === 'history'
? api.deleteAllHistory()
: api.removeAllFavorites()
fn.then(function (r) {
if (r.code === 200) {
self.setData({ historyList: [] })
pages/history/index.wxml
+89 -25
View File
@@ -1,4 +1,5 @@
<!-- 收听历史 / 收藏 -->
<page-meta page-style="overflow: hidden;" />
<view class="history-page">
<!-- Tab 切换 + 清空 -->
@@ -12,7 +13,12 @@
<text class="tab-text">收藏</text>
<view class="tab-underline"></view>
</view>
<view class="tab-item {{tab === 'like' ? 'active' : ''}}" bindtap="setTab" data-val="like">
<text class="tab-text">赞过</text>
<view class="tab-underline tab-underline-like"></view>
</view>
</view>
<!-- 清空按钮 -->
<view class="clear-btn tap-active" bindtap="onClear" wx:if="{{historyList.length > 0}}">
<view class="icon-trash">
<view class="trash-handle"></view>
@@ -27,48 +33,81 @@
</view>
</view>
<!-- 列表区 -->
<view class="list-area">
<!-- 频道筛选 -->
<scroll-view wx:if="{{channelFilters.length > 1}}" scroll-x enhanced show-scrollbar="{{false}}" class="channel-filter-bar">
<view
wx:for="{{channelFilters}}"
wx:key="*this"
class="ch-filter-tag {{selectedChannel === item ? 'active' : ''}}"
bindtap="onChannelFilter"
data-name="{{item}}"
>
<text>{{item}}</text>
</view>
</scroll-view>
<!-- 加载骨架 -->
<view wx:if="{{loading}}" class="skeleton-wrap">
<view wx:for="{{[1,2,3]}}" wx:key="*this" class="skeleton-item">
<view class="sk-icon"></view>
<view class="sk-lines">
<view class="sk-line sk-line-short"></view>
<view class="sk-line sk-line-long"></view>
<view class="sk-line sk-line-mid"></view>
<!-- 列表区 -->
<scroll-view
scroll-y
enhanced
show-scrollbar="{{false}}"
class="list-scroll"
>
<view class="list-area">
<!-- 加载骨架 -->
<view wx:if="{{loading}}" class="skeleton-wrap">
<view wx:for="{{[1,2,3]}}" wx:key="*this" class="skeleton-item">
<view class="sk-icon"></view>
<view class="sk-lines">
<view class="sk-line sk-line-short"></view>
<view class="sk-line sk-line-long"></view>
<view class="sk-line sk-line-mid"></view>
</view>
</view>
</view>
</view>
<!-- 历史空状态 -->
<view wx:elif="{{historyList.length === 0 && tab === 'history'}}" class="empty-state">
<text class="empty-icon">🎧</text>
<text class="empty-title">还没有收听记录</text>
<text class="empty-desc">去发现频道，开始你的第一段收听</text>
<view class="empty-icon-wrap">
<view class="empty-halo"></view>
<text class="empty-icon">🎧</text>
</view>
<text class="empty-title">拓展专属听觉边界</text>
<text class="empty-desc">海量精彩节目频道，好声音都在这里</text>
<view class="empty-guide-badge">
<text class="guide-dot"></text>
<text class="guide-text">去发现页探索</text>
</view>
<view class="empty-actions">
<view class="btn-primary tap-active" bindtap="goDiscover">
<text class="btn-text">去发现频道</text>
<text class="btn-text">开始探索</text>
</view>
<view class="btn-ghost tap-active" bindtap="goHome">
<text class="btn-ghost-text">回到首页</text>
<text class="btn-ghost-text">回到主页</text>
</view>
</view>
</view>
<!-- 收藏空状态 -->
<view wx:elif="{{historyList.length === 0 && tab === 'favorite'}}" class="empty-state">
<text class="empty-icon">🔖</text>
<text class="empty-title">还没有收藏内容</text>
<text class="empty-desc">听到喜欢的节目，点击 ♡ 收藏它</text>
<view class="empty-icon-wrap">
<view class="empty-halo favored-halo"></view>
<text class="empty-icon">🔖</text>
</view>
<text class="empty-title">打造个人专属收藏</text>
<text class="empty-desc">好声音不怕遗忘，收集你的听觉库</text>
<view class="empty-guide-badge warning-badge">
<text class="guide-icon">🔖</text>
<text class="guide-text">播放页点击书签图标，即可加入</text>
</view>
<view class="empty-actions">
<view class="btn-primary tap-active" bindtap="goDiscover">
<text class="btn-text">订阅感兴趣的频道</text>
<text class="btn-text">去发现好声音</text>
</view>
</view>
<!-- 推荐订阅提示 -->
<view class="upsell-card">
<view class="upsell-card empty-upsell">
<text class="upsell-icon">👑</text>
<view class="upsell-body">
<text class="upsell-title">开通会员</text>
@@ -80,6 +119,25 @@
</view>
</view>
<!-- 赞过空状态 -->
<view wx:elif="{{historyList.length === 0 && tab === 'like'}}" class="empty-state">
<view class="empty-icon-wrap">
<view class="empty-halo liked-halo"></view>
<text class="empty-icon">♥️</text>
</view>
<text class="empty-title">留下与声音共鸣的印记</text>
<text class="empty-desc">不吝啬你的赞扬，这是最大的鼓励</text>
<view class="empty-guide-badge danger-badge">
<text class="guide-icon">♥</text>
<text class="guide-text">播放页点击心形按钮，点亮爱心</text>
</view>
<view class="empty-actions">
<view class="btn-primary tap-active" bindtap="goDiscover">
<text class="btn-text">去寻找心动</text>
</view>
</view>
</view>
<!-- 条目列表 -->
<view
wx:for="{{historyList}}"
@@ -119,9 +177,14 @@
</view>
</view>
<!-- 删除按钮 -->
<!-- 删除/取消点赞按钮 -->
<view class="h-del tap-active" catchtap="onDeleteItem" data-id="{{item.id}}">
<view class="icon-trash icon-trash-sm">
<!-- 赞过 tab 显示心形图标 -->
<view wx:if="{{tab === 'like'}}" class="like-del-btn">
<text class="like-heart-icon">♥</text>
</view>
<!-- 其他 tab 显示垂笾桶 -->
<view wx:else class="icon-trash icon-trash-sm">
<view class="trash-handle"></view>
<view class="trash-lid-bar"></view>
<view class="trash-body">
@@ -133,8 +196,9 @@
</view>
</view>
</view>
<view style="height: 200rpx;"></view>
</view> <!-- /list-area -->
<view class="player-bottom-spacer"></view>
</scroll-view>
<global-player />
</view>
pages/history/index.wxss
+149 -38
View File
@@ -1,8 +1,42 @@
/* 收听历史 / 收藏 */
::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.history-page {
min-height: 100vh;
background: #F7F3EE;
display: flex;
flex-direction: column;
height: 100vh;
background: var(--color-bg-page);
overflow: hidden;
}
/* 列表滚动区域 */
.list-scroll {
flex: 1;
overflow: hidden;
}
/* 频道筛选栏 */
.channel-filter-bar {
flex-shrink: 0;
white-space: nowrap;
padding: 12rpx 32rpx;
background: #FFF;
border-bottom: 1rpx solid var(--color-border);
}
.ch-filter-tag {
display: inline-block;
padding: 8rpx 24rpx;
margin-right: 12rpx;
border-radius: 999rpx;
font-size: 24rpx;
font-weight: 500;
color: #999;
background: #F5F5F5;
transition: all 0.2s;
}
.ch-filter-tag.active {
color: #FFF;
background: var(--color-primary);
}
/* ── Tab 头部 ── */
@@ -12,7 +46,7 @@
justify-content: space-between;
padding: 0 32rpx;
background: #FFFFFF;
border-bottom: 1rpx solid #F0EAE2;
border-bottom: 1rpx solid var(--color-border);
}
.filter-tabs {
display: flex;
@@ -34,18 +68,36 @@
transition: color 0.2s;
}
.tab-item.active .tab-text {
color: #2C1A08;
color: var(--color-primary-dark);
}
.tab-underline {
height: 4rpx;
width: 0;
background: #FF9D42;
background: var(--color-primary);
border-radius: 2rpx;
transition: width 0.25s;
}
.tab-item.active .tab-underline {
width: 100%;
}
/* 赞过 tab 用粉红色下划线 */
.tab-item.active .tab-underline-like {
background: #FF4D6D;
}
/* 赞过 tab 取消点赞心形按钮 */
.like-del-btn {
width: 52rpx;
height: 52rpx;
display: flex;
align-items: center;
justify-content: center;
}
.like-heart-icon {
font-size: 36rpx;
color: #FF4D6D;
line-height: 1;
}
/* 清空按钮 */
.clear-btn {
@@ -79,7 +131,7 @@
width: 88rpx;
height: 88rpx;
border-radius: 20rpx;
background: linear-gradient(90deg, #F0EAE2 0%, #E8DFD5 50%, #F0EAE2 100%);
background: linear-gradient(90deg, #EEEEEE 0%, #E8E8E8 50%, #EEEEEE 100%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
flex-shrink: 0;
@@ -92,7 +144,7 @@
}
.sk-line {
height: 18rpx;
background: linear-gradient(90deg, #F0EAE2 0%, #E8DFD5 50%, #F0EAE2 100%);
background: linear-gradient(90deg, #EEEEEE 0%, #E8E8E8 50%, #EEEEEE 100%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
border-radius: 9rpx;
@@ -105,32 +157,86 @@
100% { background-position: -200% 0; }
}
/* ── 空状态 ── */
/* ── 空状态优化 ── */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 80rpx 48rpx 48rpx;
padding: 100rpx 48rpx 64rpx;
animation: fade-up 0.4s ease-out;
}
@keyframes fade-up {
0% { opacity: 0; transform: translateY(20rpx); }
100% { opacity: 1; transform: translateY(0); }
}
.empty-icon-wrap {
position: relative;
width: 200rpx;
height: 200rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
}
.empty-halo {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,157,66,0.15) 0%, transparent 60%);
animation: pulse-halo 2.5s infinite alternate ease-in-out;
}
.favored-halo { background: radial-gradient(circle, rgba(103,194,58,0.15) 0%, transparent 60%); }
.liked-halo { background: radial-gradient(circle, rgba(255,77,109,0.15) 0%, transparent 60%); }
@keyframes pulse-halo {
0% { transform: scale(0.9); opacity: 0.6; }
100% { transform: scale(1.3); opacity: 1; }
}
.empty-icon {
font-size: 96rpx;
margin-bottom: 32rpx;
filter: drop-shadow(0 8rpx 16rpx rgba(255,157,66,0.2));
font-size: 100rpx;
position: relative;
z-index: 2;
filter: drop-shadow(0 12rpx 20rpx rgba(0,0,0,0.08));
}
.empty-title {
font-size: 36rpx;
font-weight: 700;
color: #2C1A08;
font-size: 38rpx;
font-weight: 800;
color: var(--color-text-primary);
margin-bottom: 16rpx;
font-family: 'PingFang SC', sans-serif;
letter-spacing: 1rpx;
}
.empty-desc {
font-size: 26rpx;
color: #B0A090;
color: var(--color-text-secondary);
text-align: center;
line-height: 1.6;
margin-bottom: 48rpx;
margin-bottom: 32rpx;
}
.empty-guide-badge {
display: flex;
align-items: center;
gap: 12rpx;
padding: 12rpx 32rpx;
background: rgba(255,157,66,0.1);
border-radius: 40rpx;
margin-bottom: 64rpx;
}
.guide-dot { width: 10rpx; height: 10rpx; border-radius: 50%; background: #FF9E6D; }
.guide-icon { font-size: 24rpx; margin-top: -2rpx; color: rgba(0,0,0,0.4); }
.guide-text {
font-size: 24rpx;
color: var(--color-primary);
font-weight: 500;
}
.warning-badge { background: rgba(5,150,105,0.08); }
.warning-badge .guide-text { color: #059669; }
.danger-badge { background: rgba(255,77,109,0.08); }
.danger-badge .guide-text { color: #E11D48; }
.empty-actions {
display: flex;
flex-direction: column;
@@ -138,8 +244,13 @@
width: 100%;
max-width: 480rpx;
}
.empty-upsell {
margin-top: 48rpx;
box-sizing: border-box;
}
.btn-primary {
background: linear-gradient(135deg, #FF9D42, #E07020);
background: linear-gradient(135deg, var(--color-primary), #FF5722);
border-radius: 48rpx;
padding: 28rpx 0;
display: flex;
@@ -154,7 +265,7 @@
letter-spacing: 1rpx;
}
.btn-ghost {
border: 2rpx solid #E8DFD5;
border: 2rpx solid var(--color-border);
border-radius: 48rpx;
padding: 26rpx 0;
display: flex;
@@ -165,7 +276,7 @@
.btn-ghost-text {
font-size: 28rpx;
font-weight: 600;
color: #8C7B6A;
color: var(--color-text-secondary);
}
/* VIP upsell 卡片 */
@@ -192,14 +303,14 @@
.upsell-title {
font-size: 28rpx;
font-weight: 700;
color: #C07000;
color: #B45309;
}
.upsell-desc {
font-size: 22rpx;
color: #C09040;
color: #D97706;
}
.upsell-btn {
background: #FF9D42;
background: #FF9E6D;
border-radius: 28rpx;
padding: 12rpx 28rpx;
}
@@ -217,10 +328,10 @@
margin-bottom: 16rpx;
background: #FFFFFF;
border-radius: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(44,26,8,0.04);
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.history-item:active {
box-shadow: 0 4rpx 20rpx rgba(44,26,8,0.08);
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
transform: scale(0.99);
}
@@ -244,7 +355,7 @@
display: block;
font-size: 20rpx;
font-weight: 700;
color: #FF9D42;
color: #FF9E6D;
letter-spacing: 1rpx;
margin-bottom: 6rpx;
text-transform: uppercase;
@@ -253,13 +364,13 @@
display: block;
font-size: 28rpx;
font-weight: 700;
color: #2C1A08;
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: 'PingFang SC', sans-serif;
}
.h-title.text-primary { color: #FF9D42; }
.h-title.text-primary { color: #FF9E6D; }
.h-meta-row {
display: flex;
align-items: center;
@@ -269,21 +380,21 @@
.h-meta {
display: inline;
font-size: 22rpx;
color: #C8BAAA;
color: var(--color-text-placeholder);
font-weight: 500;
}
/* 播放进度条 */
.h-progress-wrap {
width: 100%;
height: 4rpx;
background: #F0EAE2;
background: var(--color-border);
border-radius: 2rpx;
margin-top: 12rpx;
overflow: hidden;
}
.h-progress-bar {
height: 100%;
background: linear-gradient(90deg, #FF9D42, #E07020);
background: linear-gradient(90deg, var(--color-primary), #FF5722);
border-radius: 2rpx;
max-width: 100%;
}
@@ -305,7 +416,7 @@
.bar {
width: 6rpx;
border-radius: 4rpx;
background: #FF9D42;
background: #FF9E6D;
animation: bounce 0.6s ease-in-out infinite;
}
.bar-1 { height: 24rpx; animation-delay: 0s; }
@@ -320,7 +431,7 @@
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background: #FFF4E8;
background: #FFF7ED;
display: flex;
align-items: center;
justify-content: center;
@@ -328,7 +439,7 @@
}
.play-mini-icon {
font-size: 22rpx;
color: #FF9D42;
color: #FF9E6D;
padding-left: 4rpx;
}
@@ -393,10 +504,10 @@
.icon-trash-sm .trash-handle,
.icon-trash-sm .trash-lid-bar,
.icon-trash-sm .trash-stripe {
border-color: #D0C8C0;
background: #D0C8C0;
border-color: #CCCCCC;
background: #CCCCCC;
}
.icon-trash-sm .trash-body {
border-color: #D0C8C0;
border-color: #CCCCCC;
background: transparent;
}