feat: 样式调整
This commit is contained in:
Blizzard
+99
-32
@@ -23,7 +23,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80rpx;
|
||||
background: #FFFAF5;
|
||||
background: #FFFFFF;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
@@ -31,16 +31,16 @@
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
color: #2C1A08;
|
||||
color: #333333;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
/* ========== 顶部问候栏（吸顶） ========== */
|
||||
.meta-bar {
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(180deg, #FFFAF5 0%, #FFFFFF 100%);
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-page) 100%);
|
||||
padding: 28rpx 36rpx 22rpx;
|
||||
border-bottom: 1rpx solid #F0ECE8;
|
||||
border-bottom: 1rpx solid var(--color-border);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #5C3D1E;
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: 1rpx;
|
||||
margin-bottom: 12rpx;
|
||||
font-family: 'PingFang SC', -apple-system, sans-serif;
|
||||
@@ -88,22 +88,22 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
background: rgba(255, 157, 66, 0.08);
|
||||
background: var(--color-primary-light);
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
.loc-name-text {
|
||||
font-weight: 600;
|
||||
color: #8B6914;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.info-text {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
color: var(--color-text-placeholder);
|
||||
font-weight: 500;
|
||||
}
|
||||
.info-dot {
|
||||
font-size: 22rpx;
|
||||
color: #D5D0CA;
|
||||
color: var(--color-text-disabled);
|
||||
margin: 0 2rpx;
|
||||
}
|
||||
.weather-icon-sm { font-size: 22rpx; }
|
||||
@@ -123,8 +123,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
background: linear-gradient(135deg, #FFF8EE, #FFF3DC);
|
||||
border: 1rpx solid #FFDFA0;
|
||||
background: linear-gradient(135deg, #FFF9F0, #FFF3E0);
|
||||
border: 1rpx solid rgba(245, 158, 11, 0.3);
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
margin-bottom: 32rpx;
|
||||
@@ -139,20 +139,51 @@
|
||||
.vip-home-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #B07000;
|
||||
color: #B45309;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
}
|
||||
.vip-home-desc {
|
||||
font-size: 22rpx;
|
||||
color: #C09040;
|
||||
color: #D97706;
|
||||
}
|
||||
.vip-home-tag {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #FF9D42;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
/* ========== 左滑取消订阅 ========== */
|
||||
.swipe-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.swipe-action {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 180rpx;
|
||||
background: #FF4D4F;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
|
||||
}
|
||||
.swipe-action-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #FFF;
|
||||
}
|
||||
.swipe-card {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transition: transform 0.25s ease;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ========== Section Header ========== */
|
||||
.section-header {
|
||||
display: flex;
|
||||
@@ -177,12 +208,12 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dot-free {
|
||||
background: #00C853;
|
||||
background: var(--color-success);
|
||||
}
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 800;
|
||||
color: #1A1A1A;
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
.section-subtitle {
|
||||
@@ -328,6 +359,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
.icon-emoji { font-size: 36rpx; }
|
||||
.icon-initial { font-size: 36rpx; color: #FFF; font-weight: 800; }
|
||||
|
||||
.channel-info { flex: 1; min-width: 0; }
|
||||
.channel-name {
|
||||
@@ -351,22 +383,49 @@
|
||||
.play-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 18rpx 20rpx 16rpx;
|
||||
padding: 22rpx 18rpx 22rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #F7F7F7;
|
||||
background: #FFFFFF;
|
||||
border: 1rpx solid #F0F0F0;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
gap: 16rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.play-row:active { background: #EEEEEE; }
|
||||
.play-row:active { background: #FAFAFA; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); }
|
||||
.play-row.playing {
|
||||
background: linear-gradient(135deg, rgba(255, 157, 66, 0.08) 0%, rgba(255, 120, 50, 0.15) 100%);
|
||||
border: 1rpx solid rgba(255, 157, 66, 0.15);
|
||||
background: linear-gradient(135deg, rgba(255, 157, 66, 0.06) 0%, rgba(255, 120, 50, 0.12) 100%);
|
||||
border: 1rpx solid rgba(255, 157, 66, 0.2);
|
||||
box-shadow: 0 4rpx 20rpx rgba(255, 157, 66, 0.1);
|
||||
}
|
||||
|
||||
/* 播放行左侧装饰色条 */
|
||||
.play-row-accent {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 12rpx;
|
||||
bottom: 12rpx;
|
||||
width: 6rpx;
|
||||
border-radius: 0 6rpx 6rpx 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.play-row.playing .play-row-accent {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 左侧：音波 or 图标 */
|
||||
.play-left {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 扬声器图标圆形底板 */
|
||||
.play-left-circle {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -397,7 +456,7 @@
|
||||
}
|
||||
|
||||
/* 中间信息 */
|
||||
.play-info { flex: 1; padding-right: 12rpx; overflow: hidden; }
|
||||
.play-info { flex: 1; padding: 0 12rpx 0 4rpx; overflow: hidden; }
|
||||
.play-title {
|
||||
display: block;
|
||||
font-size: 27rpx;
|
||||
@@ -438,26 +497,33 @@
|
||||
}
|
||||
/* 按钮主体 */
|
||||
.play-btn {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ECECEC;
|
||||
background: #EEEEEE;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.25s ease;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.play-btn:active { transform: scale(0.88); }
|
||||
.play-btn.active {
|
||||
background: linear-gradient(135deg, #FF9D42 0%, #FF7832 100%);
|
||||
box-shadow: 0 8rpx 24rpx rgba(255, 120, 50, 0.4);
|
||||
background: linear-gradient(135deg, #FF9E6D 0%, #FF7832 100%);
|
||||
box-shadow: 0 8rpx 28rpx rgba(255, 120, 50, 0.45);
|
||||
}
|
||||
/* t-icon 已替代旧 .play-icon / .pause-bars */
|
||||
|
||||
/* 暂无节目 */
|
||||
.no-content { padding: 16rpx 12rpx; }
|
||||
.no-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 20rpx 18rpx;
|
||||
background: #FAFAFA;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx dashed #ECECEC;
|
||||
}
|
||||
.no-content-text { font-size: 23rpx; color: #CCCCCC; }
|
||||
|
||||
/* ========== 免费频道横向区 ========== */
|
||||
@@ -511,6 +577,7 @@
|
||||
}
|
||||
.free-cover { width: 100%; height: 100%; }
|
||||
.free-emoji { font-size: 48rpx; }
|
||||
.free-initial { font-size: 40rpx; color: #FFF; font-weight: 800; }
|
||||
.free-name {
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
|
||||
Reference in New Issue
Block a user