304 lines
8.9 KiB
HTML
304 lines
8.9 KiB
HTML
<title>系统怎么工作 · 一张图看懂</title>
|
|
|
|
<style>
|
|
:root{
|
|
--paper: #EBEDE8;
|
|
--paper-raised: #F7F8F5;
|
|
--ink: #1B2A33;
|
|
--ink-soft: #566A76;
|
|
--rule: #C6CEC8;
|
|
--sodium: #E9A13C;
|
|
--board: #3A7A72;
|
|
|
|
--font-body: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","Heiti SC",sans-serif;
|
|
--font-display: "Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","SimSun",serif;
|
|
--font-mono: ui-monospace,"SF Mono","Menlo","Consolas","Liberation Mono",monospace;
|
|
}
|
|
@media (prefers-color-scheme: dark){
|
|
:root{
|
|
--paper:#131B20; --paper-raised:#1A242A;
|
|
--ink:#E3E8E4; --ink-soft:#96A7B0; --rule:#2B383F;
|
|
}
|
|
}
|
|
:root[data-theme="dark"]{
|
|
--paper:#131B20; --paper-raised:#1A242A;
|
|
--ink:#E3E8E4; --ink-soft:#96A7B0; --rule:#2B383F;
|
|
}
|
|
:root[data-theme="light"]{
|
|
--paper:#EBEDE8; --paper-raised:#F7F8F5;
|
|
--ink:#1B2A33; --ink-soft:#566A76; --rule:#C6CEC8;
|
|
}
|
|
|
|
*{ box-sizing:border-box; }
|
|
|
|
.page{
|
|
font-family: var(--font-body);
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
min-height:100dvh;
|
|
padding: clamp(28px, 5vw, 72px) clamp(20px, 4vw, 56px) clamp(40px, 6vw, 80px);
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap: clamp(28px, 4vw, 52px);
|
|
}
|
|
|
|
header{ max-width: 62ch; }
|
|
.eyebrow{
|
|
font-family: var(--font-mono);
|
|
font-size:12px;
|
|
letter-spacing:.16em;
|
|
color: var(--ink-soft);
|
|
margin:0 0 14px;
|
|
}
|
|
h1{
|
|
font-family: var(--font-display);
|
|
font-weight:700;
|
|
font-size: clamp(28px, 4.6vw, 46px);
|
|
line-height:1.2;
|
|
letter-spacing:.01em;
|
|
text-wrap:balance;
|
|
margin:0 0 .45em;
|
|
}
|
|
.sub{
|
|
margin:0;
|
|
font-size: clamp(15px,1.7vw,18px);
|
|
line-height:1.75;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
/* ── 主流程 ── */
|
|
.flow{
|
|
display:flex;
|
|
align-items:stretch;
|
|
gap: 0;
|
|
overflow-x:auto;
|
|
padding-bottom:6px;
|
|
}
|
|
.node{
|
|
flex: 1 1 0;
|
|
min-width: 176px;
|
|
background: var(--paper-raised);
|
|
border:1px solid var(--rule);
|
|
padding: clamp(18px,2vw,26px);
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:12px;
|
|
}
|
|
.node .top{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:10px;
|
|
}
|
|
.node svg{
|
|
width:26px; height:26px;
|
|
stroke: var(--ink);
|
|
stroke-width:1.4;
|
|
fill:none;
|
|
stroke-linecap:round;
|
|
stroke-linejoin:round;
|
|
flex:none;
|
|
}
|
|
.verb{
|
|
font-family: var(--font-display);
|
|
font-size: clamp(22px,2.6vw,30px);
|
|
font-weight:700;
|
|
line-height:1;
|
|
color: var(--sodium);
|
|
}
|
|
.node h2{
|
|
margin:0;
|
|
font-size: clamp(16px,1.8vw,19px);
|
|
font-weight:600;
|
|
letter-spacing:.01em;
|
|
}
|
|
.node .tech{
|
|
font-family: var(--font-mono);
|
|
font-size:11px;
|
|
letter-spacing:.06em;
|
|
color: var(--ink-soft);
|
|
margin:-6px 0 0;
|
|
}
|
|
.node p{
|
|
margin:0;
|
|
font-size: clamp(13.5px,1.5vw,15px);
|
|
line-height:1.7;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.arrow{
|
|
flex:none;
|
|
width: clamp(26px,3vw,48px);
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
color: var(--rule);
|
|
}
|
|
.arrow svg{ width:100%; height:16px; stroke:currentColor; stroke-width:1.4; fill:none; }
|
|
|
|
/* ── 回流 ── */
|
|
.loop{
|
|
display:flex;
|
|
align-items:center;
|
|
gap: clamp(12px,2vw,20px);
|
|
border:1px dashed var(--rule);
|
|
padding: clamp(16px,2vw,22px) clamp(18px,2.4vw,28px);
|
|
background: transparent;
|
|
}
|
|
.loop .badge{
|
|
font-family: var(--font-mono);
|
|
font-size:11px;
|
|
letter-spacing:.1em;
|
|
color: var(--board);
|
|
border:1px solid var(--board);
|
|
padding:5px 9px;
|
|
white-space:nowrap;
|
|
}
|
|
.loop p{
|
|
margin:0;
|
|
font-size: clamp(14px,1.6vw,16px);
|
|
line-height:1.7;
|
|
color: var(--ink-soft);
|
|
}
|
|
.loop strong{ color: var(--ink); font-weight:600; }
|
|
|
|
/* ── 三条说明 ── */
|
|
.notes{
|
|
display:grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
|
|
gap: clamp(18px,2.6vw,34px);
|
|
border-top:1px solid var(--rule);
|
|
padding-top: clamp(22px,3vw,32px);
|
|
}
|
|
.note h3{
|
|
margin:0 0 8px;
|
|
font-size: clamp(15px,1.7vw,17px);
|
|
font-weight:600;
|
|
display:flex;
|
|
align-items:baseline;
|
|
gap:9px;
|
|
}
|
|
.note h3::before{
|
|
content:"";
|
|
width:9px; height:1px;
|
|
background: var(--sodium);
|
|
flex:none;
|
|
transform: translateY(-4px);
|
|
}
|
|
.note p{
|
|
margin:0;
|
|
font-size:14px;
|
|
line-height:1.75;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
footer{
|
|
font-size:12.5px;
|
|
line-height:1.7;
|
|
color: var(--ink-soft);
|
|
border-top:1px solid var(--rule);
|
|
padding-top:16px;
|
|
}
|
|
|
|
@media (max-width: 860px){
|
|
.flow{ flex-direction:column; overflow-x:visible; }
|
|
.node{ min-width:0; }
|
|
.arrow{ width:100%; height:30px; }
|
|
.arrow svg{ width:16px; height:100%; transform: rotate(90deg); }
|
|
}
|
|
</style>
|
|
|
|
<div class="page">
|
|
|
|
<header>
|
|
<p class="eyebrow">YOVISION · 系统工作原理</p>
|
|
<h1>摄像头拍到 → 有人来管，中间发生了什么</h1>
|
|
<p class="sub">整套系统只做一件事：把「装了但没人看」的摄像头，变成「出事时会主动叫人」的系统。下面是完整的五步。</p>
|
|
</header>
|
|
|
|
<div class="flow">
|
|
|
|
<div class="node">
|
|
<div class="top">
|
|
<svg viewBox="0 0 24 24"><path d="M3 7.5h13l3.5-2v13L16 16.5H3z"/><circle cx="9" cy="12" r="2.6"/></svg>
|
|
<span class="verb">看</span>
|
|
</div>
|
|
<h2>摄像头</h2>
|
|
<p class="tech">IP CAMERA</p>
|
|
<p>装在围墙、走廊、客厅这些地方，对着现场。用你已经装好的，不用换新的。</p>
|
|
</div>
|
|
|
|
<div class="arrow"><svg viewBox="0 0 40 16" preserveAspectRatio="none"><path d="M0 8h34m-6-5 6 5-6 5"/></svg></div>
|
|
|
|
<div class="node">
|
|
<div class="top">
|
|
<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/><path d="M6.5 7.5h.01M6.5 16.5h.01"/></svg>
|
|
<span class="verb">收</span>
|
|
</div>
|
|
<h2>录像主机</h2>
|
|
<p class="tech">NVR · 边缘盒子</p>
|
|
<p>把所有摄像头的画面汇到一起，存在本地。视频先留在现场，平时不往外传。</p>
|
|
</div>
|
|
|
|
<div class="arrow"><svg viewBox="0 0 40 16" preserveAspectRatio="none"><path d="M0 8h34m-6-5 6 5-6 5"/></svg></div>
|
|
|
|
<div class="node">
|
|
<div class="top">
|
|
<svg viewBox="0 0 24 24"><path d="M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6Z"/><circle cx="12" cy="12" r="2.8"/></svg>
|
|
<span class="verb">判断</span>
|
|
</div>
|
|
<h2>AI 分析</h2>
|
|
<p class="tech">推理服务</p>
|
|
<p>替你盯着这些画面。有人翻墙、有人摔倒、有人进了不该进的地方——它认得出来，也分得清什么是正常走动。</p>
|
|
</div>
|
|
|
|
<div class="arrow"><svg viewBox="0 0 40 16" preserveAspectRatio="none"><path d="M0 8h34m-6-5 6 5-6 5"/></svg></div>
|
|
|
|
<div class="node">
|
|
<div class="top">
|
|
<svg viewBox="0 0 24 24"><rect x="2.5" y="4" width="19" height="12.5" rx="1.5"/><path d="M9 20h6M12 16.5V20M6.5 12l2.8-3 2.6 2.6L16 8"/></svg>
|
|
<span class="verb">记录</span>
|
|
</div>
|
|
<h2>管理后台</h2>
|
|
<p class="tech">值班台账</p>
|
|
<p>每一次异常变成一条记录，带上那一小段视频。谁在几点确认的、怎么处理的，全都留着，随时能查。</p>
|
|
</div>
|
|
|
|
<div class="arrow"><svg viewBox="0 0 40 16" preserveAspectRatio="none"><path d="M0 8h34m-6-5 6 5-6 5"/></svg></div>
|
|
|
|
<div class="node">
|
|
<div class="top">
|
|
<svg viewBox="0 0 24 24"><rect x="6.5" y="2.5" width="11" height="19" rx="2.2"/><path d="M10.5 18.5h3"/><path d="M19.5 5.5a5 5 0 0 1 0 5M21.8 3.5a8 8 0 0 1 0 9"/></svg>
|
|
<span class="verb">叫人</span>
|
|
</div>
|
|
<h2>手机 App</h2>
|
|
<p class="tech">预警投递</p>
|
|
<p>推到值班员和负责人手机上。<strong style="color:var(--ink);font-weight:600">没有人点确认，它会一直往上找人</strong>，不会停在「已发送」。</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="loop">
|
|
<span class="badge">← 反馈回流</span>
|
|
<p>如果这次报错了，值班员点一下<strong>「误报」</strong>，这段画面会自动回到 AI 那里当作教材。<strong>用得越久，报得越准。</strong></p>
|
|
</div>
|
|
|
|
<div class="notes">
|
|
<div class="note">
|
|
<h3>平时不打扰</h3>
|
|
<p>没有异常的时候，系统一句话不说，也不往外传视频。只有出事的那一小段才会被留下来、发出去。</p>
|
|
</div>
|
|
<div class="note">
|
|
<h3>视频不出现场</h3>
|
|
<p>录像和 AI 分析都在本地完成。上传到平台的只有告警记录和作为证据的那一小段画面。</p>
|
|
</div>
|
|
<div class="note">
|
|
<h3>不认人，只认事</h3>
|
|
<p>系统判断的是「有人翻墙」，不是「谁翻了墙」。默认不做人脸识别，不建人脸库。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>YoVision 智能视频事件平台 · 通用场景流程说明 · 2026</footer>
|
|
|
|
</div>
|