diff --git a/package1/order/orderConfirm.vue b/package1/order/orderConfirm.vue
index f36566b..3670997 100644
--- a/package1/order/orderConfirm.vue
+++ b/package1/order/orderConfirm.vue
@@ -4,67 +4,90 @@
-
+
- 支付完成
-
-
-
-
-
-
-
+
+
+
+
+
+ 支付成功
+
+
+
+ 本次支付
+ ￥{{displayAmount}}
- 这一单安排好了
- 可以先逛逛校园里的其他小事，订单状态随时能回来查看
-
- 本次支付
-
- ￥
- {{displayAmount}}
+ 查看订单详情 →
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 半径里
+
+
-
- 查看订单详情
-
+
+ 感谢你的信任与支持！
+
+ 探索更多校园精彩生活
+
+ 发现好玩
+ 赚取福利
+ 结识同好
+
-
-
- 下单后的校园下一站
- 把常用功能放近一点，等单时随便看看
-
- 随便看看
+
+ ⌁
+ 发现更多精彩
+ ⌁
-
-
- {{item.icon}}
+
+ {{item.name}}
{{item.tag}}
+ 去看看 →
- {{item.name}}
- {{item.desc}}
-
- {{item.action}}
- ›
+
+
+
+
+
+
+
+
@@ -73,66 +96,60 @@
export default {
data() {
return {
- menuButtonInfo: { top: 44 },
+ statusBarHeight: 0,
+ navHeight: 64,
id:'',
groupId:'',
amount:0,
+ mascotImage: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f7227759d693497a8beab87ff437a875.png',
featureList: [{
key: 'delivery',
- name: '顺路赚点佣金',
- desc: '有空时接一单，把校园路程变成零花钱',
- tag: '兼职',
+ name: '自由赚佣金',
+ tag: '注册成为兼职',
icon: '赚',
- action: '去看看',
+ image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/c776da273db84bec8a5f363150f345c8.png',
tone: 'mint',
type: 'homeTab',
- tabIndex: 1,
- wide: true
+ tabIndex: 1
}, {
key: 'planet',
name: '白嫖星球',
- desc: '每天领星球券，看看今晚的小惊喜',
- tag: '每日',
+ tag: '每日抽现金',
icon: '星',
- action: '收星球券',
+ image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6e55b1c7829a46f18c6b2be6eefa4885.png',
tone: 'lime',
url: '/package5/planet/index'
}, {
key: 'adventure',
name: '学院排位赛',
- desc: '给学院冲榜，顺便看看今日排名奖励',
- tag: '排位',
+ tag: '每日排位挑战',
icon: '榜',
- action: '去冲榜',
+ image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/809f3c10f908480c9d65f0d487bce472.png',
tone: 'orange',
url: '/package5/planet/adventure'
}, {
key: 'ie',
- name: 'i/e 思想漂流',
- desc: '找个同频的人，聊聊今天的灵感和情绪',
- tag: '同频',
+ name: 'i/e思想漂流',
+ tag: '发现有趣灵魂',
icon: '聊',
- action: '漂一下',
+ image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/2be57f86cd594f4da93526b5813178f1.png',
tone: 'blue',
- url: '/package4/ieBrowser/index',
- wide: true
+ url: '/package4/ieBrowser/index'
}, {
key: 'release',
name: '校园新鲜事',
- desc: '看看大家在聊什么，也可以顺手找搭子',
- tag: '热榜',
+ tag: '找搭子一起玩',
icon: '圈',
- action: '看热议',
+ image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/4e0db9059a5c44c495c95e63aebcd84c.png',
tone: 'pink',
type: 'homeTab',
tabIndex: 2
}, {
key: 'postList',
name: '闲置二手',
- desc: '课本、数码、生活好物，逛逛同校鱼塘',
- tag: '鱼塘',
+ tag: '二手好物交易',
icon: '物',
- action: '淘一淘',
+ image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/ab0332105c894aeea5d8759cfd3b3f81.png',
tone: 'green',
type: 'homeTab',
tabIndex: 3
@@ -148,14 +165,27 @@
}
},
onLoad(option) {
+ this.setStatusBar()
this.id = option.id
this.groupId = option.groupId
this.amount = option.amount
},
onShow() {
- this.menuButtonInfo = uni.getMenuButtonBoundingClientRect ? uni.getMenuButtonBoundingClientRect() : { top: 44 }
+ this.setStatusBar()
},
methods: {
+ setStatusBar() {
+ try {
+ const systemInfo = uni.getSystemInfoSync ? uni.getSystemInfoSync() : {}
+ this.statusBarHeight = systemInfo.statusBarHeight || 0
+ const navContentHeight = uni.upx2px ? uni.upx2px(88) : 44
+ const navGap = uni.upx2px ? uni.upx2px(18) : 9
+ this.navHeight = this.statusBarHeight + navContentHeight + navGap
+ } catch (e) {
+ this.statusBarHeight = 0
+ this.navHeight = 64
+ }
+ },
getorder(){
uni.redirectTo({
url: '/package1/order/orderDetail?id=' + this.id + '&groupId=' + this.groupId
@@ -246,22 +276,25 @@
}
.nav-bar {
- position: relative;
- z-index: 2;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 20;
width: 100%;
+ height: 88rpx;
+ padding-left: 24rpx;
+ box-sizing: content-box;
display: flex;
align-items: center;
- justify-content: space-between;
- box-sizing: border-box;
- padding-left: 28rpx;
- padding-right: 28rpx;
- height: 168rpx;
+ background: rgba(243, 251, 247, .82);
+ backdrop-filter: blur(24rpx);
}
.back-btn{
- width: 70rpx;
- height: 70rpx;
- border-radius: 24rpx;
+ width: 64rpx;
+ height: 64rpx;
+ border-radius: 999rpx;
display: flex;
align-items: center;
justify-content: center;
@@ -277,32 +310,31 @@
}
.title-name{
+ position: absolute;
+ left: 160rpx;
+ right: 160rpx;
font-size: 34rpx;
font-weight: 700;
text-align: center;
letter-spacing: 2rpx;
}
- .nav-placeholder {
- width: 70rpx;
- height: 70rpx;
- }
-
.content{
position: relative;
z-index: 1;
- height: calc(100% - 168rpx);
+ width: 100%;
+ height: 100%;
box-sizing: border-box;
- padding: 10rpx 28rpx 44rpx;
+ padding: 8rpx 28rpx 34rpx;
}
.success-card {
position: relative;
overflow: hidden;
- padding: 42rpx 34rpx 34rpx;
- border-radius: 42rpx;
+ padding: 34rpx 30rpx 30rpx;
+ border-radius: 36rpx;
background: rgba(255, 255, 255, .86);
- box-shadow: 0 28rpx 80rpx rgba(36, 117, 89, .16);
+ box-shadow: 0 20rpx 54rpx rgba(36, 117, 89, .13);
border: 1rpx solid rgba(255, 255, 255, .9);
backdrop-filter: blur(18rpx);
animation: cardIn .42s ease-out both;
@@ -322,12 +354,12 @@
.success-mark {
position: relative;
- width: 136rpx;
- height: 136rpx;
- margin: 0 auto 24rpx;
+ width: 110rpx;
+ height: 110rpx;
+ margin: 0 auto 20rpx;
border-radius: 50%;
background: linear-gradient(135deg, #d8ff83, #9fffe6);
- box-shadow: 0 18rpx 46rpx rgba(56, 197, 143, .26);
+ box-shadow: 0 14rpx 34rpx rgba(56, 197, 143, .22);
display: flex;
align-items: center;
justify-content: center;
@@ -335,8 +367,8 @@
}
.success-mark-inner {
- width: 94rpx;
- height: 94rpx;
+ width: 78rpx;
+ height: 78rpx;
border-radius: 50%;
background: rgba(255, 255, 255, .7);
display: flex;
@@ -347,27 +379,32 @@
.success-title {
position: relative;
text-align: center;
- font-size: 42rpx;
+ font-size: 38rpx;
font-weight: 700;
letter-spacing: 1rpx;
}
.success-subtitle {
position: relative;
- width: 520rpx;
- max-width: 100%;
- margin: 16rpx auto 0;
- line-height: 40rpx;
+ margin-top: 10rpx;
+ line-height: 34rpx;
text-align: center;
color: #61746e;
- font-size: 26rpx;
+ font-size: 24rpx;
}
- .amount-card {
+ .success-actions {
position: relative;
- margin: 32rpx auto 0;
- padding: 24rpx 28rpx;
- border-radius: 30rpx;
+ display: flex;
+ align-items: center;
+ margin-top: 26rpx;
+ }
+
+ .amount-card {
+ flex: 1;
+ min-width: 0;
+ padding: 20rpx 24rpx;
+ border-radius: 28rpx;
background: linear-gradient(135deg, rgba(246, 255, 229, .95), rgba(231, 255, 249, .95));
display: flex;
align-items: center;
@@ -375,34 +412,34 @@
}
.amount-label {
- font-size: 25rpx;
+ font-size: 23rpx;
color: #5f746e;
}
.amount-value {
- font-size: 52rpx;
+ font-size: 38rpx;
font-weight: 800;
color: #103b31;
line-height: 1;
}
.amount-symbol {
- font-size: 28rpx;
+ font-size: 24rpx;
margin-right: 4rpx;
}
.order-btn {
- position: relative;
- height: 96rpx;
- margin-top: 28rpx;
+ flex-shrink: 0;
+ width: 190rpx;
+ height: 84rpx;
+ margin-left: 20rpx;
border-radius: 999rpx;
background: linear-gradient(90deg, #e7ff92, #9effe8);
- box-shadow: 0 16rpx 34rpx rgba(44, 199, 151, .22);
+ box-shadow: 0 12rpx 26rpx rgba(44, 199, 151, .18);
display: flex;
align-items: center;
justify-content: center;
- gap: 8rpx;
- font-size: 31rpx;
+ font-size: 26rpx;
font-weight: 700;
transition: transform .18s ease, box-shadow .18s ease;
}
@@ -413,60 +450,60 @@
}
.explore-head {
- margin: 38rpx 4rpx 22rpx;
+ margin: 34rpx 4rpx 20rpx;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.explore-title {
- font-size: 32rpx;
+ font-size: 30rpx;
font-weight: 800;
color: #102d27;
}
.explore-subtitle {
- margin-top: 8rpx;
- font-size: 24rpx;
- color: #7a8985;
- }
-
- .explore-badge {
- flex-shrink: 0;
- padding: 10rpx 18rpx;
- border-radius: 999rpx;
- background: rgba(255, 255, 255, .76);
- color: #557067;
+ margin-top: 4rpx;
font-size: 22rpx;
- box-shadow: 0 10rpx 28rpx rgba(24, 84, 69, .08);
+ color: #7a8985;
}
.feature-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- padding-bottom: 44rpx;
+ padding-bottom: 34rpx;
}
.feature-card {
position: relative;
overflow: hidden;
width: calc(50% - 12rpx);
- min-height: 244rpx;
+ height: 154rpx;
margin-bottom: 24rpx;
- padding: 24rpx;
+ padding: 22rpx 22rpx;
box-sizing: border-box;
- border-radius: 34rpx;
- background: rgba(255, 255, 255, .82);
+ border-radius: 30rpx;
+ background: rgba(255, 255, 255, .78);
border: 1rpx solid rgba(255, 255, 255, .88);
- box-shadow: 0 20rpx 54rpx rgba(31, 91, 79, .12);
- animation: featureFloat 4.6s ease-in-out infinite;
+ box-shadow: 0 12rpx 34rpx rgba(31, 91, 79, .09);
transition: transform .18s ease, box-shadow .18s ease;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
}
- .feature-card--wide {
- width: 100%;
- min-height: 214rpx;
+ .feature-card--mint { background: linear-gradient(180deg, rgba(232, 255, 245, .92), rgba(255, 255, 255, .76)); }
+ .feature-card--lime { background: linear-gradient(180deg, rgba(247, 255, 224, .92), rgba(255, 255, 255, .76)); }
+ .feature-card--orange { background: linear-gradient(180deg, rgba(255, 240, 219, .92), rgba(255, 255, 255, .76)); }
+ .feature-card--blue { background: linear-gradient(180deg, rgba(230, 246, 255, .92), rgba(255, 255, 255, .76)); }
+ .feature-card--pink { background: linear-gradient(180deg, rgba(255, 235, 244, .92), rgba(255, 255, 255, .76)); }
+ .feature-card--green { background: linear-gradient(180deg, rgba(235, 255, 237, .92), rgba(255, 255, 255, .76)); }
+
+ .feature-card:nth-child(2),
+ .feature-card:nth-child(5) {
+ transform: translateY(8rpx);
}
.feature-card:active {
@@ -474,82 +511,40 @@
box-shadow: 0 12rpx 32rpx rgba(31, 91, 79, .1);
}
- .feature-light {
- position: absolute;
- top: -70rpx;
- right: -60rpx;
- width: 220rpx;
- height: 220rpx;
- border-radius: 50%;
- opacity: .7;
- }
-
- .feature-card--mint .feature-light { background: rgba(124, 255, 210, .42); }
- .feature-card--lime .feature-light { background: rgba(221, 255, 128, .48); }
- .feature-card--orange .feature-light { background: rgba(255, 198, 124, .46); }
- .feature-card--blue .feature-light { background: rgba(142, 210, 255, .4); }
- .feature-card--pink .feature-light { background: rgba(255, 174, 205, .38); }
- .feature-card--green .feature-light { background: rgba(143, 235, 160, .38); }
-
- .feature-top {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
-
.feature-icon {
- width: 64rpx;
- height: 64rpx;
- border-radius: 22rpx;
- background: rgba(255, 255, 255, .7);
+ width: 54rpx;
+ height: 54rpx;
+ flex-shrink: 0;
+ border-radius: 18rpx;
+ background: rgba(255, 255, 255, .68);
display: flex;
align-items: center;
justify-content: center;
- font-size: 30rpx;
+ font-size: 27rpx;
font-weight: 800;
color: #133c34;
box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, .8);
}
.feature-tag {
- padding: 8rpx 16rpx;
- border-radius: 999rpx;
- background: rgba(255, 255, 255, .62);
+ position: absolute;
+ left: 94rpx;
+ right: 18rpx;
+ bottom: 28rpx;
color: #61736d;
- font-size: 21rpx;
+ font-size: 22rpx;
+ line-height: 28rpx;
+ white-space: nowrap;
}
.feature-name {
- position: relative;
- margin-top: 22rpx;
- font-size: 31rpx;
+ margin-left: 18rpx;
+ margin-bottom: 34rpx;
+ font-size: 29rpx;
font-weight: 800;
color: #102d27;
- }
-
- .feature-desc {
- position: relative;
- margin-top: 12rpx;
line-height: 34rpx;
- font-size: 24rpx;
- color: #6d7e79;
- }
-
- .feature-action {
- position: relative;
- margin-top: 18rpx;
- display: flex;
- align-items: center;
- color: #14866c;
- font-size: 24rpx;
- font-weight: 700;
- }
-
- .feature-arrow {
- margin-left: 8rpx;
- font-size: 34rpx;
- line-height: 24rpx;
+ white-space: nowrap;
}
@keyframes cardIn {
@@ -585,15 +580,6 @@
}
}
- @keyframes featureFloat {
- 0%, 100% {
- transform: translateY(0);
- }
- 50% {
- transform: translateY(-8rpx);
- }
- }
-
@keyframes orbFloat {
0%, 100% {
transform: translate3d(0, 0, 0) scale(1);
@@ -602,4 +588,758 @@
transform: translate3d(20rpx, -18rpx, 0) scale(1.06);
}
}
+
+ /* Reference-style payment success layout */
+ .content {
+ padding: 4rpx 32rpx 38rpx;
+ }
+
+ .pay-result {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 6rpx;
+ }
+
+ .pay-check {
+ width: 64rpx;
+ height: 64rpx;
+ margin-right: 18rpx;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #41d46f, #26b878);
+ box-shadow: 0 16rpx 34rpx rgba(44, 184, 113, .28);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .pay-title {
+ color: #182721;
+ font-size: 58rpx;
+ font-weight: 900;
+ letter-spacing: 4rpx;
+ line-height: 72rpx;
+ }
+
+ .pay-subtitle {
+ margin-top: 12rpx;
+ color: #70827b;
+ font-size: 28rpx;
+ text-align: center;
+ letter-spacing: 1rpx;
+ }
+
+ .thanks-card {
+ position: relative;
+ height: 248rpx;
+ margin-top: 34rpx;
+ padding: 30rpx 34rpx 26rpx 300rpx;
+ box-sizing: border-box;
+ border-radius: 42rpx;
+ background:
+ linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(244, 255, 249, .84)),
+ radial-gradient(circle at 8% 18%, rgba(126, 239, 177, .2), rgba(126, 239, 177, 0) 180rpx);
+ border: 1rpx solid rgba(255, 255, 255, .9);
+ box-shadow: 0 24rpx 70rpx rgba(38, 118, 92, .12);
+ overflow: hidden;
+ }
+
+ .thanks-card::after {
+ content: '';
+ position: absolute;
+ right: -70rpx;
+ top: -80rpx;
+ width: 220rpx;
+ height: 220rpx;
+ border-radius: 50%;
+ background: rgba(210, 255, 219, .58);
+ filter: blur(4rpx);
+ }
+
+ .thanks-doodle {
+ position: absolute;
+ z-index: 1;
+ border: 4rpx solid rgba(75, 207, 133, .18);
+ pointer-events: none;
+ }
+
+ .thanks-doodle--heart {
+ left: 42rpx;
+ top: 62rpx;
+ width: 54rpx;
+ height: 54rpx;
+ border-radius: 50%;
+ }
+
+ .thanks-doodle--star {
+ right: 28rpx;
+ top: 36rpx;
+ width: 48rpx;
+ height: 48rpx;
+ border-radius: 16rpx;
+ transform: rotate(18deg);
+ }
+
+ .mascot-slot {
+ position: absolute;
+ z-index: 2;
+ left: 74rpx;
+ bottom: 0;
+ width: 210rpx;
+ height: 230rpx;
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ }
+
+ .mascot-image {
+ width: 100%;
+ height: 100%;
+ }
+
+ .mascot-placeholder {
+ position: relative;
+ width: 170rpx;
+ height: 170rpx;
+ margin-bottom: 18rpx;
+ border-radius: 48% 48% 46% 46%;
+ background: linear-gradient(145deg, #ffe0a8, #f7a54f);
+ box-shadow: inset -12rpx -16rpx 0 rgba(154, 83, 24, .08), 0 18rpx 34rpx rgba(191, 112, 45, .16);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #ffffff;
+ font-size: 28rpx;
+ font-weight: 900;
+ }
+
+ .mascot-ear {
+ position: absolute;
+ top: -22rpx;
+ width: 58rpx;
+ height: 58rpx;
+ border-radius: 18rpx 18rpx 6rpx 18rpx;
+ background: #f8b15d;
+ }
+
+ .mascot-ear--left {
+ left: 16rpx;
+ transform: rotate(-28deg);
+ }
+
+ .mascot-ear--right {
+ right: 16rpx;
+ transform: rotate(28deg);
+ }
+
+ .mascot-face {
+ position: relative;
+ z-index: 2;
+ padding: 10rpx 18rpx;
+ border-radius: 999rpx;
+ background: rgba(66, 197, 112, .86);
+ }
+
+ .thanks-copy {
+ position: relative;
+ z-index: 2;
+ }
+
+ .thanks-title {
+ color: #182721;
+ font-size: 34rpx;
+ font-weight: 900;
+ line-height: 46rpx;
+ }
+
+ .thanks-line {
+ width: 210rpx;
+ height: 10rpx;
+ margin-top: -2rpx;
+ border-radius: 999rpx;
+ background: linear-gradient(90deg, rgba(108, 231, 151, .5), rgba(255, 223, 145, .35));
+ }
+
+ .thanks-desc {
+ margin-top: 26rpx;
+ color: #657871;
+ font-size: 26rpx;
+ line-height: 34rpx;
+ }
+
+ .thanks-tags {
+ margin-top: 8rpx;
+ color: #283c35;
+ font-size: 27rpx;
+ font-weight: 800;
+ line-height: 38rpx;
+ }
+
+ .thanks-tags text {
+ margin-right: 16rpx;
+ }
+
+ .thanks-tags text:nth-child(1) { color: #4d7ff0; }
+ .thanks-tags text:nth-child(2) { color: #ff7b5f; }
+ .thanks-tags text:nth-child(3) { color: #31b675; }
+
+ .discover-title {
+ margin: 30rpx 0 24rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #263a34;
+ font-size: 32rpx;
+ font-weight: 900;
+ letter-spacing: 2rpx;
+ }
+
+ .discover-mark {
+ margin: 0 18rpx;
+ color: #52c988;
+ font-size: 34rpx;
+ font-weight: 900;
+ }
+
+ .feature-grid {
+ padding-bottom: 24rpx;
+ }
+
+ .feature-card {
+ width: calc(33.333% - 16rpx);
+ height: 250rpx;
+ margin-bottom: 24rpx;
+ padding: 26rpx 20rpx;
+ border-radius: 28rpx;
+ display: block;
+ box-shadow: 0 18rpx 48rpx rgba(35, 102, 82, .1);
+ }
+
+ .feature-card:nth-child(2),
+ .feature-card:nth-child(5) {
+ transform: none;
+ }
+
+ .feature-card--mint { background: linear-gradient(145deg, rgba(233, 255, 241, .96), rgba(255, 255, 255, .86)); }
+ .feature-card--lime { background: linear-gradient(145deg, rgba(245, 255, 225, .96), rgba(255, 255, 255, .86)); }
+ .feature-card--orange { background: linear-gradient(145deg, rgba(255, 239, 219, .96), rgba(255, 255, 255, .86)); }
+ .feature-card--blue { background: linear-gradient(145deg, rgba(230, 248, 255, .96), rgba(255, 255, 255, .86)); }
+ .feature-card--pink { background: linear-gradient(145deg, rgba(255, 235, 245, .96), rgba(255, 255, 255, .86)); }
+ .feature-card--green { background: linear-gradient(145deg, rgba(235, 255, 226, .96), rgba(255, 255, 255, .86)); }
+
+ .feature-copy {
+ position: relative;
+ z-index: 2;
+ }
+
+ .feature-name {
+ margin: 0;
+ color: #1f4d3f;
+ font-size: 28rpx;
+ font-weight: 900;
+ line-height: 34rpx;
+ white-space: normal;
+ }
+
+ .feature-tag {
+ position: static;
+ display: block;
+ margin-top: 20rpx;
+ color: #5e746c;
+ font-size: 22rpx;
+ line-height: 30rpx;
+ white-space: normal;
+ }
+
+ .feature-btn {
+ position: absolute;
+ left: 0;
+ top: 136rpx;
+ height: 42rpx;
+ padding: 0 18rpx;
+ border-radius: 999rpx;
+ background: linear-gradient(90deg, #43d176, #27b979);
+ color: #ffffff;
+ font-size: 20rpx;
+ font-weight: 800;
+ line-height: 42rpx;
+ box-shadow: 0 10rpx 20rpx rgba(39, 185, 121, .22);
+ }
+
+ .feature-icon-slot {
+ position: absolute;
+ right: 12rpx;
+ bottom: 10rpx;
+ width: 104rpx;
+ height: 104rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .feature-image {
+ width: 100%;
+ height: 100%;
+ }
+
+ .feature-icon {
+ width: 86rpx;
+ height: 86rpx;
+ border-radius: 30rpx;
+ background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(205, 255, 226, .78));
+ box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, .8), 0 12rpx 24rpx rgba(44, 153, 104, .14);
+ color: #24a86e;
+ font-size: 34rpx;
+ }
+
+ .order-strip {
+ height: 88rpx;
+ margin: 8rpx 48rpx 0;
+ padding: 0 12rpx 0 14rpx;
+ border-radius: 999rpx;
+ background: rgba(255, 255, 255, .78);
+ box-shadow: 0 18rpx 44rpx rgba(40, 112, 88, .12);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .order-strip--top {
+ margin-top: 18rpx;
+ margin-bottom: 28rpx;
+ }
+
+ .order-strip-left {
+ display: flex;
+ align-items: center;
+ color: #5e746c;
+ font-size: 24rpx;
+ font-weight: 700;
+ }
+
+ .order-scooter {
+ width: 58rpx;
+ height: 58rpx;
+ margin-right: 14rpx;
+ border-radius: 50%;
+ background: #f1fff7;
+ color: #24a86e;
+ font-size: 26rpx;
+ font-weight: 900;
+ line-height: 58rpx;
+ text-align: center;
+ }
+
+ .order-amount {
+ margin-left: 10rpx;
+ color: #2db873;
+ font-size: 28rpx;
+ font-weight: 900;
+ }
+
+ .order-strip-btn {
+ height: 62rpx;
+ padding: 0 30rpx;
+ border-radius: 999rpx;
+ background: linear-gradient(90deg, #a6ffd5, #5ce59a);
+ color: #123c35;
+ font-size: 24rpx;
+ font-weight: 900;
+ line-height: 62rpx;
+ box-shadow: 0 12rpx 26rpx rgba(54, 202, 128, .2);
+ }
+
+ /* Final visual pass: closer to the provided reference */
+ .pay-result {
+ margin-top: 8rpx;
+ }
+
+ .pay-check {
+ width: 70rpx;
+ height: 70rpx;
+ margin-right: 18rpx;
+ }
+
+ .pay-title {
+ font-size: 60rpx;
+ line-height: 74rpx;
+ text-shadow: 0 4rpx 0 rgba(255, 255, 255, .55);
+ }
+
+ .pay-subtitle {
+ margin-top: 10rpx;
+ font-size: 28rpx;
+ }
+
+ .thanks-card {
+ height: 252rpx;
+ margin-top: 34rpx;
+ padding-left: 278rpx;
+ background:
+ radial-gradient(circle at 86% 22%, rgba(188, 255, 210, .55) 0, rgba(188, 255, 210, 0) 150rpx),
+ linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(247, 255, 250, .88));
+ }
+
+ .mascot-slot {
+ left: 18rpx;
+ width: 246rpx;
+ height: 266rpx;
+ }
+
+ .mascot-placeholder {
+ width: 216rpx;
+ height: 230rpx;
+ margin-bottom: 0;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
+ color: inherit;
+ }
+
+ .mascot-tail {
+ position: absolute;
+ left: -8rpx;
+ bottom: 32rpx;
+ width: 118rpx;
+ height: 158rpx;
+ border-radius: 80rpx 60rpx 80rpx 62rpx;
+ background: linear-gradient(145deg, #ffd28a, #f5a64e);
+ box-shadow: inset -18rpx -24rpx 0 rgba(181, 91, 29, .08);
+ transform: rotate(-20deg);
+ }
+
+ .mascot-head {
+ position: absolute;
+ left: 50rpx;
+ top: 22rpx;
+ width: 128rpx;
+ height: 120rpx;
+ border-radius: 54rpx 54rpx 46rpx 46rpx;
+ background: linear-gradient(145deg, #ffe4b7, #f7ad5c);
+ box-shadow: inset -10rpx -14rpx 0 rgba(146, 75, 24, .08), 0 14rpx 24rpx rgba(177, 99, 40, .12);
+ z-index: 3;
+ }
+
+ .mascot-ear {
+ z-index: 2;
+ top: 4rpx;
+ width: 58rpx;
+ height: 66rpx;
+ border-radius: 28rpx 28rpx 10rpx 28rpx;
+ background: linear-gradient(145deg, #ffc979, #ee9550);
+ }
+
+ .mascot-ear--left {
+ left: 44rpx;
+ }
+
+ .mascot-ear--right {
+ right: 34rpx;
+ }
+
+ .mascot-eye {
+ position: absolute;
+ top: 48rpx;
+ width: 16rpx;
+ height: 20rpx;
+ border-radius: 50%;
+ background: #2c2b29;
+ box-shadow: inset 3rpx 3rpx 0 rgba(255, 255, 255, .7);
+ }
+
+ .mascot-eye--left {
+ left: 38rpx;
+ }
+
+ .mascot-eye--right {
+ right: 38rpx;
+ }
+
+ .mascot-nose {
+ position: absolute;
+ left: 56rpx;
+ top: 72rpx;
+ width: 18rpx;
+ height: 14rpx;
+ border-radius: 50%;
+ background: #7a4b2b;
+ }
+
+ .mascot-body {
+ position: absolute;
+ left: 54rpx;
+ top: 132rpx;
+ width: 124rpx;
+ height: 92rpx;
+ border-radius: 36rpx 36rpx 42rpx 42rpx;
+ background: linear-gradient(145deg, #7deb9f, #37bc73);
+ box-shadow: inset -10rpx -12rpx 0 rgba(15, 103, 68, .1);
+ z-index: 4;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #ffffff;
+ font-size: 24rpx;
+ font-weight: 900;
+ }
+
+ .mascot-heart {
+ position: absolute;
+ left: 90rpx;
+ top: 118rpx;
+ width: 54rpx;
+ height: 48rpx;
+ border-radius: 50% 50% 44% 44%;
+ background: linear-gradient(145deg, #ff94b9, #ff5b8f);
+ transform: rotate(-10deg);
+ z-index: 5;
+ box-shadow: 0 10rpx 18rpx rgba(255, 91, 143, .18);
+ }
+
+ .thanks-title {
+ margin-top: 8rpx;
+ font-size: 32rpx;
+ white-space: nowrap;
+ }
+
+ .thanks-desc {
+ margin-top: 24rpx;
+ white-space: nowrap;
+ }
+
+ .thanks-tags {
+ white-space: nowrap;
+ font-size: 25rpx;
+ }
+
+ .thanks-tags text {
+ margin-right: 10rpx;
+ }
+
+ .discover-title {
+ margin: 30rpx 0 24rpx;
+ }
+
+ .feature-card {
+ width: calc(50% - 14rpx);
+ height: 224rpx;
+ padding: 26rpx 24rpx;
+ border: 1rpx solid rgba(255, 255, 255, .92);
+ }
+
+ .feature-name {
+ min-height: 36rpx;
+ color: #1f4d3f;
+ }
+
+ .feature-card--mint .feature-name { color: #26b96f; }
+ .feature-card--lime .feature-name { color: #23a36b; }
+ .feature-card--orange .feature-name { color: #ef8b3d; }
+ .feature-card--blue .feature-name { color: #258bcf; }
+ .feature-card--pink .feature-name { color: #e86696; }
+ .feature-card--green .feature-name { color: #d59a16; }
+
+ .feature-tag {
+ margin-top: 12rpx;
+ min-height: 34rpx;
+ }
+
+ .feature-btn {
+ top: 132rpx;
+ }
+
+ .feature-icon-slot {
+ right: 18rpx;
+ bottom: 12rpx;
+ width: 118rpx;
+ height: 118rpx;
+ }
+
+ .feature-illus {
+ position: relative;
+ width: 118rpx;
+ height: 118rpx;
+ }
+
+ .illus-main,
+ .illus-accent,
+ .illus-dot {
+ position: absolute;
+ display: block;
+ }
+
+ .feature-illus--delivery .illus-main {
+ left: 24rpx;
+ top: 22rpx;
+ width: 64rpx;
+ height: 72rpx;
+ border-radius: 18rpx;
+ background: linear-gradient(145deg, #54df86, #19ad61);
+ box-shadow: 0 14rpx 20rpx rgba(25, 173, 97, .18);
+ }
+
+ .feature-illus--delivery .illus-accent {
+ left: 36rpx;
+ top: 10rpx;
+ width: 42rpx;
+ height: 24rpx;
+ border: 8rpx solid #28c66f;
+ border-bottom: 0;
+ border-radius: 24rpx 24rpx 0 0;
+ }
+
+ .feature-illus--delivery .illus-dot {
+ right: 4rpx;
+ bottom: 4rpx;
+ width: 44rpx;
+ height: 28rpx;
+ border-radius: 999rpx;
+ background: #ffd66d;
+ box-shadow: -26rpx -2rpx 0 #ffc547;
+ }
+
+ .feature-illus--planet .illus-main {
+ left: 20rpx;
+ top: 28rpx;
+ width: 76rpx;
+ height: 58rpx;
+ border-radius: 50%;
+ background: linear-gradient(145deg, #b28cff, #6fe49c);
+ transform: rotate(-12deg);
+ }
+
+ .feature-illus--planet .illus-accent {
+ left: 6rpx;
+ top: 54rpx;
+ width: 100rpx;
+ height: 20rpx;
+ border-radius: 50%;
+ border: 8rpx solid rgba(255, 203, 80, .9);
+ transform: rotate(-14deg);
+ }
+
+ .feature-illus--planet .illus-dot {
+ right: 4rpx;
+ bottom: 14rpx;
+ width: 44rpx;
+ height: 36rpx;
+ border-radius: 12rpx;
+ background: #ffca43;
+ }
+
+ .feature-illus--adventure .illus-main {
+ left: 24rpx;
+ top: 22rpx;
+ width: 66rpx;
+ height: 58rpx;
+ border-radius: 12rpx 12rpx 28rpx 28rpx;
+ background: linear-gradient(145deg, #ffd86a, #ff9f45);
+ box-shadow: 0 14rpx 20rpx rgba(255, 159, 69, .18);
+ }
+
+ .feature-illus--adventure .illus-accent {
+ left: 34rpx;
+ bottom: 22rpx;
+ width: 46rpx;
+ height: 18rpx;
+ border-radius: 8rpx;
+ background: #ec7d38;
+ }
+
+ .feature-illus--adventure .illus-dot {
+ left: 44rpx;
+ top: 36rpx;
+ width: 24rpx;
+ height: 24rpx;
+ border-radius: 50%;
+ background: #ffffff;
+ box-shadow: inset 0 0 0 6rpx rgba(255, 200, 81, .55);
+ }
+
+ .feature-illus--ie .illus-main {
+ left: 18rpx;
+ top: 34rpx;
+ width: 78rpx;
+ height: 62rpx;
+ border-radius: 38rpx 38rpx 30rpx 30rpx;
+ background: linear-gradient(145deg, #79ddff, #3eb4ef);
+ box-shadow: 0 14rpx 22rpx rgba(62, 180, 239, .16);
+ }
+
+ .feature-illus--ie .illus-accent {
+ right: 0;
+ top: 24rpx;
+ width: 44rpx;
+ height: 34rpx;
+ border-radius: 16rpx;
+ background: #80efb3;
+ }
+
+ .feature-illus--ie .illus-dot {
+ left: 42rpx;
+ top: 60rpx;
+ width: 10rpx;
+ height: 10rpx;
+ border-radius: 50%;
+ background: #ffffff;
+ box-shadow: 24rpx 0 0 #ffffff;
+ }
+
+ .feature-illus--release .illus-main {
+ left: 20rpx;
+ top: 24rpx;
+ width: 76rpx;
+ height: 64rpx;
+ border-radius: 18rpx;
+ background: linear-gradient(145deg, #ff8eb8, #ee5e94);
+ box-shadow: 0 14rpx 22rpx rgba(238, 94, 148, .16);
+ }
+
+ .feature-illus--release .illus-accent {
+ left: 36rpx;
+ top: 40rpx;
+ width: 38rpx;
+ height: 38rpx;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, .86);
+ }
+
+ .feature-illus--release .illus-dot {
+ left: 30rpx;
+ top: 12rpx;
+ width: 54rpx;
+ height: 22rpx;
+ border-radius: 12rpx;
+ background: #ffb6d1;
+ }
+
+ .feature-illus--postList .illus-main {
+ left: 24rpx;
+ top: 18rpx;
+ width: 66rpx;
+ height: 78rpx;
+ border-radius: 28rpx 28rpx 18rpx 18rpx;
+ background: linear-gradient(145deg, #ffd874, #f5af23);
+ box-shadow: 0 14rpx 22rpx rgba(245, 175, 35, .16);
+ }
+
+ .feature-illus--postList .illus-accent {
+ left: 38rpx;
+ top: 8rpx;
+ width: 38rpx;
+ height: 28rpx;
+ border: 8rpx solid #f0a11b;
+ border-bottom: 0;
+ border-radius: 22rpx 22rpx 0 0;
+ }
+
+ .feature-illus--postList .illus-dot {
+ right: 0;
+ bottom: 10rpx;
+ width: 42rpx;
+ height: 32rpx;
+ border-radius: 10rpx;
+ background: #27343a;
+ box-shadow: inset 0 0 0 8rpx #ffffff;
+ }
\ No newline at end of file