update
This commit is contained in:
aaron
parent
36bca020a6
commit
87ce7adde6
@ -10,7 +10,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="success-title">订阅成功！</h1>
|
||||
<p class="success-subtitle">恭喜您成为尊享会员，享受专属权益</p>
|
||||
<p class="success-subtitle">恭喜您成为VIP，享受专属权益</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -12,11 +12,60 @@
|
||||
<section class="subscription-plans">
|
||||
<div class="container">
|
||||
<div class="plans-grid">
|
||||
<!-- 尊享会员计划 -->
|
||||
<!-- 普通会员计划 -->
|
||||
<div class="plan-card basic-plan">
|
||||
<div class="plan-header">
|
||||
<div class="plan-badge-placeholder"></div>
|
||||
<h2 class="plan-title">注册会员</h2>
|
||||
<p class="plan-description">适合初次体验的用户</p>
|
||||
</div>
|
||||
<div class="plan-pricing">
|
||||
<div class="price-display">
|
||||
<span class="price">免费</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plan-features">
|
||||
<ul class="features-list">
|
||||
<li class="feature-item highlight">
|
||||
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
每天只有 1 次分析额度
|
||||
</li>
|
||||
<li class="feature-item">
|
||||
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
基础功能访问
|
||||
</li>
|
||||
<li class="feature-item">
|
||||
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
社区支持
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="plan-button basic-button" disabled>无需订阅</button>
|
||||
</div>
|
||||
|
||||
<!-- VIP计划 -->
|
||||
<div class="plan-card premium-plan">
|
||||
<div class="plan-header">
|
||||
<div class="plan-badge">推荐</div>
|
||||
<h2 class="plan-title">尊享会员</h2>
|
||||
<h2 class="plan-title">VIP</h2>
|
||||
<p class="plan-description">适合个人用户和专业投资者</p>
|
||||
</div>
|
||||
<div class="plan-pricing">
|
||||
@ -224,13 +273,13 @@ const selectPlan = (type: 'premium', billing: 'monthly' | 'yearly') => {
|
||||
const planInfo = {
|
||||
premium: {
|
||||
monthly: {
|
||||
title: '尊享会员',
|
||||
title: 'VIP',
|
||||
price: pricing.value.price_month.toString(),
|
||||
period: '包月订阅',
|
||||
quota: '每天无限次分析额度',
|
||||
},
|
||||
yearly: {
|
||||
title: '尊享会员',
|
||||
title: 'VIP',
|
||||
price: pricing.value.price_year.toString(),
|
||||
period: '按年订阅',
|
||||
quota: '每天无限次分析额度',
|
||||
@ -384,6 +433,9 @@ const confirmSubscription = async () => {
|
||||
gap: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
justify-items: center;
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.plan-card {
|
||||
@ -397,6 +449,9 @@ const confirmSubscription = async () => {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
min-height: 580px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .plan-card {
|
||||
@ -412,15 +467,16 @@ const confirmSubscription = async () => {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plan-card.premium-plan::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
|
||||
border-radius: 1.5rem 1.5rem 0 0;
|
||||
.plan-card.basic-plan {
|
||||
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
|
||||
border: 2px solid #e2e8f0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .plan-card.basic-plan {
|
||||
background: linear-gradient(135deg, #1e293b, #0f172a);
|
||||
border: 2px solid #334155;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .plan-card.premium-plan {
|
||||
@ -445,17 +501,79 @@ const confirmSubscription = async () => {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.premium-plan .plan-header,
|
||||
.basic-plan .plan-header {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.plan-badge {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: fit-content;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.plan-badge::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.premium-plan .plan-badge {
|
||||
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 3px 12px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 5px 20px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.basic-badge {
|
||||
background: linear-gradient(135deg, #64748b, #475569);
|
||||
}
|
||||
|
||||
.plan-badge-placeholder {
|
||||
height: 32px;
|
||||
margin-bottom: 1rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
@ -486,6 +604,10 @@ const confirmSubscription = async () => {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.premium-plan .price {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.price.loading {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.5rem;
|
||||
@ -537,10 +659,18 @@ const confirmSubscription = async () => {
|
||||
}
|
||||
|
||||
/* 功能特性 */
|
||||
.plan-features {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 2rem 0;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
@ -574,6 +704,7 @@ const confirmSubscription = async () => {
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.premium-button {
|
||||
@ -595,6 +726,30 @@ const confirmSubscription = async () => {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.basic-button {
|
||||
background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
|
||||
color: #64748b;
|
||||
border: 1px solid #cbd5e1;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .basic-button {
|
||||
background: linear-gradient(135deg, #334155, #475569);
|
||||
color: #94a3b8;
|
||||
border: 1px solid #475569;
|
||||
}
|
||||
|
||||
/* 普通会员特殊样式 */
|
||||
.basic-plan .feature-item.highlight {
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .basic-plan .feature-item.highlight {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* 确认对话框 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user