小程序接入支付功能
This commit is contained in:
Yeomai committed
1 parent
edf1e51846
commit
07a90e860d
38 files changed
+3644
-90
No files matched your search
@@ -0,0 +1,313 @@
|
||||
.page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding: 0 28rpx 70rpx;
|
||||
background: var(--bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 顶部两团辉光，对应官网的红 / 青径向光 */
|
||||
.glow {
|
||||
position: absolute;
|
||||
left: -30%;
|
||||
top: -200rpx;
|
||||
width: 160%;
|
||||
height: 1000rpx;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(560rpx 340rpx at 30% 38%, rgba(242, 53, 59, 0.22), transparent 66%),
|
||||
radial-gradient(520rpx 320rpx at 72% 26%, rgba(79, 193, 255, 0.16), transparent 68%);
|
||||
}
|
||||
|
||||
/* ===== 顶部 ===== */
|
||||
.hero {
|
||||
position: relative;
|
||||
padding: 56rpx 4rpx 0;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin-top: 0;
|
||||
font-size: 54rpx;
|
||||
line-height: 1.24;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.hero-title-sub {
|
||||
margin-top: 16rpx;
|
||||
font-size: 38rpx;
|
||||
line-height: 1.4;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.hero-accent {
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
margin-top: 22rpx;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.8;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 92rpx;
|
||||
line-height: 92rpx;
|
||||
text-align: center;
|
||||
border-radius: var(--r-lg);
|
||||
font-size: 29rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 12rpx 26rpx rgba(242, 53, 59, 0.26);
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
margin-left: 20rpx;
|
||||
border: 2rpx solid var(--border);
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* 单独一行的宽按钮 */
|
||||
.btn.ghost.wide {
|
||||
display: block;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
margin: 30rpx 0 0;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
|
||||
.stat {
|
||||
width: 48%;
|
||||
margin-bottom: 16rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
border: 2rpx solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
background: rgba(28, 28, 34, 0.74);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
margin-top: 6rpx;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.5;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.chip {
|
||||
margin: 0 14rpx 14rpx 0;
|
||||
padding: 10rpx 22rpx;
|
||||
border-radius: var(--r-pill);
|
||||
border: 2rpx solid var(--border);
|
||||
background: var(--panel);
|
||||
color: var(--text-dim);
|
||||
font-size: 21rpx;
|
||||
}
|
||||
|
||||
.chip.on {
|
||||
color: var(--cyan);
|
||||
border-color: rgba(79, 193, 255, 0.4);
|
||||
background: rgba(79, 193, 255, 0.08);
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-top: 4rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.7;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ===== 小程序定位 ===== */
|
||||
.notice {
|
||||
margin-top: 46rpx;
|
||||
padding: 30rpx 32rpx;
|
||||
border: 2rpx solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.notice-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.notice-desc {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.75;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.notice-link {
|
||||
margin-top: 18rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
/* ===== 通用分节 ===== */
|
||||
.section {
|
||||
position: relative;
|
||||
margin-top: 76rpx;
|
||||
}
|
||||
|
||||
.section.alt {
|
||||
margin: 76rpx -28rpx 0;
|
||||
padding: 56rpx 28rpx;
|
||||
background: var(--bg-2);
|
||||
border-top: 2rpx solid var(--border);
|
||||
border-bottom: 2rpx solid var(--border);
|
||||
}
|
||||
|
||||
.kicker {
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4rpx;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.h2 {
|
||||
margin-top: 14rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin: 16rpx 0 30rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.75;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 26rpx 30rpx;
|
||||
margin-bottom: 18rpx;
|
||||
border: 2rpx solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.7;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ===== 版本表 ===== */
|
||||
.rows {
|
||||
border: 2rpx solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
background: var(--panel);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 26rpx 30rpx;
|
||||
border-bottom: 2rpx solid var(--border);
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.row-ver {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.row-desc {
|
||||
margin-top: 10rpx;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.7;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ===== 步骤 ===== */
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.step-index {
|
||||
flex-shrink: 0;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
border-radius: var(--r-pill);
|
||||
border: 2rpx solid rgba(242, 53, 59, 0.35);
|
||||
background: rgba(242, 53, 59, 0.12);
|
||||
color: var(--accent-2);
|
||||
font-size: 23rpx;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
padding-top: 6rpx;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.7;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ===== 常见问题 ===== */
|
||||
.faq {
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.faq-q {
|
||||
font-size: 27rpx;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.faq-a {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.75;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.foot {
|
||||
margin-top: 60rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.7;
|
||||
color: rgba(157, 157, 168, 0.6);
|
||||
}
|
||||
Reference in new issue
Block a user