AI/modal.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>