feat: 样式调整
This commit is contained in:
Blizzard
+149
-38
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user