qianqiuwanzi
fad26b0bd1
Sync the local qianshi web project (HTML pages, assets, and config) Co-Authored-By: Claude Code <noreply@anthropic.com>
466 lines
19 KiB
Plaintext
466 lines
19 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>千视科技 — OpenClaw 生态 · AI智能体 · 内容运营 · 数据服务 · 量化交易</title>
|
||
<meta name="description" content="千视科技：OpenClaw安装部署、技能定制、实战训练营；AI智能体定制开发、数字人、OPC一人公司落地；视频制作、自媒体代运营；企业GEO、数据搜索；股票量化交易。">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡</text></svg>">
|
||
|
||
<style>
|
||
/* ===== Reset & Base ===== */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--bg: #0a0e1a;
|
||
--bg-card: #111827;
|
||
--bg-card-hover: #1a2236;
|
||
--border: #1e293b;
|
||
--text: #e2e8f0;
|
||
--text-dim: #94a3b8;
|
||
--accent: #6366f1;
|
||
--accent-glow: #818cf8;
|
||
--green: #10b981;
|
||
--orange: #f59e0b;
|
||
--red: #ef4444;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.7;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||
|
||
/* ===== Navigation ===== */
|
||
.nav {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
background: rgba(10,14,26,0.88);
|
||
backdrop-filter: blur(14px);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
|
||
.logo { font-size: 1.35rem; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: 1px; }
|
||
.nav-links { display: flex; list-style: none; gap: 28px; }
|
||
.nav-links a { color: var(--text-dim); text-decoration: none; font-size: 0.93rem; transition: color 0.2s; }
|
||
.nav-links a:hover { color: #fff; }
|
||
.nav-cta { background: var(--accent); color: #fff; border: none; padding: 9px 22px; border-radius: 8px; font-size: 0.9rem; text-decoration: none; transition: background 0.2s; }
|
||
.nav-cta:hover { background: #4f46e5; }
|
||
|
||
/* Mobile nav */
|
||
.menu-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
|
||
@media (max-width: 768px) {
|
||
.nav-links, .nav-cta { display: none; }
|
||
.menu-toggle { display: block; }
|
||
}
|
||
|
||
/* ===== Hero ===== */
|
||
.hero {
|
||
padding: 160px 0 100px;
|
||
text-align: center; position: relative; overflow: hidden;
|
||
}
|
||
.hero::before {
|
||
content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
|
||
width: 700px; height: 700px;
|
||
background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.hero h1 {
|
||
font-size: clamp(2rem, 5vw, 3.2rem);
|
||
font-weight: 800; line-height: 1.35; margin-bottom: 18px;
|
||
background: linear-gradient(135deg, #fff 0%, #a5b4fc 50%, #6366f1 100%);
|
||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.hero p { font-size: 1.1rem; color: var(--text-dim); max-width: 680px; margin: 0 auto 40px; }
|
||
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
|
||
|
||
.btn { padding: 14px 32px; border-radius: 12px; font-size: 1rem; font-weight: 600; text-decoration: none; transition: all 0.3s; display: inline-block; }
|
||
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 0 40px rgba(99,102,241,0.3); }
|
||
.btn-primary:hover { background: #4f46e5; box-shadow: 0 0 60px rgba(99,102,241,0.5); }
|
||
.btn-outline { border: 1px solid var(--border); color: #fff; background: transparent; }
|
||
.btn-outline:hover { border-color: var(--accent); background: rgba(99,102,241,0.1); }
|
||
|
||
/* ===== Section ===== */
|
||
.section { padding: 90px 0; }
|
||
.section-header { text-align: center; margin-bottom: 56px; }
|
||
.section-header h2 { font-size: 1.9rem; font-weight: 700; margin-bottom: 10px; }
|
||
.section-header p { color: var(--text-dim); font-size: 1rem; }
|
||
|
||
/* ===== Business Categories ===== */
|
||
.biz-category { margin-bottom: 56px; }
|
||
.biz-category:last-child { margin-bottom: 0; }
|
||
|
||
.cat-label {
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
font-size: 1.2rem; font-weight: 700; margin-bottom: 20px;
|
||
padding-bottom: 10px; border-bottom: 2px solid var(--border);
|
||
}
|
||
.cat-icon { font-size: 1.5rem; }
|
||
|
||
.services-grid {
|
||
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
|
||
}
|
||
|
||
.service-card {
|
||
background: var(--bg-card); border: 1px solid var(--border);
|
||
border-radius: 12px; padding: 24px 22px;
|
||
transition: all 0.25s; position: relative; overflow: hidden;
|
||
}
|
||
.service-card:hover {
|
||
background: var(--bg-card-hover); border-color: var(--accent);
|
||
transform: translateY(-2px);
|
||
}
|
||
.service-card::before {
|
||
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
||
background: var(--accent); opacity: 0; transition: opacity 0.25s;
|
||
}
|
||
.service-card:hover::before { opacity: 1; }
|
||
|
||
.service-card h4 { font-size: 1rem; margin-bottom: 6px; }
|
||
.service-card p { color: var(--text-dim); font-size: 0.85rem; line-height: 1.6; }
|
||
|
||
/* ===== Stats ===== */
|
||
.stats { background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; }
|
||
@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
|
||
.stat-number { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, var(--accent-glow), #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||
.stat-label { color: var(--text-dim); font-size: 0.9rem; margin-top: 8px; }
|
||
|
||
/* ===== Cases ===== */
|
||
.cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
||
@media (max-width: 768px) { .cases-grid { grid-template-columns: 1fr; } }
|
||
.case-card {
|
||
background: var(--bg-card); border: 1px solid var(--border);
|
||
border-radius: 14px; padding: 28px; display: flex; gap: 20px; align-items: flex-start;
|
||
transition: border-color 0.25s;
|
||
}
|
||
.case-card:hover { border-color: var(--accent); }
|
||
.case-tag {
|
||
font-size: 0.72rem; padding: 3px 10px; border-radius: 12px; display: inline-block;
|
||
margin-bottom: 10px; font-weight: 600;
|
||
}
|
||
.case-tag.video { background: rgba(239,68,68,0.15); color: #f87171; }
|
||
.case-tag.agent { background: rgba(99,102,241,0.15); color: #a5b4fc; }
|
||
.case-tag.quant { background: rgba(16,185,129,0.15); color: #34d399; }
|
||
.case-card h4 { font-size: 1.05rem; margin-bottom: 8px; }
|
||
.case-card p { color: var(--text-dim); font-size: 0.88rem; line-height: 1.6; }
|
||
|
||
/* ===== Courses ===== */
|
||
.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||
@media (max-width: 900px) { .courses-grid { grid-template-columns: 1fr; } }
|
||
.course-card {
|
||
background: var(--bg-card); border: 1px solid var(--border);
|
||
border-radius: 10px; padding: 24px 20px; transition: all 0.25s;
|
||
}
|
||
.course-card:hover { border-color: var(--accent); transform: translateY(-2px); }
|
||
.course-n { font-size: 0.78rem; font-weight: 700; color: var(--accent-glow); margin-bottom: 6px; }
|
||
.course-card h4 { font-size: 0.98rem; margin-bottom: 6px; }
|
||
.course-card p { color: var(--text-dim); font-size: 0.82rem; line-height: 1.55; }
|
||
|
||
/* ===== CTA ===== */
|
||
.cta-section { text-align: center; padding: 110px 0; position: relative; }
|
||
.cta-section::before {
|
||
content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
|
||
width: 500px; height: 350px;
|
||
background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.cta-section h2 { font-size: 1.9rem; font-weight: 700; margin-bottom: 14px; }
|
||
.cta-section p { color: var(--text-dim); margin-bottom: 30px; font-size: 1rem; }
|
||
|
||
/* ===== Footer ===== */
|
||
.footer { border-top: 1px solid var(--border); padding: 40px 0; color: var(--text-dim); font-size: 0.88rem; }
|
||
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
|
||
.footer-links { display: flex; gap: 20px; list-style: none; }
|
||
.footer-links a { color: var(--text-dim); text-decoration: none; }
|
||
.footer-links a:hover { color: #fff; }
|
||
|
||
/* ===== Animations ===== */
|
||
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||
.anim { animation: fadeUp 0.6s ease-out forwards; opacity: 0; }
|
||
.d1 { animation-delay: 0.1s; } .d2 { animation-delay: 0.2s; } .d3 { animation-delay: 0.3s; }
|
||
|
||
@media (max-width: 640px) {
|
||
.hero { padding: 110px 0 50px; }
|
||
.section { padding: 50px 0; }
|
||
.hero h1 { font-size: 1.65rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="nav">
|
||
<div class="container nav-inner">
|
||
<a href="#" class="logo">⚡ 千视科技</a>
|
||
<ul class="nav-links">
|
||
<li><a href="#services">服务</a></li>
|
||
<li><a href="#cases">案例</a></li>
|
||
<li><a href="#courses">课程</a></li>
|
||
<li><a href="#contact">联系</a></li>
|
||
</ul>
|
||
<a href="#contact" class="nav-cta">免费咨询</a>
|
||
<button class="menu-toggle" id="menuBtn">☰</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1 class="anim">OpenClaw 生态 × 智能体 × 内容运营<br>为企业装上数字员工引擎</h1>
|
||
<p class="anim d1">从 OpenClaw 安装部署到 AI 智能体定制，从自媒体内容代运营到股票量化交易 —— 一站式交付，零门槛上手。</p>
|
||
<div class="hero-cta anim d2">
|
||
<a href="#services" class="btn btn-primary">查看全部服务</a>
|
||
<a href="#courses" class="btn btn-outline">了解实战课程</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services -->
|
||
<section class="section" id="services">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>核心业务</h2>
|
||
<p>覆盖 OpenClaw 全生态 + AI 智能体 + 内容运营 + 数据服务</p>
|
||
</div>
|
||
|
||
<!-- 类别1: OpenClaw 生态 -->
|
||
<div class="biz-category">
|
||
<div class="cat-label"><span class="cat-icon">🔧</span> OpenClaw 生态服务</div>
|
||
<div class="services-grid">
|
||
<div class="service-card">
|
||
<h4>OpenClaw 安装部署</h4>
|
||
<p>Ubuntu/CentOS/群晖多平台部署，SSH + 域名 + SSL 一站式配置，30 分钟交付可用系统。</p>
|
||
</div>
|
||
<div class="service-card">
|
||
<h4>Skill 技能定制</h4>
|
||
<p>按行业/场景定制 Skill 插件：内容生产、数据处理、自动回复、飞书/微信集成。</p>
|
||
</div>
|
||
<div class="service-card">
|
||
<h4>实战训练营</h4>
|
||
<p>6 门系统课程 + 8 个手把手案例，从零到商业变现，附带完整代码和交付物模板。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 类别2: AI智能体与企业 -->
|
||
<div class="biz-category">
|
||
<div class="cat-label"><span class="cat-icon">🤖</span> AI 智能体与企业落地</div>
|
||
<div class="services-grid">
|
||
<div class="service-card">
|
||
<h4>AI 智能体定制开发</h4>
|
||
<p>克隆风格、注入知识库、对接企业系统 —— 24h 在线的数字员工，越用越像你。</p>
|
||
</div>
|
||
<div class="service-card">
|
||
<h4>数字人</h4>
|
||
<p>真人形象/声音克隆 + AI 大脑，适用于直播带货、品牌代言、虚拟客服等场景。</p>
|
||
</div>
|
||
<div class="service-card">
|
||
<h4>OPC 一人公司落地</h4>
|
||
<p>基于 OpenClaw 搭建全自动运营系统：客服 + 内容 + 数据 + 交付，一个人干一个团队的活。</p>
|
||
</div>
|
||
<div class="service-card">
|
||
<h4>企业 GEO</h4>
|
||
<p>生成式引擎优化：让 AI 搜索（ChatGPT/豆包/文心）优先推荐你的品牌和产品。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 类别3: 内容运营 -->
|
||
<div class="biz-category">
|
||
<div class="cat-label"><span class="cat-icon">🎬</span> 内容与数据服务</div>
|
||
<div class="services-grid">
|
||
<div class="service-card">
|
||
<h4>视频爆款复刻</h4>
|
||
<p>热点抓取 → 脚本生成 → TTS 配音 → 视频合成，全流程自动化，日产 3+ 条原创视频。</p>
|
||
</div>
|
||
<div class="service-card">
|
||
<h4>视频制作</h4>
|
||
<p>AI 辅助短视频制作：口播/解说/混剪，批量产出，适用于抖音/小红书/视频号。</p>
|
||
</div>
|
||
<div class="service-card">
|
||
<h4>自媒体账号代运营</h4>
|
||
<p>多平台内容策划 + AI 生产 + 自动发布 + 数据复盘，替代传统运营团队。</p>
|
||
</div>
|
||
<div class="service-card">
|
||
<h4>数据搜索</h4>
|
||
<p>定制化数据采集/清洗/分析/报告，舆情监控、竞品分析、行业调研自动化。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 类别4: 量化交易 -->
|
||
<div class="biz-category">
|
||
<div class="cat-label"><span class="cat-icon">💹</span> 量化交易</div>
|
||
<div class="services-grid">
|
||
<div class="service-card">
|
||
<h4>股票量化策略</h4>
|
||
<p>多因子筛选 + AI 择时 + Alpaca API 自动下单，纸盘→实盘，全程风控熔断。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats -->
|
||
<div class="stats section">
|
||
<div class="container">
|
||
<div class="stats-grid">
|
||
<div>
|
||
<div class="stat-number">8+</div>
|
||
<div class="stat-label">核心业务线</div>
|
||
</div>
|
||
<div>
|
||
<div class="stat-number">6</div>
|
||
<div class="stat-label">系统课程</div>
|
||
</div>
|
||
<div>
|
||
<div class="stat-number">500+</div>
|
||
<div class="stat-label">AI 视频案例</div>
|
||
</div>
|
||
<div>
|
||
<div class="stat-number">24×7</div>
|
||
<div class="stat-label">数字员工在线</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cases -->
|
||
<section class="section" id="cases">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>落地案例</h2>
|
||
<p>可复现、带交付物的完整方案</p>
|
||
</div>
|
||
<div class="cases-grid">
|
||
<div class="case-card">
|
||
<div>
|
||
<span class="case-tag video">视频</span>
|
||
<h4>视频爆款复刻</h4>
|
||
<p>每日自动抓取 AI 领域 TOP10 热搜 → 选题排序 → 生成口播脚本 → TTS 配音 → 字幕合成 → 飞书审核。单人日产 3 条原创视频。</p>
|
||
</div>
|
||
</div>
|
||
<div class="case-card">
|
||
<div>
|
||
<span class="case-tag agent">智能体</span>
|
||
<h4>IP 智能体</h4>
|
||
<p>注入品牌知识库 + 产品文档 + 客服话术 → 24h 自动回复小红书/抖音/微信评论 → 智能识别商机推送到飞书群。</p>
|
||
</div>
|
||
</div>
|
||
<div class="case-card">
|
||
<div>
|
||
<span class="case-tag video">视频</span>
|
||
<h4>视频制作</h4>
|
||
<p>商品图 + 卖点文案 → AI 生成 15 秒带货视频 → 自动添加 BGM + 字幕 + 片尾。日产 20+ 条，覆盖矩阵账号。</p>
|
||
</div>
|
||
</div>
|
||
<div class="case-card">
|
||
<div>
|
||
<span class="case-tag quant">量化</span>
|
||
<h4>股票量化</h4>
|
||
<p>Alpaca API 实时接入 → 价值+动量+质量三因子筛选 → AI 择时打分 → 半自动实盘交易，全程风控熔断。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Courses -->
|
||
<section class="section" id="courses">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>OpenClaw 六门实战课</h2>
|
||
<p>从入门到商业变现，三阶段体系化学习</p>
|
||
</div>
|
||
<div class="courses-grid">
|
||
<div class="course-card">
|
||
<div class="course-n">01</div>
|
||
<h4>入门：从 0 到 1 拥有 AI 助手</h4>
|
||
<p>认知架构 → 安装部署 → 基础调教。4 步搭建第一个数字员工。</p>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-n">02</div>
|
||
<h4>实战：Skill 生态与自动化</h4>
|
||
<p>6 个必装 Skill + 搜索增强 + 内容生产 + 定时飞书推送。</p>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-n">03</div>
|
||
<h4>进阶：从用户到专家</h4>
|
||
<p>五模块架构 + 运维排错 + 四层记忆 + 多 Agent 协作。</p>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-n">04</div>
|
||
<h4>场景（上）：个人效率</h4>
|
||
<p>邮箱助手 + 早间简报 + 抖音视频 + 自定义 Skill 开发。</p>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-n">05</div>
|
||
<h4>场景（下）：企业级</h4>
|
||
<p>一人公司 + 安全加固 + CI/CD + Heartbeat 主动巡检。</p>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-n">06</div>
|
||
<h4>商业：变现与集成</h4>
|
||
<p>定价框架 + MCP 协议 + 交易机器人 + 附录速查手册。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta-section" id="contact">
|
||
<div class="container">
|
||
<h2>准备好拥有你的数字员工了吗？</h2>
|
||
<p>告诉我们你的需求，帮你落地第一个 AI 自动化场景</p>
|
||
<div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;">
|
||
<a href="https://work.weixin.qq.com/" class="btn btn-primary" target="_blank">💬 企业微信咨询</a>
|
||
<a href="https://feishu.cn/" class="btn btn-outline" target="_blank">🚀 飞书联系</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<div class="container footer-inner">
|
||
<div>© 2026 千视科技 · 让每个人拥有数字员工 | <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">粤ICP备2026089876号-1</a></div>
|
||
<ul class="footer-links">
|
||
<li><a href="#services">服务</a></li>
|
||
<li><a href="#cases">案例</a></li>
|
||
<li><a href="#courses">课程</a></li>
|
||
<li><a href="#contact">联系</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
var menuBtn = document.getElementById('menuBtn');
|
||
menuBtn.addEventListener('click', function(){
|
||
var nav = document.querySelector('.nav-links');
|
||
var isOpen = nav.style.display === 'flex';
|
||
nav.style.display = isOpen ? 'none' : 'flex';
|
||
if (!isOpen) {
|
||
nav.style.flexDirection = 'column';
|
||
nav.style.position = 'absolute'; nav.style.top = '64px'; nav.style.left = '0'; nav.style.right = '0';
|
||
nav.style.background = 'rgba(10,14,26,0.98)'; nav.style.padding = '20px 24px';
|
||
nav.style.borderBottom = '1px solid var(--border)';
|
||
}
|
||
this.textContent = isOpen ? '☰' : '✕';
|
||
});
|
||
document.querySelectorAll('a[href^="#"]').forEach(function(a){
|
||
a.addEventListener('click', function(e){
|
||
e.preventDefault();
|
||
var t = document.querySelector(this.getAttribute('href'));
|
||
if (t) t.scrollIntoView({behavior:'smooth'});
|
||
var nav = document.querySelector('.nav-links');
|
||
if (window.innerWidth <= 768) { nav.style.display = 'none'; menuBtn.textContent = '☰'; }
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|