@@ -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;