432 lines
14 KiB
HTML
432 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>购买服务 - 价格表</title>
|
||
<style>
|
||
:root {
|
||
--bg: #0b1220;
|
||
--panel: #0f1a2a;
|
||
--cell: #141b2a;
|
||
--cell-odd: #0f1624;
|
||
--muted: #98a6c0;
|
||
--accent: #FF7A2D;
|
||
/* 橙色 CTA（你之前用的主色） */
|
||
--accent-2: #8C7AFF;
|
||
/* 紫色标题 */
|
||
--highlight: #39C5FF;
|
||
/* 副标题蓝 */
|
||
--green: #35d07c;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: "PingFang SC", "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
|
||
background: var(--bg);
|
||
color: #fff;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
.wrap {
|
||
max-width: 1200px;
|
||
margin: 40px auto;
|
||
padding: 24px;
|
||
}
|
||
|
||
.title {
|
||
text-align: center;
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
.title h2 {
|
||
font-size: 30px;
|
||
margin: 0 0 8px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.title p {
|
||
margin: 0;
|
||
color: var(--highlight);
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 表格容器 */
|
||
.pricing-panel {
|
||
background: #1e293b;
|
||
border-radius: 12px;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
box-shadow: 0 6px 30px rgba(4, 8, 20, 0.6);
|
||
}
|
||
|
||
/* 使用 CSS Grid 来布局：左侧宽列 + 4 列等分 */
|
||
.pricing-table {
|
||
display: grid;
|
||
grid-template-columns: 340px repeat(4, 1fr);
|
||
grid-auto-rows: auto;
|
||
gap: 0;
|
||
align-items: stretch;
|
||
}
|
||
|
||
/* 顶部行：切换 + 每列标题（名称 + 价格） */
|
||
.cell {
|
||
padding: 22px 20px;
|
||
border-left: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.02);
|
||
background: var(--panel);
|
||
}
|
||
|
||
.cell-left-label {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 左侧第一格为切换 */
|
||
.toggle-cell {
|
||
background: #1e293b;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.toggle-cell .left-label {
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
min-width: 50px;
|
||
}
|
||
|
||
/* 开关样式 */
|
||
/*.switch {
|
||
--w:46px;
|
||
--h:24px;
|
||
position:relative;
|
||
width:var(--w);
|
||
height:var(--h);
|
||
background:rgba(255,255,255,0.06);
|
||
border-radius:999px;
|
||
display:inline-block;
|
||
vertical-align:middle;
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
|
||
}
|
||
/*.switch input{
|
||
display:none;
|
||
}
|
||
.switch .knob{
|
||
position:absolute;
|
||
top:2px;
|
||
left:2px;
|
||
width:20px;
|
||
height:20px;
|
||
border-radius:50%;
|
||
background:#fff;
|
||
transform:translateX(0);
|
||
transition:all .22s ease;
|
||
box-shadow:0 2px 6px rgba(0,0,0,0.5);
|
||
}
|
||
.switch input:checked + .knob{
|
||
transform:translateX(22px);
|
||
}
|
||
|
||
.toggle-cell .year-note{
|
||
color:var(--green);
|
||
font-size:13px;
|
||
}
|
||
*/
|
||
/* 各 plan 的 header 区域 */
|
||
.plan-header {
|
||
text-align: center;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.03));
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.plan-name {
|
||
color: var(--accent-2);
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
letter-spacing: 0.6px;
|
||
text-transform: none;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.plan-price {
|
||
font-weight: 700;
|
||
font-size: 22px;
|
||
color: #fff;
|
||
}
|
||
|
||
.plan-price .per {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
margin-left: 6px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 第二行左侧：USAGE 标题列 */
|
||
.usage-cell {
|
||
padding: 18px 20px;
|
||
background: linear-gradient(180deg, rgba(12, 20, 34, 0.35), rgba(6, 12, 20, 0.2));
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.usage-title {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.usage-item {
|
||
font-size: 14px;
|
||
color: #cbd8ef;
|
||
}
|
||
|
||
/* usage 数值列 */
|
||
.usage-value {
|
||
padding: 18px 20px;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
background: linear-gradient(180deg, rgba(5, 10, 20, 0.25), rgba(3, 6, 12, 0.12));
|
||
}
|
||
|
||
.cell usage-value-item {
|
||
padding: 18px 20px;
|
||
text-align: left;
|
||
/* 左对齐 */
|
||
color: #cbd8ef;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
|
||
}
|
||
|
||
/* 去掉第一个单元格左边框 */
|
||
.pricing-table>*:first-child {
|
||
border-left: none;
|
||
}
|
||
|
||
/* 分隔线视觉调整：在 desktop 显得整齐 */
|
||
.pricing-table>.cell+.cell {
|
||
/* border-left already handles column separation */
|
||
}
|
||
|
||
/* 右侧列的竖直对齐：保证 header 与 usage 对齐 */
|
||
.pricing-table>.plan-header {
|
||
min-height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.faq-section {
|
||
margin-top: 40px;
|
||
padding: 24px;
|
||
background: var(--panel);
|
||
/* 用和表格一致的底色 */
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.faq-title {
|
||
font-size: 22px;
|
||
margin-bottom: 20px;
|
||
color: var(--accent-2);
|
||
/* 保持和表格标题统一 */
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
|
||
.faq-item {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.faq-item h3 {
|
||
font-size: 15px;
|
||
color: #fff;
|
||
/* 标题直接白色，更简洁 */
|
||
margin: 0 0 6px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.faq-item p {
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
/* 统一淡灰蓝色 */
|
||
margin: 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.header-colorful-text {
|
||
display: inline-block;
|
||
/* 必须，保证背景图片显示 */
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
-webkit-text-fill-color: transparent;
|
||
/* Chrome/Safari */
|
||
-webkit-background-clip: text;
|
||
/* Chrome/Safari */
|
||
background-clip: text;
|
||
/* Firefox 支持 */
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
padding: 10px 0 20px 0;
|
||
}
|
||
|
||
/* 先给表格四列添加细微分色（可按需移除） */
|
||
|
||
|
||
/* 响应式：窄屏改为纵向堆叠 */
|
||
@media (max-width:980px) {
|
||
.pricing-table {
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* 改成纵向堆叠 */
|
||
}
|
||
|
||
.pricing-panel {
|
||
overflow-x: hidden;
|
||
/* 禁止横向滚动 */
|
||
}
|
||
|
||
.cell {
|
||
border-left: none !important;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.plan-header {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
padding: 14px 18px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.usage-cell {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
padding: 12px 18px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.usage-value {
|
||
text-align: center;
|
||
padding: 12px 18px;
|
||
font-size: clamp(13px, 4vw, 18px);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="title">
|
||
<h2>购买服务</h2>
|
||
<span class="header-colorful-text"
|
||
style="background-image: url('https://www.satabot.com/upload/images/2025/11/6e57112777bc93be.jpg');">
|
||
灵活，有竞争力的定价和持续增值的服务
|
||
</span>
|
||
</div>
|
||
|
||
<div class="pricing-panel" role="table" aria-label="价格表">
|
||
<div class="pricing-table">
|
||
<!-- 第一行：切换 -->
|
||
<div class="cell toggle-cell" style="grid-row:1; grid-column:1;">
|
||
<div style="display:flex;align-items:center;gap:12px;">
|
||
<span class="left-label">月付</span>
|
||
|
||
<!-- <label class="switch" title="切换计费周期">
|
||
<input type="checkbox" id="billingToggle" aria-label="切换年付/月付">
|
||
<span class="knob"></span>
|
||
</label>
|
||
|
||
<span class="left-label" style="opacity:0.95">年付</span>
|
||
|
||
<div class="year-note">(省 2 个月)</div>
|
||
-->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 四列 plan header（第一行） -->
|
||
<div class="cell plan-header" style="grid-row:1; grid-column:2;">
|
||
<div class="plan-name">Free</div>
|
||
<div class="plan-price"><span class="price">¥0</span><span class="per">/月</span></div>
|
||
</div>
|
||
|
||
<div class="cell plan-header" style="grid-row:1; grid-column:3;">
|
||
<div class="plan-name">Basic</div>
|
||
<div class="plan-price"><span class="price">¥19</span><span class="per">/月</span></div>
|
||
</div>
|
||
|
||
<div class="cell plan-header" style="grid-row:1; grid-column:4;">
|
||
<div class="plan-name">Standard</div>
|
||
<div class="plan-price"><span class="price">¥59</span><span class="per">/月</span></div>
|
||
</div>
|
||
|
||
<div class="cell plan-header" style="grid-row:1; grid-column:5;">
|
||
<div class="plan-name">Pro</div>
|
||
<div class="plan-price"><span class="price">¥129</span><span class="per">/月</span></div>
|
||
</div>
|
||
<div class="cell usage-title-row" style="grid-row:2; grid-column:1 / 6;font-size: 10px;">USAGE
|
||
|
||
</div>
|
||
<!-- 第三行：USAGE 左侧 + 各列 usage -->
|
||
|
||
<div class="cell usage-value-item"
|
||
style="grid-row:3; grid-column:1;background:linear-gradient(180deg, rgba(5,10,20,0.25), rgba(3,6,12,0.12));font-size:14px;">
|
||
星点数</div>
|
||
<div class="cell usage-value" style="grid-row:3; grid-column:2;">—</div>
|
||
<div class="cell usage-value" style="grid-row:3; grid-column:3;">8,000 <span
|
||
class="cell-left-label">/月</span></div>
|
||
<div class="cell usage-value" style="grid-row:3; grid-column:4;">30,000 <span
|
||
class="cell-left-label">/月</span></div>
|
||
<div class="cell usage-value" style="grid-row:3; grid-column:5;">75,000 <span
|
||
class="cell-left-label">/月</span></div>
|
||
|
||
</div><!-- /.pricing-table -->
|
||
</div><!-- /.pricing-panel -->
|
||
|
||
<div class="faq-section">
|
||
<h2 class="faq-title">常见问题</h2>
|
||
|
||
<div class="faq-item">
|
||
<h3>SataBot Agent是什么？</h3>
|
||
<p>SataBot Agent 是一款由人工智能驱动的光伏场景AI应用程序。SataBot Agent AI 能力基于飒沓自研大模型的 AIGC 服务构建。</p>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<h3>SataBot Agent 是免费的吗？</h3>
|
||
<p>当您注册 SataBot Agent 时，将会免费获得 10 次问答。如果您希望长期使用，请考虑购买我们的服务。</p>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<h3>什么是星点？</h3>
|
||
<p>星点（Star Points）是 SataBot Agent 内部用于计量您所拥有的 AIGC 服务资源的货币单位。每月 Basic 套餐包含 8000 星点，Standard 套餐包含
|
||
30000 星点，Pro 套餐包含 75000 星点，Premium 套餐包含 120000 星点。本月未消耗完星点会过期，下个月套餐生效时自动恢复。</p>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<h3>星点消耗是如何计算的？</h3>
|
||
<p>根据使用的 AIGC 服务，产生不同的星点消耗。当使用大语言模型问答时，将根据您的提问和模型的回答文本长度计算星点消耗。</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div><!-- /.wrap -->
|
||
|
||
<!-- 可选：简单 JS 让开关切换时改变价格文本（演示用途） -->
|
||
|
||
|
||
|
||
</body>
|
||
|
||
</html> |