|
|
@@ -0,0 +1,852 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8" />
|
|
|
+<title>清鉴 · 智能分析 — 设计稿(1440)</title>
|
|
|
+<!--
|
|
|
+ 清鉴(QingJian)· 智能分析页 高保真设计稿
|
|
|
+ 设计基准 = 项目设计 token(ai-electron/frontend/src/ai/styles/ai.less + core/design/var/color.less):
|
|
|
+ 主色 --ai-primary: #2a50ec | 页面底 --ai-bg-page: #f0f2f5 | 卡片底 #fff
|
|
|
+ 文字主/次: #24292f / #656d76 | 描边: #d0d7de / #e3e7ee | 圆角: 12(外卡) / 8(内卡与控件) / 4(小)
|
|
|
+ 图表分类色沿用 GraphBlock CATEGORY_COLORS(用于方案数据域标签圆点)
|
|
|
+ 画布 1440 宽,建议 2x 截图导出。
|
|
|
+-->
|
|
|
+<style>
|
|
|
+ :root {
|
|
|
+ --ai-primary: #2a50ec;
|
|
|
+ --ai-primary-hover: #1f43d8;
|
|
|
+ --ai-primary-soft: rgba(42, 80, 236, 0.08);
|
|
|
+ --ai-bg-page: #f0f2f5;
|
|
|
+ --ai-bg-card: #ffffff;
|
|
|
+ --ai-bg-subtle: #f5f6fa;
|
|
|
+ --ai-border: #e3e7ee;
|
|
|
+ --ai-border-strong: #d0d7de;
|
|
|
+ --ai-text: #24292f;
|
|
|
+ --ai-text-2: #656d76;
|
|
|
+ --ai-text-3: #9aa1ac;
|
|
|
+ --ai-radius-lg: 12px;
|
|
|
+ --ai-radius: 8px;
|
|
|
+ --ai-shadow-sm: 0 1px 2px rgba(27, 31, 36, 0.06);
|
|
|
+ --ai-shadow: 0 2px 8px rgba(27, 31, 36, 0.08);
|
|
|
+ --c-fund: #2a50ec;
|
|
|
+ --c-call: #1a7f37;
|
|
|
+ --c-track: #bc4c00;
|
|
|
+ --c-portrait: #8250df;
|
|
|
+ --c-graph: #0969da;
|
|
|
+ --c-biz: #6e7781;
|
|
|
+ --c-behavior: #9a6700;
|
|
|
+ }
|
|
|
+
|
|
|
+ * { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
+
|
|
|
+ html, body {
|
|
|
+ background: var(--ai-bg-page);
|
|
|
+ color: var(--ai-text);
|
|
|
+ font-family: -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ text-rendering: optimizeLegibility;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ic {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ fill: none;
|
|
|
+ stroke: currentColor;
|
|
|
+ stroke-width: 1.7;
|
|
|
+ stroke-linecap: round;
|
|
|
+ stroke-linejoin: round;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ───────────────────────── 顶部栏(AppTopBar) ───────────────────────── */
|
|
|
+ .topbar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ height: 52px;
|
|
|
+ padding: 0 20px;
|
|
|
+ background: var(--ai-bg-card);
|
|
|
+ border-bottom: 1px solid var(--ai-border);
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 9px;
|
|
|
+ font-size: 14.5px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 0.01em;
|
|
|
+ color: var(--ai-text);
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-mark {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(135deg, #2a50ec 0%, #1951be 100%);
|
|
|
+ border-radius: 7px;
|
|
|
+ box-shadow: var(--ai-shadow-sm);
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-sub {
|
|
|
+ margin-left: 2px;
|
|
|
+ padding: 2px 8px;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: var(--ai-primary);
|
|
|
+ background: var(--ai-primary-soft);
|
|
|
+ border-radius: 99px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topbar-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .case-chip {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ max-width: 340px;
|
|
|
+ padding: 4px 12px;
|
|
|
+ font-size: 12.5px;
|
|
|
+ color: var(--ai-text-2);
|
|
|
+ background: var(--ai-bg-subtle);
|
|
|
+ border: 1px solid var(--ai-border);
|
|
|
+ border-radius: 99px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .case-chip b { font-weight: 600; color: var(--ai-text); }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ color: var(--ai-primary);
|
|
|
+ background: var(--ai-primary-soft);
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ───────────────────────── 页面主体 ───────────────────────── */
|
|
|
+ .page {
|
|
|
+ width: 1440px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 16px 20px 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ gap: 12px;
|
|
|
+ padding: 2px 2px 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-head h1 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 0.01em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-head p {
|
|
|
+ font-size: 12.5px;
|
|
|
+ color: var(--ai-text-2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-head .crumb {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--ai-text-3);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ── 数据来源入口(两块) ── */
|
|
|
+ .hero-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16px;
|
|
|
+ padding: 20px 22px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: var(--ai-bg-card);
|
|
|
+ border: 1px solid var(--ai-border);
|
|
|
+ border-radius: var(--ai-radius-lg);
|
|
|
+ box-shadow: var(--ai-shadow-sm);
|
|
|
+ transition: box-shadow .15s ease, transform .15s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero:hover {
|
|
|
+ box-shadow: var(--ai-shadow);
|
|
|
+ transform: translateY(-1px);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 角部淡蓝光晕:只做一点品牌氛围,保持克制 */
|
|
|
+ .hero::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: -60px;
|
|
|
+ right: -40px;
|
|
|
+ width: 220px;
|
|
|
+ height: 160px;
|
|
|
+ background: radial-gradient(closest-side, rgba(42, 80, 236, 0.07), transparent);
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ color: var(--ai-primary);
|
|
|
+ background: var(--ai-primary-soft);
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-icon .ic { width: 22px; height: 22px; stroke-width: 1.6; }
|
|
|
+
|
|
|
+ .hero-body { flex: 1 1 auto; min-width: 0; }
|
|
|
+
|
|
|
+ .hero-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 0.01em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-desc {
|
|
|
+ margin-top: 5px;
|
|
|
+ /* 描述统一占两行高度:两块入口卡的标签行保持水平对齐 */
|
|
|
+ min-height: 42px;
|
|
|
+ font-size: 12.5px;
|
|
|
+ line-height: 1.7;
|
|
|
+ color: var(--ai-text-2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-tags {
|
|
|
+ display: flex;
|
|
|
+ gap: 6px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-tags span {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ padding: 2px 9px;
|
|
|
+ font-size: 11px;
|
|
|
+ color: var(--ai-text-2);
|
|
|
+ background: var(--ai-bg-subtle);
|
|
|
+ border-radius: 99px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ display: inline-block;
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-start {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 7px;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ padding: 0 16px;
|
|
|
+ height: 36px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: inherit;
|
|
|
+ color: #fff;
|
|
|
+ background: var(--ai-primary);
|
|
|
+ border: none;
|
|
|
+ border-radius: var(--ai-radius);
|
|
|
+ box-shadow: 0 2px 6px rgba(42, 80, 236, 0.28);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background .15s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-start .ic { width: 15px; height: 15px; }
|
|
|
+ .hero-start:hover { background: var(--ai-primary-hover); }
|
|
|
+
|
|
|
+ /* ── 分析方案面板 ── */
|
|
|
+ .panel {
|
|
|
+ margin-top: 16px;
|
|
|
+ padding: 16px 20px 20px;
|
|
|
+ background: var(--ai-bg-card);
|
|
|
+ border: 1px solid var(--ai-border);
|
|
|
+ border-radius: var(--ai-radius-lg);
|
|
|
+ box-shadow: var(--ai-shadow-sm);
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 14px;
|
|
|
+ padding-bottom: 13px;
|
|
|
+ border-bottom: 1px solid var(--ai-border);
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel-title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 0.01em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel-count {
|
|
|
+ margin-left: 2px;
|
|
|
+ font-size: 11.5px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: var(--ai-text-2);
|
|
|
+ background: var(--ai-bg-subtle);
|
|
|
+ padding: 2px 9px;
|
|
|
+ border-radius: 99px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ width: 260px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0 11px;
|
|
|
+ color: var(--ai-text-3);
|
|
|
+ background: var(--ai-bg-card);
|
|
|
+ border: 1px solid var(--ai-border-strong);
|
|
|
+ border-radius: var(--ai-radius);
|
|
|
+ transition: border-color .15s ease, box-shadow .15s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search:focus-within {
|
|
|
+ border-color: var(--ai-primary);
|
|
|
+ box-shadow: 0 0 0 3px var(--ai-primary-soft);
|
|
|
+ }
|
|
|
+
|
|
|
+ .search .ic { width: 14px; height: 14px; }
|
|
|
+
|
|
|
+ .search input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 12.5px;
|
|
|
+ font-family: inherit;
|
|
|
+ color: var(--ai-text);
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search input::placeholder { color: var(--ai-text-3); }
|
|
|
+
|
|
|
+ .panel-head .sp { flex: 1 1 auto; }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0 14px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: inherit;
|
|
|
+ color: #fff;
|
|
|
+ background: var(--ai-primary);
|
|
|
+ border: none;
|
|
|
+ border-radius: var(--ai-radius);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background .15s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary .ic { width: 14px; height: 14px; stroke-width: 2; }
|
|
|
+ .btn-primary:hover { background: var(--ai-primary-hover); }
|
|
|
+
|
|
|
+ /* ── 方案卡片 ── */
|
|
|
+ .grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ gap: 14px;
|
|
|
+ margin-top: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scheme {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 14px 14px 10px;
|
|
|
+ background: var(--ai-bg-card);
|
|
|
+ border: 1px solid var(--ai-border);
|
|
|
+ border-radius: var(--ai-radius);
|
|
|
+ transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scheme:hover {
|
|
|
+ border-color: rgba(42, 80, 236, 0.35);
|
|
|
+ box-shadow: var(--ai-shadow);
|
|
|
+ transform: translateY(-1px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scheme-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 9px;
|
|
|
+ padding-right: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scheme-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ color: var(--ai-primary);
|
|
|
+ background: var(--ai-primary-soft);
|
|
|
+ border-radius: var(--ai-radius);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scheme-icon .ic { width: 16px; height: 16px; }
|
|
|
+
|
|
|
+ .scheme-name {
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 13.5px;
|
|
|
+ font-weight: 700;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ letter-spacing: 0.01em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .badge {
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ right: 12px;
|
|
|
+ padding: 0 7px;
|
|
|
+ font-size: 11px;
|
|
|
+ line-height: 18px;
|
|
|
+ border-radius: 99px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .badge.is-builtin { color: var(--ai-text-2); background: var(--ai-bg-subtle); }
|
|
|
+
|
|
|
+ .badge.is-custom { color: var(--ai-primary); background: var(--ai-primary-soft); }
|
|
|
+
|
|
|
+ .scheme-desc {
|
|
|
+ margin-top: 9px;
|
|
|
+ min-height: 54px;
|
|
|
+ font-size: 12.25px;
|
|
|
+ line-height: 1.7;
|
|
|
+ color: var(--ai-text-2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scheme-chips {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 6px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scheme-chips span {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ padding: 1px 8px;
|
|
|
+ font-size: 11px;
|
|
|
+ color: var(--ai-text-2);
|
|
|
+ background: var(--ai-bg-subtle);
|
|
|
+ border-radius: 99px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scheme-ops {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ margin-top: 11px;
|
|
|
+ padding-top: 8px;
|
|
|
+ border-top: 1px solid var(--ai-border);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scheme-run {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ padding: 4px 8px;
|
|
|
+ font-size: 12.5px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: inherit;
|
|
|
+ color: var(--ai-primary);
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scheme-run .ic { width: 13px; height: 13px; }
|
|
|
+ .scheme-run:hover { background: var(--ai-primary-soft); }
|
|
|
+
|
|
|
+ .scheme-ops .sp { flex: 1 1 auto; }
|
|
|
+
|
|
|
+ .iconbtn {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ color: var(--ai-text-2);
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: color .15s ease, background .15s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconbtn .ic { width: 14px; height: 14px; }
|
|
|
+ .iconbtn:hover { color: var(--ai-text); background: var(--ai-bg-subtle); }
|
|
|
+ .iconbtn.danger:hover { color: #cf222e; background: rgba(207, 34, 46, 0.08); }
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<!-- 图标库(内联 SVG symbol,无外部依赖;线性风格对齐项目 Iconify mdi 用法) -->
|
|
|
+<svg style="display:none" aria-hidden="true">
|
|
|
+ <defs>
|
|
|
+ <symbol id="i-upload" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/></symbol>
|
|
|
+ <symbol id="i-funnel" viewBox="0 0 24 24"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></symbol>
|
|
|
+ <symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></symbol>
|
|
|
+ <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
|
|
|
+ <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></symbol>
|
|
|
+ <symbol id="i-briefcase" viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></symbol>
|
|
|
+ <symbol id="i-users" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></symbol>
|
|
|
+ <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></symbol>
|
|
|
+ <symbol id="i-user-focus" viewBox="0 0 24 24"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="10" r="3"/><path d="M16 17a4 4 0 0 0-8 0"/></symbol>
|
|
|
+ <symbol id="i-network" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.59 13.51l6.83 3.98"/><path d="M15.41 6.51l-6.82 3.98"/></symbol>
|
|
|
+ <symbol id="i-refresh" viewBox="0 0 24 24"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10"/><path d="M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></symbol>
|
|
|
+ <symbol id="i-zap" viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></symbol>
|
|
|
+ <symbol id="i-phone" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></symbol>
|
|
|
+ <symbol id="i-pin" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></symbol>
|
|
|
+ <symbol id="i-repeat" viewBox="0 0 24 24"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></symbol>
|
|
|
+ <symbol id="i-card" viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2"/><path d="M1 10h22"/></symbol>
|
|
|
+ <symbol id="i-target" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></symbol>
|
|
|
+ <symbol id="i-pencil" viewBox="0 0 24 24"><path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></symbol>
|
|
|
+ <symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></symbol>
|
|
|
+ <symbol id="i-folder" viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></symbol>
|
|
|
+ <symbol id="i-user" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
|
|
|
+ </defs>
|
|
|
+</svg>
|
|
|
+
|
|
|
+<!-- ───────── 顶栏:清鉴品牌 + 当前案件上下文 ───────── -->
|
|
|
+<header class="topbar">
|
|
|
+ <div class="brand">
|
|
|
+ <span class="brand-mark">清</span>
|
|
|
+ 清鉴 · 智能研判
|
|
|
+ <span class="brand-sub">智能分析</span>
|
|
|
+ </div>
|
|
|
+ <div class="topbar-right">
|
|
|
+ <span class="case-chip">
|
|
|
+ <svg class="ic" style="width:13px;height:13px"><use href="#i-folder"/></svg>
|
|
|
+ 当前案件:<b>张某某等人职务侵占、洗钱案</b>
|
|
|
+ </span>
|
|
|
+ <span class="avatar"><svg class="ic" style="width:15px;height:15px"><use href="#i-user"/></svg></span>
|
|
|
+ </div>
|
|
|
+</header>
|
|
|
+
|
|
|
+<main class="page">
|
|
|
+
|
|
|
+ <div class="page-head">
|
|
|
+ <h1>智能分析</h1>
|
|
|
+ <p>选择数据来源与分析方案,对当前案件进行智能研判</p>
|
|
|
+ <span class="sp" style="flex:1"></span>
|
|
|
+ <span class="crumb">案件工作区 / 智能分析</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ───────── 数据来源入口 ───────── -->
|
|
|
+ <section class="hero-grid">
|
|
|
+ <article class="hero">
|
|
|
+ <div class="hero-icon"><svg class="ic"><use href="#i-upload"/></svg></div>
|
|
|
+ <div class="hero-body">
|
|
|
+ <div class="hero-title">基于上传文件智能分析</div>
|
|
|
+ <p class="hero-desc">基于当前案件上传的所有文件,通过系统内置的分析方案进行分析。</p>
|
|
|
+ <div class="hero-tags">
|
|
|
+ <span><i class="dot" style="background:var(--c-call)"></i>话单</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-fund)"></i>银行账单</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-fund)"></i>第三方支付</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-track)"></i>基站轨迹</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button class="hero-start">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="hero">
|
|
|
+ <div class="hero-icon"><svg class="ic"><use href="#i-funnel"/></svg></div>
|
|
|
+ <div class="hero-body">
|
|
|
+ <div class="hero-title">基于清洗结果智能分析</div>
|
|
|
+ <p class="hero-desc">基于当前案件上传数据经模板库自动清洗治理后的结果,通过系统内置的分析方案进行分析。</p>
|
|
|
+ <div class="hero-tags">
|
|
|
+ <span><i class="dot" style="background:var(--c-call)"></i>通话记录</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-fund)"></i>资金流水</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-track)"></i>出行轨迹</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-biz)"></i>已治理入库</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button class="hero-start">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ </article>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- ───────── 分析方案 ───────── -->
|
|
|
+ <section class="panel">
|
|
|
+ <header class="panel-head">
|
|
|
+ <span class="panel-title">分析方案</span>
|
|
|
+ <span class="panel-count">12 个可用</span>
|
|
|
+ <label class="search">
|
|
|
+ <svg class="ic"><use href="#i-search"/></svg>
|
|
|
+ <input type="text" placeholder="输入方案名称搜索" />
|
|
|
+ </label>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="btn-primary"><svg class="ic"><use href="#i-plus"/></svg>新建方案</button>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="grid">
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-briefcase"/></svg></span>
|
|
|
+ <span class="scheme-name">寻找影子公司</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-builtin">内置</span>
|
|
|
+ <p class="scheme-desc">通过技能大额转账、企业管理、实际受益人的分析结果,进行智能研判</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-biz)"></i>工商</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-users"/></svg></span>
|
|
|
+ <span class="scheme-name">寻找亲密关系人</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-builtin">内置</span>
|
|
|
+ <p class="scheme-desc">通过技能将某日期通话、交易、同住、同行规律性转账分析结果,进行智能研判</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-call)"></i>通话</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-clock"/></svg></span>
|
|
|
+ <span class="scheme-name">寻找可疑行为前后动作</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-builtin">内置</span>
|
|
|
+ <p class="scheme-desc">通过技能行为时空分析结果,进行智能研判</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-track)"></i>轨迹</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-behavior)"></i>行为</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-user-focus"/></svg></span>
|
|
|
+ <span class="scheme-name">全局预览个人数据</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-builtin">内置</span>
|
|
|
+ <p class="scheme-desc">通过人物画像分析结果,进行智能研判</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-portrait)"></i>画像</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-network"/></svg></span>
|
|
|
+ <span class="scheme-name">分析案件人物关系</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-builtin">内置</span>
|
|
|
+ <p class="scheme-desc">通过技能对方交友分析、对方通话分析、同住、同行、随行情况分析案件人物关系</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-graph)"></i>图谱</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-call)"></i>通话</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-refresh"/></svg></span>
|
|
|
+ <span class="scheme-name">资金回流分析</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-builtin">内置</span>
|
|
|
+ <p class="scheme-desc">基于大额转账与闭环交易结果,识别资金回流路径与层级,进行智能研判</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-graph)"></i>图谱</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-zap"/></svg></span>
|
|
|
+ <span class="scheme-name">快进快出识别</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-builtin">内置</span>
|
|
|
+ <p class="scheme-desc">监测账户资金快进快出行为,发现过渡账户与资金通道</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-biz)"></i>账户</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-phone"/></svg></span>
|
|
|
+ <span class="scheme-name">通联异常检测</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-builtin">内置</span>
|
|
|
+ <p class="scheme-desc">分析通联频次、时段与对端分布,发现通联异常的关系人</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-call)"></i>通话</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-pin"/></svg></span>
|
|
|
+ <span class="scheme-name">时空伴随分析</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-builtin">内置</span>
|
|
|
+ <p class="scheme-desc">基于基站轨迹与随行情况,发现与目标存在时空伴随的同行人员</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-track)"></i>轨迹</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-repeat"/></svg></span>
|
|
|
+ <span class="scheme-name">闭环交易发现</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-builtin">内置</span>
|
|
|
+ <p class="scheme-desc">挖掘资金闭环交易链条,还原团伙内部资金流转结构</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-card"/></svg></span>
|
|
|
+ <span class="scheme-name">重点账户穿透</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-custom">自定义</span>
|
|
|
+ <p class="scheme-desc">对涉案账户进行多级转账穿透,追溯实际受益人</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-biz)"></i>工商</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="scheme">
|
|
|
+ <div class="scheme-head">
|
|
|
+ <span class="scheme-icon"><svg class="ic"><use href="#i-target"/></svg></span>
|
|
|
+ <span class="scheme-name">白手套线索挖掘</span>
|
|
|
+ </div>
|
|
|
+ <span class="badge is-custom">自定义</span>
|
|
|
+ <p class="scheme-desc">结合人物画像与资金回流结果,挖掘疑似白手套人员</p>
|
|
|
+ <div class="scheme-chips">
|
|
|
+ <span><i class="dot" style="background:var(--c-portrait)"></i>画像</span>
|
|
|
+ <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
|
|
|
+ </div>
|
|
|
+ <footer class="scheme-ops">
|
|
|
+ <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
|
|
|
+ <span class="sp"></span>
|
|
|
+ <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
|
|
|
+ <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
|
|
|
+ </footer>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+</main>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|