cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tcode平台改造升级-用户工作台试用页面及支付页面开发

Browse Source
This commit is contained in:
fmk1023
2025-12-10 15:25:35 +08:00
parent 356810f316
commit 61f8e017de
14 changed files with 1108 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/v3/NTI4MWU5.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 827 B

3
src/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16">
<path d="M10.476 9.115a78.809 78.809 0 006.061 2.084c1.121.46 0 3.07-1.184 2.531-1.34-.577-4.035-1.757-6.085-2.766C8.128 12.289 6.338 14 3.788 14 1.522 14 0 12.682 0 10.719c0-1.654 1.157-3.324 3.74-3.324 1.48 0 3 .415 4.818 1.04.336-.666.616-1.361.838-2.078l-6.57-.003V5.353l3.379.008V4.05H2.088v-.986l4.117.003V1.604c0-.383.208-.604.571-.604H8.5v2.073l4.08.003v.977H8.5V5.37l3.339.009s-.413 2.115-1.361 3.736zm-9.549 1.52v-.001c0 .94.741 1.89 2.545 1.89 1.393 0 2.757-.824 4.062-2.45-1.744-.862-2.679-1.277-4.03-1.277-1.312 0-2.577.631-2.577 1.839z" fill="#1C9FE5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 650 B

3
src/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4H0v-.75C0 2.56.448 2 1 2h14c.552 0 1 .56 1 1.25V4zm0 2.5V13a1 1 0 01-1 1H1a1 1 0 01-1-1V6.5h16zM4 10a1 1 0 100 2h1a1 1 0 100-2H4z" fill="#000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 281 B

2
src/components/Discussion/Module/Detail/components/CommentItem/index.vue
View File

@@ -152,7 +152,7 @@ const refReplyMd = ref();
const focusReplyMdEditor = async() => {
await nextTick();
const lastLineNumber = refReplyMd.value.instance.lastLine();
refReplyMd.value.instance.setCursor(lastLineNumber, 0);
refReplyMd.value.instance.set金银湖大模型(lastLineNumber, 0);
refReplyMd.value.instance.scrollIntoView(null, refReplyMd.value.instance.getScrollInfo().clientHeight - 10);
refReplyMd.value.instance.focus();
};

2
src/components/Discussion/Module/Detail/components/NewComment/index.vue
View File

