Files
LokiStack/homepage/pricing.html
T
Logan.Li e1e8243622
CI / Backend (go vet + test) (push) Waiting to run
CI / Frontend (lint + build + test) (push) Waiting to run
feat(site): 导航收敛为特性/文档/定价,新增定价页与站点自包含截图,dist 产物入库
- homepage/index.html:菜单改为 特性/文档/定价,正文按钮指向 /docs/ 与 /pricing
- homepage/pricing.html:新增许可与定价页(License & Pricing)
- homepage/assets/screenshots/:6 张文档截图收进站点,构建不再依赖仓库 docs/ 目录
- scripts/build-homepage.py:取图优先 homepage/assets;模板内置 h5 移动端修复(重建不丢);dist/assets 不再重复复制截图
- homepage/dist/:23 个构建产物入库,nginx 直接托管(重建幂等)
2026-11-01 22:54:13 +08:00

214 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>License &amp; Pricing 许可和定价 · LokiStack</title>
<meta name="description" content="LokiStack 许可与定价:社区版免费,专业版 ¥99/年起,永久授权 ¥199,团队版按席位,企业私有化交付。">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23059669'/%3E%3Ctext x='32' y='44' font-size='34' font-weight='800' fill='%23fff' text-anchor='middle' font-family='sans-serif'%3EL%3C/text%3E%3C/svg%3E">
<style>
:root{--brand:#059669;--brand-d:#047857;--ink:#0f172a;--muted:#5b6676;--line:#e6e9ee;--bg:#fff;--soft:#f7faf9}
*{box-sizing:border-box}
body{margin:0;font:15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand-d);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;color:var(--ink)}
.brand i{width:28px;height:28px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800}
nav.menu{display:flex;gap:22px;font-size:14.5px}
nav.menu a{color:#46505f}nav.menu a:hover{color:var(--brand-d)}
nav.menu a.on{color:var(--brand-d);font-weight:650}
.top-cta{margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:9px;font-size:14px;font-weight:600;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-d);text-decoration:none}
.btn-outline{border-color:#cfd8d4;color:#26313f;background:#fff}.btn-outline:hover{border-color:var(--brand);color:var(--brand-d);text-decoration:none}
.hero{padding:56px 0 30px;text-align:center}
.badge{display:inline-block;padding:5px 12px;border-radius:999px;background:#e8f7f1;color:var(--brand-d);font-size:12.5px;font-weight:650;letter-spacing:.01em}
.hero h1{font-size:40px;line-height:1.22;margin:16px 0 10px;letter-spacing:-.02em}
.hero p{color:var(--muted);max-width:640px;margin:0 auto;font-size:16px}
#intent-bar{position:sticky;top:62px;z-index:29;background:#e8f7f1;border-bottom:1px solid #cdeee1;color:#065f46}
#intent-bar .in{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:13.5px}
#intent-bar b{font-weight:700}
#intent-bar button{margin-left:auto;background:none;border:0;color:#065f46;font-size:18px;cursor:pointer;line-height:1}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:34px 0 10px;align-items:stretch}
.plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff;transition:.18s}
.plan:hover{box-shadow:0 8px 24px rgba(15,23,42,.07);transform:translateY(-2px)}
.plan.rec{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.plan.hl{outline:3px solid rgba(5,150,105,.28);outline-offset:2px;animation:pulse 1.6s ease-in-out 2}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,.25)}50%{box-shadow:0 0 0 10px rgba(5,150,105,0)}}
.plan h3{margin:0 0 4px;font-size:16px}
.plan .sub{color:#8a94a3;font-size:12.5px;min-height:18px}
.price{margin:14px 0 4px;font-size:34px;font-weight:800;letter-spacing:-.02em}
.price small{font-size:13px;font-weight:600;color:#8a94a3;margin-left:3px}
.plan ul{list-style:none;padding:0;margin:16px 0 20px;font-size:13.5px;color:#3c4757;flex:1}
.plan li{padding:5px 0 5px 22px;position:relative}
.plan li:before{content:"";position:absolute;left:2px;top:11px;width:13px;height:7px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.plan .btn{width:100%}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;background:#e8f7f1;color:var(--brand-d);font-size:11.5px;font-weight:700;margin-bottom:8px}
#activate{scroll-margin-top:90px;margin:56px 0 0;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}
#activate h2{margin:0 0 6px;font-size:22px}
#activate p.lead{color:var(--muted);margin:0 0 18px;font-size:14px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px 14px 44px;position:relative;font-size:13.5px;color:#3c4757}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:14px;top:13px;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.step b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
kbd{background:#eef2f4;border:1px solid #dbe2e6;border-bottom-width:2px;border-radius:5px;padding:1px 5px;font:12px ui-monospace,Menlo,monospace}
.faq{margin:54px 0 0}
.faq h2{font-size:22px;margin:0 0 14px}
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";float:right;color:#98a2b3;font-weight:400}
details[open] summary:after{content:"–"}
details p{color:var(--muted);font-size:14px;margin:10px 0 0}
.cta{margin:56px 0;padding:30px;border-radius:16px;background:linear-gradient(135deg,#059669,#065f46);color:#fff;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cta h2{margin:0;font-size:22px}.cta p{margin:4px 0 0;opacity:.9;font-size:14px}
.cta .btn{margin-left:auto;background:#fff;color:var(--brand-d)}
footer{border-top:1px solid var(--line);padding:24px 0;color:#98a2b3;font-size:12.5px}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer a{color:#6b7684}
@media (max-width:960px){.plans{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:30px}}
@media (max-width:640px){nav.menu{display:none}.plans{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.hero{padding:36px 0 20px}.hero h1{font-size:26px}}
</style>
<style id="h5-fix">@media (max-width:820px){body{-webkit-text-size-adjust:100%}nav a,nav button,.nav-links a,.nav-menu a,.nav-item,.topnav a,.menu a,.side a,.sidebar a,.docs-side a,.toc a,footer a,a.btn,.plan .btn,button.btn{display:inline-flex;align-items:center;min-height:44px}.side a,.sidebar a,.docs-side a{padding:10px 12px;border-radius:8px}.toc a{padding:8px 0}pre{max-width:100%;overflow-x:auto}.plans,.grid,.grid-2,.grid-3{grid-template-columns:1fr!important}.hero h1,.hero-title{font-size:clamp(24px,7vw,34px)!important}.tbl-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}</style>
<script id="h5-fix-js">(function(){var f=function(){document.querySelectorAll("table").forEach(function(t){var p=t.parentElement;if(p&&p.classList&&p.classList.contains("tbl-scroll"))return;var w=document.createElement("div");w.className="tbl-scroll";p.insertBefore(w,t);w.appendChild(t);});};if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",f);else f();})();</script>
</head>
<body>
<header class="top"><div class="wrap top-in">
<a class="brand" href="/"><i>L</i>LokiStack</a>
<nav class="menu">
<a href="/#features">特性</a>
<a href="/docs/">文档</a>
<a href="/pricing" class="on">License &amp; Pricing 许可和定价</a>
</nav>
<div class="top-cta"><a class="btn btn-primary" href="/docs/">快速开始</a></div>
</div></header>
<div id="intent-bar" hidden><div class="wrap in">
<span>🔗 你从应用内跳转而来</span><b id="intent-text"></b>
<a id="intent-link" href="#activate" style="display:none">查看激活步骤 →</a>
<button type="button" aria-label="关闭" onclick="document.getElementById('intent-bar').hidden=true">×</button>
</div></div>
<main>
<section class="hero wrap">
<span class="badge">30 天全功能试用 · 离线可激活 · 无需注册</span>
<h1>License &amp; Pricing<br>许可和定价</h1>
<p>社区版永久免费;专业版 ¥99/年起,永久授权 ¥199 一次买断。所有版本功能完整,差别只在授权方式与设备数。</p>
</section>
<section class="wrap">
<div class="plans">
<div class="plan" id="plan-free">
<h3>社区版</h3><div class="sub">个人 / 非商业使用</div>
<div class="price">¥0<small>/ 永久</small></div>
<ul>
<li>日志采集与查询</li><li>告警规则与通知</li><li>基础仪表盘</li><li>单机部署</li><li>社区支持</li>
</ul>
<a class="btn btn-outline" href="/docs/">免费开始</a>
</div>
<div class="plan rec" id="plan-pro">
<span class="tag">最受欢迎</span>
<h3>专业版 · 包年</h3><div class="sub">单设备授权 · 全功能</div>
<div class="price">¥99<small>/ 年</small></div>
<ul>
<li>全部功能 + 高级分析</li><li>在线授权 <kbd>LIC-</kbd></li><li>1 台设备</li><li>一年免费升级</li><li>邮件技术支持</li>
</ul>
<a class="btn btn-primary" href="mailto:admin@rlwj.cn?subject=%E8%B4%AD%E4%B9%B0%20LokiStack%20%E4%B8%93%E4%B8%9A%E7%89%88%E5%8C%85%E5%B9%B4">立即购买</a>
</div>
<div class="plan" id="plan-perpetual">
<h3>专业版 · 永久</h3><div class="sub">一次买断 · 离线许可</div>
<div class="price">¥199<small>/ 永久</small></div>
<ul>
<li>当前大版本永久可用</li><li>离线许可 <kbd>LICOFF-</kbd></li><li>1 台设备</li><li>1 年免费升级</li><li>邮件技术支持</li>
</ul>
<a class="btn btn-outline" href="mailto:admin@rlwj.cn?subject=%E8%B4%AD%E4%B9%B0%20LokiStack%20%E6%B0%B8%E4%B9%85%E7%89%88">立即购买</a>
</div>
<div class="plan" id="plan-ent">
<h3>企业私有化</h3><div class="sub">按席位 · 5 席起</div>
<div class="price">¥6,000<small>起 / 年</small></div>
<ul>
<li>集群 / 高可用部署</li><li>私有化与白牌交付</li><li>SSO / 审计 / 数据留存</li><li>专属支持与培训</li><li>可签合同与发票</li>
</ul>
<a class="btn btn-outline" href="mailto:admin@rlwj.cn?subject=%E5%92%A8%E8%AF%A2%20LokiStack%20%E4%BC%81%E4%B8%9A%E7%89%88">预约报价</a>
</div>
</div>
</section>
<section class="wrap" id="activate">
<h2>激活:粘贴授权码即可</h2>
<p class="lead">付款后我们通过邮件交付授权码。在线授权以 <kbd>LIC-</kbd> 开头,离线许可证文件以 <kbd>LICOFF-</kbd> 开头。</p>
<div class="steps">
<div class="step"><b>邮件收码</b>付款后 1 个工作日内,授权码发送到你预留的邮箱</div>
<div class="step"><b>打开设置</b>程序内「设置 → 账户 / 授权」</div>
<div class="step"><b>粘贴激活</b>填入 <kbd>LIC-…</kbd> 点击激活;离线环境导入 <kbd>LICOFF-</kbd> 文件</div>
<div class="step"><b>完成</b>状态显示「已激活 / 剩余 N 天」,可在同一页解绑换机</div>
</div>
</section>
<section class="faq wrap">
<h2>常见问题</h2>
<details open><summary>授权如何交付?包含哪些内容?</summary><p>邮件交付授权码 + 发票。授权与设备绑定,包含对应版本的全部功能与一年升级。</p></details>
<details><summary>换电脑怎么办?</summary><p>在程序「设置 → 授权」里先解绑,再在新设备激活;解绑次数不限,同一时间仅一台设备在线。</p></details>
<details><summary>可以离线使用吗?</summary><p>可以。选择永久/离线许可,我们会提供 <kbd>LICOFF-</kbd> 许可证文件,导入后无需联网校验。</p></details>
<details><summary>团队 / 企业怎么买?</summary><p>5 席起按席位计价,支持私有化与白牌交付、SSO 与审计。邮件说明规模与环境,我们给方案与报价。</p></details>
<details><summary>怎么付款?支持哪些方式?</summary><p>对公转账 / 支付宝,支持开票。本站不介入在线支付,付款与发票均走人工邮件确认。</p></details>
</section>
<section class="cta wrap">
<div><h2>先用起来,再决定</h2><p>下载即含 30 天全功能试用,到期前随时激活。</p></div>
<a class="btn" href="/docs/">打开用户手册</a>
</section>
</main>
<footer><div class="wrap">
<span>© 2026 杭州日理万机智能科技有限公司</span>
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">浙ICP备2026068677号</a>
<span>@日理万机</span>
<a href="/docs/">文档</a><a href="/pricing">许可和定价</a>
</div></footer>
<script>
(function () {
var map = {
'app.license.purchase': { t: '为你定位到「专业版 · 包年」', target: 'plan-pro' },
'app.license.purchase.trialing': { t: '试用中 —— 升级到专业版可继续使用全部功能', target: 'plan-pro' },
'app.license.activate': { t: '按下面四步粘贴授权码即可激活', target: 'activate', link: true },
'purchase': { t: '为你定位到「专业版 · 包年」', target: 'plan-pro' },
'trialing': { t: '试用中 —— 升级到专业版可继续使用全部功能', target: 'plan-pro' },
'trial': { t: '试用中 —— 升级到专业版可继续使用全部功能', target: 'plan-pro' },
'activate': { t: '按下面四步粘贴授权码即可激活', target: 'activate', link: true },
'activation': { t: '按下面四步粘贴授权码即可激活', target: 'activate', link: true }
};
var q = new URLSearchParams(location.search);
var raw = (q.get('intent') || '').trim();
if (!raw) return;
var hit = map[raw] || map[raw.toLowerCase()];
if (!hit) {
for (var k in map) { if (raw.indexOf(k) === 0) { hit = map[k]; break; } }
}
if (!hit) hit = { t: '为你定位到许可与定价', target: 'plan-pro' };
var bar = document.getElementById('intent-bar');
document.getElementById('intent-text').textContent = ' ' + hit.t;
if (hit.link) document.getElementById('intent-link').style.display = '';
bar.hidden = false;
var el = document.getElementById(hit.target);
if (!el) return;
function go() {
el.scrollIntoView({ behavior: 'auto', block: 'center' });
if (el.classList.contains('plan')) el.classList.add('hl');
}
if (document.readyState === 'complete') setTimeout(go, 60);
else window.addEventListener('load', function () { setTimeout(go, 60); });
var stop = false;
['wheel', 'touchstart', 'keydown'].forEach(function (e) {
window.addEventListener(e, function () { stop = true; }, { once: true, passive: true });
});
window.addEventListener('load', function () { if (!stop) setTimeout(go, 400); });
})();
</script>
</body>
</html>