Tcode平台改造升级-定价页面设计与前端开发

src/views/Jyh/Pricing/component/PricingComparisonTable.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="comparison-table-container">
+    <h2 class="main-title">比较不同套餐的功能</h2>
+
+    <div class="table-scroll-wrapper">
+      <table class="features-table">
+        <thead>
+        <tr>
+          <th class="feature-col-header"></th> <th v-for="plan in plans" :key="plan.name" class="plan-col-header">
+          <div class="header-content">
+            <span class="plan-name">{{ plan.name }}</span>
+            <a href="#" class="get-plan-btn">
+              {{ plan.btnText }}
+              <span class="arrow">↗</span>
+            </a>
+          </div>
+        </th>
+        </tr>
+        </thead>
+
+        <tbody>
+
+        <template v-for="(section, sIndex) in comparisonData" :key="sIndex">
+          <tr
+            class="category-row"
+            v-if="section.category"
+          >
+            <td colspan="6" class="category-title">{{ section.category }}</td>
+          </tr>
+
+          <tr v-for="(row, rIndex) in section.featureRows" :key="rIndex" class="data-row">
+            <td class="feature-name">{{ row.name }}</td>
+            <td v-for="(value, vIndex) in row.values" :key="vIndex" class="feature-value">
+              <span v-if="value === 'check'" class="check-icon">✓</span>
+              <span v-else-if="value === 'dash'" class="dash-icon">—</span>
+              <span v-else class="value-text">{{ value }}</span>
+            </td>
+          </tr>
+        </template>
+
+        <tr class="category-row">
+          <td colspan="6" class="category-title">安全与行政管理</td>
+        </tr>
+        <tr v-for="(row, rIndex) in adminFeatures" :key="rIndex" class="data-row">
+          <td class="feature-name">{{ row.name }}</td>
+          <td v-for="(value, vIndex) in row.values" :key="vIndex" class="feature-value">
+            <span v-if="value === 'check'" class="check-icon">✓</span>
+            <span v-else-if="value === 'dash'" class="dash-icon">—</span>
+            <span v-else class="value-text">{{ value }}</span>
+          </td>
+        </tr>
+
+        <tr class="category-row">
+          <td colspan="6" class="category-title">隐私</td>
+        </tr>
+        <tr v-for="(row, rIndex) in privacyFeatures" :key="rIndex" class="data-row">
+          <td class="feature-name">{{ row.name }}</td>
+          <td v-for="(value, vIndex) in row.values" :key="vIndex" class="feature-value">
+            <span v-if="value === 'check'" class="check-icon">✓</span>
+            <span v-else-if="value === 'dash'" class="dash-icon">—</span>
+            <span v-else class="value-text">{{ value }}</span>
+          </td>
+        </tr>
+
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 定义数据接口
+interface PlanHeader {
+  name: string;
+  btnText: string;
+}
+
+interface FeatureRow {
+  name: string;
+  values: string[];
+}
+
+interface FeatureSection {
+  category: string;
+  featureRows: FeatureRow[];
+}
+
+// 表头数据 (从截图 1 中提取)
+const plans = ref<PlanHeader[]>([
+  { name: '免费版', btnText: '获取免费版' },
+  { name: 'Plus 版', btnText: '获取 Plus' },
+  { name: 'Pro 版', btnText: '获取 Pro 版本' },
+  { name: 'Business 版', btnText: '获取 Business 版' },
+  { name: 'Enterprise 版', btnText: '联系销售人员' },
+]);
+
+// 隐私分类数据 (来自新截图 4.png)
+const privacyFeatures = ref<FeatureRow[]>([
+  {
+    name: '内容用于训练模型',
+    values: ['可选退出', '可选退出', '可选退出', '可选退出', '否，提供定制数据保留选项']
+  },
+]);
+
+// 安全与行政管理分类数据 (来自新截图 4.png)
+const adminFeatures = ref<FeatureRow[]>([
+  { name: 'SAML SSO', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+  { name: '统一搜索', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+  { name: '专属工作空间', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+  { name: 'GPT 分析与管理', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+  { name: '管理员控制台', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+  { name: '批量成员管理', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+  { name: '管理员角色', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+  { name: 'Soc 2 Type 2 合规认证', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+  { name: '已获 ISO 27001, 27017, 27018 和 27701 认证', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+  { name: '域验证', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+  { name: 'SCIM', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+  { name: '企业密钥管理', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
+  { name: '基于角色的访问控制', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
+  { name: '分析控制面板', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
+  { name: '合规 API', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
+  { name: 'IP 白名单', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
+  { name: '数据驻留地：美国、欧盟、英国、日本、新加坡、韩国、南非、印度、澳大利亚、巴西、阿联酋', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
+  { name: '品牌化工作空间', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
+  { name: '全局管理员控制台', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
+  { name: '连接注册服务', values: ['dash', 'dash', 'dash', 'dash', 'check'] },
+]);
+
+// 整合其他所有分类 (核心功能、模型、功能)
+const comparisonData = ref<FeatureSection[]>([
+  {
+    category: '核心功能',
+    featureRows: [
+      { name: '消息和互动', values: ['无限制', '无限制', '无限制', '无限制', '无限制'] },
+      { name: '聊天历史记录', values: ['无限制', '无限制', '无限制', '无限制', '无限制'] },
+      { name: '在网页、iOS 和 Android 设备上访问', values: ['check', 'check', 'check', 'check', 'check'] }
+    ]
+  },
+  {
+    category: '模型',
+    featureRows: [
+      { name: 'GPT-5', values: ['check', '扩展', '无限制*', '无限制*', '无限制*'] },
+      { name: 'GPT-5 Thinking', values: ['check', '扩展', '无限制*', '灵活**', '灵活**'] },
+      { name: 'GPT-5 pro', values: ['dash', 'dash', 'check', '灵活**', '灵活**'] },
+      { name: 'GPT-5 Thinking mini', values: ['check', '扩展', '无限制*', '灵活**', '灵活**'] },
+      { name: 'GPT-4o', values: ['dash', '标准', '无限制*', '无限制*', '无限制*'] },
+      { name: 'GPT-4.1', values: ['dash', '标准', '无限制*', '灵活**', '灵活**'] },
+      { name: 'GPT-4.5', values: ['dash', 'dash', 'check', 'dash', '灵活**'] },
+      { name: 'OpenAI o3', values: ['dash', '标准', '无限制*', '灵活**', '灵活**'] },
+      { name: 'OpenAI o3 pro', values: ['dash', 'dash', '无限制*', 'dash', '灵活**'] },
+      { name: 'OpenAI o4-mini', values: ['dash', '无限制*', '无限制*', '灵活**', '灵活**'] },
+    ]
+  },
+  {
+    category: '', // 模型下方的无标题部分
+    featureRows: [
+      { name: '联网访问', values: ['带限制可用性限', '快速', '快速', '快速', '最快'] },
+      { name: '上下文窗口处理', values: ['16K', '32K', '128K', '32K', '128K'] },
+      { name: '上下文窗口处理', values: ['196K', '196K', '196K', '196K', '196K'] },
+      { name: '跨越模型的视觉、跨模态和速度', values: ['check', 'check', 'check', 'check', 'check'] }
+    ]
+  },
+  {
+    category: '功能',
+    featureRows: [
+      { name: '高级语音对话', values: ['带限制', 'check', '无限制*', '标准', '灵活**'] },
+      { name: '高级视觉对话', values: ['dash', 'check', 'check', 'check', 'check'] },
+      { name: '标准语音对话', values: ['check', 'check', 'check', 'check', 'check'] },
+      { name: '应用', values: ['check', 'check', 'check', 'check', 'check'] },
+      { name: '记忆', values: ['带限制', '扩展', '扩展', '扩展', '扩展'] },
+      { name: '历史聊天记录', values: ['带限制', '随时删除', '随时删除', '随时删除', '随时删除'] },
+      { name: '搜索', values: ['check', 'check', 'check', 'check', 'check'] },
+      { name: 'Canvas', values: ['check', 'check', 'check', 'check', 'check'] },
+      { name: '在 macOS 上进行代码编辑', values: ['check', 'check', 'check', 'check', 'check'] },
+      { name: 'ChatGPT 副驾驶', values: ['dash', '带限制', 'check', 'check', 'check'] },
+      { name: '项目', values: ['dash', 'dash', 'check', 'check', 'check'] },
+      { name: '共享链路', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+      { name: '任务', values: ['dash', 'dash', 'check', 'check', 'check'] },
+      { name: '数据分析', values: ['带限制', 'check', 'check', 'check', 'check'] },
+      { name: '视觉', values: ['带限制', 'check', 'check', 'check', 'check'] },
+      { name: '连接内部资源的浏览器', values: ['dash', 'check', 'check', 'check', 'check'] },
+      { name: '公司知识库', values: ['dash', 'dash', 'dash', 'check', 'check'] },
+      { name: '自定义 GCF（由选定的开发者人员提供）', values: ['dash', 'check', 'check', 'check', 'check'] },
+      { name: 'ChatGPT 考试模式', values: ['dash', 'check', 'check', 'check', 'check'] },
+      { name: '文件上传', values: ['带限制', 'check', 'check', 'check', 'check'] },
+      { name: '发现并使用 GPT', values: ['dash', 'check', 'check', 'check', 'check'] },
+      { name: '创建和共享 GPT', values: ['dash', 'check', 'check', 'check', 'check'] },
+      { name: '与你的工作空间共享 GPT', values: ['dash', 'dash', 'check', 'check', 'check'] },
+      { name: '测试新功能的机会', values: ['带限制', 'check', 'check', 'check', 'check'] },
+      { name: '图像生成', values: ['带限制', 'check', 'check', 'check', 'check'] },
+      { name: '交互式表格和图表', values: ['带限制', 'check', 'check', 'check', 'check'] },
+    ]
+  },
+]);
+</script>
+
+<style scoped>
+/* ------------------------------------------- */
+/* 样式保持一致性 */
+/* ------------------------------------------- */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
+.comparison-table-container {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  background-color: #fff;
+  color: #000;
+}
+
+/* 主标题 */
+.main-title {
+  text-align: center;
+  font-size: 1.75rem;
+  font-weight: 500;
+  margin-bottom: 60px;
+  letter-spacing: -0.01em;
+}
+
+/* 表格滚动容器 */
+.table-scroll-wrapper {
+  overflow-x: auto;
+}
+
+.features-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 1000px;
+  font-size: 0.875rem;
+}
+
+/* --- 表头样式 --- */
+.plan-col-header {
+  padding-bottom: 40px;
+  vertical-align: bottom;
+  min-width: 140px;
+}
+
+.header-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.plan-name {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #000;
+}
+
+/* 黑色圆角按钮 */
+.get-plan-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #000;
+  color: #fff;
+  text-decoration: none;
+  padding: 8px 16px;
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: opacity 0.2s;
+}
+
+.arrow {
+  margin-left: 4px;
+  font-family: sans-serif;
+  font-size: 1.1em;
+}
+
+/* --- 类别标题行 (核心功能/模型/功能/隐私/安全) --- */
+.category-row td {
+  padding-top: 40px;
+  padding-bottom: 10px;
+  border-bottom: none;
+}
+
+.category-title {
+  font-size: 22px;
+  font-weight: 500;
+  color: #000;
+  text-align: left;
+  min-width: 280px;
+}
+
+/* --- 数据行样式 --- */
+.data-row td {
+  padding: 14px 0;
+  border-top: 1px solid #e5e5e5; /* 细灰线 */
+  font-size: 0.875rem;
+  color: #000;
+  font-weight: 400;
+}
+
+.feature-name {
+  text-align: left;
+  min-width: 280px;
+  padding-right: 20px;
+  vertical-align: top;
+  font-weight: 600 !important;
+}
+
+.feature-value {
+  text-align: center;
+  vertical-align: middle;
+  min-width: 140px;
+}
+
+/* 特殊符号和文本样式 */
+.check-icon, .dash-icon {
+  font-size: 1rem;
+  color: #000;
+  font-weight: bold;
+}
+
+.value-text {
+  font-size: 0.875rem;
+  color: #000;
+  font-weight: 400;
+}
+
+/* 移除表格最底部的线 */
+.features-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .feature-name, .category-title {
+    min-width: 200px;
+    padding-left: 10px;
+  }
+}
+</style>

src/views/Jyh/Pricing/component/PricingFAQ.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="faq-container">
+    <div class="footnotes">
+      <p class="footnote-item">*使用方式必须符合我们的政策</p>
+      <p class="footnote-item">**Enterprise 和 Business 可以购买积分以获得更多使用权限</p>
+    </div>
+
+    <h2 class="main-title">常见问题解答</h2>
+
+    <div class="faq-list">
+      <div v-for="(item, index) in faqItems" :key="index" class="faq-item">
+        <button class="question-header" @click="toggleAnswer(index)">
+          <span class="question-text">{{ item.question }}</span>
+          <span class="toggle-icon">{{ activeIndex === index ? '—' : '+' }}</span>
+        </button>
+
+        <div v-show="activeIndex === index" class="answer-content">
+          <p>{{ item.answer }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 用于控制当前展开项的索引
+const activeIndex = ref<number | null>(null);
+
+// FAQ 数据 (根据截图内容填充)
+const faqItems = ref([
+  {
+    question: 'ChatGPT 如何定价?',
+    answer: '每个人均可使用 ChatGPT 的免费版。付费套餐（Plus、Business 和 Enterprise 版本）按每个用户每月计算。Plus 和 Business 版本提供月度套餐，Business 和 Enterprise 版本提供年度套餐。',
+    // 截图中的第一项内容略有不同，但为了演示，这里使用截图上可见的答案和描述
+  },
+  {
+    question: 'ChatGPT 是否免费使用?',
+    answer: '是的，ChatGPT 免费版是永久免费的，但具有使用限制。付费套餐提供更多功能和更快的访问速度。'
+  },
+  {
+    question: 'OpenAI 是否为教育机构提供 ChatGPT 套餐?',
+    answer: '请联系我们的销售团队或访问教育相关页面了解针对教育机构的专属折扣和套餐信息。'
+  },
+  {
+    question: 'OpenAI 是否为非盈利组织提供折扣?',
+    answer: '是的，我们为符合条件的非盈利组织提供特别折扣。请访问我们的非盈利组织页面了解更多详情和申请流程。'
+  },
+  {
+    question: '每个订阅套餐支持多少用户?',
+    answer: '免费版和 Plus 版是针对个人用户的。Business 和 Enterprise 版本则支持多用户管理，具体数量请参考套餐详情或联系销售。'
+  },
+  {
+    question: '有哪些付款方式?',
+    answer: '我们接受主流的信用卡付款。年度套餐和企业级套餐可能支持更多支付方式，请在结账页面查看详细信息。'
+  },
+  {
+    question: 'ChatGPT 的安全性如何?',
+    answer: 'ChatGPT 采取了严格的安全措施来保护用户数据和隐私。Business 和 Enterprise 版本提供了更高级别的安全和行政管理功能。'
+  },
+  {
+    question: 'ChatGPT 如何使用我的数据?',
+    answer: '在免费版和 Plus 版中，您有权选择是否允许内容用于训练模型。Business 和 Enterprise 版本默认不会将您的数据用于模型训练。'
+  },
+]);
+
+// 切换手风琴项的函数
+const toggleAnswer = (index: number) => {
+  activeIndex.value = activeIndex.value === index ? null : index;
+};
+</script>
+
+<style scoped>
+/* 字体保持一致性 */
+.faq-container {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  max-width: 800px;
+  margin: 80px auto 100px; /* 增加上下边距 */
+  padding: 0 20px;
+  color: #0d0d0d;
+}
+
+/* 顶部脚注样式 */
+.footnotes {
+  text-align: center;
+  margin-bottom: 40px;
+  line-height: 1.5;
+}
+
+.footnote-item {
+  font-size: 0.75rem; /* 字体非常小 */
+  color: #6e6e80;
+}
+
+/* 主标题 */
+.main-title {
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 500;
+  margin-bottom: 40px;
+  letter-spacing: -0.01em;
+}
+
+/* FAQ 列表容器 */
+.faq-list {
+  border-top: 1px solid #e5e5e5; /* 顶部细线 */
+}
+
+.faq-item {
+  border-bottom: 1px solid #e5e5e5; /* 底部细线 */
+}
+
+/* 问题头部样式 */
+.question-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 20px 0;
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.question-text {
+  font-size: 1rem;
+  font-weight: 400;
+  color: #0d0d0d;
+}
+
+/* 展开/收起图标 */
+.toggle-icon {
+  font-size: 1.5rem;
+  font-weight: 300;
+  width: 20px; /* 固定宽度，防止跳动 */
+  text-align: right;
+  line-height: 1;
+}
+
+/* 答案内容样式 */
+.answer-content {
+  padding: 0 40px 20px 0; /* 左侧留空，底部填充 */
+  font-size: 0.95rem;
+  color: #353541;
+  line-height: 1.6;
+  max-height: 500px; /* 确保内容在可见范围内 */
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+}
+</style>

src/views/Jyh/Pricing/index.vue

@@ -1,13 +1,384 @@
 <template>
+  <div class="pricing">
+    <div class="pricing-container">
+      <header class="page-header">
+        <h1 class="page-title">定价</h1>
+        <p class="page-subtitle">查看我们的个人、Business 和 Enterprise 套餐定价。</p>
+      </header>
 
+      <div class="pricing-grid">
+        <div
+          v-for="(plan, index) in plans"
+          :key="index"
+          class="plan-card"
+        >
+          <div class="card-header">
+            <h2 class="plan-name">{{ plan.name }}</h2>
+            <p class="plan-desc">{{ plan.description }}</p>
+          </div>
+
+          <div class="plan-price-wrapper">
+            <div class="price-line" v-if="plan.price !== null">
+              <span class="currency">US${{ plan.price }}</span>
+              <span class="unit" v-if="plan.unit">{{ plan.unit }}</span>
+            </div>
+            <div class="price-line" v-else>
+              <span class="contact-text"> &nbsp; </span>
+            </div>
+          </div>
+
+          <button class="action-btn">
+            {{ plan.buttonText }}
+            <span class="arrow-icon">↗</span>
+          </button>
+
+          <div class="features-list">
+            <p v-if="plan.featuresTitle" class="features-title">{{ plan.featuresTitle }}</p>
+
+            <ul>
+              <li v-for="(feature, fIndex) in plan.features" :key="fIndex" class="feature-item">
+                <svg class="check-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span v-html="feature"></span>
+              </li>
+            </ul>
+          </div>
+
+          <div class="card-footer" v-if="plan.footerLink">
+            <a href="#">{{ plan.footerLink }}</a>
+          </div>
+        </div>
+      </div>
+
+      <PricingComparisonTable />
+
+
+      <PricingFAQ />
+
+      <div class="page-footer-link">
+        <p>Have an existing plan? See <a href="#">billing help</a></p>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { ref } from 'vue';
-name: "Pricing"
+import PricingComparisonTable from './component/PricingComparisonTable.vue';
+import PricingFAQ from './component/PricingFAQ.vue';
+
+// 定义数据结构
+interface Plan {
+  name: string;
+  description: string;
+  price: number | null; // null 用于企业版
+  unit?: string;
+  buttonText: string;
+  featuresTitle?: string;
+  features: string[];
+  footerLink?: string;
 }
+
+// 模拟数据：根据截图内容填充
+const plans = ref<Plan[]>([
+  {
+    name: '免费版',
+    description: '日常任务的智能辅助方案',
+    price: 0,
+    unit: '/月',
+    buttonText: '获取免费版本',
+    features: [
+      '有限使用高级模型',
+      '判断和上传的数据有限',
+      '回答生成速度：标准速度',
+      '有限的记忆深入研究',
+      '记忆与上下文支持受限'
+    ],
+    footerLink: '已有账号？登录以继续'
+  },
+  {
+    name: 'Plus',
+    description: '更多先进智能模型权限',
+    price: 20,
+    unit: '/月',
+    buttonText: '获取 Plus 版本',
+    featuresTitle: '免费版中的全部内容，以及：',
+    features: [
+      '使用 GPT-4, GPT-4o, GPT-4o mini',
+      '判断和上传的数据更高',
+      '图片生成（DALL·E 3）',
+      '更深入的记忆与高级数据分析功能',
+      '记忆与上下文支持增强',
+      '联网、语音和自定义 GPT',
+      '抢先体验新功能'
+    ],
+    footerLink: '查看适用范围'
+  },
+  {
+    name: 'Pro',
+    description: '全面运用 ChatGPT 的最佳功能',
+    price: 200,
+    unit: '/月',
+    buttonText: '获取 Pro 版本',
+    featuresTitle: 'Plus 中的全部功能，以及：',
+    features: [
+      '使用 GPT-4o Pro 进行专业推理',
+      '判断和上传数据无上限',
+      '无限制的高级图片生成',
+      '深度思考和复杂任务的最大支持',
+      '最大记忆与上下文支持',
+      '扩展限制、任务和自定义 GPT',
+      'o1 (原 o1-preview) 的高级推理能力',
+      '扩展的代码解释器',
+      '更深层的研究浏览'
+    ],
+    footerLink: '无限制、突发情况下的算力等，了解更多'
+  },
+  {
+    name: 'Business Free',
+    description: 'A secure way to try ChatGPT at work',
+    price: 0,
+    unit: '/month',
+    buttonText: 'Get Business Free',
+    features: [
+      'Limited access to our best model for work',
+      'Privacy built in; data never used for training',
+      'Limited video and image creation',
+      'Tools for teams like projects, custom GPTs',
+      'Unlimited collaborator invites',
+      'Integration with select business apps'
+    ]
+  },
+  {
+    name: 'Business 版',
+    description: '一个安全、协作的工作空间，专为初创企业和成长中的企业而设计',
+    price: 25,
+    unit: '/每位用户/每月 (按年计费)',
+    buttonText: '购买订阅',
+    featuresTitle: '包含 Plus 版套餐中的所有功能，并含：',
+    features: [
+      '无限制使用 GPT-4o 模型功能，并扩大使用 GPT-4 Turbo，以及对 GPT-4... 的访问',
+      '企业级环境，提供更长久的历史记录与 Slack, Google Drive... 等工具集成',
+      '安全的企业工作空间，拥有基本的管理控制、SAML SSO 和 MFA',
+      '数据不会用于训练模型',
+      '分享聊天、记录模式、Canvas、共享快捷指令和自定义工作区 GPT 等业务功能'
+    ],
+    footerLink: '无限制、团队协作功能等，了解更多'
+  },
+  {
+    name: '企业',
+    description: '企业级 AI，安全与全面支持',
+    price: null, // 代表联系销售
+    buttonText: '联系销售人员',
+    featuresTitle: 'Business 中的全部功能，以及：',
+    features: [
+      '扩展的上下文窗口，支持更长的输入和更大的文件',
+      '企业级安全控制，包括 SCIM、EIKM、用户分级、域验证和更精细的权限控制',
+      '高级数据分析：支持自定义数据保留策略、日志与保留审计功能...',
+      '在多个地区支持数据驻留',
+      '7x24 小时的优先支持、服务等级协议 (SLA)...',
+      '按量计费，专属折扣'
+    ]
+  }
+]);
 </script>
 
 <style scoped>
+/* 引入通用字体，模仿 OpenAI 风格 */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
+.pricing {
+  width: 100%;
+  background-color: white;
+}
+
+.pricing-container {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 60px 20px;
+  color: #0d0d0d;
+  background-color: white;
+}
+
+/* 头部样式 */
+.page-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.page-title {
+  font-size: 3rem; /* 48px */
+  font-weight: 600; /* Semi-bold */
+  margin-bottom: 16px;
+  letter-spacing: -0.02em;
+}
+
+.page-subtitle {
+  font-size: 1.125rem;
+  color: #6e6e80; /* 次级文本颜色 */
+}
+
+/* 网格布局 */
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 3列 */
+  gap: 24px;
+}
+
+/* 响应式：小于1024px变2列，小于768px变1列 */
+@media (max-width: 1024px) {
+  .pricing-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .pricing-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 卡片样式 */
+.plan-card {
+  border: 1px solid #e5e5e5;
+  border-radius: 12px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  transition: border-color 0.2s;
+  height: 100%;
+}
+
+.plan-card:hover {
+  border-color: #999;
+}
+
+/* 卡片头部 */
+.card-header {
+  min-height: 80px; /* 保持对齐 */
+  margin-bottom: 10px;
+}
+
+.plan-name {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+}
+
+.plan-desc {
+  font-size: 0.875rem;
+  color: #6e6e80;
+  line-height: 1.4;
+  margin: 0;
+}
+
+/* 价格区域 */
+.plan-price-wrapper {
+  margin-bottom: 24px;
+  min-height: 42px; /* 保持对齐 */
+}
+
+.price-line {
+  display: flex;
+  align-items: baseline;
+}
+
+.currency {
+  font-size: 2rem;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+}
+
+.unit {
+  font-size: 0.875rem;
+  color: #6e6e80;
+  margin-left: 4px;
+}
+
+/* 按钮样式 */
+.action-btn {
+  width: 100%;
+  background-color: #0d0d0d;
+  color: #fff;
+  border: none;
+  padding: 12px 16px;
+  border-radius: 999px; /* 胶囊圆角 */
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.2s;
+  margin-bottom: 32px;
+}
+
+.action-btn:hover {
+  background-color: #333;
+}
+
+.arrow-icon {
+  margin-left: 6px;
+  font-size: 1.1em;
+  line-height: 1;
+}
+
+/* 功能列表 */
+.features-list {
+  flex-grow: 1; /* 让内容撑开，使 footer 对齐底部 */
+}
+
+.features-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: #0d0d0d;
+}
+
+.features-list ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.feature-item {
+  display: flex;
+  align-items: flex-start;
+  font-size: 0.875rem;
+  color: #0d0d0d;
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+.check-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+  color: #0d0d0d;
+  flex-shrink: 0;
+  margin-top: 3px;
+}
+
+/* 底部链接 */
+.card-footer {
+  margin-top: 24px;
+  font-size: 0.75rem;
+  padding-top: 16px;
+  border-top: 1px solid transparent; /* 占位，如果需要分隔线可改为 #e5e5e5 */
+}
+
+.card-footer a, .page-footer-link a {
+  color: #0d0d0d;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.page-footer-link {
+  text-align: left;
+  margin-top: 40px;
+  font-size: 0.875rem;
+  color: #6e6e80;
+}
 </style>