Evan
/
DoTouchAI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DoTouch.AI 官网设计稿 v1.6.1</title>
<style>
:root{
  --bg:#0B1020; --card:#121831; --border:rgba(255,255,255,.08);
  --purple:#7C5CFF; --purple-l:#9B7BFF; --green:#00E5A0; --green-l:#5FF5C3;
  --text:#E8ECF8; --muted:#9AA3C0; --gold:#FFC24D;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.dev-note{position:fixed;right:14px;bottom:14px;z-index:99;background:rgba(18,24,49,.92);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12px;color:var(--muted)}
a{color:var(--purple-l);text-decoration:none}

/* ── Header ── */
header{border-bottom:1px solid var(--border);background:rgba(11,16,32,.9);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;gap:28px;height:64px}
.nav-logo{font-size:22px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.nav-logo b{color:var(--purple-l)}
.nav-links{display:flex;gap:22px;font-size:14px}
.nav-links a{color:var(--muted);transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang-select{position:relative}
.lang-select select{appearance:none;background:var(--card);border:1px solid var(--border);color:var(--text);font-size:12px;border-radius:999px;padding:6px 28px 6px 12px;cursor:pointer;outline:none;font-family:var(--font)}
.lang-select::after{content:"▾";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:9px;color:var(--muted);pointer-events:none}
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text);transition:.2s}
.btn-primary{background:var(--purple);border-color:var(--purple)}
.btn-primary:hover{background:#8F70FF}
.btn-ghost:hover{border-color:var(--purple)}

/* ── Hero ── */
.hero{text-align:center;padding:84px 0 56px;background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(124,92,255,.18),transparent)}
.badge{display:inline-block;border:1px solid rgba(124,92,255,.4);background:rgba(124,92,255,.12);color:var(--purple-l);border-radius:999px;padding:4px 14px;font-size:12.5px;margin-bottom:20px}
.hero h1{font-size:52px;font-weight:800;letter-spacing:-1px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--purple-l),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:640px;margin:18px auto 30px;color:var(--muted);font-size:15.5px}
.hero-cta{display:flex;gap:12px;justify-content:center}
.hero-note{margin-top:26px;font-size:12.5px;color:var(--gold)}
.hero-note b{color:var(--gold)}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:36px 0}
.stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center}
.stat b{display:block;font-size:26px;font-weight:800}
.stat span{font-size:12.5px;color:var(--muted)}

/* ── 模型卡（本币价格）── */
.section-title{text-align:center;margin:56px 0 28px}
.section-title .kicker{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--purple-l)}
.section-title h2{font-size:22px;font-weight:800;margin-top:4px}
.section-title p{color:var(--muted);font-size:14px;margin-top:6px}
.models{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.model{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;transition:.2s}
.model:hover{border-color:rgba(124,92,255,.5);transform:translateY(-3px)}
.model .tag{float:right;font-size:11px;border-radius:999px;padding:2px 10px;border:1px solid}
.tag-purple{color:var(--purple-l);border-color:rgba(124,92,255,.35);background:rgba(124,92,255,.12)}
.tag-green{color:var(--green-l);border-color:rgba(0,229,160,.3);background:rgba(0,229,160,.1)}
.tag-gold{color:var(--gold);border-color:rgba(255,194,77,.3);background:rgba(255,194,77,.1)}
.model h3{font-size:16px}
.model .desc{font-size:12.5px;color:var(--muted);min-height:34px;margin:6px 0 12px}
.model .price{font-size:13px;color:var(--muted)}
.model .price b{color:var(--text)}
.model .price small{opacity:.6;font-weight:400}
.model .fx{font-size:13px;color:var(--purple-l);font-weight:600;margin-top:6px}
.model .fx small{font-weight:400;opacity:.7}
.model a{font-size:13px;font-weight:600;display:inline-block;margin-top:12px}

/* ── 邀请奖励 ── */
.referral{border:1px solid rgba(124,92,255,.35);background:linear-gradient(135deg,rgba(124,92,255,.1),rgba(0,229,160,.06));border-radius:18px;padding:32px;margin:56px 0;display:grid;grid-template-columns:1.2fr 2fr;gap:28px;align-items:center}
.referral h2{font-size:22px;font-weight:800}
.referral p{color:var(--muted);font-size:14px;margin-top:8px}
.referral-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.r-card{background:rgba(18,24,49,.7);border:1px solid var(--border);border-radius:12px;padding:16px}
.r-card b{font-size:14px;color:var(--green-l)}
.r-card p{font-size:12px;margin-top:4px}

/* ── 汇率提示条 ── */
.rate-note{max-width:560px;margin:20px auto 0;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,194,77,.3);background:rgba(255,194,77,.08);border-radius:12px;padding:12px 18px;font-size:13.5px;color:var(--gold)}

