feat: 首页旅游卡推广卡片优化
- 价格区: 原价删除线 + 立省3600+黄色大字 - 权益文案拆两行: 42家景区全年免首道门票 + 景区明细 - 核心权益标签: 单次最高可省228元 | 单景区全年可免6次 - 信任文案: 已售1.2万+ | 萍乡文旅官方联名卡 - CTA: 立即抢购|专属特惠 + 橙色阴影 + 缩放动效 - 徽章: 爱上萍乡小程序专属"
This commit is contained in:
+40
-13
@@ -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
|
||||||
============================================ */
|
============================================ */
|
||||||
|
|||||||
Reference in New Issue
Block a user