feat: 首页旅游卡推广卡片优化

- 价格区: 原价删除线 + 立省3600+黄色大字
- 权益文案拆两行: 42家景区全年免首道门票 + 景区明细
- 核心权益标签: 单次最高可省228元 | 单景区全年可免6次
- 信任文案: 已售1.2万+ | 萍乡文旅官方联名卡
- CTA: 立即抢购|专属特惠 + 橙色阴影 + 缩放动效
- 徽章: 爱上萍乡小程序专属"
This commit is contained in:
jacobxu666
2026-06-25 13:12:20 +08:00
parent e3628369a1
commit f8d5b686c4
+40 -13
View File
@@ -54,7 +54,7 @@
/> />
<view class="promo-overlay" /> <view class="promo-overlay" />
<view class="promo-content"> <view class="promo-content">
<view class="promo-badge">大学生·市民专属</view> <view class="promo-badge">爱上萍乡小程序专属</view>
<text class="promo-name">超级玩家卡</text> <text class="promo-name">超级玩家卡</text>
<view class="promo-price-row"> <view class="promo-price-row">
<view class="promo-price-block"> <view class="promo-price-block">
@@ -62,15 +62,18 @@
<text class="promo-price">198</text> <text class="promo-price">198</text>
</view> </view>
<view class="promo-value-block"> <view class="promo-value-block">
<text class="promo-value-label">景区总价值</text>
<text class="promo-value">¥3800+</text> <text class="promo-value">¥3800+</text>
<text class="promo-save">立省3600+</text>
</view> </view>
</view> </view>
<text class="promo-desc">40家景区免门票 · 武功山·方特·韶山·滴水洞</text> <text class="promo-desc">42家景区全年免首道门票</text>
<text class="promo-desc-sub">含武功山/君澜温泉/方特/韶山,法定节假日通用</text>
<text class="promo-highlight">单次最高可省228元 | 单景区全年可免6次</text>
<view class="promo-cta"> <view class="promo-cta">
<text class="cta-label">立即抢购</text> <text class="cta-label">立即抢购|专属特惠</text>
<view class="cta-arrow" /> <view class="cta-arrow" />
</view> </view>
<text class="promo-trust">已售1.2万+ | 萍乡文旅官方联名卡</text>
</view> </view>
</view> </view>
</view> </view>
@@ -422,12 +425,6 @@ function goMore() {
padding-bottom: $spacing-2; padding-bottom: $spacing-2;
} }
.promo-value-label {
font-size: $font-size-xs;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 4rpx;
}
.promo-value { .promo-value {
font-size: $font-size-xl; font-size: $font-size-xl;
color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.45);
@@ -435,12 +432,34 @@ function goMore() {
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
} }
.promo-save {
font-size: $font-size-2xl;
color: $uv-warning;
font-weight: $font-weight-bold;
letter-spacing: 2rpx;
}
.promo-desc { .promo-desc {
font-size: $font-size-base; font-size: $font-size-base;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.85);
display: block;
margin-bottom: $spacing-1;
line-height: $line-height-relaxed;
}
.promo-desc-sub {
font-size: $font-size-sm;
color: rgba(255, 255, 255, 0.55);
display: block;
margin-bottom: $spacing-2;
}
.promo-highlight {
font-size: $font-size-sm;
color: rgba(255, 255, 255, 0.6);
display: block; display: block;
margin-bottom: $spacing-4; margin-bottom: $spacing-4;
line-height: $line-height-relaxed; letter-spacing: 2rpx;
} }
.promo-cta { .promo-cta {
@@ -452,10 +471,11 @@ function goMore() {
padding: $spacing-2 $spacing-8; padding: $spacing-2 $spacing-8;
border-radius: $radius-full; border-radius: $radius-full;
background: $uv-warning; background: $uv-warning;
box-shadow: 0 8rpx 24rpx rgba(249, 174, 61, 0.4);
transition: transform $transition-fast; transition: transform $transition-fast;
&:active { &:active {
transform: scale(0.96); transform: scale(0.95);
} }
.cta-label { .cta-label {
@@ -473,6 +493,13 @@ function goMore() {
} }
} }
.promo-trust {
font-size: $font-size-xs;
color: rgba(255, 255, 255, 0.35);
display: block;
margin-top: $spacing-3;
}
/* ============================================ /* ============================================
Spots section Spots section
============================================ */ ============================================ */