/* ── 页脚 ── */
footer{border-top:1px solid var(--border);margin-top:64px;padding:36px 0;color:var(--muted);font-size:13px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.foot h4{color:var(--text);font-size:13px;margin-bottom:10px}
.foot a{display:block;color:var(--muted);margin:6px 0;font-size:12.5px}
.foot a:hover{color:var(--text)}
.foot-bottom{margin-top:28px;padding-top:18px;border-top:1px solid var(--border);font-size:12px;display:flex;justify-content:space-between}
</style>
</head>
<body>

<div class="dev-note">v1.6.1 · 2026-08-09 · 官网设计稿 · 9 语言 × 7 币种 · 稳定汇率策略</div>

<!-- ══════════ HEADER ══════════ -->
<header>
  <div class="wrap nav">
    <a class="nav-logo" href="#">DoTouch<b>.AI</b></a>
    <nav class="nav-links">
      <a href="#" class="active">首页</a>
      <a href="#">模型</a>
      <a href="#">定价</a>
      <a href="#">文档</a>
      <a href="#">控制台</a>
    </nav>
    <div class="nav-right">
      <div class="lang-select">
        <select>
          <option>Tiếng Việt</option>
          <option>English</option>
          <option selected>简体中文</option>
          <option>繁體中文</option>
          <option>Bahasa Indonesia</option>
          <option>Bahasa Melayu</option>
          <option>ไทย</option>
          <option>香港繁體</option>
          <option>العربية (RTL)</option>
        </select>
      </div>
      <a class="btn btn-ghost" href="#">登录</a>
      <a class="btn btn-primary" href="#">立即开始</a>
    </div>
  </div>
</header>

<!-- ══════════ HERO ══════════ -->
<section class="hero">
  <div class="wrap">
    <span class="badge">OpenAI 兼容 · 极致低价 · 越南优先</span>
    <h1>一触即达。<em>全端 AI。</em></h1>
    <p>DoTouch.AI 将中国前沿模型的力量 — GLM 5.2、DeepSeek V4 等 — 以难以置信的低价带给全球开发者与中小企业。同一套 OpenAI API。省 30%。零迁移。</p>
    <div class="hero-cta">
      <a class="btn btn-primary" href="#">免费开始</a>
      <a class="btn btn-ghost" href="#">查看价格</a>
    </div>
    <div class="rate-note">💱 稳定汇率：1 USD ≈ ¥7.2 ≈ 25,400₫ ≈ Rp16,200 ≈ RM4.70 ≈ ฿36.5 ≈ HK$7.8 ≈ SAR3.75 · 定期校准</div>
    <p class="hero-note">本币收款 · 稳定汇率 · 不随行情每日波动</p>
  </div>
</section>

<!-- ══════════ STATS ══════════ -->
<div class="wrap">
  <div class="stats">
    <div class="stat"><b>4+</b><span>前沿模型</span></div>
    <div class="stat"><b>30%</b><span>低于中国国内价</span></div>
    <div class="stat"><b>100%</b><span>OpenAI API 兼容</span></div>
    <div class="stat"><b>9</b><span>种语言 · 7 种货币</span></div>
  </div>
</div>

<!-- ══════════ 模型卡（本币价格）══════════ -->
<section class="wrap">
  <div class="section-title">
    <div class="kicker">模型</div>
    <h2>中国前沿模型，一个 API</h2>
    <p>所有模型经阿里云百炼提供，完全兼容 OpenAI</p>
  </div>
  <div class="models">
    <div class="model">
      <span class="tag tag-purple">旗舰</span>
      <h3>GLM 5.2</h3>
      <p class="desc">旗舰多模态模型。推理、编码与智能体任务。</p>
      <div class="price">输入 <b><span class="fx">¥7.06</span> <small>($0.98)</small></b></div>
      <div class="price">输出 <b><span class="fx">¥22.18</span> <small>($3.08)</small></b></div>
      <a href="#">查看详情 →</a>
    </div>
    <div class="model">
      <span class="tag tag-green">性价比之选</span>
      <h3>DeepSeek V4</h3>
      <p class="desc">开源权重的推理引擎。适合高并发对话与 RAG。</p>
      <div class="price">输入 <b><span class="fx">¥1.01</span> <small>($0.14)</small></b></div>
      <div class="price">输出 <b><span class="fx">¥2.02</span> <small>($0.28)</small></b></div>
      <a href="#">查看详情 →</a>
    </div>
    <div class="model">
      <span class="tag tag-gold">推理</span>
      <h3>DeepSeek V4 Pro</h3>
      <p class="desc">深度推理，应对复杂数学、逻辑与长期规划。</p>
      <div class="price">输入 <b><span class="fx">¥2.16</span> <small>($0.30)</small></b></div>
      <div class="price">输出 <b><span class="fx">¥4.32</span> <small>($0.60)</small></b></div>
      <a href="#">查看详情 →</a>
    </div>
    <div class="model">
      <span class="tag tag-purple">企业级</span>
      <h3>Qwen Max</h3>
      <p class="desc">最强通用模型。多语言与工具调用就绪。</p>
      <div class="price">输入 <b><span class="fx">¥14.11</span> <small>($1.96)</small></b></div>
      <div class="price">输出 <b><span class="fx">¥56.45</span> <small>($7.84)</small></b></div>
      <a href="#">查看详情 →</a>
    </div>
  </div>
  <div class="rate-note">稳定汇率：1 USD ≈ 25,400₫ ≈ ¥7.2 ≈ Rp16,200 ≈ RM4.70 ≈ ฿36.5 ≈ HK$7.8 ≈ SAR3.75 · 定期校准</div>
</section>

<!-- ══════════ 邀请奖励 ══════════ -->
<section class="wrap">
  <div class="referral">
    <div>
      <span class="kicker" style="color:var(--purple-l);font-size:12px;font-weight:700;letter-spacing:2px">邀请奖励</span>
      <h2>邀请好友，双方都有奖</h2>
      <p>通过你的链接邀请新用户：你和好友各得对方首次增值的 10%（单次上限 $5）。</p>
      <a class="btn btn-primary" href="#" style="margin-top:16px">获取我的邀请链接</a>
    </div>
    <div class="referral-cards">
      <div class="r-card"><b>10% 转介绍</b><p>双方各得好友首次增值的 10%，单次最高 $5</p></div>
      <div class="r-card"><b>多次获奖励</b><p>邀请越多好友注册，每次都有奖励</p></div>
      <div class="r-card"><b>新友奖励</b><p>好友首次增值可获奖励（仅一次）</p></div>
    </div>
  </div>
</section>

<!-- ══════════ FOOTER ══════════ -->
<footer>
  <div class="wrap">
    <div class="foot">
      <div>
        <h4>DoTouch.AI</h4>
        <p>为全球开发者与中小企业提供负担得起的中国前沿 AI。</p>
      </div>
      <div><h4>产品</h4><a>控制台</a><a>服务状态</a><a>定价</a></div>
      <div><h4>开发者</h4><a>文档</a><a>快速上手</a><a>模型大全</a></div>
      <div><h4>支持</h4><a>客服</a><a>服务条款</a><a>隐私政策</a><a>退款政策</a></div>
    </div>
    <div class="foot-bottom">
      <span>开源世界 · AI 普惠</span>
      <span>© 2026 DoTouch.AI — doTouch.ai</span>
    </div>
  </div>
</footer>

</body>
</html>