@@ -156,7 +156,7 @@ defineExpose({
async focusMdEditor() {
await nextTick();
const lastLineNumber = refMd.value.instance.lastLine();
refMd.value.instance.setCursor(lastLineNumber, 0);
refMd.value.instance.set金银湖大模型(lastLineNumber, 0);
refMd.value.instance.focus();
},
setReply(blo:boolean = true) {

26
src/router/config/home.ts
View File

@@ -293,6 +293,32 @@ export default [
asideMenu: 'drawer' // 左侧菜单抽屉模式
}
},
{
path: '/CheckoutPage',
name: 'CheckoutPage',
component: () => import('@/views/Jyh/Payment/CheckoutPage.vue'),
meta: {
title: 'CheckoutPage',
reportTitle: 'CheckoutPage',
className: 'w-full min-w-full',
hiddenFooter: true,
hasMobile: true,
asideMenu: 'drawer' // 左侧菜单抽屉模式
}
},
{
path: '/CheckoutPayPage',
name: 'CheckoutPayPage',
component: () => import('@/views/Jyh/Payment/CheckoutPayPage.vue'),
meta: {
title: 'CheckoutPage',
reportTitle: 'CheckoutPage',
className: 'w-full min-w-full',
hiddenFooter: true,
hasMobile: true,
asideMenu: 'drawer' // 左侧菜单抽屉模式
}
},
{
path: '/ai',
redirect: '/ai/home',

2
src/views/Jyh/Dashboard/Header.vue
View File

@@ -9,7 +9,7 @@
</div>
<div class="header-right">
<div class="agent-text"><router-link to="/ai/home">AI大模型</router-link></div>
<div class="agent-text"><router-link to="/ai/home">金银湖大模型</router-link></div>
<button class="user-avatar-btn" @click="toggleDropdown" aria-label="User Account">
用

2
src/views/Jyh/Dashboard/Integration.vue
View File

@@ -55,7 +55,7 @@
<div class="api-section">
<div class="api-header">用户 API 密钥</div>
<p class="api-description">
用户 API 密钥提供对您的 **Cursor 账户**的安全、程序化访问权限，包括 **Cursor Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
用户 API 密钥提供对您的 **金银湖大模型 账户**的安全、程序化访问权限，包括 **金银湖大模型 Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
</p>
<div class="api-card">

2
src/views/Jyh/Dashboard/overview/TeamSetupModal.vue
View File

@@ -33,7 +33,7 @@
<div class="checkbox-group">
<label>
<input type="checkbox" v-model="agreeToTerms">
我的团队的代码和使用数据将用于改进 Cursor。
我的团队的代码和使用数据将用于改进 金银湖大模型。
</label>
<span class="link-text">改变</span>
</div>

12
src/views/Jyh/Dashboard/overview/index.vue
View File

@@ -5,19 +5,25 @@
<d-card class="plan-card">
<div class="card-title">专业版 <span class="price">20美元/月</span></div>
<div class="card-desc">入门级套餐，可访问高级模型、无限次 Tab 键自动补全等功能。</div>
<d-button class="card-btn white-btn">免费试用7天</d-button>
<d-button class="card-btn white-btn">
<router-link to="/CheckoutPage">免费试用7天</router-link>
</d-button>
</d-card>
<d-card class="plan-card">
<div class="card-title">专业+ <span class="price">60美元/月</span></div>
<div class="card-desc">使用量是专业版的 3 倍，解锁代理程序更高的限制等等。</div>
<d-button class="card-btn white-btn">升级到专业版+</d-button>
<d-button class="card-btn white-btn">
<router-link to="/CheckoutPayPage">升级到专业版+</router-link>
</d-button>
</d-card>
<d-card class="plan-card">
<div class="card-title">超级版 <span class="price">200美元/月</span></div>
<div class="card-desc">并行运行代理，享受 20 倍使用限制，并获得高级功能的优先使用权，从而获得最大价值。</div>
<d-button class="card-btn white-btn">升级到超级版</d-button>
<d-button class="card-btn white-btn">
<router-link to="/CheckoutPayPage">升级到超级版</router-link>
</d-button>
</d-card>
</div>

2
src/views/Jyh/Dashboard/proxy.vue
View File

@@ -67,7 +67,7 @@
<div class="api-section">
<div class="section-title">用户 API 密钥</div>
<p class="api-description">
用户 API 密钥提供对您的 Cursor 账户的安全、程序化访问权限，包括 **Cursor Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
用户 API 密钥提供对您的 金银湖大模型 账户的安全、程序化访问权限，包括 **金银湖大模型 Agent CLI** 的无头版本和 **Cloud Agent API**。请像对待密码一样妥善保管它们：确保其安全，切勿公开分享。注意：<span class="highlight-text">Cloud Agent API 目前处于测试阶段。</span>
</p>
<div class="api-card">

2
src/views/Jyh/Dashboard/setting.vue
View File

@@ -13,7 +13,7 @@
<span class="item-title">共享数据</span>
<span class="status-tag">1小时后激活</span>
</div>
<p class="item-description">您的代码库、提示、编辑和其他使用数据将被 Cursor 存储和训练，以改进产品。</p>
<p class="item-description">您的代码库、提示、编辑和其他使用数据将被 金银湖大模型 存储和训练，以改进产品。</p>
</div>
<d-button class="action-btn edit-btn">编辑</d-button>
</div>

530
src/views/Jyh/Payment/CheckoutPage.vue Normal file
View File

@@ -0,0 +1,530 @@
<template>
<div class="checkout-page">
<div class="summary-panel">
<div class="summary-content">
<div class="back-button-placeholder">
<button class="back-btn" @click="goBack">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
</div>
<h1 class="panel-title">试用 金银湖大模型 Pro</h1>
<div class="trial-info">
<span class="trial-days">7 天免费</span>
<p class="trial-note">随后 US$20.00/月 (从 2025年12月17日开始)</p>
</div>
<div class="plan-card">
<div class="card-details">
<div class="card-header">
<span class="card-title">金银湖大模型 Pro</span>
<span class="card-tag">7 天免费</span>
</div>
<div class="card-features">
金银湖大模型 Pro unlocks unlimited tab completion, extended agent limits, and access to most features.
</div>
<div class="card-price">US$20.00 / 月度</div>
</div>
</div>
<div class="toggle-row">
<span class="toggle-label">采用年费计划</span>
<div class="toggle-switch">
<input type="checkbox" id="annual" v-model="isAnnual">
<label for="annual"></label>
</div>
<span class="toggle-discount">节省 US$4.00</span>
</div>
<div class="spacer"></div>
<div class="price-detail">
<div class="detail-row">
<span>小计</span>
<span>US$20.00</span>
</div>
<div class="detail-row">
<span>税 <i class="icon-info"></i></span>
<span>US$0.00</span>
</div>
<div class="detail-row total-row">
<span>试用后总额</span>
<span>US$20.00</span>
</div>
<div class="detail-row today-total">
<span>今日合计</span>
<span>US$0.00</span>
</div>
</div>
</div>
</div>
<div class="form-panel">
<h2 class="form-title">输入付款详情</h2>
<div class="form-group email-group">
<label>邮箱</label>
<d-input
size="lg"
placeholder="fukang10032@gmail.com"
v-model="formData.email"
class="email-input-custom"
></d-input>
</div>
<div class="form-group payment-group">
<label>支付方式</label>
<div class="payment-option">
<d-radio name="payment" value="card" v-model="formData.paymentMethod">
<img class="wechart-icon" src="@/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg">
<span class="radio-label">银行卡</span>
</d-radio>
<!-- <div v-if="formData.paymentMethod === 'card'" class="card-input-placeholder">-->
<!-- [Card Element Input Placeholder]-->
<!-- </div>-->
</div>
<div class="payment-option">
<d-radio name="payment" value="wechat" v-model="formData.paymentMethod">
<img class="wechart-icon" src="@/assets/v3/NTI4MWU5.ico">
<span class="radio-label">微信支付</span>
</d-radio>
</div>
<div class="payment-option">
<d-radio name="payment" value="alipay" v-model="formData.paymentMethod">
<img class="alipay-icon" src="@/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg">
<span class="radio-label">支付宝</span>
</d-radio>
</div>
</div>
<div class="save-info-text">
保存您的信息，以便更快地在 金银湖大模型 和支持 Stripe 的地方安全地支付。
</div>
<d-button class="start-trial-btn" @click="startTrial">开始试用</d-button>
<p class="terms-text">
订阅即表示您同意 金银湖大模型 服务条款，并且理解您的订阅将自动续订，直到您在 Stripe 客户门户上取消。
</p>
<div class="powered-by">
Powered by <span class="stripe-link">stripe</span> | 条款 | 隐私
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import {useRouter} from "vue-router";
const router = useRouter();
const formData = ref({
email: 'fukang10032@gmail.com',
paymentMethod: 'card', // 默认选中银行卡
});
const isAnnual = ref(false); // 控制年费月费切换
const startTrial = () => {
alert('开始试用按钮被点击！');
};
const goBack = () => {
router.go(-1);
};
</script>
<style lang="scss" scoped>
.checkout-page {
display: flex;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
box-sizing: border-box;
}
.summary-panel {
flex: 1.1;
background-color: #000;
color: #fff;
padding: 0 40px;
display: flex;
justify-content: flex-end;
}
.summary-content {
width: 100%;
max-width: 600px;
padding: 60px 0;
}
.form-panel {
flex: 1;
background-color: #fff;
color: #333;
padding: 60px 40px;
}
/* ------------------- 左侧摘要样式 ------------------- */
/* 优化点 3: 返回按钮样式 */
.back-button-placeholder {
margin-bottom: 50px;
}
.back-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
color: #fff;
opacity: 0.7;
transition: opacity 0.2s;
}
.back-btn:hover {
opacity: 1;
}
.panel-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 5px;
}
.trial-info {
margin-bottom: 50px;
}
.trial-days {
font-size: 44px;
font-weight: 700;
display: block;
}
.trial-note {
font-size: 14px;
color: #777;
margin-top: 5px;
}
/* 计划卡片 */
.plan-card {
background-color: #1e1e1e;
border-radius: 8px;
padding: 16px;
display: flex;
position: relative;
margin-bottom: 30px;
border: 1px solid #333;
}
.card-details {
flex-grow: 1;
padding: 4px 0;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.card-title {
font-weight: 600;
font-size: 16px;
color: #fff;
}
.card-features {
font-size: 12px;
color: #888;
line-height: 1.5;
margin-bottom: 8px;
}
.card-price {
font-size: 12px;
color: #aaa;
font-weight: 500;
}
.card-tag {
background-color: transparent;
color: #4CAF50;
font-size: 11px;
font-weight: 500;
padding: 2px 0;
}
/* 年月切换 */
.toggle-row {
display: flex;
align-items: center;
margin-bottom: 30px;
background-color: #111;
border-radius: 4px;
padding: 8px 12px;
justify-content: space-between;
}
.toggle-label {
font-size: 14px;
color: #ccc;
font-weight: 500;
}
.toggle-discount {
font-size: 12px;
color: #4CAF50;
font-weight: 500;
}
/* 简化开关样式 (Toggle Switch) */
.toggle-switch {
margin: 0 15px;
flex-grow: 1;
display: flex;
justify-content: flex-end;
}
.toggle-switch input[type="checkbox"] {
display: none;
}
.toggle-switch label {
cursor: pointer;
width: 40px;
height: 20px;
background-color: #444;
border-radius: 10px;
position: relative;
display: block;
transition: background-color 0.3s;
}
.toggle-switch label:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background-color: #ccc;
border-radius: 50%;
transition: 0.3s;
}
.toggle-switch input:checked + label {
background-color: #58a6ff;
}
.toggle-switch input:checked + label:after {
left: calc(100% - 18px);
background-color: white;
}
.spacer {
border-top: 1px solid #333;
margin: 20px 0;
}
/* 价格明细 */
.price-detail {
font-size: 14px;
}
.detail-row {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
color: #aaa;
}
.detail-row span:last-child {
font-weight: 500;
color: #fff;
}
.detail-row.total-row {
border-top: 1px solid #333;
padding-top: 20px;
margin-top: 15px;
color: #fff;
}
.detail-row.today-total {
font-size: 16px;
font-weight: 700;
color: #4CAF50;
}
.detail-row.today-total span:last-child {
color: #4CAF50;
}
/* ------------------- 右侧表单样式 ------------------- */
.form-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 40px;
color: #333;
}
.form-group {
margin-bottom: 30px;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 8px;
}
/* 优化点 1: 邮箱输入框美化 (参考 image_15239f.png) */
.email-input-custom :deep(.devui-input-wrapper) {
border: 1px solid #ddd;
border-radius: 4px; /* 略微减少圆角，更符合 image_15239f.png */
transition: border-color 0.2s, box-shadow 0.2s;
}
.email-input-custom :deep(.devui-input-wrapper.focus) {
border-color: #58a6ff;
box-shadow: 0 0 0 1px #58a6ff; /* 增加细微的聚焦阴影 */
}
.email-input-custom :deep(.devui-input) {
padding: 10px 12px;
font-size: 14px;
height: auto;
}
/* 支付方式 */
.payment-group {
margin-bottom: 40px;
}
.payment-group label {
margin-bottom: 12px;
}
/* 支付选项容器 */
.payment-option {
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 6px;
padding: 10px 15px;
/* 确保 Radio 按钮在未选中的 payment-option 中也能看到 */
}
.payment-option:hover {
border-color: #ccc;
}
/* DevUI Radio 样式定制 */
.payment-option :deep(.devui-radio-list) {
display: block;
}
.payment-option :deep(.devui-radio) {
display: flex;
justify-content: space-between;
align-items: center;
}
.payment-option :deep(.devui-radio-input) {
width: 16px;
height: 16px;
border: 1px solid #999;
}
.payment-option :deep(.devui-radio-input.checked) {
background-color: #000;
border-color: #000;
}
.payment-option :deep(.devui-radio-label) {
flex-grow: 1;
font-size: 14px;
font-weight: 500;
padding-left: 10px;
}
/* 银行卡图标组 */
.card-icons {
display: flex;
gap: 4px;
align-items: center;
}
/* 银行卡具体颜色 */
.visa-icon { background-color: #1a1f71; content: "V"; }
.master-icon { background-color: #ff5f00; content: "M"; }
.amex-icon { background-color: #007bc1; content: "A"; }
.card-input-placeholder {
height: 44px;
background-color: #f7f7f7;
border: 1px solid #eee;
border-radius: 4px;
margin: 15px 0 0 0;
display: flex;
align-items: center;
padding-left: 15px;
font-size: 14px;
color: #999;
}
/* 底部文本和按钮 */
.save-info-text {
font-size: 12px;
color: #666;
margin-bottom: 25px;
}
.start-trial-btn {
width: 100%;
height: 48px;
background-color: #000 !important;
color: #fff !important;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
margin-bottom: 20px;
border: none !important;
}
.terms-text {
font-size: 10px;
color: #888;
text-align: center;
line-height: 1.4;
max-width: 400px;
margin: 0 auto 15px;
}
.powered-by {
font-size: 10px;
color: #aaa;
text-align: center;
}
.stripe-link {
font-weight: bold;
color: #666;
}
::v-deep(.devui-radio__label) {
display: flex;
align-items: center;
margin-left: 16px;
img {
height: 16px;
text-align: center;
width: 24px;
margin-inline-end:8px;
border-radius: 2px;
max-width: 24px;
}
.wechart-icon {
width: 16px;
margin-right: 12px;
}
}
</style>

530
src/views/Jyh/Payment/CheckoutPayPage.vue Normal file
View File

@@ -0,0 +1,530 @@
<template>
<div class="checkout-page">
<div class="summary-panel">
<div class="summary-content">
<div class="back-button-placeholder">
<button class="back-btn" @click="goBack">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
</div>
<h1 class="panel-title">订阅 金银湖大模型 Pro</h1>
<div class="trial-info">
<span class="trial-days">US$60.00</span>
<p class="trial-note">每个月</p>
</div>
<div class="plan-card">
<div class="card-details">
<div class="card-header">
<span class="card-title">金银湖大模型 Pro</span>
<span class="card-tag">7 天免费</span>
</div>
<div class="card-features">
金银湖大模型 Pro unlocks unlimited tab completion, extended agent limits, and access to most features.
</div>
<div class="card-price">US$20.00 / 月度</div>
</div>
</div>
<div class="toggle-row">
<span class="toggle-label">采用年费计划</span>
<div class="toggle-switch">
<input type="checkbox" id="annual" v-model="isAnnual">
<label for="annual"></label>
</div>
<span class="toggle-discount">节省 US$4.00</span>
</div>
<div class="spacer"></div>
<div class="price-detail">
<div class="detail-row">
<span>小计</span>
<span>US$20.00</span>
</div>
<div class="detail-row">
<span>税 <i class="icon-info"></i></span>
<span>US$0.00</span>
</div>
<div class="detail-row total-row">
<span>试用后总额</span>
<span>US$20.00</span>
</div>
<div class="detail-row today-total">
<span>今日合计</span>
<span>US$0.00</span>
</div>
</div>
</div>
</div>
<div class="form-panel">
<h2 class="form-title">输入付款详情</h2>
<div class="form-group email-group">
<label>邮箱</label>
<d-input
size="lg"
placeholder="fukang10032@gmail.com"
v-model="formData.email"
class="email-input-custom"
></d-input>
</div>
<div class="form-group payment-group">
<label>支付方式</label>
<div class="payment-option">
<d-radio name="payment" value="card" v-model="formData.paymentMethod">
<img class="wechart-icon" src="@/assets/v3/card-ce24697297bd3c6a00fdd2fb6f760f0d.svg">
<span class="radio-label">银行卡</span>
</d-radio>
<!-- <div v-if="formData.paymentMethod === 'card'" class="card-input-placeholder">-->
<!-- [Card Element Input Placeholder]-->
<!-- </div>-->
</div>
<div class="payment-option">
<d-radio name="payment" value="wechat" v-model="formData.paymentMethod">
<img class="wechart-icon" src="@/assets/v3/NTI4MWU5.ico">
<span class="radio-label">微信支付</span>
</d-radio>
</div>
<div class="payment-option">
<d-radio name="payment" value="alipay" v-model="formData.paymentMethod">
<img class="alipay-icon" src="@/assets/v3/alipay-22c167d415e209c71b2ac68b7fbc9f43.svg">
<span class="radio-label">支付宝</span>
</d-radio>
</div>
</div>
<div class="save-info-text">
保存您的信息，以便更快地在 金银湖大模型 和支持 Stripe 的地方安全地支付。
</div>
<d-button class="start-trial-btn" @click="startTrial">订阅</d-button>
<p class="terms-text">
订阅即表示您同意 金银湖大模型 服务条款，并且理解您的订阅将自动续订，直到您在 Stripe 客户门户上取消。
</p>
<div class="powered-by">
Powered by <span class="stripe-link">stripe</span> | 条款 | 隐私
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import {useRouter} from "vue-router";
const router = useRouter();
const formData = ref({
email: 'fukang10032@gmail.com',
paymentMethod: 'card', // 默认选中银行卡
});
const isAnnual = ref(false); // 控制年费月费切换
const startTrial = () => {
alert('订阅按钮被点击！');
};
const goBack = () => {
router.go(-1);
};
</script>
<style lang="scss" scoped>
.checkout-page {
display: flex;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
box-sizing: border-box;
}
.summary-panel {
flex: 1.1;
background-color: #000;
color: #fff;
padding: 0 40px;
display: flex;
justify-content: flex-end;
}
.summary-content {
width: 100%;
max-width: 600px;
padding: 60px 0;
}
.form-panel {
flex: 1;
background-color: #fff;
color: #333;
padding: 60px 40px;
}
/* ------------------- 左侧摘要样式 ------------------- */
/* 优化点 3: 返回按钮样式 */
.back-button-placeholder {
margin-bottom: 50px;
}
.back-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
color: #fff;
opacity: 0.7;
transition: opacity 0.2s;
}
.back-btn:hover {
opacity: 1;
}
.panel-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 5px;
}
.trial-info {
margin-bottom: 50px;
}
.trial-days {
font-size: 44px;
font-weight: 700;
display: block;
}
.trial-note {
font-size: 14px;
color: #777;
margin-top: 5px;
}
/* 计划卡片 */
.plan-card {
background-color: #1e1e1e;
border-radius: 8px;
padding: 16px;
display: flex;
position: relative;
margin-bottom: 30px;
border: 1px solid #333;
}
.card-details {
flex-grow: 1;
padding: 4px 0;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.card-title {
font-weight: 600;
font-size: 16px;
color: #fff;
}
.card-features {
font-size: 12px;
color: #888;
line-height: 1.5;
margin-bottom: 8px;
}
.card-price {
font-size: 12px;
color: #aaa;
font-weight: 500;
}
.card-tag {
background-color: transparent;
color: #4CAF50;
font-size: 11px;
font-weight: 500;
padding: 2px 0;
}
/* 年月切换 */
.toggle-row {
display: flex;
align-items: center;
margin-bottom: 30px;
background-color: #111;
border-radius: 4px;
padding: 8px 12px;
justify-content: space-between;
}
.toggle-label {
font-size: 14px;
color: #ccc;
font-weight: 500;
}
.toggle-discount {
font-size: 12px;
color: #4CAF50;
font-weight: 500;
}
/* 简化开关样式 (Toggle Switch) */
.toggle-switch {
margin: 0 15px;
flex-grow: 1;
display: flex;
justify-content: flex-end;
}
.toggle-switch input[type="checkbox"] {
display: none;
}
.toggle-switch label {
cursor: pointer;
width: 40px;
height: 20px;
background-color: #444;
border-radius: 10px;
position: relative;
display: block;
transition: background-color 0.3s;
}
.toggle-switch label:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background-color: #ccc;
border-radius: 50%;
transition: 0.3s;
}
.toggle-switch input:checked + label {
background-color: #58a6ff;
}
.toggle-switch input:checked + label:after {
left: calc(100% - 18px);
background-color: white;
}
.spacer {
border-top: 1px solid #333;
margin: 20px 0;
}
/* 价格明细 */
.price-detail {
font-size: 14px;
}
.detail-row {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
color: #aaa;
}
.detail-row span:last-child {
font-weight: 500;
color: #fff;
}
.detail-row.total-row {
border-top: 1px solid #333;
padding-top: 20px;
margin-top: 15px;
color: #fff;
}
.detail-row.today-total {
font-size: 16px;
font-weight: 700;
color: #4CAF50;
}
.detail-row.today-total span:last-child {
color: #4CAF50;
}
/* ------------------- 右侧表单样式 ------------------- */
.form-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 40px;
color: #333;
}
.form-group {
margin-bottom: 30px;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 8px;
}
/* 优化点 1: 邮箱输入框美化 (参考 image_15239f.png) */
.email-input-custom :deep(.devui-input-wrapper) {
border: 1px solid #ddd;
border-radius: 4px; /* 略微减少圆角，更符合 image_15239f.png */
transition: border-color 0.2s, box-shadow 0.2s;
}
.email-input-custom :deep(.devui-input-wrapper.focus) {
border-color: #58a6ff;
box-shadow: 0 0 0 1px #58a6ff; /* 增加细微的聚焦阴影 */
}
.email-input-custom :deep(.devui-input) {
padding: 10px 12px;
font-size: 14px;
height: auto;
}
/* 支付方式 */
.payment-group {
margin-bottom: 40px;
}
.payment-group label {
margin-bottom: 12px;
}
/* 支付选项容器 */
.payment-option {
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 6px;
padding: 10px 15px;
/* 确保 Radio 按钮在未选中的 payment-option 中也能看到 */
}
.payment-option:hover {
border-color: #ccc;
}
/* DevUI Radio 样式定制 */
.payment-option :deep(.devui-radio-list) {
display: block;
}
.payment-option :deep(.devui-radio) {
display: flex;
justify-content: space-between;
align-items: center;
}
.payment-option :deep(.devui-radio-input) {
width: 16px;
height: 16px;
border: 1px solid #999;
}
.payment-option :deep(.devui-radio-input.checked) {
background-color: #000;
border-color: #000;
}
.payment-option :deep(.devui-radio-label) {
flex-grow: 1;
font-size: 14px;
font-weight: 500;
padding-left: 10px;
}
/* 银行卡图标组 */
.card-icons {
display: flex;
gap: 4px;
align-items: center;
}
/* 银行卡具体颜色 */
.visa-icon { background-color: #1a1f71; content: "V"; }
.master-icon { background-color: #ff5f00; content: "M"; }
.amex-icon { background-color: #007bc1; content: "A"; }
.card-input-placeholder {
height: 44px;
background-color: #f7f7f7;
border: 1px solid #eee;
border-radius: 4px;
margin: 15px 0 0 0;
display: flex;
align-items: center;
padding-left: 15px;
font-size: 14px;
color: #999;
}
/* 底部文本和按钮 */
.save-info-text {
font-size: 12px;
color: #666;
margin-bottom: 25px;
}
.start-trial-btn {
width: 100%;
height: 48px;
background-color: #000 !important;
color: #fff !important;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
margin-bottom: 20px;
border: none !important;
}
.terms-text {
font-size: 10px;
color: #888;
text-align: center;
line-height: 1.4;
max-width: 400px;
margin: 0 auto 15px;
}
.powered-by {
font-size: 10px;
color: #aaa;
text-align: center;
}
.stripe-link {
font-weight: bold;
color: #666;
}
::v-deep(.devui-radio__label) {
display: flex;
align-items: center;
margin-left: 16px;
img {
height: 16px;
text-align: center;
width: 24px;
margin-inline-end:8px;
border-radius: 2px;
max-width: 24px;
}
.wechart-icon {
width: 16px;
margin-right: 12px;
}
}
</style>