qianqiuwanzi
fad26b0bd1
Sync the local qianshi web project (HTML pages, assets, and config) Co-Authored-By: Claude Code <noreply@anthropic.com>
554 lines
18 KiB
Plaintext
554 lines
18 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>千视科技 — AI 驱动的视频生产 · 智能体运营 · 量化交易</title>
|
||
<meta name="description" content="千视科技：基于 OpenClaw 打造 AI 视频爆款复刻、IP智能体定制、股票量化交易系统。让每个企业和个人拥有自己的数字员工。">
|
||
<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;
|
||
--red: #ef4444;
|
||
--orange: #f59e0b;
|
||
}
|
||
|
||
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.85);
|
||
backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.nav-inner {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
height: 64px;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 1.4rem; font-weight: 700; color: #fff; text-decoration: none;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
|
||
|
||
.nav-links {
|
||
display: flex; list-style: none; gap: 32px;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: var(--text-dim); text-decoration: none; font-size: 0.95rem;
|
||
transition: color 0.2s;
|
||
}
|
||
.nav-links a:hover { color: #fff; }
|
||
|
||
.nav-cta {
|
||
background: var(--accent); color: #fff; border: none;
|
||
padding: 8px 20px; border-radius: 8px; font-size: 0.9rem;
|
||
cursor: pointer; transition: background 0.2s;
|
||
text-decoration: none;
|
||
}
|
||
.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 { display: none; }
|
||
.menu-toggle { display: block; }
|
||
.nav-cta { display: none; }
|
||
}
|
||
|
||
/* ===== Hero ===== */
|
||
.hero {
|
||
padding: 160px 0 100px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute; top: -300px; left: 50%; transform: translateX(-50%);
|
||
width: 800px; height: 800px;
|
||
background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||
font-weight: 800; line-height: 1.3; margin-bottom: 20px;
|
||
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.15rem; color: var(--text-dim); max-width: 650px;
|
||
margin: 0 auto 40px;
|
||
}
|
||
|
||
.hero-cta {
|
||
display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
|
||
}
|
||
|
||
.btn {
|
||
padding: 14px 32px; border-radius: 12px; font-size: 1rem;
|
||
font-weight: 600; cursor: pointer; 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: 100px 0; }
|
||
|
||
.section-header {
|
||
text-align: center; margin-bottom: 64px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: 2rem; font-weight: 700; margin-bottom: 12px;
|
||
}
|
||
|
||
.section-header p {
|
||
color: var(--text-dim); font-size: 1.05rem;
|
||
}
|
||
|
||
/* ===== Products ===== */
|
||
.products-grid {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
||
}
|
||
|
||
@media (max-width: 900px) { .products-grid { grid-template-columns: 1fr; } }
|
||
|
||
.product-card {
|
||
background: var(--bg-card); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 40px 32px;
|
||
transition: all 0.3s; position: relative; overflow: hidden;
|
||
}
|
||
|
||
.product-card:hover {
|
||
background: var(--bg-card-hover); border-color: var(--accent);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.product-card::before {
|
||
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
||
background: linear-gradient(90deg, var(--accent), var(--accent-glow));
|
||
opacity: 0; transition: opacity 0.3s;
|
||
}
|
||
.product-card:hover::before { opacity: 1; }
|
||
|
||
.product-icon { font-size: 2.5rem; margin-bottom: 20px; }
|
||
|
||
.product-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
|
||
|
||
.product-card p { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 20px; line-height: 1.7; }
|
||
|
||
.product-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
|
||
|
||
.product-tags span {
|
||
font-size: 0.75rem; padding: 4px 12px; border-radius: 20px;
|
||
background: rgba(99,102,241,0.15); color: var(--accent-glow);
|
||
}
|
||
|
||
.product-link {
|
||
color: var(--accent-glow); text-decoration: none; font-weight: 600; font-size: 0.9rem;
|
||
}
|
||
.product-link:hover { text-decoration: underline; }
|
||
|
||
/* ===== 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; }
|
||
|
||
/* ===== Courses ===== */
|
||
.courses-grid {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
|
||
}
|
||
|
||
@media (max-width: 900px) { .courses-grid { grid-template-columns: 1fr; } }
|
||
|
||
.course-card {
|
||
background: var(--bg-card); border: 1px solid var(--border);
|
||
border-radius: 12px; padding: 28px 24px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.course-card:hover { border-color: var(--accent); transform: translateY(-2px); }
|
||
|
||
.course-num {
|
||
font-size: 0.8rem; color: var(--accent-glow); font-weight: 700;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.course-card h4 { font-size: 1.05rem; margin-bottom: 8px; }
|
||
|
||
.course-card p { color: var(--text-dim); font-size: 0.85rem; line-height: 1.6; }
|
||
|
||
/* ===== Cases ===== */
|
||
.cases-row {
|
||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
|
||
}
|
||
|
||
@media (max-width: 768px) { .cases-row { grid-template-columns: 1fr; } }
|
||
|
||
.case-card {
|
||
background: var(--bg-card); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 32px; display: flex; gap: 24px;
|
||
align-items: center;
|
||
}
|
||
|
||
.case-avatar {
|
||
width: 64px; height: 64px; border-radius: 16px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.8rem; flex-shrink: 0;
|
||
}
|
||
.case-avatar.video { background: rgba(239,68,68,0.15); }
|
||
.case-avatar.agent { background: rgba(99,102,241,0.15); }
|
||
.case-avatar.quant { background: rgba(16,185,129,0.15); }
|
||
|
||
.case-content h4 { font-size: 1.1rem; margin-bottom: 6px; }
|
||
.case-content p { color: var(--text-dim); font-size: 0.9rem; }
|
||
|
||
/* ===== CTA ===== */
|
||
.cta-section {
|
||
text-align: center; padding: 120px 0;
|
||
position: relative;
|
||
}
|
||
|
||
.cta-section::before {
|
||
content: '';
|
||
position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
|
||
width: 600px; height: 400px;
|
||
background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.cta-section h2 { font-size: 2rem; font-weight: 700; margin-bottom: 16px; }
|
||
.cta-section p { color: var(--text-dim); margin-bottom: 32px; font-size: 1.05rem; }
|
||
|
||
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||
|
||
/* ===== Footer ===== */
|
||
.footer {
|
||
border-top: 1px solid var(--border); padding: 48px 0;
|
||
color: var(--text-dim); font-size: 0.9rem;
|
||
}
|
||
|
||
.footer-inner {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
flex-wrap: wrap; gap: 20px;
|
||
}
|
||
|
||
.footer-links { display: flex; gap: 24px; 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(30px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.animate { animation: fadeUp 0.7s ease-out forwards; }
|
||
.delay-1 { animation-delay: 0.1s; opacity: 0; }
|
||
.delay-2 { animation-delay: 0.2s; opacity: 0; }
|
||
.delay-3 { animation-delay: 0.3s; opacity: 0; }
|
||
|
||
/* ===== Responsive ===== */
|
||
@media (max-width: 640px) {
|
||
.hero { padding: 120px 0 60px; }
|
||
.section { padding: 60px 0; }
|
||
.hero h1 { font-size: 1.8rem; }
|
||
.case-card { flex-direction: column; text-align: center; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="nav">
|
||
<div class="container nav-inner">
|
||
<a href="#" class="logo">⚡ 千视科技</a>
|
||
<ul class="nav-links">
|
||
<li><a href="#products">产品</a></li>
|
||
<li><a href="#courses">课程</a></li>
|
||
<li><a href="#cases">案例</a></li>
|
||
<li><a href="#contact">联系</a></li>
|
||
</ul>
|
||
<a href="#contact" class="nav-cta">免费咨询</a>
|
||
<button class="menu-toggle" onclick="this.nextElementSibling.style.display='block'">☰</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1 class="animate">用 AI 重构<br>内容生产 · 品牌运营 · 投资决策</h1>
|
||
<p class="animate delay-1">
|
||
基于 OpenClaw 打造 AI 数字员工。视频爆款复刻、IP 智能体定制、股票量化交易 —— 让技术为你 24 小时工作。
|
||
</p>
|
||
<div class="hero-cta animate delay-2">
|
||
<a href="#products" class="btn btn-primary">🚀 了解产品</a>
|
||
<a href="#courses" class="btn btn-outline">📚 查看课程</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Products -->
|
||
<section class="section" id="products">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>三大核心产品</h2>
|
||
<p>基于 OpenClaw 构建，开箱即用，按需定制</p>
|
||
</div>
|
||
|
||
<div class="products-grid">
|
||
<!-- 产品1: 视频爆款复刻 -->
|
||
<div class="product-card">
|
||
<div class="product-icon">🎬</div>
|
||
<h3>视频爆款复刻</h3>
|
||
<p>抓抖音/小红书热搜 → AI 自动选题 → 脚本生成 → TTS 配音 → 视频合成。一条指令，全流程自动完成。</p>
|
||
<div class="product-tags">
|
||
<span>热点抓取</span><span>TTS 配音</span><span>ffmpeg 合成</span><span>多平台分发</span>
|
||
</div>
|
||
<a href="#contact" class="product-link">获取演示 →</a>
|
||
</div>
|
||
|
||
<!-- 产品2: IP智能体 -->
|
||
<div class="product-card">
|
||
<div class="product-icon">🤖</div>
|
||
<h3>IP 智能体定制</h3>
|
||
<p>克隆你的风格、知识、语气。24h 自动回复评论、生成内容、管理社群。你的数字分身，越用越像你。</p>
|
||
<div class="product-tags">
|
||
<span>风格克隆</span><span>知识注入</span><span>多平台接入</span><span>持续进化</span>
|
||
</div>
|
||
<a href="#contact" class="product-link">免费试用 →</a>
|
||
</div>
|
||
|
||
<!-- 产品3: 股票量化 -->
|
||
<div class="product-card">
|
||
<div class="product-icon">💹</div>
|
||
<h3>股票量化交易</h3>
|
||
<p>多因子策略 + AI 择时 + 自动下单。支持美股/港股/A股，纸盘测试→实盘上线，全程风控熔断。</p>
|
||
<div class="product-tags">
|
||
<span>Alpaca API</span><span>多因子</span><span>风控熔断</span><span>回测引擎</span>
|
||
</div>
|
||
<a href="#contact" class="product-link">查看策略 →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats -->
|
||
<div class="stats section">
|
||
<div class="container">
|
||
<div class="stats-grid">
|
||
<div>
|
||
<div class="stat-number">11+</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">6</div>
|
||
<div class="stat-label">实战课程体系</div>
|
||
</div>
|
||
<div>
|
||
<div class="stat-number">24×7</div>
|
||
<div class="stat-label">数字员工在线</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 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-num">01</div>
|
||
<h4>入门：从0到1拥有AI助手</h4>
|
||
<p>认知→架构→安装→调教。零基础4步拥有第一个数字员工。</p>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-num">02</div>
|
||
<h4>实战：Skill生态与自动化</h4>
|
||
<p>6个必装Skill + 搜索 + 内容生产 + 定时推送飞书。</p>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-num">03</div>
|
||
<h4>进阶：从用户到专家</h4>
|
||
<p>五模块架构 + 运维排错 + 四层记忆 + 多Agent协作。</p>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-num">04</div>
|
||
<h4>场景实战（上）：个人效率</h4>
|
||
<p>邮箱助手 + 早间简报 + 抖音视频 + 自定义Skill开发。</p>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-num">05</div>
|
||
<h4>场景实战（下）：企业级应用</h4>
|
||
<p>一人公司 + 安全加固 + CI/CD + Heartbeat 主动巡检。</p>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-num">06</div>
|
||
<h4>商业实战：变现与集成</h4>
|
||
<p>定价框架 + MCP协议 + 交易机器人 + 附录速查手册。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Cases -->
|
||
<section class="section" id="cases">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>产品案例</h2>
|
||
<p>真实落地场景，可复现的完整方案</p>
|
||
</div>
|
||
|
||
<div class="cases-row">
|
||
<div class="case-card">
|
||
<div class="case-avatar video">🎬</div>
|
||
<div class="case-content">
|
||
<h4>视频爆款复刻：抖音知识号</h4>
|
||
<p>每日自动抓取 AI 领域 TOP10 热搜 → 选题排序 → 生成口播脚本 → TTS 配音 → 字幕合成 → 飞书审核。单人日产 3 条原创视频。</p>
|
||
</div>
|
||
</div>
|
||
<div class="case-card">
|
||
<div class="case-avatar agent">🤖</div>
|
||
<div class="case-content">
|
||
<h4>IP 智能体：品牌客服数字人</h4>
|
||
<p>注入品牌知识库 + 产品文档 + 客服话术 → 24h 自动回复小红书/抖音/微信评论 → 智能识别商机并推送到飞书群。</p>
|
||
</div>
|
||
</div>
|
||
<div class="case-card">
|
||
<div class="case-avatar quant">💹</div>
|
||
<div class="case-content">
|
||
<h4>股票量化：美股多因子策略</h4>
|
||
<p>Alpaca API 实时接入 → 价值+动量+质量三因子筛选 → AI 择时打分 → 纸盘测试 1 周 → 半自动实盘（人工确认每单）。</p>
|
||
</div>
|
||
</div>
|
||
<div class="case-card">
|
||
<div class="case-avatar agent">📧</div>
|
||
<div class="case-content">
|
||
<h4>效率自动化：邮箱+简报助手</h4>
|
||
<p>163 邮箱自动分类+摘要+优先级标记 → 每日早 7:30 飞书推送综合简报（天气+日历+待办+新闻），信息处理效率提升 5 倍。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta-section" id="contact">
|
||
<div class="container">
|
||
<h2>准备好拥有你的数字员工了吗？</h2>
|
||
<p>告诉我们你的需求，我们帮你落地第一个 AI 自动化场景</p>
|
||
<div class="cta-buttons">
|
||
<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 -->
|
||
<footer class="footer">
|
||
<div class="container footer-inner">
|
||
<div>© 2026 千视科技 · 让每个人拥有数字员工</div>
|
||
<ul class="footer-links">
|
||
<li><a href="#products">产品</a></li>
|
||
<li><a href="#courses">课程</a></li>
|
||
<li><a href="#cases">案例</a></li>
|
||
<li><a href="#contact">联系</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Simple mobile nav toggle
|
||
document.querySelector('.menu-toggle')?.addEventListener('click', function() {
|
||
const nav = document.querySelector('.nav-links');
|
||
nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
|
||
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 = '24px';
|
||
nav.style.borderBottom = '1px solid var(--border)';
|
||
});
|
||
|
||
// Smooth scroll for all anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|