feat: 样式调整

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
+6 -6
View File
@@ -23,7 +23,7 @@
<view class="plan-top">
<text class="plan-name">包月</text>
<view class="plan-badge" wx:if="{{selectedPlan === 'monthly'}}">
<t-icon name="check-circle-filled" size="36rpx" color="#FF9D42" />
<t-icon name="check-circle-filled" size="36rpx" color="#FF9E6D" />
</view>
</view>
<text class="plan-price">¥{{monthlyPrice}}</text>
@@ -41,7 +41,7 @@
<text class="plan-name">包季</text>
<t-tag wx:if="{{quarterlyPrice > 0 && monthlyPrice > 0}}" size="small" variant="filled" theme="success">省{{_quarterlySaving}}元</t-tag>
<view class="plan-badge" wx:if="{{selectedPlan === 'quarterly'}}">
<t-icon name="check-circle-filled" size="36rpx" color="#FF9D42" />
<t-icon name="check-circle-filled" size="36rpx" color="#FF9E6D" />
</view>
</view>
<text class="plan-price">¥{{quarterlyPrice}}</text>
@@ -60,7 +60,7 @@
<text class="plan-name">包年</text>
<t-tag wx:if="{{annualPrice > 0 && monthlyPrice > 0}}" size="small" variant="filled" theme="success">省{{_annualSaving}}元</t-tag>
<view class="plan-badge" wx:if="{{selectedPlan === 'annual'}}">
<t-icon name="check-circle-filled" size="36rpx" color="#FF9D42" />
<t-icon name="check-circle-filled" size="36rpx" color="#FF9E6D" />
</view>
</view>
<text class="plan-price">¥{{annualPrice}}</text>
@@ -71,15 +71,15 @@
<!-- 权益说明 -->
<view class="benefits">
<view class="benefit-item">
<t-icon name="check" size="28rpx" color="#FF9D42" />
<t-icon name="check" size="28rpx" color="#FF9E6D" />
<text>订阅后可无限收听该频道所有节目</text>
</view>
<view class="benefit-item">
<t-icon name="check" size="28rpx" color="#FF9D42" />
<t-icon name="check" size="28rpx" color="#FF9E6D" />
<text>后台播放,边听边做其他事</text>
</view>
<view class="benefit-item">
<t-icon name="check" size="28rpx" color="#FF9D42" />
<t-icon name="check" size="28rpx" color="#FF9E6D" />
<text>新节目第一时间推送通知</text>
</view>
</view>
+5 -5
View File
@@ -9,7 +9,7 @@
/* 顶部频道卡片 */
.channel-card {
background: linear-gradient(135deg, #FF9D42, #FF7832);
background: linear-gradient(135deg, #FF9E6D, #FF7832);
padding: 60rpx 40rpx 48rpx;
display: flex;
flex-direction: column;
@@ -54,21 +54,21 @@
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}
.plan-card.selected {
border-color: #FF9D42;
border-color: #FF9E6D;
background: #FFFAF5;
}
.plan-card.popular {
border-color: #FFD580;
}
.plan-card.popular.selected {
border-color: #FF9D42;
border-color: #FF9E6D;
}
/* 最受欢迎标签 */
.plan-hot-tag {
position: absolute;
top: -20rpx;
left: 36rpx;
background: linear-gradient(135deg, #FF9D42, #FF7832);
background: linear-gradient(135deg, #FF9E6D, #FF7832);
color: #FFF;
font-size: 20rpx;
font-weight: 700;
@@ -136,7 +136,7 @@
.pay-label { font-size: 22rpx; color: #999; display: block; }
.pay-price { font-size: 44rpx; font-weight: 800; color: #FF7832; line-height: 1; }
.pay-btn {
background: linear-gradient(135deg, #FF9D42, #FF7832);
background: linear-gradient(135deg, #FF9E6D, #FF7832);
color: #FFF;
font-size: 30rpx;
font-weight: 700;