新建方案页-设计稿.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>清鉴 · 新建方案 — 设计稿(1440)</title>
  6. <!--
  7. 清鉴(QingJian)· 新建方案页 高保真设计稿(与「智能分析页-设计稿」同一套 token 与组件语言)
  8. 设计 token 同前稿:主色 #2a50ec | 页面底 #f0f2f5 | 卡片白底描边 | 圆角 12/8 | 文字 #24292f/#656d76
  9. 原型结构:返回 + 标题 / 方案名称 / 方案描述 / 选择方案技能组合(多选卡片网格)
  10. 设计增强:表单焦点态与字数、技能搜索与数据域筛选、卡片选中态、底部已选汇总条、顶部保存动作
  11. 画布 1440 宽,建议 2x 截图导出。
  12. -->
  13. <style>
  14. :root {
  15. --ai-primary: #2a50ec;
  16. --ai-primary-hover: #1f43d8;
  17. --ai-primary-soft: rgba(42, 80, 236, 0.08);
  18. --ai-bg-page: #f0f2f5;
  19. --ai-bg-card: #ffffff;
  20. --ai-bg-subtle: #f5f6fa;
  21. --ai-border: #e3e7ee;
  22. --ai-border-strong: #d0d7de;
  23. --ai-text: #24292f;
  24. --ai-text-2: #656d76;
  25. --ai-text-3: #9aa1ac;
  26. --ai-radius-lg: 12px;
  27. --ai-radius: 8px;
  28. --ai-shadow-sm: 0 1px 2px rgba(27, 31, 36, 0.06);
  29. --ai-shadow: 0 2px 8px rgba(27, 31, 36, 0.08);
  30. --c-fund: #2a50ec;
  31. --c-call: #1a7f37;
  32. --c-track: #bc4c00;
  33. --c-portrait: #8250df;
  34. --c-graph: #0969da;
  35. --c-biz: #6e7781;
  36. --c-danger: #cf222e;
  37. }
  38. * { box-sizing: border-box; margin: 0; padding: 0; }
  39. html, body {
  40. background: var(--ai-bg-page);
  41. color: var(--ai-text);
  42. font-family: -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  43. -webkit-font-smoothing: antialiased;
  44. text-rendering: optimizeLegibility;
  45. }
  46. .ic {
  47. display: inline-block;
  48. width: 16px;
  49. height: 16px;
  50. fill: none;
  51. stroke: currentColor;
  52. stroke-width: 1.7;
  53. stroke-linecap: round;
  54. stroke-linejoin: round;
  55. flex: 0 0 auto;
  56. }
  57. /* ───────────────────────── 顶部栏(与智能分析页同款) ───────────────────────── */
  58. .topbar {
  59. display: flex;
  60. align-items: center;
  61. gap: 12px;
  62. height: 52px;
  63. padding: 0 20px;
  64. background: var(--ai-bg-card);
  65. border-bottom: 1px solid var(--ai-border);
  66. }
  67. .brand {
  68. display: flex;
  69. align-items: center;
  70. gap: 9px;
  71. font-size: 14.5px;
  72. font-weight: 700;
  73. letter-spacing: 0.01em;
  74. }
  75. .brand-mark {
  76. display: inline-flex;
  77. align-items: center;
  78. justify-content: center;
  79. width: 26px;
  80. height: 26px;
  81. font-size: 14px;
  82. font-weight: 700;
  83. color: #fff;
  84. background: linear-gradient(135deg, #2a50ec 0%, #1951be 100%);
  85. border-radius: 7px;
  86. box-shadow: var(--ai-shadow-sm);
  87. }
  88. .brand-sub {
  89. margin-left: 2px;
  90. padding: 2px 8px;
  91. font-size: 11px;
  92. font-weight: 500;
  93. color: var(--ai-primary);
  94. background: var(--ai-primary-soft);
  95. border-radius: 99px;
  96. }
  97. .topbar-right {
  98. display: flex;
  99. align-items: center;
  100. gap: 12px;
  101. margin-left: auto;
  102. }
  103. .case-chip {
  104. display: inline-flex;
  105. align-items: center;
  106. gap: 6px;
  107. max-width: 340px;
  108. padding: 4px 12px;
  109. font-size: 12.5px;
  110. color: var(--ai-text-2);
  111. background: var(--ai-bg-subtle);
  112. border: 1px solid var(--ai-border);
  113. border-radius: 99px;
  114. white-space: nowrap;
  115. }
  116. .case-chip b { font-weight: 600; color: var(--ai-text); }
  117. .avatar {
  118. display: inline-flex;
  119. align-items: center;
  120. justify-content: center;
  121. width: 28px;
  122. height: 28px;
  123. color: var(--ai-primary);
  124. background: var(--ai-primary-soft);
  125. border-radius: 50%;
  126. }
  127. /* ───────────────────────── 页面主体 ───────────────────────── */
  128. .page {
  129. width: 1440px;
  130. margin: 0 auto;
  131. padding: 14px 20px 28px;
  132. }
  133. .page-head {
  134. display: flex;
  135. align-items: center;
  136. gap: 12px;
  137. padding: 2px 2px 14px;
  138. }
  139. .back-btn {
  140. display: inline-flex;
  141. align-items: center;
  142. justify-content: center;
  143. width: 30px;
  144. height: 30px;
  145. color: var(--ai-text);
  146. background: transparent;
  147. border: none;
  148. border-radius: var(--ai-radius);
  149. cursor: pointer;
  150. transition: background .15s ease;
  151. }
  152. .back-btn .ic { width: 17px; height: 17px; }
  153. .back-btn:hover { background: var(--ai-bg-subtle); }
  154. .page-head h1 {
  155. font-size: 17px;
  156. font-weight: 700;
  157. letter-spacing: 0.01em;
  158. }
  159. .page-head p {
  160. font-size: 12.5px;
  161. color: var(--ai-text-2);
  162. }
  163. .page-head .sp { flex: 1 1 auto; }
  164. .btn-ghost {
  165. display: inline-flex;
  166. align-items: center;
  167. height: 32px;
  168. padding: 0 14px;
  169. font-size: 13px;
  170. font-weight: 500;
  171. font-family: inherit;
  172. color: var(--ai-text);
  173. background: var(--ai-bg-card);
  174. border: 1px solid var(--ai-border-strong);
  175. border-radius: var(--ai-radius);
  176. cursor: pointer;
  177. transition: color .15s ease, border-color .15s ease;
  178. }
  179. .btn-ghost:hover { color: var(--ai-primary); border-color: var(--ai-primary); }
  180. .btn-primary {
  181. display: inline-flex;
  182. align-items: center;
  183. gap: 6px;
  184. height: 32px;
  185. padding: 0 16px;
  186. font-size: 13px;
  187. font-weight: 600;
  188. font-family: inherit;
  189. color: #fff;
  190. background: var(--ai-primary);
  191. border: none;
  192. border-radius: var(--ai-radius);
  193. cursor: pointer;
  194. transition: background .15s ease;
  195. }
  196. .btn-primary .ic { width: 14px; height: 14px; stroke-width: 2; }
  197. .btn-primary:hover { background: var(--ai-primary-hover); }
  198. /* ── 基本信息(方案名称 / 方案描述) ── */
  199. .panel {
  200. background: var(--ai-bg-card);
  201. border: 1px solid var(--ai-border);
  202. border-radius: var(--ai-radius-lg);
  203. box-shadow: var(--ai-shadow-sm);
  204. }
  205. .form-panel { padding: 22px 24px 24px; }
  206. .form-row {
  207. display: flex;
  208. align-items: flex-start;
  209. gap: 16px;
  210. }
  211. .form-row + .form-row { margin-top: 20px; }
  212. .f-label {
  213. flex: 0 0 auto;
  214. width: 76px;
  215. padding-top: 8px;
  216. font-size: 13px;
  217. font-weight: 500;
  218. color: var(--ai-text);
  219. text-align: right;
  220. }
  221. .f-label .req {
  222. margin-right: 3px;
  223. color: var(--c-danger);
  224. font-weight: 600;
  225. }
  226. .f-input {
  227. width: 380px;
  228. height: 36px;
  229. padding: 0 12px;
  230. font-size: 13px;
  231. font-family: inherit;
  232. color: var(--ai-text);
  233. background: var(--ai-bg-card);
  234. border: 1px solid var(--ai-border-strong);
  235. border-radius: var(--ai-radius);
  236. outline: none;
  237. transition: border-color .15s ease, box-shadow .15s ease;
  238. }
  239. .f-input::placeholder,
  240. .f-textarea::placeholder { color: var(--ai-text-3); }
  241. .f-input:focus,
  242. .f-textarea:focus {
  243. border-color: var(--ai-primary);
  244. box-shadow: 0 0 0 3px var(--ai-primary-soft);
  245. }
  246. .f-textarea-wrap { position: relative; flex: 1 1 auto; }
  247. .f-textarea {
  248. display: block;
  249. width: 100%;
  250. height: 104px;
  251. padding: 9px 12px 26px;
  252. font-size: 13px;
  253. line-height: 1.7;
  254. font-family: inherit;
  255. color: var(--ai-text);
  256. background: var(--ai-bg-card);
  257. border: 1px solid var(--ai-border-strong);
  258. border-radius: var(--ai-radius);
  259. outline: none;
  260. resize: none;
  261. transition: border-color .15s ease, box-shadow .15s ease;
  262. }
  263. .f-counter {
  264. position: absolute;
  265. right: 12px;
  266. bottom: 8px;
  267. font-size: 11px;
  268. color: var(--ai-text-3);
  269. }
  270. .f-hint {
  271. margin-top: 6px;
  272. font-size: 11.5px;
  273. line-height: 1.6;
  274. color: var(--ai-text-3);
  275. }
  276. /* ── 选择方案技能组合 ── */
  277. .skills-panel { margin-top: 16px; padding: 16px 20px 18px; }
  278. .skills-head {
  279. display: flex;
  280. align-items: center;
  281. gap: 12px;
  282. padding-bottom: 13px;
  283. border-bottom: 1px solid var(--ai-border);
  284. }
  285. .skills-title {
  286. font-size: 15px;
  287. font-weight: 700;
  288. letter-spacing: 0.01em;
  289. }
  290. .skills-count {
  291. padding: 2px 9px;
  292. font-size: 11.5px;
  293. font-weight: 600;
  294. color: var(--ai-primary);
  295. background: var(--ai-primary-soft);
  296. border-radius: 99px;
  297. }
  298. .skills-head .sp { flex: 1 1 auto; }
  299. .search {
  300. display: flex;
  301. align-items: center;
  302. gap: 8px;
  303. width: 240px;
  304. height: 32px;
  305. padding: 0 11px;
  306. color: var(--ai-text-3);
  307. background: var(--ai-bg-card);
  308. border: 1px solid var(--ai-border-strong);
  309. border-radius: var(--ai-radius);
  310. transition: border-color .15s ease, box-shadow .15s ease;
  311. }
  312. .search:focus-within {
  313. border-color: var(--ai-primary);
  314. box-shadow: 0 0 0 3px var(--ai-primary-soft);
  315. }
  316. .search .ic { width: 14px; height: 14px; }
  317. .search input {
  318. flex: 1;
  319. min-width: 0;
  320. font-size: 12.5px;
  321. font-family: inherit;
  322. color: var(--ai-text);
  323. background: transparent;
  324. border: none;
  325. outline: none;
  326. }
  327. .search input::placeholder { color: var(--ai-text-3); }
  328. .filters { display: flex; align-items: center; gap: 6px; }
  329. .fchip {
  330. height: 26px;
  331. padding: 0 12px;
  332. font-size: 12px;
  333. font-family: inherit;
  334. color: var(--ai-text-2);
  335. background: var(--ai-bg-subtle);
  336. border: none;
  337. border-radius: 99px;
  338. cursor: pointer;
  339. transition: color .15s ease, background .15s ease;
  340. }
  341. .fchip:hover { color: var(--ai-primary); }
  342. .fchip.is-on {
  343. font-weight: 600;
  344. color: var(--ai-primary);
  345. background: var(--ai-primary-soft);
  346. }
  347. .grid {
  348. display: grid;
  349. grid-template-columns: repeat(4, minmax(0, 1fr));
  350. gap: 14px;
  351. margin-top: 14px;
  352. }
  353. /* 技能卡:可多选,右上角圆形勾选态 */
  354. .skill {
  355. position: relative;
  356. display: flex;
  357. flex-direction: column;
  358. padding: 14px 14px 12px;
  359. background: var(--ai-bg-card);
  360. border: 1px solid var(--ai-border);
  361. border-radius: var(--ai-radius);
  362. cursor: pointer;
  363. transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, background .15s ease;
  364. }
  365. .skill:hover {
  366. box-shadow: var(--ai-shadow);
  367. transform: translateY(-1px);
  368. }
  369. .skill.is-on {
  370. background: rgba(42, 80, 236, 0.03);
  371. border-color: var(--ai-primary);
  372. }
  373. .skill-head {
  374. display: flex;
  375. align-items: center;
  376. gap: 9px;
  377. padding-right: 30px;
  378. }
  379. .skill-icon {
  380. display: flex;
  381. align-items: center;
  382. justify-content: center;
  383. flex: 0 0 auto;
  384. width: 30px;
  385. height: 30px;
  386. color: var(--ai-primary);
  387. background: var(--ai-primary-soft);
  388. border-radius: var(--ai-radius);
  389. }
  390. .skill-icon .ic { width: 16px; height: 16px; }
  391. .skill-name {
  392. overflow: hidden;
  393. font-size: 13.5px;
  394. font-weight: 700;
  395. white-space: nowrap;
  396. text-overflow: ellipsis;
  397. letter-spacing: 0.01em;
  398. }
  399. .ck {
  400. position: absolute;
  401. top: 12px;
  402. right: 12px;
  403. display: flex;
  404. align-items: center;
  405. justify-content: center;
  406. width: 18px;
  407. height: 18px;
  408. color: transparent;
  409. background: var(--ai-bg-card);
  410. border: 1.5px solid var(--ai-border-strong);
  411. border-radius: 50%;
  412. transition: background .15s ease, border-color .15s ease;
  413. }
  414. .ck .ic { width: 11px; height: 11px; stroke-width: 3; }
  415. .skill.is-on .ck {
  416. color: #fff;
  417. background: var(--ai-primary);
  418. border-color: var(--ai-primary);
  419. }
  420. .skill-desc {
  421. margin-top: 9px;
  422. min-height: 54px;
  423. font-size: 12.25px;
  424. line-height: 1.7;
  425. color: var(--ai-text-2);
  426. }
  427. .skill-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  428. .skill-chips span {
  429. display: inline-flex;
  430. align-items: center;
  431. gap: 5px;
  432. padding: 1px 8px;
  433. font-size: 11px;
  434. color: var(--ai-text-2);
  435. background: var(--ai-bg-subtle);
  436. border-radius: 99px;
  437. }
  438. .dot {
  439. display: inline-block;
  440. width: 5px;
  441. height: 5px;
  442. border-radius: 50%;
  443. }
  444. /* 底部已选汇总条 */
  445. .sel-bar {
  446. display: flex;
  447. align-items: center;
  448. gap: 8px;
  449. margin-top: 14px;
  450. padding-top: 12px;
  451. border-top: 1px solid var(--ai-border);
  452. }
  453. .sel-bar .sel-label {
  454. flex: 0 0 auto;
  455. font-size: 12.5px;
  456. font-weight: 600;
  457. color: var(--ai-text);
  458. }
  459. .sel-chip {
  460. padding: 2px 10px;
  461. font-size: 11.5px;
  462. font-weight: 500;
  463. color: var(--ai-primary);
  464. background: var(--ai-primary-soft);
  465. border-radius: 99px;
  466. white-space: nowrap;
  467. }
  468. .sel-clear {
  469. margin-left: auto;
  470. padding: 4px 8px;
  471. font-size: 12px;
  472. font-family: inherit;
  473. color: var(--ai-text-2);
  474. background: none;
  475. border: none;
  476. border-radius: 6px;
  477. cursor: pointer;
  478. }
  479. .sel-clear:hover { color: var(--c-danger); background: rgba(207, 34, 46, 0.06); }
  480. </style>
  481. </head>
  482. <body>
  483. <!-- 图标库(内联 SVG symbol,无外部依赖) -->
  484. <svg style="display:none" aria-hidden="true">
  485. <defs>
  486. <symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></symbol>
  487. <symbol id="i-check" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></symbol>
  488. <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>
  489. <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>
  490. <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>
  491. <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>
  492. <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>
  493. <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></symbol>
  494. <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>
  495. <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>
  496. <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>
  497. <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>
  498. <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>
  499. </defs>
  500. </svg>
  501. <!-- ───────── 顶栏:清鉴品牌 + 当前案件上下文 ───────── -->
  502. <header class="topbar">
  503. <div class="brand">
  504. <span class="brand-mark">清</span>
  505. 清鉴 · 智能研判
  506. <span class="brand-sub">智能分析</span>
  507. </div>
  508. <div class="topbar-right">
  509. <span class="case-chip">
  510. <svg class="ic" style="width:13px;height:13px"><use href="#i-folder"/></svg>
  511. 当前案件:<b>张某某等人职务侵占、洗钱案</b>
  512. </span>
  513. <span class="avatar"><svg class="ic" style="width:15px;height:15px"><use href="#i-user"/></svg></span>
  514. </div>
  515. </header>
  516. <main class="page">
  517. <!-- 页头:返回 + 标题 + 保存动作 -->
  518. <div class="page-head">
  519. <button class="back-btn" title="返回智能分析"><svg class="ic"><use href="#i-arrow-left"/></svg></button>
  520. <h1>新建方案</h1>
  521. <p>组合系统内置技能,构建面向当前案件的智能研判方案</p>
  522. <span class="sp"></span>
  523. <button class="btn-ghost">取消</button>
  524. <button class="btn-primary"><svg class="ic"><use href="#i-check"/></svg>保存方案</button>
  525. </div>
  526. <!-- ───────── 基本信息 ───────── -->
  527. <section class="panel form-panel">
  528. <div class="form-row">
  529. <label class="f-label"><span class="req">*</span>方案名称</label>
  530. <input class="f-input" type="text" placeholder="请输入方案名称,如:涉案资金穿透研判" />
  531. </div>
  532. <div class="form-row">
  533. <label class="f-label">方案描述</label>
  534. <div class="f-textarea-wrap">
  535. <textarea class="f-textarea" placeholder="简要描述该方案的业务目标与研判思路,将作为 AI 研判的背景知识(选填)"></textarea>
  536. <span class="f-counter">0 / 500</span>
  537. </div>
  538. </div>
  539. <div class="form-row">
  540. <label class="f-label"></label>
  541. <p class="f-hint">保存后将出现在智能分析页的「分析方案」列表中,可随时开始分析、编辑或删除。</p>
  542. </div>
  543. </section>
  544. <!-- ───────── 选择方案技能组合 ───────── -->
  545. <section class="panel skills-panel">
  546. <header class="skills-head">
  547. <span class="skills-title">选择方案技能组合</span>
  548. <span class="skills-count">已选 3 / 20</span>
  549. <span class="sp"></span>
  550. <label class="search">
  551. <svg class="ic"><use href="#i-search"/></svg>
  552. <input type="text" placeholder="搜索技能名称" />
  553. </label>
  554. <div class="filters">
  555. <button class="fchip is-on">全部</button>
  556. <button class="fchip">资金</button>
  557. <button class="fchip">通话</button>
  558. <button class="fchip">轨迹</button>
  559. <button class="fchip">画像</button>
  560. <button class="fchip">图谱</button>
  561. </div>
  562. </header>
  563. <div class="grid">
  564. <div class="skill is-on">
  565. <span class="ck"><svg class="ic"><use href="#i-check"/></svg></span>
  566. <div class="skill-head">
  567. <span class="skill-icon"><svg class="ic"><use href="#i-user-focus"/></svg></span>
  568. <span class="skill-name">人物画像与亲缘度</span>
  569. </div>
  570. <p class="skill-desc">基于人物画像分析结果刻画个体特征,结合亲缘关系网络进行智能研判</p>
  571. <div class="skill-chips"><span><i class="dot" style="background:var(--c-portrait)"></i>画像</span><span><i class="dot" style="background:var(--c-graph)"></i>图谱</span></div>
  572. </div>
  573. <div class="skill is-on">
  574. <span class="ck"><svg class="ic"><use href="#i-check"/></svg></span>
  575. <div class="skill-head">
  576. <span class="skill-icon"><svg class="ic"><use href="#i-card"/></svg></span>
  577. <span class="skill-name">大额交易资金查找</span>
  578. </div>
  579. <p class="skill-desc">筛选涉案账户大额交易流水,快速定位可疑资金节点与交易对手方</p>
  580. <div class="skill-chips"><span><i class="dot" style="background:var(--c-fund)"></i>资金</span></div>
  581. </div>
  582. <div class="skill is-on">
  583. <span class="ck"><svg class="ic"><use href="#i-check"/></svg></span>
  584. <div class="skill-head">
  585. <span class="skill-icon"><svg class="ic"><use href="#i-clock"/></svg></span>
  586. <span class="skill-name">每月规律性转账分析</span>
  587. </div>
  588. <p class="skill-desc">识别按月规律性转账行为,发现固定金额、固定日期的利益输送关系</p>
  589. <div class="skill-chips"><span><i class="dot" style="background:var(--c-fund)"></i>资金</span></div>
  590. </div>
  591. <div class="skill">
  592. <span class="ck"><svg class="ic"><use href="#i-check"/></svg></span>
  593. <div class="skill-head">
  594. <span class="skill-icon"><svg class="ic"><use href="#i-users"/></svg></span>
  595. <span class="skill-name">交易对方查找(按对方姓名)</span>
  596. </div>
  597. <p class="skill-desc">按对方姓名检索交易对方账户,横向扩展资金链路的排查范围</p>
  598. <div class="skill-chips"><span><i class="dot" style="background:var(--c-fund)"></i>资金</span></div>
  599. </div>
  600. <div class="skill">
  601. <span class="ck"><svg class="ic"><use href="#i-check"/></svg></span>
  602. <div class="skill-head">
  603. <span class="skill-icon"><svg class="ic"><use href="#i-pin"/></svg></span>
  604. <span class="skill-name">时空伴随分析</span>
  605. </div>
  606. <p class="skill-desc">基于基站轨迹与随行情况,发现与目标存在时空伴随的同行人员</p>
  607. <div class="skill-chips"><span><i class="dot" style="background:var(--c-track)"></i>轨迹</span></div>
  608. </div>
  609. <div class="skill">
  610. <span class="ck"><svg class="ic"><use href="#i-check"/></svg></span>
  611. <div class="skill-head">
  612. <span class="skill-icon"><svg class="ic"><use href="#i-phone"/></svg></span>
  613. <span class="skill-name">通联异常检测</span>
  614. </div>
  615. <p class="skill-desc">分析通联频次、时段与对端分布,发现通联异常的关系人</p>
  616. <div class="skill-chips"><span><i class="dot" style="background:var(--c-call)"></i>通话</span></div>
  617. </div>
  618. <div class="skill">
  619. <span class="ck"><svg class="ic"><use href="#i-check"/></svg></span>
  620. <div class="skill-head">
  621. <span class="skill-icon"><svg class="ic"><use href="#i-briefcase"/></svg></span>
  622. <span class="skill-name">影子公司识别</span>
  623. </div>
  624. <p class="skill-desc">结合企业管理与实际受益人数据,识别疑似影子公司与代持结构</p>
  625. <div class="skill-chips"><span><i class="dot" style="background:var(--c-fund)"></i>资金</span><span><i class="dot" style="background:var(--c-biz)"></i>工商</span></div>
  626. </div>
  627. <div class="skill">
  628. <span class="ck"><svg class="ic"><use href="#i-check"/></svg></span>
  629. <div class="skill-head">
  630. <span class="skill-icon"><svg class="ic"><use href="#i-repeat"/></svg></span>
  631. <span class="skill-name">闭环交易发现</span>
  632. </div>
  633. <p class="skill-desc">挖掘资金闭环交易链条,还原团伙内部资金流转结构</p>
  634. <div class="skill-chips"><span><i class="dot" style="background:var(--c-fund)"></i>资金</span><span><i class="dot" style="background:var(--c-graph)"></i>图谱</span></div>
  635. </div>
  636. </div>
  637. <footer class="sel-bar">
  638. <span class="sel-label">已选 3 项:</span>
  639. <span class="sel-chip">人物画像与亲缘度</span>
  640. <span class="sel-chip">大额交易资金查找</span>
  641. <span class="sel-chip">每月规律性转账分析</span>
  642. <button class="sel-clear">清空</button>
  643. </footer>
  644. </section>
  645. </main>
  646. </body>
  647. </html>