智能分析页-设计稿.html 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>清鉴 · 智能分析 — 设计稿(1440)</title>
  6. <!--
  7. 清鉴(QingJian)· 智能分析页 高保真设计稿
  8. 设计基准 = 项目设计 token(ai-electron/frontend/src/ai/styles/ai.less + core/design/var/color.less):
  9. 主色 --ai-primary: #2a50ec | 页面底 --ai-bg-page: #f0f2f5 | 卡片底 #fff
  10. 文字主/次: #24292f / #656d76 | 描边: #d0d7de / #e3e7ee | 圆角: 12(外卡) / 8(内卡与控件) / 4(小)
  11. 图表分类色沿用 GraphBlock CATEGORY_COLORS(用于方案数据域标签圆点)
  12. 画布 1440 宽,建议 2x 截图导出。
  13. -->
  14. <style>
  15. :root {
  16. --ai-primary: #2a50ec;
  17. --ai-primary-hover: #1f43d8;
  18. --ai-primary-soft: rgba(42, 80, 236, 0.08);
  19. --ai-bg-page: #f0f2f5;
  20. --ai-bg-card: #ffffff;
  21. --ai-bg-subtle: #f5f6fa;
  22. --ai-border: #e3e7ee;
  23. --ai-border-strong: #d0d7de;
  24. --ai-text: #24292f;
  25. --ai-text-2: #656d76;
  26. --ai-text-3: #9aa1ac;
  27. --ai-radius-lg: 12px;
  28. --ai-radius: 8px;
  29. --ai-shadow-sm: 0 1px 2px rgba(27, 31, 36, 0.06);
  30. --ai-shadow: 0 2px 8px rgba(27, 31, 36, 0.08);
  31. --c-fund: #2a50ec;
  32. --c-call: #1a7f37;
  33. --c-track: #bc4c00;
  34. --c-portrait: #8250df;
  35. --c-graph: #0969da;
  36. --c-biz: #6e7781;
  37. --c-behavior: #9a6700;
  38. }
  39. * { box-sizing: border-box; margin: 0; padding: 0; }
  40. html, body {
  41. background: var(--ai-bg-page);
  42. color: var(--ai-text);
  43. font-family: -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  44. -webkit-font-smoothing: antialiased;
  45. text-rendering: optimizeLegibility;
  46. }
  47. .ic {
  48. display: inline-block;
  49. width: 16px;
  50. height: 16px;
  51. fill: none;
  52. stroke: currentColor;
  53. stroke-width: 1.7;
  54. stroke-linecap: round;
  55. stroke-linejoin: round;
  56. flex: 0 0 auto;
  57. }
  58. /* ───────────────────────── 顶部栏(AppTopBar) ───────────────────────── */
  59. .topbar {
  60. display: flex;
  61. align-items: center;
  62. gap: 12px;
  63. height: 52px;
  64. padding: 0 20px;
  65. background: var(--ai-bg-card);
  66. border-bottom: 1px solid var(--ai-border);
  67. }
  68. .brand {
  69. display: flex;
  70. align-items: center;
  71. gap: 9px;
  72. font-size: 14.5px;
  73. font-weight: 700;
  74. letter-spacing: 0.01em;
  75. color: var(--ai-text);
  76. }
  77. .brand-mark {
  78. display: inline-flex;
  79. align-items: center;
  80. justify-content: center;
  81. width: 26px;
  82. height: 26px;
  83. font-size: 14px;
  84. font-weight: 700;
  85. color: #fff;
  86. background: linear-gradient(135deg, #2a50ec 0%, #1951be 100%);
  87. border-radius: 7px;
  88. box-shadow: var(--ai-shadow-sm);
  89. }
  90. .brand-sub {
  91. margin-left: 2px;
  92. padding: 2px 8px;
  93. font-size: 11px;
  94. font-weight: 500;
  95. color: var(--ai-primary);
  96. background: var(--ai-primary-soft);
  97. border-radius: 99px;
  98. }
  99. .topbar-right {
  100. display: flex;
  101. align-items: center;
  102. gap: 12px;
  103. margin-left: auto;
  104. }
  105. .case-chip {
  106. display: inline-flex;
  107. align-items: center;
  108. gap: 6px;
  109. max-width: 340px;
  110. padding: 4px 12px;
  111. font-size: 12.5px;
  112. color: var(--ai-text-2);
  113. background: var(--ai-bg-subtle);
  114. border: 1px solid var(--ai-border);
  115. border-radius: 99px;
  116. white-space: nowrap;
  117. }
  118. .case-chip b { font-weight: 600; color: var(--ai-text); }
  119. .avatar {
  120. display: inline-flex;
  121. align-items: center;
  122. justify-content: center;
  123. width: 28px;
  124. height: 28px;
  125. color: var(--ai-primary);
  126. background: var(--ai-primary-soft);
  127. border-radius: 50%;
  128. }
  129. /* ───────────────────────── 页面主体 ───────────────────────── */
  130. .page {
  131. width: 1440px;
  132. margin: 0 auto;
  133. padding: 16px 20px 28px;
  134. }
  135. .page-head {
  136. display: flex;
  137. align-items: baseline;
  138. gap: 12px;
  139. padding: 2px 2px 12px;
  140. }
  141. .page-head h1 {
  142. font-size: 18px;
  143. font-weight: 700;
  144. letter-spacing: 0.01em;
  145. }
  146. .page-head p {
  147. font-size: 12.5px;
  148. color: var(--ai-text-2);
  149. }
  150. .page-head .crumb {
  151. font-size: 12px;
  152. color: var(--ai-text-3);
  153. }
  154. /* ── 数据来源入口(两块) ── */
  155. .hero-grid {
  156. display: grid;
  157. grid-template-columns: 1fr 1fr;
  158. gap: 16px;
  159. }
  160. .hero {
  161. position: relative;
  162. display: flex;
  163. align-items: center;
  164. gap: 16px;
  165. padding: 20px 22px;
  166. overflow: hidden;
  167. background: var(--ai-bg-card);
  168. border: 1px solid var(--ai-border);
  169. border-radius: var(--ai-radius-lg);
  170. box-shadow: var(--ai-shadow-sm);
  171. transition: box-shadow .15s ease, transform .15s ease;
  172. }
  173. .hero:hover {
  174. box-shadow: var(--ai-shadow);
  175. transform: translateY(-1px);
  176. }
  177. /* 角部淡蓝光晕:只做一点品牌氛围,保持克制 */
  178. .hero::after {
  179. content: "";
  180. position: absolute;
  181. top: -60px;
  182. right: -40px;
  183. width: 220px;
  184. height: 160px;
  185. background: radial-gradient(closest-side, rgba(42, 80, 236, 0.07), transparent);
  186. pointer-events: none;
  187. }
  188. .hero-icon {
  189. display: flex;
  190. align-items: center;
  191. justify-content: center;
  192. flex: 0 0 auto;
  193. width: 46px;
  194. height: 46px;
  195. color: var(--ai-primary);
  196. background: var(--ai-primary-soft);
  197. border-radius: 10px;
  198. }
  199. .hero-icon .ic { width: 22px; height: 22px; stroke-width: 1.6; }
  200. .hero-body { flex: 1 1 auto; min-width: 0; }
  201. .hero-title {
  202. font-size: 16px;
  203. font-weight: 700;
  204. letter-spacing: 0.01em;
  205. }
  206. .hero-desc {
  207. margin-top: 5px;
  208. /* 描述统一占两行高度:两块入口卡的标签行保持水平对齐 */
  209. min-height: 42px;
  210. font-size: 12.5px;
  211. line-height: 1.7;
  212. color: var(--ai-text-2);
  213. }
  214. .hero-tags {
  215. display: flex;
  216. gap: 6px;
  217. margin-top: 10px;
  218. }
  219. .hero-tags span {
  220. display: inline-flex;
  221. align-items: center;
  222. gap: 5px;
  223. padding: 2px 9px;
  224. font-size: 11px;
  225. color: var(--ai-text-2);
  226. background: var(--ai-bg-subtle);
  227. border-radius: 99px;
  228. white-space: nowrap;
  229. }
  230. .dot {
  231. display: inline-block;
  232. width: 5px;
  233. height: 5px;
  234. border-radius: 50%;
  235. }
  236. .hero-start {
  237. position: relative;
  238. z-index: 1;
  239. display: inline-flex;
  240. align-items: center;
  241. gap: 7px;
  242. flex: 0 0 auto;
  243. padding: 0 16px;
  244. height: 36px;
  245. font-size: 13px;
  246. font-weight: 600;
  247. font-family: inherit;
  248. color: #fff;
  249. background: var(--ai-primary);
  250. border: none;
  251. border-radius: var(--ai-radius);
  252. box-shadow: 0 2px 6px rgba(42, 80, 236, 0.28);
  253. cursor: pointer;
  254. transition: background .15s ease;
  255. }
  256. .hero-start .ic { width: 15px; height: 15px; }
  257. .hero-start:hover { background: var(--ai-primary-hover); }
  258. /* ── 分析方案面板 ── */
  259. .panel {
  260. margin-top: 16px;
  261. padding: 16px 20px 20px;
  262. background: var(--ai-bg-card);
  263. border: 1px solid var(--ai-border);
  264. border-radius: var(--ai-radius-lg);
  265. box-shadow: var(--ai-shadow-sm);
  266. }
  267. .panel-head {
  268. display: flex;
  269. align-items: center;
  270. gap: 14px;
  271. padding-bottom: 13px;
  272. border-bottom: 1px solid var(--ai-border);
  273. }
  274. .panel-title {
  275. font-size: 15px;
  276. font-weight: 700;
  277. letter-spacing: 0.01em;
  278. }
  279. .panel-count {
  280. margin-left: 2px;
  281. font-size: 11.5px;
  282. font-weight: 500;
  283. color: var(--ai-text-2);
  284. background: var(--ai-bg-subtle);
  285. padding: 2px 9px;
  286. border-radius: 99px;
  287. }
  288. .search {
  289. display: flex;
  290. align-items: center;
  291. gap: 8px;
  292. width: 260px;
  293. height: 32px;
  294. padding: 0 11px;
  295. color: var(--ai-text-3);
  296. background: var(--ai-bg-card);
  297. border: 1px solid var(--ai-border-strong);
  298. border-radius: var(--ai-radius);
  299. transition: border-color .15s ease, box-shadow .15s ease;
  300. }
  301. .search:focus-within {
  302. border-color: var(--ai-primary);
  303. box-shadow: 0 0 0 3px var(--ai-primary-soft);
  304. }
  305. .search .ic { width: 14px; height: 14px; }
  306. .search input {
  307. flex: 1;
  308. font-size: 12.5px;
  309. font-family: inherit;
  310. color: var(--ai-text);
  311. background: transparent;
  312. border: none;
  313. outline: none;
  314. }
  315. .search input::placeholder { color: var(--ai-text-3); }
  316. .panel-head .sp { flex: 1 1 auto; }
  317. .btn-primary {
  318. display: inline-flex;
  319. align-items: center;
  320. gap: 6px;
  321. height: 32px;
  322. padding: 0 14px;
  323. font-size: 13px;
  324. font-weight: 600;
  325. font-family: inherit;
  326. color: #fff;
  327. background: var(--ai-primary);
  328. border: none;
  329. border-radius: var(--ai-radius);
  330. cursor: pointer;
  331. transition: background .15s ease;
  332. }
  333. .btn-primary .ic { width: 14px; height: 14px; stroke-width: 2; }
  334. .btn-primary:hover { background: var(--ai-primary-hover); }
  335. /* ── 方案卡片 ── */
  336. .grid {
  337. display: grid;
  338. grid-template-columns: repeat(4, minmax(0, 1fr));
  339. gap: 14px;
  340. margin-top: 14px;
  341. }
  342. .scheme {
  343. position: relative;
  344. display: flex;
  345. flex-direction: column;
  346. padding: 14px 14px 10px;
  347. background: var(--ai-bg-card);
  348. border: 1px solid var(--ai-border);
  349. border-radius: var(--ai-radius);
  350. transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  351. }
  352. .scheme:hover {
  353. border-color: rgba(42, 80, 236, 0.35);
  354. box-shadow: var(--ai-shadow);
  355. transform: translateY(-1px);
  356. }
  357. .scheme-head {
  358. display: flex;
  359. align-items: center;
  360. gap: 9px;
  361. padding-right: 44px;
  362. }
  363. .scheme-icon {
  364. display: flex;
  365. align-items: center;
  366. justify-content: center;
  367. flex: 0 0 auto;
  368. width: 30px;
  369. height: 30px;
  370. color: var(--ai-primary);
  371. background: var(--ai-primary-soft);
  372. border-radius: var(--ai-radius);
  373. }
  374. .scheme-icon .ic { width: 16px; height: 16px; }
  375. .scheme-name {
  376. overflow: hidden;
  377. font-size: 13.5px;
  378. font-weight: 700;
  379. white-space: nowrap;
  380. text-overflow: ellipsis;
  381. letter-spacing: 0.01em;
  382. }
  383. .badge {
  384. position: absolute;
  385. top: 12px;
  386. right: 12px;
  387. padding: 0 7px;
  388. font-size: 11px;
  389. line-height: 18px;
  390. border-radius: 99px;
  391. }
  392. .badge.is-builtin { color: var(--ai-text-2); background: var(--ai-bg-subtle); }
  393. .badge.is-custom { color: var(--ai-primary); background: var(--ai-primary-soft); }
  394. .scheme-desc {
  395. margin-top: 9px;
  396. min-height: 54px;
  397. font-size: 12.25px;
  398. line-height: 1.7;
  399. color: var(--ai-text-2);
  400. }
  401. .scheme-chips {
  402. display: flex;
  403. flex-wrap: wrap;
  404. gap: 6px;
  405. margin-top: 8px;
  406. }
  407. .scheme-chips span {
  408. display: inline-flex;
  409. align-items: center;
  410. gap: 5px;
  411. padding: 1px 8px;
  412. font-size: 11px;
  413. color: var(--ai-text-2);
  414. background: var(--ai-bg-subtle);
  415. border-radius: 99px;
  416. }
  417. .scheme-ops {
  418. display: flex;
  419. align-items: center;
  420. gap: 4px;
  421. margin-top: 11px;
  422. padding-top: 8px;
  423. border-top: 1px solid var(--ai-border);
  424. }
  425. .scheme-run {
  426. display: inline-flex;
  427. align-items: center;
  428. gap: 5px;
  429. padding: 4px 8px;
  430. font-size: 12.5px;
  431. font-weight: 600;
  432. font-family: inherit;
  433. color: var(--ai-primary);
  434. background: none;
  435. border: none;
  436. border-radius: 6px;
  437. cursor: pointer;
  438. }
  439. .scheme-run .ic { width: 13px; height: 13px; }
  440. .scheme-run:hover { background: var(--ai-primary-soft); }
  441. .scheme-ops .sp { flex: 1 1 auto; }
  442. .iconbtn {
  443. display: inline-flex;
  444. align-items: center;
  445. justify-content: center;
  446. width: 26px;
  447. height: 26px;
  448. color: var(--ai-text-2);
  449. background: transparent;
  450. border: none;
  451. border-radius: 6px;
  452. cursor: pointer;
  453. transition: color .15s ease, background .15s ease;
  454. }
  455. .iconbtn .ic { width: 14px; height: 14px; }
  456. .iconbtn:hover { color: var(--ai-text); background: var(--ai-bg-subtle); }
  457. .iconbtn.danger:hover { color: #cf222e; background: rgba(207, 34, 46, 0.08); }
  458. </style>
  459. </head>
  460. <body>
  461. <!-- 图标库(内联 SVG symbol,无外部依赖;线性风格对齐项目 Iconify mdi 用法) -->
  462. <svg style="display:none" aria-hidden="true">
  463. <defs>
  464. <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>
  465. <symbol id="i-funnel" viewBox="0 0 24 24"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></symbol>
  466. <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>
  467. <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
  468. <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></symbol>
  469. <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>
  470. <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>
  471. <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></symbol>
  472. <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>
  473. <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>
  474. <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>
  475. <symbol id="i-zap" viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></symbol>
  476. <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>
  477. <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>
  478. <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>
  479. <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>
  480. <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>
  481. <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>
  482. <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>
  483. <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>
  484. <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>
  485. </defs>
  486. </svg>
  487. <!-- ───────── 顶栏:清鉴品牌 + 当前案件上下文 ───────── -->
  488. <header class="topbar">
  489. <div class="brand">
  490. <span class="brand-mark">清</span>
  491. 清鉴 · 智能研判
  492. <span class="brand-sub">智能分析</span>
  493. </div>
  494. <div class="topbar-right">
  495. <span class="case-chip">
  496. <svg class="ic" style="width:13px;height:13px"><use href="#i-folder"/></svg>
  497. 当前案件:<b>张某某等人职务侵占、洗钱案</b>
  498. </span>
  499. <span class="avatar"><svg class="ic" style="width:15px;height:15px"><use href="#i-user"/></svg></span>
  500. </div>
  501. </header>
  502. <main class="page">
  503. <div class="page-head">
  504. <h1>智能分析</h1>
  505. <p>选择数据来源与分析方案,对当前案件进行智能研判</p>
  506. <span class="sp" style="flex:1"></span>
  507. <span class="crumb">案件工作区 / 智能分析</span>
  508. </div>
  509. <!-- ───────── 数据来源入口 ───────── -->
  510. <section class="hero-grid">
  511. <article class="hero">
  512. <div class="hero-icon"><svg class="ic"><use href="#i-upload"/></svg></div>
  513. <div class="hero-body">
  514. <div class="hero-title">基于上传文件智能分析</div>
  515. <p class="hero-desc">基于当前案件上传的所有文件,通过系统内置的分析方案进行分析。</p>
  516. <div class="hero-tags">
  517. <span><i class="dot" style="background:var(--c-call)"></i>话单</span>
  518. <span><i class="dot" style="background:var(--c-fund)"></i>银行账单</span>
  519. <span><i class="dot" style="background:var(--c-fund)"></i>第三方支付</span>
  520. <span><i class="dot" style="background:var(--c-track)"></i>基站轨迹</span>
  521. </div>
  522. </div>
  523. <button class="hero-start">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  524. </article>
  525. <article class="hero">
  526. <div class="hero-icon"><svg class="ic"><use href="#i-funnel"/></svg></div>
  527. <div class="hero-body">
  528. <div class="hero-title">基于清洗结果智能分析</div>
  529. <p class="hero-desc">基于当前案件上传数据经模板库自动清洗治理后的结果,通过系统内置的分析方案进行分析。</p>
  530. <div class="hero-tags">
  531. <span><i class="dot" style="background:var(--c-call)"></i>通话记录</span>
  532. <span><i class="dot" style="background:var(--c-fund)"></i>资金流水</span>
  533. <span><i class="dot" style="background:var(--c-track)"></i>出行轨迹</span>
  534. <span><i class="dot" style="background:var(--c-biz)"></i>已治理入库</span>
  535. </div>
  536. </div>
  537. <button class="hero-start">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  538. </article>
  539. </section>
  540. <!-- ───────── 分析方案 ───────── -->
  541. <section class="panel">
  542. <header class="panel-head">
  543. <span class="panel-title">分析方案</span>
  544. <span class="panel-count">12 个可用</span>
  545. <label class="search">
  546. <svg class="ic"><use href="#i-search"/></svg>
  547. <input type="text" placeholder="输入方案名称搜索" />
  548. </label>
  549. <span class="sp"></span>
  550. <button class="btn-primary"><svg class="ic"><use href="#i-plus"/></svg>新建方案</button>
  551. </header>
  552. <div class="grid">
  553. <article class="scheme">
  554. <div class="scheme-head">
  555. <span class="scheme-icon"><svg class="ic"><use href="#i-briefcase"/></svg></span>
  556. <span class="scheme-name">寻找影子公司</span>
  557. </div>
  558. <span class="badge is-builtin">内置</span>
  559. <p class="scheme-desc">通过技能大额转账、企业管理、实际受益人的分析结果,进行智能研判</p>
  560. <div class="scheme-chips">
  561. <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
  562. <span><i class="dot" style="background:var(--c-biz)"></i>工商</span>
  563. </div>
  564. <footer class="scheme-ops">
  565. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  566. <span class="sp"></span>
  567. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  568. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  569. </footer>
  570. </article>
  571. <article class="scheme">
  572. <div class="scheme-head">
  573. <span class="scheme-icon"><svg class="ic"><use href="#i-users"/></svg></span>
  574. <span class="scheme-name">寻找亲密关系人</span>
  575. </div>
  576. <span class="badge is-builtin">内置</span>
  577. <p class="scheme-desc">通过技能将某日期通话、交易、同住、同行规律性转账分析结果,进行智能研判</p>
  578. <div class="scheme-chips">
  579. <span><i class="dot" style="background:var(--c-call)"></i>通话</span>
  580. <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
  581. </div>
  582. <footer class="scheme-ops">
  583. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  584. <span class="sp"></span>
  585. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  586. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  587. </footer>
  588. </article>
  589. <article class="scheme">
  590. <div class="scheme-head">
  591. <span class="scheme-icon"><svg class="ic"><use href="#i-clock"/></svg></span>
  592. <span class="scheme-name">寻找可疑行为前后动作</span>
  593. </div>
  594. <span class="badge is-builtin">内置</span>
  595. <p class="scheme-desc">通过技能行为时空分析结果,进行智能研判</p>
  596. <div class="scheme-chips">
  597. <span><i class="dot" style="background:var(--c-track)"></i>轨迹</span>
  598. <span><i class="dot" style="background:var(--c-behavior)"></i>行为</span>
  599. </div>
  600. <footer class="scheme-ops">
  601. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  602. <span class="sp"></span>
  603. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  604. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  605. </footer>
  606. </article>
  607. <article class="scheme">
  608. <div class="scheme-head">
  609. <span class="scheme-icon"><svg class="ic"><use href="#i-user-focus"/></svg></span>
  610. <span class="scheme-name">全局预览个人数据</span>
  611. </div>
  612. <span class="badge is-builtin">内置</span>
  613. <p class="scheme-desc">通过人物画像分析结果,进行智能研判</p>
  614. <div class="scheme-chips">
  615. <span><i class="dot" style="background:var(--c-portrait)"></i>画像</span>
  616. </div>
  617. <footer class="scheme-ops">
  618. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  619. <span class="sp"></span>
  620. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  621. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  622. </footer>
  623. </article>
  624. <article class="scheme">
  625. <div class="scheme-head">
  626. <span class="scheme-icon"><svg class="ic"><use href="#i-network"/></svg></span>
  627. <span class="scheme-name">分析案件人物关系</span>
  628. </div>
  629. <span class="badge is-builtin">内置</span>
  630. <p class="scheme-desc">通过技能对方交友分析、对方通话分析、同住、同行、随行情况分析案件人物关系</p>
  631. <div class="scheme-chips">
  632. <span><i class="dot" style="background:var(--c-graph)"></i>图谱</span>
  633. <span><i class="dot" style="background:var(--c-call)"></i>通话</span>
  634. </div>
  635. <footer class="scheme-ops">
  636. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  637. <span class="sp"></span>
  638. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  639. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  640. </footer>
  641. </article>
  642. <article class="scheme">
  643. <div class="scheme-head">
  644. <span class="scheme-icon"><svg class="ic"><use href="#i-refresh"/></svg></span>
  645. <span class="scheme-name">资金回流分析</span>
  646. </div>
  647. <span class="badge is-builtin">内置</span>
  648. <p class="scheme-desc">基于大额转账与闭环交易结果,识别资金回流路径与层级,进行智能研判</p>
  649. <div class="scheme-chips">
  650. <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
  651. <span><i class="dot" style="background:var(--c-graph)"></i>图谱</span>
  652. </div>
  653. <footer class="scheme-ops">
  654. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  655. <span class="sp"></span>
  656. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  657. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  658. </footer>
  659. </article>
  660. <article class="scheme">
  661. <div class="scheme-head">
  662. <span class="scheme-icon"><svg class="ic"><use href="#i-zap"/></svg></span>
  663. <span class="scheme-name">快进快出识别</span>
  664. </div>
  665. <span class="badge is-builtin">内置</span>
  666. <p class="scheme-desc">监测账户资金快进快出行为,发现过渡账户与资金通道</p>
  667. <div class="scheme-chips">
  668. <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
  669. <span><i class="dot" style="background:var(--c-biz)"></i>账户</span>
  670. </div>
  671. <footer class="scheme-ops">
  672. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  673. <span class="sp"></span>
  674. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  675. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  676. </footer>
  677. </article>
  678. <article class="scheme">
  679. <div class="scheme-head">
  680. <span class="scheme-icon"><svg class="ic"><use href="#i-phone"/></svg></span>
  681. <span class="scheme-name">通联异常检测</span>
  682. </div>
  683. <span class="badge is-builtin">内置</span>
  684. <p class="scheme-desc">分析通联频次、时段与对端分布,发现通联异常的关系人</p>
  685. <div class="scheme-chips">
  686. <span><i class="dot" style="background:var(--c-call)"></i>通话</span>
  687. </div>
  688. <footer class="scheme-ops">
  689. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  690. <span class="sp"></span>
  691. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  692. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  693. </footer>
  694. </article>
  695. <article class="scheme">
  696. <div class="scheme-head">
  697. <span class="scheme-icon"><svg class="ic"><use href="#i-pin"/></svg></span>
  698. <span class="scheme-name">时空伴随分析</span>
  699. </div>
  700. <span class="badge is-builtin">内置</span>
  701. <p class="scheme-desc">基于基站轨迹与随行情况,发现与目标存在时空伴随的同行人员</p>
  702. <div class="scheme-chips">
  703. <span><i class="dot" style="background:var(--c-track)"></i>轨迹</span>
  704. </div>
  705. <footer class="scheme-ops">
  706. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  707. <span class="sp"></span>
  708. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  709. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  710. </footer>
  711. </article>
  712. <article class="scheme">
  713. <div class="scheme-head">
  714. <span class="scheme-icon"><svg class="ic"><use href="#i-repeat"/></svg></span>
  715. <span class="scheme-name">闭环交易发现</span>
  716. </div>
  717. <span class="badge is-builtin">内置</span>
  718. <p class="scheme-desc">挖掘资金闭环交易链条,还原团伙内部资金流转结构</p>
  719. <div class="scheme-chips">
  720. <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
  721. </div>
  722. <footer class="scheme-ops">
  723. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  724. <span class="sp"></span>
  725. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  726. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  727. </footer>
  728. </article>
  729. <article class="scheme">
  730. <div class="scheme-head">
  731. <span class="scheme-icon"><svg class="ic"><use href="#i-card"/></svg></span>
  732. <span class="scheme-name">重点账户穿透</span>
  733. </div>
  734. <span class="badge is-custom">自定义</span>
  735. <p class="scheme-desc">对涉案账户进行多级转账穿透,追溯实际受益人</p>
  736. <div class="scheme-chips">
  737. <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
  738. <span><i class="dot" style="background:var(--c-biz)"></i>工商</span>
  739. </div>
  740. <footer class="scheme-ops">
  741. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  742. <span class="sp"></span>
  743. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  744. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  745. </footer>
  746. </article>
  747. <article class="scheme">
  748. <div class="scheme-head">
  749. <span class="scheme-icon"><svg class="ic"><use href="#i-target"/></svg></span>
  750. <span class="scheme-name">白手套线索挖掘</span>
  751. </div>
  752. <span class="badge is-custom">自定义</span>
  753. <p class="scheme-desc">结合人物画像与资金回流结果,挖掘疑似白手套人员</p>
  754. <div class="scheme-chips">
  755. <span><i class="dot" style="background:var(--c-portrait)"></i>画像</span>
  756. <span><i class="dot" style="background:var(--c-fund)"></i>资金</span>
  757. </div>
  758. <footer class="scheme-ops">
  759. <button class="scheme-run">开始分析<svg class="ic"><use href="#i-arrow"/></svg></button>
  760. <span class="sp"></span>
  761. <button class="iconbtn" title="编辑"><svg class="ic"><use href="#i-pencil"/></svg></button>
  762. <button class="iconbtn danger" title="删除"><svg class="ic"><use href="#i-trash"/></svg></button>
  763. </footer>
  764. </article>
  765. </div>
  766. </section>
  767. </main>
  768. </body>
  769. </html>