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