feat(frontend): unify landing style and add product/scenes/start pages
This commit is contained in:
155
frontend/scenes.html
Normal file
155
frontend/scenes.html
Normal file
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应用场景 - 玩玩云</title>
|
||||
<link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
|
||||
<link rel="stylesheet" href="landing.css?v=20260212006">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="site-header">
|
||||
<div class="container site-header-inner">
|
||||
<a class="brand" href="index.html">
|
||||
<i class="fas fa-cloud"></i>
|
||||
<span>玩玩云</span>
|
||||
</a>
|
||||
|
||||
<nav class="top-nav">
|
||||
<a href="product.html">产品能力</a>
|
||||
<a href="scenes.html" class="active">应用场景</a>
|
||||
<a href="start.html">快速开始</a>
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<a href="app.html?action=login" class="btn btn-secondary">
|
||||
<i class="fas fa-circle-user"></i>
|
||||
登录
|
||||
</a>
|
||||
<a href="app.html?action=register" class="btn btn-primary">
|
||||
<i class="fas fa-user-plus"></i>
|
||||
免费注册
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="container">
|
||||
<section class="page-banner">
|
||||
<h1>应用场景</h1>
|
||||
<p>无论是团队协作、客户交付还是私有部署文档管理，玩玩云都能提供稳定可控的文件平台能力。</p>
|
||||
<div class="kpi-row">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">文档集中管理</div>
|
||||
<div class="kpi-value">统一入口</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">外部交付</div>
|
||||
<div class="kpi-value">安全分享</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">数据控制</div>
|
||||
<div class="kpi-value">私有部署</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title"><i class="fas fa-briefcase"></i>典型业务场景</h2>
|
||||
<div class="scene-grid">
|
||||
<article class="scene">
|
||||
<h3>团队协作文件库</h3>
|
||||
<p>集中存放项目资料、合同、设计稿，统一访问入口，减少文件分散。</p>
|
||||
<ul class="list-check">
|
||||
<li><i class="fas fa-check"></i>项目文档统一归档</li>
|
||||
<li><i class="fas fa-check"></i>分享权限可追踪</li>
|
||||
<li><i class="fas fa-check"></i>支持移动端快速查看</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="scene">
|
||||
<h3>客户交付中心</h3>
|
||||
<p>交付包通过链接安全下发，支持密码与时效，降低误扩散风险。</p>
|
||||
<ul class="list-check">
|
||||
<li><i class="fas fa-check"></i>分享自动失效</li>
|
||||
<li><i class="fas fa-check"></i>下载行为可控</li>
|
||||
<li><i class="fas fa-check"></i>可按客户分目录管理</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="scene">
|
||||
<h3>私有化文档平台</h3>
|
||||
<p>适合内网或私有云部署，数据可控，满足合规与长期沉淀需求。</p>
|
||||
<ul class="list-check">
|
||||
<li><i class="fas fa-check"></i>本地与 OSS 灵活组合</li>
|
||||
<li><i class="fas fa-check"></i>用户配额精细化</li>
|
||||
<li><i class="fas fa-check"></i>部署维护成本可控</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title"><i class="fas fa-building"></i>按团队角色使用</h2>
|
||||
<div class="matrix">
|
||||
<article class="matrix-card">
|
||||
<h3>产品/运营团队</h3>
|
||||
<p>用于版本资料、活动素材、协作文档统一管理，避免版本混乱。</p>
|
||||
<ul class="list-check" style="margin-top:8px;">
|
||||
<li><i class="fas fa-check"></i>按项目分类目录</li>
|
||||
<li><i class="fas fa-check"></i>快速检索与下载</li>
|
||||
<li><i class="fas fa-check"></i>外部共享便捷</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="matrix-card">
|
||||
<h3>技术/交付团队</h3>
|
||||
<p>用于交付包、部署文档、测试包归档，实现可追溯的交付链路。</p>
|
||||
<ul class="list-check" style="margin-top:8px;">
|
||||
<li><i class="fas fa-check"></i>版本文件集中留存</li>
|
||||
<li><i class="fas fa-check"></i>访问策略可控制</li>
|
||||
<li><i class="fas fa-check"></i>长期沉淀知识资产</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="cta-panel">
|
||||
<div>
|
||||
<h3 style="font-size:16px;margin-bottom:4px;">让文件平台贴合你的业务场景</h3>
|
||||
<p>你可以先注册体验，再按团队方式配置存储与分享策略。</p>
|
||||
</div>
|
||||
<a href="app.html?action=register" class="btn btn-primary"><i class="fas fa-rocket"></i>开始试用</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container footer-inner">
|
||||
<div>玩玩云 © 2026</div>
|
||||
<div class="footer-tech">
|
||||
<span><i class="fab fa-node-js"></i> Node.js</span>
|
||||
<span><i class="fab fa-vuejs"></i> Vue.js</span>
|
||||
<span><i class="fas fa-database"></i> SQLite</span>
|
||||
<span><i class="fab fa-docker"></i> Docker</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(async function() {
|
||||
try {
|
||||
const response = await fetch('/api/public/theme');
|
||||
const data = await response.json();
|
||||
if (data.success && data.theme === 'dark') {
|
||||
document.body.classList.add('theme-dark');
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('主题加载失败，使用默认主题');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user