You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1368 lines
29 KiB
1368 lines
29 KiB
<template>
|
|
<view class="page1">
|
|
<view class="bg-orb bg-orb--one"></view>
|
|
<view class="bg-orb bg-orb--two"></view>
|
|
<view class="bg-grid"></view>
|
|
|
|
<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
|
<view class="back-btn" @tap="back">
|
|
<uni-icons type="left" size="24" color="#123c35"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view class="content" scroll-y :show-scrollbar="false">
|
|
<view class="safe-spacer" :style="{ height: navHeight + 'px' }"></view>
|
|
<view class="pay-result">
|
|
<view class="pay-result-main">
|
|
<view class="pay-check">
|
|
<uni-icons type="checkmarkempty" size="28" color="#ffffff"></uni-icons>
|
|
</view>
|
|
<view class="pay-title">支付成功</view>
|
|
</view>
|
|
<view class="group-estimate-tip" v-if="groupId">预计5分钟左右成团，分享好友可立即成团</view>
|
|
</view>
|
|
<view class="order-strip order-strip--top">
|
|
<view class="order-strip-left">
|
|
<text>本次支付</text>
|
|
<text class="order-amount">￥{{displayAmount}}</text>
|
|
</view>
|
|
<view class="order-strip-btn" @tap="getorder">查看订单详情 →</view>
|
|
</view>
|
|
|
|
<view class="thanks-card">
|
|
<view class="thanks-doodle thanks-doodle--heart"></view>
|
|
<view class="thanks-doodle thanks-doodle--star"></view>
|
|
<view class="mascot-slot">
|
|
<image v-if="mascotImage" class="mascot-image" :src="mascotImage" mode="aspectFit"></image>
|
|
<view v-else class="mascot-placeholder">
|
|
<view class="mascot-tail"></view>
|
|
<view class="mascot-ear mascot-ear--left"></view>
|
|
<view class="mascot-ear mascot-ear--right"></view>
|
|
<view class="mascot-head">
|
|
<view class="mascot-eye mascot-eye--left"></view>
|
|
<view class="mascot-eye mascot-eye--right"></view>
|
|
<view class="mascot-nose"></view>
|
|
</view>
|
|
<view class="mascot-body">
|
|
<text>半径里</text>
|
|
</view>
|
|
<view class="mascot-heart"></view>
|
|
</view>
|
|
</view>
|
|
<view class="thanks-copy">
|
|
<view class="thanks-title">感谢你的信任与支持！</view>
|
|
<view class="thanks-line"></view>
|
|
<view class="thanks-desc">探索更多校园精彩生活</view>
|
|
<view class="thanks-tags">
|
|
<text>发现好玩</text>
|
|
<text>赚取福利</text>
|
|
<text>结识同好</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="discover-title">
|
|
<text class="discover-mark">⌁</text>
|
|
<text>发现更多精彩</text>
|
|
<text class="discover-mark">⌁</text>
|
|
</view>
|
|
|
|
<view class="feature-grid">
|
|
<view
|
|
class="feature-card"
|
|
:class="'feature-card--' + item.tone"
|
|
v-for="item in featureList"
|
|
:key="item.key"
|
|
@tap="goFeature(item)"
|
|
>
|
|
<view class="feature-copy">
|
|
<view class="feature-name">{{item.name}}</view>
|
|
<view class="feature-tag">{{item.tag}}</view>
|
|
<view class="feature-btn">去看看 →</view>
|
|
</view>
|
|
<view class="feature-icon-slot">
|
|
<image v-if="item.image" class="feature-image" :src="item.image" mode="aspectFit"></image>
|
|
<view v-else class="feature-illus" :class="'feature-illus--' + item.key">
|
|
<view class="illus-main"></view>
|
|
<view class="illus-accent"></view>
|
|
<view class="illus-dot"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
navHeight: 64,
|
|
id:'',
|
|
groupId:'',
|
|
amount:0,
|
|
mascotImage: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f7227759d693497a8beab87ff437a875.png',
|
|
featureList: [{
|
|
key: 'delivery',
|
|
name: '自由赚佣金',
|
|
tag: '注册成为兼职',
|
|
icon: '赚',
|
|
image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/c776da273db84bec8a5f363150f345c8.png',
|
|
tone: 'mint',
|
|
type: 'homeTab',
|
|
tabIndex: 1
|
|
}, {
|
|
key: 'planet',
|
|
name: '白嫖星球',
|
|
tag: '每日抽现金',
|
|
icon: '星',
|
|
image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6e55b1c7829a46f18c6b2be6eefa4885.png',
|
|
tone: 'lime',
|
|
url: '/package5/planet/index'
|
|
}, {
|
|
key: 'adventure',
|
|
name: '学院排位赛',
|
|
tag: '每日排位挑战',
|
|
icon: '榜',
|
|
image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/809f3c10f908480c9d65f0d487bce472.png',
|
|
tone: 'orange',
|
|
url: '/package5/planet/adventure'
|
|
}, {
|
|
key: 'ie',
|
|
name: 'i/e思想漂流',
|
|
tag: '发现有趣灵魂',
|
|
icon: '聊',
|
|
image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/2be57f86cd594f4da93526b5813178f1.png',
|
|
tone: 'blue',
|
|
url: '/package4/ieBrowser/index'
|
|
}, {
|
|
key: 'release',
|
|
name: '校园新鲜事',
|
|
tag: '找搭子一起玩',
|
|
icon: '圈',
|
|
image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/4e0db9059a5c44c495c95e63aebcd84c.png',
|
|
tone: 'pink',
|
|
type: 'homeTab',
|
|
tabIndex: 2
|
|
}, {
|
|
key: 'postList',
|
|
name: '闲置二手',
|
|
tag: '二手好物交易',
|
|
icon: '物',
|
|
image: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/ab0332105c894aeea5d8759cfd3b3f81.png',
|
|
tone: 'green',
|
|
type: 'homeTab',
|
|
tabIndex: 3
|
|
}]
|
|
}
|
|
},
|
|
computed: {
|
|
displayAmount() {
|
|
const value = this.amount == null || this.amount === '' ? 0 : this.amount
|
|
const num = Number(value)
|
|
if (isNaN(num)) return value
|
|
return num.toFixed(2).replace(/\.00$/, '')
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.setStatusBar()
|
|
this.id = option.id
|
|
this.groupId = option.groupId
|
|
this.amount = option.amount
|
|
},
|
|
onShow() {
|
|
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
|
|
});
|
|
},
|
|
goFeature(item) {
|
|
if (item.type == 'homeTab') {
|
|
uni.reLaunch({
|
|
url: '/pages/index/index?tabIndex=' + item.tabIndex
|
|
})
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: item.url
|
|
})
|
|
},
|
|
back() {
|
|
const pages = getCurrentPages();
|
|
if (pages.length > 1) {
|
|
uni.navigateBack();
|
|
} else {
|
|
uni.switchTab({ url: '/pages/index/index' });
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
background: #F5FCF7;
|
|
color: #00231C;
|
|
}
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(circle at 12% 4%, rgba(155, 255, 223, 0.5) 0, rgba(155, 255, 223, 0) 260rpx),
|
|
radial-gradient(circle at 92% 18%, rgba(255, 234, 165, 0.56) 0, rgba(255, 234, 165, 0) 300rpx),
|
|
linear-gradient(180deg, #effff8 0%, #f9fff4 40%, #f6fbff 100%);
|
|
}
|
|
|
|
.bg-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(2rpx);
|
|
opacity: .8;
|
|
pointer-events: none;
|
|
animation: orbFloat 5.5s ease-in-out infinite;
|
|
}
|
|
|
|
.bg-orb--one {
|
|
top: 210rpx;
|
|
left: -80rpx;
|
|
width: 230rpx;
|
|
height: 230rpx;
|
|
background: rgba(83, 218, 178, .2);
|
|
}
|
|
|
|
.bg-orb--two {
|
|
right: -90rpx;
|
|
bottom: 170rpx;
|
|
width: 280rpx;
|
|
height: 280rpx;
|
|
background: rgba(255, 191, 118, .18);
|
|
animation-delay: .8s;
|
|
}
|
|
|
|
.bg-grid {
|
|
position: absolute;
|
|
top: 170rpx;
|
|
right: 28rpx;
|
|
width: 132rpx;
|
|
height: 132rpx;
|
|
background-image:
|
|
radial-gradient(circle, rgba(0, 35, 28, .12) 2rpx, transparent 3rpx);
|
|
background-size: 28rpx 28rpx;
|
|
opacity: .65;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.nav-bar {
|
|
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;
|
|
background: rgba(243, 251, 247, .82);
|
|
backdrop-filter: blur(24rpx);
|
|
}
|
|
|
|
.back-btn{
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 999rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, .78);
|
|
box-shadow: 0 14rpx 36rpx rgba(23, 91, 72, .12);
|
|
backdrop-filter: blur(12rpx);
|
|
transition: transform .18s ease, opacity .18s ease;
|
|
}
|
|
|
|
.back-btn:active {
|
|
transform: scale(.94);
|
|
opacity: .82;
|
|
}
|
|
|
|
.title-name{
|
|
position: absolute;
|
|
left: 160rpx;
|
|
right: 160rpx;
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.content{
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 8rpx 28rpx 34rpx;
|
|
}
|
|
|
|
.success-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 34rpx 30rpx 30rpx;
|
|
border-radius: 36rpx;
|
|
background: rgba(255, 255, 255, .86);
|
|
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;
|
|
}
|
|
|
|
.success-glow {
|
|
position: absolute;
|
|
top: -120rpx;
|
|
left: 50%;
|
|
width: 360rpx;
|
|
height: 360rpx;
|
|
margin-left: -180rpx;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(130, 255, 190, .34), rgba(130, 255, 190, 0) 68%);
|
|
animation: glowBreath 3.2s ease-in-out infinite;
|
|
}
|
|
|
|
.success-mark {
|
|
position: relative;
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
margin: 0 auto 20rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #d8ff83, #9fffe6);
|
|
box-shadow: 0 14rpx 34rpx rgba(56, 197, 143, .22);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: successPop .5s cubic-bezier(.2, 1.4, .42, 1) both;
|
|
}
|
|
|
|
.success-mark-inner {
|
|
width: 78rpx;
|
|
height: 78rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, .7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.success-title {
|
|
position: relative;
|
|
text-align: center;
|
|
font-size: 38rpx;
|
|
font-weight: 700;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
.success-subtitle {
|
|
position: relative;
|
|
margin-top: 10rpx;
|
|
line-height: 34rpx;
|
|
text-align: center;
|
|
color: #61746e;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.success-actions {
|
|
position: relative;
|
|
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;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.amount-label {
|
|
font-size: 23rpx;
|
|
color: #5f746e;
|
|
}
|
|
|
|
.amount-value {
|
|
font-size: 38rpx;
|
|
font-weight: 800;
|
|
color: #103b31;
|
|
line-height: 1;
|
|
}
|
|
|
|
.amount-symbol {
|
|
font-size: 24rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.order-btn {
|
|
flex-shrink: 0;
|
|
width: 190rpx;
|
|
height: 84rpx;
|
|
margin-left: 20rpx;
|
|
border-radius: 999rpx;
|
|
background: linear-gradient(90deg, #e7ff92, #9effe8);
|
|
box-shadow: 0 12rpx 26rpx rgba(44, 199, 151, .18);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
transition: transform .18s ease, box-shadow .18s ease;
|
|
}
|
|
|
|
.order-btn:active {
|
|
transform: translateY(3rpx) scale(.98);
|
|
box-shadow: 0 8rpx 20rpx rgba(44, 199, 151, .2);
|
|
}
|
|
|
|
.explore-head {
|
|
margin: 34rpx 4rpx 20rpx;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.explore-title {
|
|
font-size: 30rpx;
|
|
font-weight: 800;
|
|
color: #102d27;
|
|
}
|
|
|
|
.explore-subtitle {
|
|
margin-top: 4rpx;
|
|
font-size: 22rpx;
|
|
color: #7a8985;
|
|
}
|
|
|
|
.feature-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding-bottom: 34rpx;
|
|
}
|
|
|
|
.feature-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: calc(50% - 12rpx);
|
|
height: 154rpx;
|
|
margin-bottom: 24rpx;
|
|
padding: 22rpx 22rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 30rpx;
|
|
background: rgba(255, 255, 255, .78);
|
|
border: 1rpx solid rgba(255, 255, 255, .88);
|
|
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--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 {
|
|
transform: scale(.97);
|
|
box-shadow: 0 12rpx 32rpx rgba(31, 91, 79, .1);
|
|
}
|
|
|
|
.feature-icon {
|
|
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: 27rpx;
|
|
font-weight: 800;
|
|
color: #133c34;
|
|
box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, .8);
|
|
}
|
|
|
|
.feature-tag {
|
|
position: absolute;
|
|
left: 94rpx;
|
|
right: 18rpx;
|
|
bottom: 28rpx;
|
|
color: #61736d;
|
|
font-size: 22rpx;
|
|
line-height: 28rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.feature-name {
|
|
margin-left: 18rpx;
|
|
margin-bottom: 34rpx;
|
|
font-size: 29rpx;
|
|
font-weight: 800;
|
|
color: #102d27;
|
|
line-height: 34rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@keyframes cardIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(26rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes successPop {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(.68);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes glowBreath {
|
|
0%, 100% {
|
|
transform: scale(.9);
|
|
opacity: .72;
|
|
}
|
|
50% {
|
|
transform: scale(1.08);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes orbFloat {
|
|
0%, 100% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
50% {
|
|
transform: translate3d(20rpx, -18rpx, 0) scale(1.06);
|
|
}
|
|
}
|
|
|
|
/* Reference-style payment success layout */
|
|
.content {
|
|
padding: 4rpx 32rpx 38rpx;
|
|
}
|
|
|
|
.pay-result {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
.pay-result-main {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.group-estimate-tip {
|
|
margin-top: 16rpx;
|
|
padding: 10rpx 24rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(224, 255, 222, 0.72);
|
|
border: 1rpx solid rgba(166, 255, 234, 1);
|
|
color: #123c35;
|
|
font-size: 26rpx;
|
|
font-weight: 800;
|
|
line-height: 36rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|