645 lines
18 KiB
HTML
645 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>EasyVQD 视频质量诊断</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: "Microsoft YaHei", sans-serif;
|
||
}
|
||
|
||
body {
|
||
/* background-color: #f5f5f5; */
|
||
padding: 15px;
|
||
}
|
||
|
||
.container {
|
||
/* max-width: 1200px; */
|
||
margin: 0 auto;
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
/* border-radius: 8px; */
|
||
/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
color: #2c3e50;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #3498db;
|
||
position: relative;
|
||
}
|
||
|
||
.section-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -2px;
|
||
left: 0;
|
||
width: 60px;
|
||
height: 2px;
|
||
background-color: #2c3e50;
|
||
}
|
||
|
||
/* 大模块整体占位图（保留，可选） */
|
||
.img-placeholder-big {
|
||
width: 100%;
|
||
height: 360px;
|
||
/* background-color: #ecf0f1; */
|
||
/* border-radius: 4px; */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 15px 0 20px 0;
|
||
color: #7f8c8d;
|
||
/* border: 1px dashed #bdc3c7; */
|
||
text-align: center;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.img-placeholder-big img {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
}
|
||
|
||
/* 二级子项小型图片占位（新增，适配子标题） */
|
||
.img-placeholder-small {
|
||
width: 100%;
|
||
height: 180px;
|
||
/* background-color: #f8f9fa; */
|
||
/* border-radius: 4px; */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 10px 0;
|
||
color: #95a5a6;
|
||
/* border: 1px dashed #cdd2d6; */
|
||
text-align: center;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.img-placeholder-small img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.product-intro {
|
||
line-height: 1.7;
|
||
color: #34495e;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 产品介绍部分保持不变 */
|
||
|
||
/* ==================== 核心能力部分：响应式网格布局 ==================== */
|
||
.ability-grid-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.ability-item {
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e8f4fd 100%);
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
border: 1px solid #e1e8f0;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ability-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 25px rgba(52, 152, 219, 0.15);
|
||
border-color: #3498db;
|
||
}
|
||
|
||
.ability-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
background-color: #3498db;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 15px;
|
||
color: white;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.ability-item:nth-child(1) .ability-icon {
|
||
background-color: #3498db;
|
||
}
|
||
|
||
.ability-item:nth-child(2) .ability-icon {
|
||
background-color: #2ecc71;
|
||
}
|
||
|
||
.ability-item:nth-child(3) .ability-icon {
|
||
background-color: #e74c3c;
|
||
}
|
||
|
||
.ability-item:nth-child(4) .ability-icon {
|
||
background-color: #f39c12;
|
||
}
|
||
|
||
.ability-item .sub-title {
|
||
display: block;
|
||
font-size: 18px;
|
||
color: #2c3e50;
|
||
margin-bottom: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.ability-item .img-placeholder-small {
|
||
/* height: 90px; */
|
||
margin: 12px 0;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.ability-item p {
|
||
color: #5d6d7e;
|
||
line-height: 1.6;
|
||
font-size: 15px;
|
||
}
|
||
|
||
/* ==================== 产品特点部分：静态网格布局 ==================== */
|
||
.features-grid-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.feature-item {
|
||
background-color: #fff;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||
border: 1px solid #f0f0f0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.feature-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.feature-item-header {
|
||
padding: 20px 20px 15px;
|
||
position: relative;
|
||
text-align: center;
|
||
}
|
||
|
||
.feature-item-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 15px;
|
||
font-size: 28px;
|
||
color: white;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.feature-item:nth-child(1) .feature-item-icon {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.feature-item:nth-child(2) .feature-item-icon {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
}
|
||
|
||
.feature-item:nth-child(3) .feature-item-icon {
|
||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||
}
|
||
|
||
.feature-item:nth-child(4) .feature-item-icon {
|
||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||
}
|
||
|
||
.feature-item .sub-title {
|
||
display: block;
|
||
font-size: 18px;
|
||
color: #2c3e50;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.feature-item-body {
|
||
padding: 0 20px 20px;
|
||
}
|
||
|
||
.feature-item .img-placeholder-small {
|
||
/* height: 90px; */
|
||
margin: 12px 0;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.feature-item p {
|
||
color: #5d6d7e;
|
||
line-height: 1.6;
|
||
font-size: 15px;
|
||
}
|
||
|
||
/* ==================== 适配场景部分：静态网格布局 ==================== */
|
||
.scene-grid-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.scene-item {
|
||
background-color: #fff;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||
transition: all 0.3s ease;
|
||
border: 1px solid #eaeaea;
|
||
}
|
||
|
||
.scene-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.scene-item-header {
|
||
padding: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.scene-item:nth-child(1) .scene-item-header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.scene-item:nth-child(2) .scene-item-header {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
}
|
||
|
||
.scene-item:nth-child(3) .scene-item-header {
|
||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||
}
|
||
|
||
.scene-item:nth-child(4) .scene-item-header {
|
||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||
}
|
||
|
||
.scene-item .sub-title {
|
||
display: block;
|
||
font-size: 18px;
|
||
color: white;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.scene-item-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.scene-item .img-placeholder-small {
|
||
/* height: 90px; */
|
||
margin: 12px 0;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.scene-item p {
|
||
color: #5d6d7e;
|
||
line-height: 1.6;
|
||
font-size: 15px;
|
||
}
|
||
|
||
/* 产品介绍部分 */
|
||
.product-intro {
|
||
background-color: #f9f9f9;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
line-height: 1.7;
|
||
border-left: 4px solid #3498db;
|
||
}
|
||
|
||
/* ==================== 响应式设计：手机端适配 ==================== */
|
||
@media (max-width: 768px) {
|
||
body {
|
||
padding: 10px;
|
||
}
|
||
|
||
.container {
|
||
padding: 15px;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 20px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.img-placeholder-big {
|
||
height: 150px;
|
||
margin: 10px 0 15px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.img-placeholder-small {
|
||
/* height: 100px; */
|
||
font-size: 14px;
|
||
}
|
||
|
||
.product-intro {
|
||
font-size: 15px;
|
||
padding: 15px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 手机端改为单列布局 */
|
||
.ability-grid-container,
|
||
.features-grid-container,
|
||
.scene-grid-container {
|
||
grid-template-columns: 1fr;
|
||
gap: 15px;
|
||
}
|
||
|
||
.ability-item,
|
||
.feature-item,
|
||
.scene-item {
|
||
padding: 15px;
|
||
}
|
||
|
||
.ability-icon {
|
||
width: 45px;
|
||
height: 45px;
|
||
font-size: 20px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.feature-item-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
font-size: 24px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.ability-item .sub-title,
|
||
.feature-item .sub-title,
|
||
.scene-item .sub-title {
|
||
font-size: 17px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.ability-item p,
|
||
.feature-item p,
|
||
.scene-item p {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.ability-item .img-placeholder-small,
|
||
.feature-item .img-placeholder-small,
|
||
.scene-item .img-placeholder-small {
|
||
/* height: 80px; */
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.feature-item-header,
|
||
.scene-item-header {
|
||
padding: 15px;
|
||
}
|
||
|
||
.feature-item-body,
|
||
.scene-item-body {
|
||
padding: 15px;
|
||
}
|
||
}
|
||
|
||
/* 超小屏幕适配 */
|
||
@media (max-width: 480px) {
|
||
.container {
|
||
padding: 12px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.img-placeholder-big {
|
||
height: 120px;
|
||
font-size: 13px;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.img-placeholder-small {
|
||
/* height: 80px; */
|
||
font-size: 13px;
|
||
}
|
||
|
||
.ability-item,
|
||
.feature-item,
|
||
.scene-item {
|
||
padding: 12px;
|
||
}
|
||
|
||
.ability-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.feature-item-icon {
|
||
width: 45px;
|
||
height: 45px;
|
||
font-size: 22px;
|
||
}
|
||
|
||
.ability-item .sub-title,
|
||
.feature-item .sub-title,
|
||
.scene-item .sub-title {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<!-- 产品介绍部分 -->
|
||
<div class="section">
|
||
<h2 class="section-title">产品介绍</h2>
|
||
<div class="img-placeholder-big"><img src="./assets/home.png" alt="TSINGSEE"></div>
|
||
<div class="product-intro">
|
||
EasyVQD 是一款智能化的视频质量诊断产品，可从网络摄像机、NVR、DVR、流媒体服务器等各类前端监控点获取实时码流，经解码后对画面进行专业质量评估，精准识别多类画质异常。
|
||
<br><br>
|
||
产品通过梯度分析、颜色空间转换等技术精准判定故障，发现异常后即时告警、自动截图并保存记录，实现问题可追溯、可排查，将监控运维模式从 "被动响应" 升级为 "主动预警、精准排查"，推动视频监控管理向智能化、精细化方向升级。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心能力部分：响应式网格布局 -->
|
||
<div class="section">
|
||
<h2 class="section-title">核心能力</h2>
|
||
<div class="ability-grid-container">
|
||
<div class="ability-item">
|
||
<div class="ability-icon">📡</div>
|
||
<strong class="sub-title">多源码流接入能力</strong>
|
||
<p>支持从网络摄像机、NVR、DVR、流媒体服务器等多种前端设备获取实时码流，适配性强。</p>
|
||
</div>
|
||
<div class="ability-item">
|
||
<div class="ability-icon">🔍</div>
|
||
<strong class="sub-title">精准异常识别能力</strong>
|
||
<p>可精准识别 11 类画质异常，包括清晰度异常、亮度对比度异常、偏色、噪声干扰、画面抖动、画面冻结、遮挡、条纹、信号丢失等。</p>
|
||
</div>
|
||
<div class="ability-item">
|
||
<div class="ability-icon">⚠️</div>
|
||
<strong class="sub-title">智能分析告警能力</strong>
|
||
<p>通过梯度分析、颜色空间转换等技术精准判定故障，异常发生时即时触发告警，同时自动截图并留存记录，保障问题可追溯、可排查。</p>
|
||
</div>
|
||
<div class="ability-item">
|
||
<div class="ability-icon">⏱️</div>
|
||
<strong class="sub-title">7×24 小时自动化监测能力</strong>
|
||
<p>无需人工值守，可全天候不间断运行，主动发现监控画面问题，替代传统人工巡检模式。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品特点部分：静态网格布局 -->
|
||
<div class="section">
|
||
<h2 class="section-title">产品特点</h2>
|
||
<div class="features-grid-container">
|
||
<div class="feature-item">
|
||
<div class="feature-item-header">
|
||
<div class="feature-item-icon">🚀</div>
|
||
<strong class="sub-title">主动运维，效率升级</strong>
|
||
</div>
|
||
<div class="feature-item-body">
|
||
<p>将传统的 "被动响应式运维" 转变为 "主动预警、精准排查" 模式，大幅减少人工巡检成本，提升运维效率。</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-item-header">
|
||
<div class="feature-item-icon">⚙️</div>
|
||
<strong class="sub-title">技术驱动，精准诊断</strong>
|
||
</div>
|
||
<div class="feature-item-body">
|
||
<p>依托梯度分析、颜色空间转换等专业技术，实现对画质异常的精准判定，降低误报率。</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-item-header">
|
||
<div class="feature-item-icon">🌐</div>
|
||
<strong class="sub-title">全量覆盖，场景适配广</strong>
|
||
</div>
|
||
<div class="feature-item-body">
|
||
<p>可适配不同类型的前端监控设备，支持多行业复杂场景的监控质量检测。</p>
|
||
</div>
|
||
</div>
|
||
<div class="feature-item">
|
||
<div class="feature-item-header">
|
||
<div class="feature-item-icon">📊</div>
|
||
<strong class="sub-title">可追溯性强</strong>
|
||
</div>
|
||
<div class="feature-item-body">
|
||
<p>异常告警同步保存截图与记录，便于后续问题复盘与根源排查。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 适配场景部分：静态网格布局 -->
|
||
<div class="section">
|
||
<h2 class="section-title">适配场景</h2>
|
||
<div class="scene-grid-container">
|
||
<div class="scene-item">
|
||
<div class="scene-item-header">
|
||
<strong class="sub-title">政务公共安全领域</strong>
|
||
</div>
|
||
<div class="scene-item-body">
|
||
<div class="img-placeholder-small"><img src="./assets/case1.png" alt="TSINGSEE"></div>
|
||
<p>在城市天网、治安卡口等监控场景中，保障视频画面清晰、稳定，为事件回溯与案件侦破提供可靠的视频依据。</p>
|
||
</div>
|
||
</div>
|
||
<div class="scene-item">
|
||
<div class="scene-item-header">
|
||
<strong class="sub-title">工业园区场景</strong>
|
||
</div>
|
||
<div class="scene-item-body">
|
||
<div class="img-placeholder-small"><img src="./assets/case2.png" alt="TSINGSEE"></div>
|
||
<p>对厂区周界、生产车间等监控点位进行实时诊断，避免因画面模糊、遮挡、信号丢失等问题导致安全隐患遗漏。</p>
|
||
</div>
|
||
</div>
|
||
<div class="scene-item">
|
||
<div class="scene-item-header">
|
||
<strong class="sub-title">金融行业场景</strong>
|
||
</div>
|
||
<div class="scene-item-body">
|
||
<div class="img-placeholder-small"><img src="./assets/case3.png" alt="TSINGSEE"></div>
|
||
<p>保障银行网点、ATM 机等区域监控画面的高质量运行，满足金融监管对视频监控的高可靠性要求。</p>
|
||
</div>
|
||
</div>
|
||
<div class="scene-item">
|
||
<div class="scene-item-header">
|
||
<strong class="sub-title">物业场景</strong>
|
||
</div>
|
||
<div class="scene-item-body">
|
||
<div class="img-placeholder-small"><img src="./assets/case4.png" alt="TSINGSEE"></div>
|
||
<p>在商业综合体、住宅小区中，对电梯、停车场、园区道路等监控点进行 7×24 小时监测，及时发现设备故障，提升物业服务质量。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 识别效果 -->
|
||
<div class="section">
|
||
<h2 class="section-title">识别效果</h2>
|
||
<div class="scene-grid-container">
|
||
<div class="scene-item">
|
||
<div class="scene-item-header" style="background: transparent; padding-bottom: 0;">
|
||
<strong class="sub-title" style="color: #000;">花屏检测</strong>
|
||
</div>
|
||
<div class="scene-item-body" style=" padding-bottom: 0;">
|
||
<div class="img-placeholder-small" style="height: 260px;padding: 0;"><img src="./assets/vqd1.png" alt="TSINGSEE"></div>
|
||
</div>
|
||
</div>
|
||
<div class="scene-item">
|
||
<div class="scene-item-header" style="background: transparent; padding-bottom: 0;">
|
||
<strong class="sub-title" style="color: #000;">遮挡检测</strong>
|
||
</div>
|
||
<div class="scene-item-body" style=" padding-bottom: 0;">
|
||
<div class="img-placeholder-small" style="height: 260px;padding: 0;"><img src="./assets/vqd2.png" alt="TSINGSEE"></div>
|
||
</div>
|
||
</div>
|
||
<div class="scene-item">
|
||
<div class="scene-item-header" style="background: transparent; padding-bottom: 0;">
|
||
<strong class="sub-title" style="color: #000;">噪声检测</strong>
|
||
</div>
|
||
<div class="scene-item-body" style=" padding-bottom: 0;">
|
||
<div class="img-placeholder-small" style="height: 260px;padding: 0;"><img src="./assets/vqd3.png" alt="TSINGSEE"></div>
|
||
</div>
|
||
</div>
|
||
<div class="scene-item">
|
||
<div class="scene-item-header" style="background: transparent; padding-bottom: 0;">
|
||
<strong class="sub-title" style="color: #000;">对比度检测</strong>
|
||
</div>
|
||
<div class="scene-item-body" style=" padding-bottom: 0;">
|
||
<div class="img-placeholder-small" style="height: 260px;padding: 0;"><img src="./assets/vqd4.png" alt="TSINGSEE"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |