341 lines
12 KiB
Vue
341 lines
12 KiB
Vue
<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: '金银湖大模型 分析与管理', 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: '金银湖大模型-5', values: ['check', '扩展', '无限制*', '无限制*', '无限制*'] },
|
||
{ name: '金银湖大模型-5 Thinking', values: ['check', '扩展', '无限制*', '灵活**', '灵活**'] },
|
||
{ name: '金银湖大模型-5 pro', values: ['dash', 'dash', 'check', '灵活**', '灵活**'] },
|
||
{ name: '金银湖大模型-5 Thinking mini', values: ['check', '扩展', '无限制*', '灵活**', '灵活**'] },
|
||
{ name: '金银湖大模型-4o', values: ['dash', '标准', '无限制*', '无限制*', '无限制*'] },
|
||
{ name: '金银湖大模型-4.1', values: ['dash', '标准', '无限制*', '灵活**', '灵活**'] },
|
||
{ name: '金银湖大模型-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: 'Chat金银湖大模型 副驾驶', 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: 'Chat金银湖大模型 考试模式', values: ['dash', 'check', 'check', 'check', 'check'] },
|
||
{ name: '文件上传', values: ['带限制', 'check', 'check', 'check', 'check'] },
|
||
{ name: '发现并使用 金银湖大模型', values: ['dash', 'check', 'check', 'check', 'check'] },
|
||
{ name: '创建和共享 金银湖大模型', values: ['dash', 'check', 'check', 'check', 'check'] },
|
||
{ name: '与你的工作空间共享 金银湖大模型', 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: 60px 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: #BD2025;
|
||
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>
|