Почетна Преглед Помоћ
Регистрација Пријавите се
wuzilong
/
shanxia2.0
1
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Грана: V1.6
Гране Ознаке
shanxia2.0
/
docs
/
fresh-mint-view-dialog-demos.html

fresh-mint-view-dialog-demos.html 54 KB
Пермалинк Историја Датотека

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333 
  1. <!doctype html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4.   <meta charset="UTF-8" />
    5. 

  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.   <title>Fresh Mint · 查看弹窗风格 Demo</title>
    7. 

  7.   <link rel="preconnect" href="https://fonts.googleapis.com" />
    8. 

  8.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    9. 

  9.   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    10. 

  10.   <style>
    11. 

  11.     :root {
    12. 

  12.       --primary: #10b981;
    13. 

  13.       --primary-dark: #059669;
    14. 

  14.       --primary-bg: #ecfdf5;
    15. 

  15.       --text: #1e293b;
    16. 

  16.       --text-muted: #64748b;
    17. 

  17.       --border: #d9e8e2;
    18. 

  18.       --surface: #ffffff;
    19. 

  19.       --table-head: #f8fafc;
    20. 

  20.       --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    21. 

  21.       --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
    22. 

  22.       --radius: 10px;
    23. 

  23.       --warn: #d97706;
    24. 

  24.       --warn-bg: #fffbeb;
    25. 

  25.       --danger: #dc2626;
    26. 

  26.     }
    27. 

  27. 

  28.     * { box-sizing: border-box; }
    29. 

  29.     body {
    30. 

  30.       margin: 0;
    31. 

  31.       min-height: 100vh;
    32. 

  32.       font-family: Inter, -apple-system, sans-serif;
    33. 

  33.       font-size: 14px;
    34. 

  34.       line-height: 1.5;
    35. 

  35.       color: var(--text);
    36. 

  36.       background: #f8fafc;
    37. 

  37.     }
    38. 

  38. 

  39.     /* ── 展示页骨架 ── */
    40. 

  40.     .demo-page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; }
    41. 

  41.     .demo-head { margin-bottom: 32px; }
    42. 

  42.     .demo-head h1 {
    43. 

  43.       margin: 0 0 8px;
    44. 

  44.       font-size: 24px;
    45. 

  45.       font-weight: 700;
    46. 

  46.       letter-spacing: -0.02em;
    47. 

  47.     }
    48. 

  48.     .demo-head h1 span { color: var(--primary); }
    49. 

  49.     .demo-head p { margin: 0; color: var(--text-muted); max-width: 640px; }
    50. 

  50.     .demo-grid {
    51. 

  51.       display: grid;
    52. 

  52.       grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    53. 

  53.       gap: 20px;
    54. 

  54.     }
    55. 

  55.     .demo-card {
    56. 

  56.       background: var(--surface);
    57. 

  57.       border: 1px solid var(--border);
    58. 

  58.       border-radius: var(--radius);
    59. 

  59.       overflow: hidden;
    60. 

  60.       box-shadow: var(--shadow);
    61. 

  61.       transition: box-shadow 0.2s, transform 0.2s;
    62. 

  62.     }
    63. 

  63.     .demo-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
    64. 

  64.     .demo-card-preview {
    65. 

  65.       height: 200px;
    66. 

  66.       position: relative;
    67. 

  67.       overflow: hidden;
    68. 

  68.       background: linear-gradient(135deg, var(--primary-bg) 0%, #fff 60%);
    69. 

  69.       border-bottom: 1px solid var(--border);
    70. 

  70.     }
    71. 

  71.     .demo-card-preview::after {
    72. 

  72.       content: "";
    73. 

  73.       position: absolute;
    74. 

  74.       inset: 0;
    75. 

  75.       background: linear-gradient(to top, rgba(255,255,255,0.9) 0%, transparent 50%);
    76. 

  76.     }
    77. 

  77.     .demo-card-body { padding: 16px 18px 18px; }
    78. 

  78.     .demo-card-body h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
    79. 

  79.     .demo-card-body p { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
    80. 

  80.     .demo-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    81. 

  81.     .demo-tag {
    82. 

  82.       font-size: 11px;
    83. 

  83.       font-weight: 600;
    84. 

  84.       padding: 2px 8px;
    85. 

  85.       border-radius: 6px;
    86. 

  86.       background: var(--primary-bg);
    87. 

  87.       color: var(--primary-dark);
    88. 

  88.     }
    89. 

  89.     .demo-tag.muted { background: var(--table-head); color: var(--text-muted); }
    90. 

  90.     .btn {
    91. 

  91.       display: inline-flex;
    92. 

  92.       align-items: center;
    93. 

  93.       gap: 6px;
    94. 

  94.       height: 36px;
    95. 

  95.       padding: 0 14px;
    96. 

  96.       border-radius: 8px;
    97. 

  97.       font-size: 13px;
    98. 

  98.       font-weight: 600;
    99. 

  99.       font-family: inherit;
    100. 

  100.       cursor: pointer;
    101. 

  101.       border: 1px solid var(--border);
    102. 

  102.       background: var(--surface);
    103. 

  103.       color: var(--text);
    104. 

  104.       transition: background 0.15s;
    105. 

  105.     }
    106. 

  106.     .btn:hover { background: var(--table-head); }
    107. 

  107.     .btn-primary {
    108. 

  108.       background: var(--primary);
    109. 

  109.       border-color: var(--primary);
    110. 

  110.       color: #fff;
    111. 

  111.     }
    112. 

  112.     .btn-primary:hover { background: var(--primary-dark); }
    113. 

  113.     .btn-ghost { background: transparent; }
    114. 

  114.     .ic { width: 16px; height: 16px; flex-shrink: 0; }
    115. 

  115. 

  116.     /* 缩略预览（各风格 mini 版） */
    117. 

  117.     .mini-dialog {
    118. 

  118.       position: absolute;
    119. 

  119.       left: 50%;
    120. 

  120.       top: 50%;
    121. 

  121.       transform: translate(-50%, -42%);
    122. 

  122.       width: 88%;
    123. 

  123.       max-width: 280px;
    124. 

  124.       background: #fff;
    125. 

  125.       border-radius: 8px;
    126. 

  126.       box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    127. 

  127.       overflow: hidden;
    128. 

  128.       pointer-events: none;
    129. 

  129.     }
    130. 

  130.     .mini-hero { height: 48px; background: linear-gradient(135deg, var(--primary-bg), #fff); border-bottom: 1px solid var(--border); }
    131. 

  131.     .mini-body { padding: 8px 10px; }
    132. 

  132.     .mini-line { height: 6px; background: #e2e8f0; border-radius: 3px; margin-bottom: 6px; }
    133. 

  133.     .mini-line.short { width: 60%; }
    134. 

  134.     .mini-line.green { background: var(--primary); opacity: 0.3; width: 40%; }
    135. 

  135. 

  136.     /* ── 弹窗通用 ── */
    137. 

  137.     .backdrop {
    138. 

  138.       position: fixed;
    139. 

  139.       inset: 0;
    140. 

  140.       background: rgba(15, 23, 42, 0.45);
    141. 

  141.       display: none;
    142. 

  142.       align-items: center;
    143. 

  143.       justify-content: center;
    144. 

  144.       padding: 24px;
    145. 

  145.       z-index: 1000;
    146. 

  146.       /* 无背景模糊 — 对齐规范 */
    147. 

  147.       backdrop-filter: none;
    148. 

  148.     }
    149. 

  149.     .backdrop.open { display: flex; }
    150. 

  150.     .dialog {
    151. 

  151.       background: var(--surface);
    152. 

  152.       border-radius: var(--radius);
    153. 

  153.       box-shadow: var(--shadow-lg);
    154. 

  154.       width: 100%;
    155. 

  155.       display: flex;
    156. 

  156.       flex-direction: column;
    157. 

  157.       overflow: hidden;
    158. 

  158.       animation: dlgIn 0.22s ease;
    159. 

  159.     }
    160. 

  160.     @keyframes dlgIn {
    161. 

  161.       from { opacity: 0; transform: scale(0.96) translateY(8px); }
    162. 

  162.       to { opacity: 1; transform: none; }
    163. 

  163.     }
    164. 

  164.     .dialog-scroll { overflow-y: auto; flex: 1; }
    165. 

  165.     .dialog-foot {
    166. 

  166.       padding: 12px 22px;
    167. 

  167.       border-top: 1px solid var(--border);
    168. 

  168.       display: flex;
    169. 

  169.       justify-content: flex-end;
    170. 

  170.       gap: 8px;
    171. 

  171.       flex-shrink: 0;
    172. 

  172.       background: var(--table-head);
    173. 

  173.     }
    174. 

  174. 

  175.     /* 通用 tag */
    176. 

  176.     .tag {
    177. 

  177.       display: inline-flex;
    178. 

  178.       align-items: center;
    179. 

  179.       padding: 2px 10px;
    180. 

  180.       border-radius: 6px;
    181. 

  181.       font-size: 12px;
    182. 

  182.       font-weight: 600;
    183. 

  183.       background: var(--primary-bg);
    184. 

  184.       color: var(--primary-dark);
    185. 

  185.       border: 1px solid rgba(16, 185, 129, 0.25);
    186. 

  186.     }
    187. 

  187.     .tag.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(217,119,6,0.25); }
    188. 

  188.     .tag.danger { background: #fef2f2; color: var(--danger); border-color: rgba(220,38,38,0.2); }
    189. 

  189.     .tag.muted { background: var(--table-head); color: var(--text-muted); border-color: var(--border); }
    190. 

  190.     .tag.info { background: #eff6ff; color: #2563eb; border-color: rgba(37,99,235,0.2); }
    191. 

  191.     .money-val { color: var(--danger); font-weight: 600; }
    192. 

  192. 

  193.     /* ═══════════════════════════════════════
    194. 

  194.        风格 A · 经典 Hero + KV（当前 SystemViewDialog）
    195. 

  195.        ═══════════════════════════════════════ */
    196. 

  196.     .style-a { max-width: 720px; max-height: calc(100vh - 48px); }
    197. 

  197.     .style-a .view-hero {
    198. 

  198.       display: flex;
    199. 

  199.       gap: 16px;
    200. 

  200.       padding: 20px 22px;
    201. 

  201.       background: linear-gradient(135deg, var(--primary-bg) 0%, #fff 55%);
    202. 

  202.       border-bottom: 1px solid var(--border);
    203. 

  203.       align-items: center;
    204. 

  204.     }
    205. 

  205.     .style-a .view-hero-icon {
    206. 

  206.       width: 72px; height: 72px;
    207. 

  207.       border-radius: 12px;
    208. 

  208.       border: 1px solid rgba(16,185,129,0.2);
    209. 

  209.       background: rgba(16,185,129,0.08);
    210. 

  210.       color: var(--primary-dark);
    211. 

  211.       display: flex; align-items: center; justify-content: center;
    212. 

  212.       flex-shrink: 0;
    213. 

  213.     }
    214. 

  214.     .style-a .view-hero-main h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
    215. 

  215.     .style-a .view-hero-meta { margin: 0; font-size: 13px; color: var(--text-muted); }
    216. 

  216.     .style-a .view-section { padding: 18px 22px; border-bottom: 1px solid #ebeef5; }
    217. 

  217.     .style-a .view-section:last-child { border-bottom: none; }
    218. 

  218.     .style-a .view-section h3 {
    219. 

  219.       margin: 0 0 14px;
    220. 

  220.       padding-left: 10px;
    221. 

  221.       font-size: 14px;
    222. 

  222.       font-weight: 600;
    223. 

  223.       border-left: 3px solid var(--primary);
    224. 

  224.       line-height: 1;
    225. 

  225.     }
    226. 

  226.     .style-a .view-kv-grid {
    227. 

  227.       display: grid;
    228. 

  228.       grid-template-columns: repeat(2, 1fr);
    229. 

  229.       gap: 12px 20px;
    230. 

  230.     }
    231. 

  231.     .style-a .view-kv dt { margin: 0; font-size: 11px; color: var(--text-muted); }
    232. 

  232.     .style-a .view-kv dd { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
    233. 

  233. 

  234.     /* ═══════════════════════════════════════
    235. 

  235.        风格 B · 数据看板（Bento 指标卡）
    236. 

  236.        ═══════════════════════════════════════ */
    237. 

  237.     .style-b { max-width: 920px; max-height: calc(100vh - 48px); }
    238. 

  238.     .style-b .view-hero {
    239. 

  239.       padding: 20px 22px;
    240. 

  240.       background: linear-gradient(135deg, var(--primary-bg) 0%, #fff 55%);
    241. 

  241.       border-bottom: 1px solid var(--border);
    242. 

  242.     }
    243. 

  243.     .style-b .view-hero-top {
    244. 

  244.       display: flex;
    245. 

  245.       align-items: flex-start;
    246. 

  246.       justify-content: space-between;
    247. 

  247.       gap: 16px;
    248. 

  248.       flex-wrap: wrap;
    249. 

  249.     }
    250. 

  250.     .style-b .view-hero-top h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
    251. 

  251.     .style-b .view-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    252. 

  252.     .style-b .view-stat-row {
    253. 

  253.       display: grid;
    254. 

  254.       grid-template-columns: repeat(4, 1fr);
    255. 

  255.       gap: 12px;
    256. 

  256.       margin-top: 16px;
    257. 

  257.     }
    258. 

  258.     @media (max-width: 720px) { .style-b .view-stat-row { grid-template-columns: repeat(2, 1fr); } }
    259. 

  259.     .style-b .stat-chip {
    260. 

  260.       background: #fff;
    261. 

  261.       border: 1px solid var(--border);
    262. 

  262.       border-radius: 8px;
    263. 

  263.       padding: 12px 14px;
    264. 

  264.       text-align: center;
    265. 

  265.     }
    266. 

  266.     .style-b .stat-chip .label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
    267. 

  267.     .style-b .stat-chip .value { font-size: 20px; font-weight: 700; color: var(--primary-dark); }
    268. 

  268.     .style-b .stat-chip.warn .value { color: var(--warn); }
    269. 

  269.     .style-b .view-section { padding: 18px 22px; border-bottom: 1px solid var(--border); }
    270. 

  270.     .style-b .view-section h3 {
    271. 

  271.       margin: 0 0 14px;
    272. 

  272.       font-size: 13px;
    273. 

  273.       font-weight: 700;
    274. 

  274.       color: var(--text-muted);
    275. 

  275.       letter-spacing: 0.04em;
    276. 

  276.     }
    277. 

  277.     .style-b .view-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    278. 

  278.     .style-b .view-card {
    279. 

  279.       border: 1px solid var(--border);
    280. 

  280.       border-radius: var(--radius);
    281. 

  281.       padding: 14px 16px;
    282. 

  282.     }
    283. 

  283.     .style-b .view-card h4 { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
    284. 

  284.     .style-b .view-card p { margin: 0; font-size: 13px; line-height: 1.55; }
    285. 

  285.     .style-b .view-route-bar {
    286. 

  286.       height: 100px;
    287. 

  287.       border-radius: var(--radius);
    288. 

  288.       background: linear-gradient(90deg, #ecfdf5, #d1fae5, #a7f3d0);
    289. 

  289.       border: 1px solid var(--border);
    290. 

  290.       display: flex;
    291. 

  291.       align-items: center;
    292. 

  292.       justify-content: space-between;
    293. 

  293.       padding: 0 20px;
    294. 

  294.     }
    295. 

  295.     .style-b .route-pin { text-align: center; font-size: 12px; }
    296. 

  296.     .style-b .route-pin strong { display: block; font-size: 13px; margin-bottom: 2px; }
    297. 

  297.     .style-b .route-line { flex: 1; height: 3px; background: var(--primary); opacity: 0.4; margin: 0 10px; border-radius: 2px; }
    298. 

  298. 

  299.     /* ═══════════════════════════════════════
    300. 

  300.        风格 C · 左右分栏（Split Panel）
    301. 

  301.        ═══════════════════════════════════════ */
    302. 

  302.     .style-c { max-width: 960px; max-height: calc(100vh - 48px); }
    303. 

  303.     .style-c .view-split { display: flex; min-height: 480px; max-height: calc(100vh - 120px); }
    304. 

  304.     .style-c .view-split-left {
    305. 

  305.       flex: 0 0 380px;
    306. 

  306.       border-right: 1px solid var(--border);
    307. 

  307.       overflow-y: auto;
    308. 

  308.     }
    309. 

  309.     .style-c .view-split-right {
    310. 

  310.       flex: 1;
    311. 

  311.       overflow-y: auto;
    312. 

  312.       padding: 16px 20px;
    313. 

  313.       background: var(--table-head);
    314. 

  314.     }
    315. 

  315.     .style-c .view-hero {
    316. 

  316.       display: flex;
    317. 

  317.       gap: 14px;
    318. 

  318.       padding: 18px 20px;
    319. 

  319.       background: linear-gradient(135deg, var(--primary-bg), #fff);
    320. 

  320.       border-bottom: 1px solid var(--border);
    321. 

  321.       align-items: center;
    322. 

  322.     }
    323. 

  323.     .style-c .view-hero-icon {
    324. 

  324.       width: 56px; height: 56px;
    325. 

  325.       border-radius: 10px;
    326. 

  326.       background: rgba(16,185,129,0.1);
    327. 

  327.       color: var(--primary-dark);
    328. 

  328.       display: flex; align-items: center; justify-content: center;
    329. 

  329.     }
    330. 

  330.     .style-c .view-hero-main h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
    331. 

  331.     .style-c .view-hero-meta { margin: 0; font-size: 12px; color: var(--text-muted); }
    332. 

  332.     .style-c .view-section { padding: 16px 20px; border-bottom: 1px solid #ebeef5; }
    333. 

  333.     .style-c .view-section h3 {
    334. 

  334.       margin: 0 0 12px;
    335. 

  335.       padding-left: 10px;
    336. 

  336.       font-size: 13px;
    337. 

  337.       font-weight: 600;
    338. 

  338.       border-left: 3px solid var(--primary);
    339. 

  339.       line-height: 1;
    340. 

  340.     }
    341. 

  341.     .style-c .view-kv { margin-bottom: 10px; }
    342. 

  342.     .style-c .view-kv dt { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
    343. 

  343.     .style-c .view-kv dd { margin: 0; font-size: 13px; font-weight: 600; }
    344. 

  344.     .style-c .right-panel-title {
    345. 

  345.       margin: 0 0 14px;
    346. 

  346.       font-size: 14px;
    347. 

  347.       font-weight: 600;
    348. 

  348.     }
    349. 

  349.     .style-c .view-timeline {
    350. 

  350.       position: relative;
    351. 

  351.       padding-left: 18px;
    352. 

  352.       border-left: 2px solid var(--border);
    353. 

  353.       margin-left: 6px;
    354. 

  354.     }
    355. 

  355.     .style-c .view-tl-item { position: relative; padding-bottom: 18px; font-size: 13px; }
    356. 

  356.     .style-c .view-tl-item:last-child { padding-bottom: 0; }
    357. 

  357.     .style-c .view-tl-item::before {
    358. 

  358.       content: "";
    359. 

  359.       position: absolute;
    360. 

  360.       left: -25px; top: 4px;
    361. 

  361.       width: 10px; height: 10px;
    362. 

  362.       border-radius: 50%;
    363. 

  363.       background: var(--primary);
    364. 

  364.       border: 2px solid #fff;
    365. 

  365.       box-shadow: 0 0 0 1px var(--primary);
    366. 

  366.     }
    367. 

  367.     .style-c .view-tl-item.muted::before { background: var(--border); box-shadow: none; }
    368. 

  368.     .style-c .view-tl-time { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
    369. 

  369.     .style-c .view-tl-title { font-weight: 600; }
    370. 

  370.     .style-c .view-tl-desc { color: var(--text-muted); margin-top: 2px; font-size: 12px; }
    371. 

  371.     @media (max-width: 768px) {
    372. 

  372.       .style-c .view-split { flex-direction: column; max-height: none; }
    373. 

  373.       .style-c .view-split-left { flex: none; border-right: none; border-bottom: 1px solid var(--border); }
    374. 

  374.     }
    375. 

  375. 

  376.     /* ═══════════════════════════════════════
    377. 

  377.        风格 D · 紧凑清单（Compact List）
    378. 

  378.        ═══════════════════════════════════════ */
    379. 

  379.     .style-d { max-width: 560px; max-height: calc(100vh - 48px); }
    380. 

  380.     .style-d .view-compact-head {
    381. 

  381.       display: flex;
    382. 

  382.       align-items: center;
    383. 

  383.       justify-content: space-between;
    384. 

  384.       gap: 12px;
    385. 

  385.       padding: 16px 20px;
    386. 

  386.       border-bottom: 1px solid var(--border);
    387. 

  387.     }
    388. 

  388.     .style-d .view-compact-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
    389. 

  389.     .style-d .view-compact-head .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    390. 

  390.     .style-d .view-compact-body { padding: 4px 0; }
    391. 

  391.     .style-d .view-row {
    392. 

  392.       display: flex;
    393. 

  393.       align-items: baseline;
    394. 

  394.       justify-content: space-between;
    395. 

  395.       gap: 16px;
    396. 

  396.       padding: 11px 20px;
    397. 

  397.       border-bottom: 1px solid #f1f5f9;
    398. 

  398.       font-size: 13px;
    399. 

  399.     }
    400. 

  400.     .style-d .view-row:last-child { border-bottom: none; }
    401. 

  401.     .style-d .view-row dt { margin: 0; color: var(--text-muted); flex-shrink: 0; }
    402. 

  402.     .style-d .view-row dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }
    403. 

  403.     .style-d .view-row-group {
    404. 

  404.       padding: 12px 20px 4px;
    405. 

  405.       font-size: 11px;
    406. 

  406.       font-weight: 700;
    407. 

  407.       color: var(--text-muted);
    408. 

  408.       letter-spacing: 0.06em;
    409. 

  409.       text-transform: uppercase;
    410. 

  410.       background: var(--table-head);
    411. 

  411.       border-bottom: 1px solid var(--border);
    412. 

  412.       border-top: 1px solid var(--border);
    413. 

  413.     }
    414. 

  414.     .style-d .view-row-group:first-child { border-top: none; }
    415. 

  415. 

  416.     /* ═══════════════════════════════════════
    417. 

  417.        风格 E · 票据档案（Document Archive）
    418. 

  418.        ═══════════════════════════════════════ */
    419. 

  419.     .style-e { max-width: 780px; max-height: calc(100vh - 48px); }
    420. 

  420.     .style-e .doc-header {
    421. 

  421.       position: relative;
    422. 

  422.       padding: 24px 28px 20px;
    423. 

  423.       background: #fff;
    424. 

  424.       border-bottom: 2px solid var(--primary);
    425. 

  425.       overflow: hidden;
    426. 

  426.     }
    427. 

  427.     .style-e .doc-watermark {
    428. 

  428.       position: absolute;
    429. 

  429.       right: -20px;
    430. 

  430.       top: 50%;
    431. 

  431.       transform: translateY(-50%) rotate(-12deg);
    432. 

  432.       font-size: 72px;
    433. 

  433.       font-weight: 800;
    434. 

  434.       color: rgba(16,185,129,0.06);
    435. 

  435.       letter-spacing: 0.1em;
    436. 

  436.       pointer-events: none;
    437. 

  437.       user-select: none;
    438. 

  438.     }
    439. 

  439.     .style-e .doc-header-top {
    440. 

  440.       display: flex;
    441. 

  441.       align-items: flex-start;
    442. 

  442.       justify-content: space-between;
    443. 

  443.       gap: 16px;
    444. 

  444.       position: relative;
    445. 

  445.     }
    446. 

  446.     .style-e .doc-header h2 {
    447. 

  447.       margin: 0 0 4px;
    448. 

  448.       font-size: 20px;
    449. 

  449.       font-weight: 700;
    450. 

  450.       letter-spacing: 0.02em;
    451. 

  451.     }
    452. 

  452.     .style-e .doc-no { font-size: 13px; color: var(--text-muted); font-family: ui-monospace, monospace; }
    453. 

  453.     .style-e .doc-stamp {
    454. 

  454.       width: 72px; height: 72px;
    455. 

  455.       border: 3px solid var(--primary);
    456. 

  456.       border-radius: 50%;
    457. 

  457.       display: flex;
    458. 

  458.       align-items: center;
    459. 

  459.       justify-content: center;
    460. 

  460.       font-size: 13px;
    461. 

  461.       font-weight: 700;
    462. 

  462.       color: var(--primary-dark);
    463. 

  463.       transform: rotate(-15deg);
    464. 

  464.       flex-shrink: 0;
    465. 

  465.       opacity: 0.85;
    466. 

  466.     }
    467. 

  467.     .style-e .doc-meta-bar {
    468. 

  468.       display: flex;
    469. 

  469.       flex-wrap: wrap;
    470. 

  470.       gap: 20px;
    471. 

  471.       margin-top: 14px;
    472. 

  472.       padding-top: 14px;
    473. 

  473.       border-top: 1px dashed var(--border);
    474. 

  474.       font-size: 12px;
    475. 

  475.       color: var(--text-muted);
    476. 

  476.     }
    477. 

  477.     .style-e .doc-meta-bar strong { color: var(--text); font-weight: 600; }
    478. 

  478.     .style-e .doc-body { padding: 20px 28px; }
    479. 

  479.     .style-e .doc-section { margin-bottom: 20px; }
    480. 

  480.     .style-e .doc-section:last-child { margin-bottom: 0; }
    481. 

  481.     .style-e .doc-section h3 {
    482. 

  482.       margin: 0 0 12px;
    483. 

  483.       font-size: 13px;
    484. 

  484.       font-weight: 600;
    485. 

  485.       color: var(--primary-dark);
    486. 

  486.       display: flex;
    487. 

  487.       align-items: center;
    488. 

  488.       gap: 8px;
    489. 

  489.     }
    490. 

  490.     .style-e .doc-section h3::before {
    491. 

  491.       content: "";
    492. 

  492.       width: 6px; height: 6px;
    493. 

  493.       border-radius: 50%;
    494. 

  494.       background: var(--primary);
    495. 

  495.     }
    496. 

  496.     .style-e .doc-kv-table {
    497. 

  497.       width: 100%;
    498. 

  498.       border-collapse: collapse;
    499. 

  499.       font-size: 13px;
    500. 

  500.     }
    501. 

  501.     .style-e .doc-kv-table td {
    502. 

  502.       padding: 8px 0;
    503. 

  503.       border-bottom: 1px dotted #e2e8f0;
    504. 

  504.       vertical-align: top;
    505. 

  505.     }
    506. 

  506.     .style-e .doc-kv-table td:first-child {
    507. 

  507.       width: 120px;
    508. 

  508.       color: var(--text-muted);
    509. 

  509.       font-weight: 500;
    510. 

  510.     }
    511. 

  511.     .style-e .doc-kv-table td:last-child { font-weight: 600; }
    512. 

  512.     .style-e .doc-kv-table tr:last-child td { border-bottom: none; }
    513. 

  513.     .style-e .doc-sign {
    514. 

  514.       margin-top: 24px;
    515. 

  515.       padding-top: 16px;
    516. 

  516.       border-top: 1px solid var(--border);
    517. 

  517.       display: flex;
    518. 

  518.       justify-content: space-between;
    519. 

  519.       font-size: 12px;
    520. 

  520.       color: var(--text-muted);
    521. 

  521.     }
    522. 

  522. 

  523.     /* ═══════════════════════════════════════
    524. 

  524.        风格 F · 标签页（Tabbed View）
    525. 

  525.        ═══════════════════════════════════════ */
    526. 

  526.     .style-f { max-width: 880px; max-height: calc(100vh - 48px); }
    527. 

  527.     .style-f .view-tab-head {
    528. 

  528.       padding: 16px 22px 0;
    529. 

  529.       border-bottom: 1px solid var(--border);
    530. 

  530.       background: linear-gradient(180deg, var(--primary-bg) 0%, #fff 100%);
    531. 

  531.     }
    532. 

  532.     .style-f .view-tab-head-top {
    533. 

  533.       display: flex;
    534. 

  534.       align-items: center;
    535. 

  535.       justify-content: space-between;
    536. 

  536.       gap: 12px;
    537. 

  537.       margin-bottom: 14px;
    538. 

  538.     }
    539. 

  539.     .style-f .view-tab-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
    540. 

  540.     .style-f .view-tab-head .code { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    541. 

  541.     .style-f .view-tabs {
    542. 

  542.       display: flex;
    543. 

  543.       gap: 4px;
    544. 

  544.       overflow-x: auto;
    545. 

  545.     }
    546. 

  546.     .style-f .view-tab {
    547. 

  547.       padding: 8px 16px;
    548. 

  548.       font-size: 13px;
    549. 

  549.       font-weight: 600;
    550. 

  550.       color: var(--text-muted);
    551. 

  551.       background: transparent;
    552. 

  552.       border: none;
    553. 

  553.       border-bottom: 2px solid transparent;
    554. 

  554.       cursor: pointer;
    555. 

  555.       font-family: inherit;
    556. 

  556.       white-space: nowrap;
    557. 

  557.       margin-bottom: -1px;
    558. 

  558.       transition: color 0.15s, border-color 0.15s;
    559. 

  559.     }
    560. 

  560.     .style-f .view-tab:hover { color: var(--text); }
    561. 

  561.     .style-f .view-tab.active {
    562. 

  562.       color: var(--primary-dark);
    563. 

  563.       border-bottom-color: var(--primary);
    564. 

  564.     }
    565. 

  565.     .style-f .view-tab-panel { display: none; padding: 18px 22px; }
    566. 

  566.     .style-f .view-tab-panel.active { display: block; }
    567. 

  567.     .style-f .view-kv-grid {
    568. 

  568.       display: grid;
    569. 

  569.       grid-template-columns: repeat(2, 1fr);
    570. 

  570.       gap: 12px 24px;
    571. 

  571.     }
    572. 

  572.     .style-f .view-kv dt { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
    573. 

  573.     .style-f .view-kv dd { margin: 0; font-size: 13px; font-weight: 600; }
    574. 

  574.     .style-f .view-subtable-wrap {
    575. 

  575.       border: 1px solid var(--border);
    576. 

  576.       border-radius: 8px;
    577. 

  577.       overflow: hidden;
    578. 

  578.     }
    579. 

  579.     .style-f .view-subtable {
    580. 

  580.       width: 100%;
    581. 

  581.       border-collapse: collapse;
    582. 

  582.       font-size: 13px;
    583. 

  583.     }
    584. 

  584.     .style-f .view-subtable th,
    585. 

  585.     .style-f .view-subtable td {
    586. 

  586.       padding: 8px 12px;
    587. 

  587.       text-align: center;
    588. 

  588.       border-bottom: 1px solid var(--border);
    589. 

  589.     }
    590. 

  590.     .style-f .view-subtable th {
    591. 

  591.       background: var(--table-head);
    592. 

  592.       color: var(--text-muted);
    593. 

  593.       font-weight: 600;
    594. 

  594.       font-size: 12px;
    595. 

  595.     }
    596. 

  596.     .style-f .view-subtable .ta-left { text-align: left; }
    597. 

  597.     .style-f .view-subtable tr:last-child td { border-bottom: none; }
    598. 

  598.     .style-f .attach-grid {
    599. 

  599.       display: grid;
    600. 

  600.       grid-template-columns: repeat(3, 1fr);
    601. 

  601.       gap: 10px;
    602. 

  602.     }
    603. 

  603.     .style-f .attach-card {
    604. 

  604.       border: 1px dashed #a7f3d0;
    605. 

  605.       border-radius: 8px;
    606. 

  606.       padding: 14px;
    607. 

  607.       text-align: center;
    608. 

  608.       font-size: 12px;
    609. 

  609.       color: var(--text-muted);
    610. 

  610.       background: var(--primary-bg);
    611. 

  611.     }
    612. 

  612.     .style-f .attach-card strong { display: block; color: var(--text); font-size: 13px; margin-bottom: 4px; }
    613. 

  613. 

  614.     /* ═══════════════════════════════════════
    615. 

  615.        风格 G · 卡片堆叠（Card Stack）
    616. 

  616.        ═══════════════════════════════════════ */
    617. 

  617.     .style-g { max-width: 800px; max-height: calc(100vh - 48px); }
    618. 

  618.     .style-g .dialog-scroll { padding: 20px 22px; background: #f1f5f9; }
    619. 

  619.     .style-g .stack-hero {
    620. 

  620.       background: #fff;
    621. 

  621.       border-radius: var(--radius);
    622. 

  622.       padding: 18px 20px;
    623. 

  623.       box-shadow: var(--shadow);
    624. 

  624.       margin-bottom: 14px;
    625. 

  625.       display: flex;
    626. 

  626.       align-items: center;
    627. 

  627.       gap: 14px;
    628. 

  628.     }
    629. 

  629.     .style-g .stack-hero-avatar {
    630. 

  630.       width: 64px; height: 64px;
    631. 

  631.       border-radius: 12px;
    632. 

  632.       background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    633. 

  633.       color: #fff;
    634. 

  634.       display: flex;
    635. 

  635.       align-items: center;
    636. 

  636.       justify-content: center;
    637. 

  637.       font-size: 24px;
    638. 

  638.       font-weight: 700;
    639. 

  639.       flex-shrink: 0;
    640. 

  640.     }
    641. 

  641.     .style-g .stack-hero h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
    642. 

  642.     .style-g .stack-hero p { margin: 0; font-size: 13px; color: var(--text-muted); }
    643. 

  643.     .style-g .stack-card {
    644. 

  644.       background: #fff;
    645. 

  645.       border-radius: var(--radius);
    646. 

  646.       padding: 16px 18px;
    647. 

  647.       box-shadow: var(--shadow);
    648. 

  648.       margin-bottom: 14px;
    649. 

  649.     }
    650. 

  650.     .style-g .stack-card:last-child { margin-bottom: 0; }
    651. 

  651.     .style-g .stack-card h3 {
    652. 

  652.       margin: 0 0 12px;
    653. 

  653.       font-size: 13px;
    654. 

  654.       font-weight: 600;
    655. 

  655.       color: var(--text);
    656. 

  656.       display: flex;
    657. 

  657.       align-items: center;
    658. 

  658.       gap: 8px;
    659. 

  659.     }
    660. 

  660.     .style-g .stack-card h3 .dot {
    661. 

  661.       width: 8px; height: 8px;
    662. 

  662.       border-radius: 50%;
    663. 

  663.       background: var(--primary);
    664. 

  664.     }
    665. 

  665.     .style-g .stack-kv-grid {
    666. 

  666.       display: grid;
    667. 

  667.       grid-template-columns: repeat(2, 1fr);
    668. 

  668.       gap: 10px 16px;
    669. 

  669.     }
    670. 

  670.     .style-g .stack-kv .k { font-size: 11px; color: var(--text-muted); }
    671. 

  671.     .style-g .stack-kv .v { font-size: 13px; font-weight: 600; margin-top: 2px; }
    672. 

  672.     .style-g .stack-highlight {
    673. 

  673.       background: var(--primary-bg);
    674. 

  674.       border: 1px solid rgba(16,185,129,0.2);
    675. 

  675.       border-radius: 8px;
    676. 

  676.       padding: 12px 14px;
    677. 

  677.       display: flex;
    678. 

  678.       justify-content: space-between;
    679. 

  679.       align-items: center;
    680. 

  680.     }
    681. 

  681.     .style-g .stack-highlight .amount { font-size: 22px; font-weight: 700; color: var(--primary-dark); }
    682. 

  682. 

  683.     @media (max-width: 640px) {
    684. 

  684.       .style-a .view-kv-grid,
    685. 

  685.       .style-f .view-kv-grid,
    686. 

  686.       .style-g .stack-kv-grid { grid-template-columns: 1fr; }
    687. 

  687.       .style-b .view-bento { grid-template-columns: 1fr; }
    688. 

  688.     }
    689. 

  689.   </style>
    690. 

  690. </head>
    691. 

  691. <body>
    692. 

  692.   <div class="demo-page">
    693. 

  693.     <header class="demo-head">
    694. 

  694.       <h1><span>Fresh Mint</span> · 查看弹窗风格 Demo</h1>
    695. 

  695.       <p>
    696. 

  696.         基于 <code>web-admin</code> 设计规范（主色 <code>#10b981</code>、无遮罩模糊、查看态仅关闭按钮）的 6 套查看弹窗方案。
    697. 

  697.         点击下方卡片预览各风格，或在业务选型时对照适用场景。
    698. 

  698.         另见 <a href="fresh-mint-view-kv-layout-demos.html">KV 字段布局对比 Demo</a>（上下 vs 左右 vs 表格）·
    699. 

  699.         <a href="fresh-mint-view-wide-dialog-demos.html">宽弹窗多列 Demo</a>（920～1120px）。
    700. 

  700.       </p>
    701. 

  701.     </header>
    702. 

  702. 

  703.     <div class="demo-grid">
    704. 

  704.       <!-- A -->
    705. 

  705.       <article class="demo-card">
    706. 

  706.         <div class="demo-card-preview">
    707. 

  707.           <div class="mini-dialog">
    708. 

  708.             <div class="mini-hero"></div>
    709. 

  709.             <div class="mini-body">
    710. 

  710.               <div class="mini-line green"></div>
    711. 

  711.               <div class="mini-line"></div>
    712. 

  712.               <div class="mini-line short"></div>
    713. 

  713.             </div>
    714. 

  714.           </div>
    715. 

  715.         </div>
    716. 

  716.         <div class="demo-card-body">
    717. 

  717.           <div class="demo-tags">
    718. 

  718.             <span class="demo-tag">A · 经典 Hero</span>
    719. 

  719.             <span class="demo-tag muted">SystemViewDialog</span>
    720. 

  720.           </div>
    721. 

  721.           <h2>经典 Hero + KV 分块</h2>
    722. 

  722.           <p>当前 <code>SystemViewDialog</code> 标准方案：渐变 Hero 区 + 绿条区块标题 + 双列键值。适合用户、角色、主数据等通用 CRUD 查看。</p>
    723. 

  723.           <button type="button" class="btn btn-primary" data-open="dlgA">
    724. 

  724.             <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
    725. 

  725.             预览弹窗
    726. 

  726.           </button>
    727. 

  727.         </div>
    728. 

  728.       </article>
    729. 

  729. 

  730.       <!-- B -->
    731. 

  731.       <article class="demo-card">
    732. 

  732.         <div class="demo-card-preview" style="background:linear-gradient(135deg,#ecfdf5,#d1fae5)">
    733. 

  733.           <div class="mini-dialog">
    734. 

  734.             <div class="mini-body" style="padding-top:12px">
    735. 

  735.               <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px">
    736. 

  736.                 <div class="mini-line" style="height:24px;background:#ecfdf5;border:1px solid #d9e8e2"></div>
    737. 

  737.                 <div class="mini-line" style="height:24px;background:#ecfdf5;border:1px solid #d9e8e2"></div>
    738. 

  738.               </div>
    739. 

  739.               <div class="mini-line" style="margin-top:8px"></div>
    740. 

  740.             </div>
    741. 

  741.           </div>
    742. 

  742.         </div>
    743. 

  743.         <div class="demo-card-body">
    744. 

  744.           <div class="demo-tags">
    745. 

  745.             <span class="demo-tag">B · 数据看板</span>
    746. 

  746.             <span class="demo-tag muted">订单/配送</span>
    747. 

  747.           </div>
    748. 

  748.           <h2>数据看板 + Bento 指标</h2>
    749. 

  749.           <p>Hero 内嵌 4 格指标卡 + Bento 信息卡 + 路由示意条。适合订单、配送任务、运单等含数量/金额/路线的业务详情。</p>
    750. 

  750.           <button type="button" class="btn btn-primary" data-open="dlgB">
    751. 

  751.             <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
    752. 

  752.             预览弹窗
    753. 

  753.           </button>
    754. 

  754.         </div>
    755. 

  755.       </article>
    756. 

  756. 

  757.       <!-- C -->
    758. 

  758.       <article class="demo-card">
    759. 

  759.         <div class="demo-card-preview">
    760. 

  760.           <div class="mini-dialog" style="display:flex;max-width:300px">
    761. 

  761.             <div style="width:38%;background:#ecfdf5;border-right:1px solid #d9e8e2">
    762. 

  762.               <div class="mini-hero" style="height:36px"></div>
    763. 

  763.               <div class="mini-body"><div class="mini-line short"></div></div>
    764. 

  764.             </div>
    765. 

  765.             <div style="flex:1;background:#f8fafc">
    766. 

  766.               <div class="mini-body"><div class="mini-line"></div><div class="mini-line short"></div></div>
    767. 

  767.             </div>
    768. 

  768.           </div>
    769. 

  769.         </div>
    770. 

  770.         <div class="demo-card-body">
    771. 

  771.           <div class="demo-tags">
    772. 

  772.             <span class="demo-tag">C · 左右分栏</span>
    773. 

  773.             <span class="demo-tag muted">Split Layout</span>
    774. 

  774.           </div>
    775. 

  775.           <h2>左右分栏 + 时间轴</h2>
    776. 

  776.           <p>左侧固定摘要与 KV，右侧展示审批流/轨迹/子表。对应 <code>layout="split"</code>，适合工作流待办、检测任务等「摘要 + 过程」场景。</p>
    777. 

  777.           <button type="button" class="btn btn-primary" data-open="dlgC">
    778. 

  778.             <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
    779. 

  779.             预览弹窗
    780. 

  780.           </button>
    781. 

  781.         </div>
    782. 

  782.       </article>
    783. 

  783. 

  784.       <!-- D -->
    785. 

  785.       <article class="demo-card">
    786. 

  786.         <div class="demo-card-preview" style="background:#fff">
    787. 

  787.           <div class="mini-dialog" style="max-width:220px">
    788. 

  788.             <div style="padding:8px 10px;border-bottom:1px solid #d9e8e2;display:flex;justify-content:space-between;align-items:center">
    789. 

  789.               <div class="mini-line short" style="width:50%;margin:0"></div>
    790. 

  790.               <div style="width:40px;height:16px;background:#ecfdf5;border-radius:4px;border:1px solid rgba(16,185,129,0.3)"></div>
    791. 

  791.             </div>
    792. 

  792.             <div class="mini-body">
    793. 

  793.               <div class="mini-line"></div>
    794. 

  794.               <div class="mini-line"></div>
    795. 

  795.               <div class="mini-line short"></div>
    796. 

  796.             </div>
    797. 

  797.           </div>
    798. 

  798.         </div>
    799. 

  799.         <div class="demo-card-body">
    800. 

  800.           <div class="demo-tags">
    801. 

  801.             <span class="demo-tag">D · 紧凑清单</span>
    802. 

  802.             <span class="demo-tag muted">轻量实体</span>
    803. 

  803.           </div>
    804. 

  804.           <h2>紧凑行式清单</h2>
    805. 

  805.           <p>无 Hero 渐变，单行 label-value 对齐，分组灰底标题。宽度 560px，适合字典项、单位、岗位等字段少、无需视觉强调的轻量查看。</p>
    806. 

  806.           <button type="button" class="btn btn-primary" data-open="dlgD">
    807. 

  807.             <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
    808. 

  808.             预览弹窗
    809. 

  809.           </button>
    810. 

  810.         </div>
    811. 

  811.       </article>
    812. 

  812. 

  813.       <!-- E -->
    814. 

  814.       <article class="demo-card">
    815. 

  815.         <div class="demo-card-preview" style="background:linear-gradient(180deg,#fff,#f8fafc)">
    816. 

  816.           <div class="mini-dialog">
    817. 

  817.             <div style="height:8px;background:var(--primary)"></div>
    818. 

  818.             <div class="mini-body" style="padding-top:10px">
    819. 

  819.               <div class="mini-line" style="width:70%"></div>
    820. 

  820.               <div class="mini-line short"></div>
    821. 

  821.             </div>
    822. 

  822.           </div>
    823. 

  823.         </div>
    824. 

  824.         <div class="demo-card-body">
    825. 

  825.           <div class="demo-tags">
    826. 

  826.             <span class="demo-tag">E · 票据档案</span>
    827. 

  827.             <span class="demo-tag muted">合同/证书</span>
    828. 

  828.           </div>
    829. 

  829.           <h2>票据档案风</h2>
    830. 

  830.           <p>正式文档头 + 水印 + 圆形印章态 + 表格式 KV + 签章区。适合合同、报价单、运输计划证、质检报告等需「归档感」的只读详情。</p>
    831. 

  831.           <button type="button" class="btn btn-primary" data-open="dlgE">
    832. 

  832.             <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
    833. 

  833.             预览弹窗
    834. 

  834.           </button>
    835. 

  835.         </div>
    836. 

  836.       </article>
    837. 

  837. 

  838.       <!-- F -->
    839. 

  839.       <article class="demo-card">
    840. 

  840.         <div class="demo-card-preview">
    841. 

  841.           <div class="mini-dialog">
    842. 

  842.             <div style="padding:6px 8px 0;border-bottom:1px solid #d9e8e2">
    843. 

  843.               <div class="mini-line short" style="margin-bottom:6px"></div>
    844. 

  844.               <div style="display:flex;gap:4px">
    845. 

  845.                 <div style="width:28px;height:4px;background:#10b981;border-radius:2px"></div>
    846. 

  846.                 <div style="width:28px;height:4px;background:#e2e8f0;border-radius:2px"></div>
    847. 

  847.                 <div style="width:28px;height:4px;background:#e2e8f0;border-radius:2px"></div>
    848. 

  848.               </div>
    849. 

  849.             </div>
    850. 

  850.             <div class="mini-body"><div class="mini-line"></div></div>
    851. 

  851.           </div>
    852. 

  852.         </div>
    853. 

  853.         <div class="demo-card-body">
    854. 

  854.           <div class="demo-tags">
    855. 

  855.             <span class="demo-tag">F · 标签页</span>
    856. 

  856.             <span class="demo-tag muted">复杂业务</span>
    857. 

  857.           </div>
    858. 

  858.           <h2>标签页分区查看</h2>
    859. 

  859.           <p>顶部 Tab 切换基本信息 / 明细 / 审批 / 附件，避免单页过长滚动。适合 CRM 合同、报价、商机等多区块复杂对象。</p>
    860. 

  860.           <button type="button" class="btn btn-primary" data-open="dlgF">
    861. 

  861.             <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
    862. 

  862.             预览弹窗
    863. 

  863.           </button>
    864. 

  864.         </div>
    865. 

  865.       </article>
    866. 

  866. 

  867.       <!-- G -->
    868. 

  868.       <article class="demo-card">
    869. 

  869.         <div class="demo-card-preview" style="background:#f1f5f9">
    870. 

  870.           <div class="mini-dialog" style="background:transparent;box-shadow:none">
    871. 

  871.             <div style="background:#fff;border-radius:6px;height:28px;margin-bottom:4px;box-shadow:0 1px 3px rgba(0,0,0,0.08)"></div>
    872. 

  872.             <div style="background:#fff;border-radius:6px;height:36px;margin-bottom:4px;box-shadow:0 1px 3px rgba(0,0,0,0.08)"></div>
    873. 

  873.             <div style="background:#fff;border-radius:6px;height:28px;box-shadow:0 1px 3px rgba(0,0,0,0.08)"></div>
    874. 

  874.           </div>
    875. 

  875.         </div>
    876. 

  876.         <div class="demo-card-body">
    877. 

  877.           <div class="demo-tags">
    878. 

  878.             <span class="demo-tag">G · 卡片堆叠</span>
    879. 

  879.             <span class="demo-tag muted">客户/供应商</span>
    880. 

  880.           </div>
    881. 

  881.           <h2>卡片堆叠分区</h2>
    882. 

  882.           <p>灰底容器 + 独立浮卡，每卡一个主题区块，视觉层次清晰。适合客户档案、供应商资质、人员档案等「多维度画像」类查看。</p>
    883. 

  883.           <button type="button" class="btn btn-primary" data-open="dlgG">
    884. 

  884.             <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
    885. 

  885.             预览弹窗
    886. 

  886.           </button>
    887. 

  887.         </div>
    888. 

  888.       </article>
    889. 

  889.     </div>
    890. 

  890.   </div>
    891. 

  891. 

  892.   <!-- ═══ 弹窗 A · 经典 Hero ═══ -->
    893. 

  893.   <div class="backdrop" id="dlgA" role="dialog" aria-modal="true">
    894. 

  894.     <div class="dialog style-a">
    895. 

  895.       <div class="dialog-scroll">
    896. 

  896.         <div class="view-hero">
    897. 

  897.           <div class="view-hero-icon">
    898. 

  898.             <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
    899. 

  899.           </div>
    900. 

  900.           <div class="view-hero-main">
    901. 

  901.             <h2>张三</h2>
    902. 

  902.             <p class="view-hero-meta">工号：SX-2024-0086 · 华东区域 · 调度员</p>
    903. 

  903.           </div>
    904. 

  904.           <span class="tag">正常</span>
    905. 

  905.         </div>
    906. 

  906.         <div class="view-section">
    907. 

  907.           <h3>账号信息</h3>
    908. 

  908.           <dl class="view-kv-grid">
    909. 

  909.             <div class="view-kv"><dt>用户名</dt><dd>zhangsan</dd></div>
    910. 

  910.             <div class="view-kv"><dt>手机号</dt><dd>138****6688</dd></div>
    911. 

  911.             <div class="view-kv"><dt>所属角色</dt><dd>调度主管、区域管理员</dd></div>
    912. 

  912.             <div class="view-kv"><dt>所属部门</dt><dd>运营中心 / 华东调度组</dd></div>
    913. 

  913.           </dl>
    914. 

  914.         </div>
    915. 

  915.         <div class="view-section">
    916. 

  916.           <h3>状态与审计</h3>
    917. 

  917.           <dl class="view-kv-grid">
    918. 

  918.             <div class="view-kv"><dt>账号状态</dt><dd><span class="tag">正常</span></dd></div>
    919. 

  919.             <div class="view-kv"><dt>最后登录</dt><dd>2026-06-18 09:32:15</dd></div>
    920. 

  920.             <div class="view-kv"><dt>创建时间</dt><dd>2024-03-12 14:20:00</dd></div>
    921. 

  921.             <div class="view-kv"><dt>备注</dt><dd>—</dd></div>
    922. 

  922.           </dl>
    923. 

  923.         </div>
    924. 

  924.       </div>
    925. 

  925.       <div class="dialog-foot">
    926. 

  926.         <button type="button" class="btn btn-ghost" data-close>
    927. 

  927.           <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
    928. 

  928.           关闭
    929. 

  929.         </button>
    930. 

  930.       </div>
    931. 

  931.     </div>
    932. 

  932.   </div>
    933. 

  933. 

  934.   <!-- ═══ 弹窗 B · 数据看板 ═══ -->
    935. 

  935.   <div class="backdrop" id="dlgB" role="dialog" aria-modal="true">
    936. 

  936.     <div class="dialog style-b">
    937. 

  937.       <div class="dialog-scroll">
    938. 

  938.         <div class="view-hero">
    939. 

  939.           <div class="view-hero-top">
    940. 

  940.             <div>
    941. 

  941.               <h2>配送任务 PS-20260620-0031</h2>
    942. 

  942.               <div class="view-hero-tags">
    943. 

  943.                 <span class="tag">执行中</span>
    944. 

  944.                 <span class="tag muted">优先级 · 高</span>
    945. 

  945.                 <span class="tag muted">华东区域</span>
    946. 

  946.               </div>
    947. 

  947.             </div>
    948. 

  948.           </div>
    949. 

  949.           <div class="view-stat-row">
    950. 

  950.             <div class="stat-chip"><div class="label">配送件数</div><div class="value">128</div></div>
    951. 

  951.             <div class="stat-chip"><div class="label">本单金额</div><div class="value">¥4,860</div></div>
    952. 

  952.             <div class="stat-chip warn"><div class="label">在途时长</div><div class="value">2.5h</div></div>
    953. 

  953.             <div class="stat-chip"><div class="label">站点数</div><div class="value">6</div></div>
    954. 

  954.           </div>
    955. 

  955.         </div>
    956. 

  956.         <div class="view-section">
    957. 

  957.           <h3>基础信息</h3>
    958. 

  958.           <dl class="view-kv-grid" style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px">
    959. 

  959.             <div class="view-kv"><dt>任务号</dt><dd>PS-20260620-0031</dd></div>
    960. 

  960.             <div class="view-kv"><dt>计划时间</dt><dd>2026-06-20 08:00 — 14:00</dd></div>
    961. 

  961.             <div class="view-kv"><dt>司机 / 车辆</dt><dd>李师傅 · 浙A·8K326</dd></div>
    962. 

  962.             <div class="view-kv"><dt>线路</dt><dd>华东中心仓 → 城配集散 → 6 门店</dd></div>
    963. 

  963.           </dl>
    964. 

  964.         </div>
    965. 

  965.         <div class="view-section">
    966. 

  966.           <h3>费用说明</h3>
    967. 

  967.           <div class="view-bento">
    968. 

  968.             <div class="view-card">
    969. 

  969.               <h4>路桥费（元）</h4>
    970. 

  970.               <p style="font-size:18px;font-weight:700;color:var(--primary-dark)">¥186.00</p>
    971. 

  971.             </div>
    972. 

  972.             <div class="view-card">
    973. 

  973.               <h4>装卸费（元）</h4>
    974. 

  974.               <p style="font-size:18px;font-weight:700;color:var(--primary-dark)">¥320.00</p>
    975. 

  975.             </div>
    976. 

  976.             <div class="view-card" style="grid-column:1/-1">
    977. 

  977.               <h4>备注</h4>
    978. 

  978.               <p>含温控附加费；实际结算以回单签收后财务对账为准。</p>
    979. 

  979.             </div>
    980. 

  980.           </div>
    981. 

  981.         </div>
    982. 

  982.         <div class="view-section">
    983. 

  983.           <h3>路由示意</h3>
    984. 

  984.           <div class="view-route-bar">
    985. 

  985.             <div class="route-pin"><strong>始发仓</strong>华东中心仓</div>
    986. 

  986.             <div class="route-line"></div>
    987. 

  987.             <div class="route-pin"><strong>经停</strong>城配集散</div>
    988. 

  988.             <div class="route-line"></div>
    989. 

  989.             <div class="route-pin"><strong>目的地</strong>6 门店</div>
    990. 

  990.           </div>
    991. 

  991.         </div>
    992. 

  992.       </div>
    993. 

  993.       <div class="dialog-foot">
    994. 

  994.         <button type="button" class="btn btn-ghost" data-close>
    995. 

  995.           <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
    996. 

  996.           关闭
    997. 

  997.         </button>
    998. 

  998.       </div>
    999. 

  999.     </div>
    1000. 

  1000.   </div>
    1001. 

  1001. 

  1002.   <!-- ═══ 弹窗 C · 左右分栏 ═══ -->
    1003. 

  1003.   <div class="backdrop" id="dlgC" role="dialog" aria-modal="true">
    1004. 

  1004.     <div class="dialog style-c">
    1005. 

  1005.       <div class="view-split">
    1006. 

  1006.         <div class="view-split-left">
    1007. 

  1007.           <div class="view-hero">
    1008. 

  1008.             <div class="view-hero-icon">
    1009. 

  1009.               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
    1010. 

  1010.             </div>
    1011. 

  1011.             <div class="view-hero-main">
    1012. 

  1012.               <h2>质检工单 QC-0618-042</h2>
    1013. 

  1013.               <p class="view-hero-meta">样品编码：SP-2026-A0186</p>
    1014. 

  1014.             </div>
    1015. 

  1015.           </div>
    1016. 

  1016.           <div class="view-section">
    1017. 

  1017.             <h3>任务信息</h3>
    1018. 

  1018.             <dl>
    1019. 

  1019.               <div class="view-kv"><dt>检测项目</dt><dd>纯度 · 水分 · 重金属</dd></div>
    1020. 

  1020.               <div class="view-kv"><dt>委托方</dt><dd>山峡化工 · 生产一部</dd></div>
    1021. 

  1021.               <div class="view-kv"><dt>优先级</dt><dd><span class="tag warn">加急</span></dd></div>
    1022. 

  1022.               <div class="view-kv"><dt>当前状态</dt><dd><span class="tag">检测中</span></dd></div>
    1023. 

  1023.             </dl>
    1024. 

  1024.           </div>
    1025. 

  1025.           <div class="view-section">
    1026. 

  1026.             <h3>样品信息</h3>
    1027. 

  1027.             <dl>
    1028. 

  1028.               <div class="view-kv"><dt>采样时间</dt><dd>2026-06-18 07:45</dd></div>
    1029. 

  1029.               <div class="view-kv"><dt>采样地点</dt><dd>3 号产线 · 成品罐</dd></div>
    1030. 

  1030.               <div class="view-kv"><dt>留样编号</dt><dd>LY-20260618-009</dd></div>
    1031. 

  1031.             </dl>
    1032. 

  1032.           </div>
    1033. 

  1033.         </div>
    1034. 

  1034.         <div class="view-split-right">
    1035. 

  1035.           <h3 class="right-panel-title">执行轨迹</h3>
    1036. 

  1036.           <div class="view-timeline">
    1037. 

  1037.             <div class="view-tl-item">
    1038. 

  1038.               <div class="view-tl-time">2026-06-18 08:00</div>
    1039. 

  1039.               <div class="view-tl-title">样品接收 · 已入库</div>
    1040. 

  1040.               <div class="view-tl-desc">收样员：王芳 · 冷库 2℃ 暂存</div>
    1041. 

  1041.             </div>
    1042. 

  1042.             <div class="view-tl-item">
    1043. 

  1043.               <div class="view-tl-time">2026-06-18 09:30</div>
    1044. 

  1044.               <div class="view-tl-title">前处理完成 · 进入检测</div>
    1045. 

  1045.               <div class="view-tl-desc">分配至理化组 · 仪器 GC-2024</div>
    1046. 

  1046.             </div>
    1047. 

  1047.             <div class="view-tl-item">
    1048. 

  1048.               <div class="view-tl-time">2026-06-18 11:15</div>
    1049. 

  1049.               <div class="view-tl-title">纯度检测 · 进行中</div>
    1050. 

  1050.               <div class="view-tl-desc">预计 14:00 出初步结果</div>
    1051. 

  1051.             </div>
    1052. 

  1052.             <div class="view-tl-item muted">
    1053. 

  1053.               <div class="view-tl-time">待发生</div>
    1054. 

  1054.               <div class="view-tl-title">报告签发 · 审核归档</div>
    1055. 

  1055.               <div class="view-tl-desc">需 QC 主管复核后发布</div>
    1056. 

  1056.             </div>
    1057. 

  1057.           </div>
    1058. 

  1058.         </div>
    1059. 

  1059.       </div>
    1060. 

  1060.       <div class="dialog-foot">
    1061. 

  1061.         <button type="button" class="btn btn-ghost" data-close>
    1062. 

  1062.           <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
    1063. 

  1063.           关闭
    1064. 

  1064.         </button>
    1065. 

  1065.       </div>
    1066. 

  1066.     </div>
    1067. 

  1067.   </div>
    1068. 

  1068. 

  1069.   <!-- ═══ 弹窗 D · 紧凑清单 ═══ -->
    1070. 

  1070.   <div class="backdrop" id="dlgD" role="dialog" aria-modal="true">
    1071. 

  1071.     <div class="dialog style-d">
    1072. 

  1072.       <div class="view-compact-head">
    1073. 

  1073.         <div>
    1074. 

  1074.           <h2>计量单位 · 吨（t）</h2>
    1075. 

  1075.           <div class="sub">编码 unit_t · 排序 10</div>
    1076. 

  1076.         </div>
    1077. 

  1077.         <span class="tag">启用</span>
    1078. 

  1078.       </div>
    1079. 

  1079.       <div class="dialog-scroll view-compact-body">
    1080. 

  1080.         <div class="view-row-group">基本信息</div>
    1081. 

  1081.         <dl class="view-row"><dt>单位名称</dt><dd>吨</dd></dl>
    1082. 

  1082.         <dl class="view-row"><dt>单位符号</dt><dd>t</dd></dl>
    1083. 

  1083.         <dl class="view-row"><dt>单位编码</dt><dd>unit_t</dd></dl>
    1084. 

  1084.         <div class="view-row-group">系统信息</div>
    1085. 

  1085.         <dl class="view-row"><dt>状态</dt><dd><span class="tag">启用</span></dd></dl>
    1086. 

  1086.         <dl class="view-row"><dt>创建人</dt><dd>系统管理员</dd></dl>
    1087. 

  1087.         <dl class="view-row"><dt>创建时间</dt><dd>2024-01-08 10:00:00</dd></dl>
    1088. 

  1088.         <dl class="view-row"><dt>备注</dt><dd>地磅称重默认单位</dd></dl>
    1089. 

  1089.       </div>
    1090. 

  1090.       <div class="dialog-foot">
    1091. 

  1091.         <button type="button" class="btn btn-ghost" data-close>
    1092. 

  1092.           <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
    1093. 

  1093.           关闭
    1094. 

  1094.         </button>
    1095. 

  1095.       </div>
    1096. 

  1096.     </div>
    1097. 

  1097.   </div>
    1098. 

  1098. 

  1099.   <!-- ═══ 弹窗 E · 票据档案 ═══ -->
    1100. 

  1100.   <div class="backdrop" id="dlgE" role="dialog" aria-modal="true">
    1101. 

  1101.     <div class="dialog style-e">
    1102. 

  1102.       <div class="dialog-scroll">
    1103. 

  1103.         <div class="doc-header">
    1104. 

  1104.           <div class="doc-watermark">合同</div>
    1105. 

  1105.           <div class="doc-header-top">
    1106. 

  1106.             <div>
    1107. 

  1107.               <h2>产品销售合同</h2>
    1108. 

  1108.               <div class="doc-no">HT-2026-SX-00428</div>
    1109. 

  1109.             </div>
    1110. 

  1110.             <div class="doc-stamp">已生效</div>
    1111. 

  1111.           </div>
    1112. 

  1112.           <div class="doc-meta-bar">
    1113. 

  1113.             <span>签订日期：<strong>2026-06-01</strong></span>
    1114. 

  1114.             <span>有效期至：<strong>2027-05-31</strong></span>
    1115. 

  1115.             <span>甲方：<strong>山峡化工有限公司</strong></span>
    1116. 

  1116.             <span>乙方：<strong>华东精细化工贸易公司</strong></span>
    1117. 

  1117.           </div>
    1118. 

  1118.         </div>
    1119. 

  1119.         <div class="doc-body">
    1120. 

  1120.           <div class="doc-section">
    1121. 

  1121.             <h3>合同概要</h3>
    1122. 

  1122.             <table class="doc-kv-table">
    1123. 

  1123.               <tr><td>合同类型</td><td>年度框架 · 化工原料</td></tr>
    1124. 

  1124.               <tr><td>合同金额</td><td class="money-val">¥ 2,580,000.00</td></tr>
    1125. 

  1125.               <tr><td>付款方式</td><td>月结 30 天 · 银行承兑</td></tr>
    1126. 

  1126.               <tr><td>交货方式</td><td>卖方送货 · 华东区域仓</td></tr>
    1127. 

  1127.             </table>
    1128. 

  1128.           </div>
    1129. 

  1129.           <div class="doc-section">
    1130. 

  1130.             <h3>主要条款</h3>
    1131. 

  1131.             <table class="doc-kv-table">
    1132. 

  1132.               <tr><td>质量标准</td><td>GB/T 标准 · 每批次附质检报告</td></tr>
    1133. 

  1133.               <tr><td>违约责任</td><td>逾期交货按日 0.5‰ 计罚 · 上限 5%</td></tr>
    1134. 

  1134.               <tr><td>争议解决</td><td>协商不成提交杭州仲裁委员会</td></tr>
    1135. 

  1135.             </table>
    1136. 

  1136.           </div>
    1137. 

  1137.           <div class="doc-sign">
    1138. 

  1138.             <span>生成时间：2026-06-01 16:30:00</span>
    1139. 

  1139.             <span>系统归档编号：ARC-20260601-00428</span>
    1140. 

  1140.           </div>
    1141. 

  1141.         </div>
    1142. 

  1142.       </div>
    1143. 

  1143.       <div class="dialog-foot">
    1144. 

  1144.         <button type="button" class="btn btn-ghost" data-close>
    1145. 

  1145.           <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
    1146. 

  1146.           关闭
    1147. 

  1147.         </button>
    1148. 

  1148.       </div>
    1149. 

  1149.     </div>
    1150. 

  1150.   </div>
    1151. 

  1151. 

  1152.   <!-- ═══ 弹窗 F · 标签页 ═══ -->
    1153. 

  1153.   <div class="backdrop" id="dlgF" role="dialog" aria-modal="true">
    1154. 

  1154.     <div class="dialog style-f">
    1155. 

  1155.       <div class="view-tab-head">
    1156. 

  1156.         <div class="view-tab-head-top">
    1157. 

  1157.           <div>
    1158. 

  1158.             <h2>报价单 QO-20260615-008</h2>
    1159. 

  1159.             <div class="code">客户：华东精细化工 · 商机：年产 500 吨催化剂项目</div>
    1160. 

  1160.           </div>
    1161. 

  1161.           <span class="tag">已审批</span>
    1162. 

  1162.         </div>
    1163. 

  1163.         <div class="view-tabs" role="tablist">
    1164. 

  1164.           <button type="button" class="view-tab active" data-tab="tab-info" role="tab">基本信息</button>
    1165. 

  1165.           <button type="button" class="view-tab" data-tab="tab-items" role="tab">产品明细</button>
    1166. 

  1166.           <button type="button" class="view-tab" data-tab="tab-flow" role="tab">审批记录</button>
    1167. 

  1167.           <button type="button" class="view-tab" data-tab="tab-files" role="tab">附件</button>
    1168. 

  1168.         </div>
    1169. 

  1169.       </div>
    1170. 

  1170.       <div class="dialog-scroll">
    1171. 

  1171.         <div class="view-tab-panel active" id="tab-info">
    1172. 

  1172.           <dl class="view-kv-grid">
    1173. 

  1173.             <div class="view-kv"><dt>报价编号</dt><dd>QO-20260615-008</dd></div>
    1174. 

  1174.             <div class="view-kv"><dt>报价状态</dt><dd><span class="tag">已审批</span></dd></div>
    1175. 

  1175.             <div class="view-kv"><dt>报价金额</dt><dd class="money-val">¥ 186,500.00</dd></div>
    1176. 

  1176.             <div class="view-kv"><dt>有效期</dt><dd>2026-06-15 — 2026-07-15</dd></div>
    1177. 

  1177.             <div class="view-kv"><dt>销售负责人</dt><dd>陈经理</dd></div>
    1178. 

  1178.             <div class="view-kv"><dt>创建时间</dt><dd>2026-06-15 10:22:00</dd></div>
    1179. 

  1179.           </dl>
    1180. 

  1180.         </div>
    1181. 

  1181.         <div class="view-tab-panel" id="tab-items">
    1182. 

  1182.           <div class="view-subtable-wrap">
    1183. 

  1183.             <table class="view-subtable">
    1184. 

  1184.               <thead>
    1185. 

  1185.                 <tr>
    1186. 

  1186.                   <th class="ta-left">产品名称</th>
    1187. 

  1187.                   <th>规格</th>
    1188. 

  1188.                   <th>数量</th>
    1189. 

  1189.                   <th>单价</th>
    1190. 

  1190.                   <th>小计</th>
    1191. 

  1191.                 </tr>
    1192. 

  1192.               </thead>
    1193. 

  1193.               <tbody>
    1194. 

  1194.                 <tr>
    1195. 

  1195.                   <td class="ta-left">催化剂 A 型</td>
    1196. 

  1196.                   <td>25kg/桶</td>
    1197. 

  1197.                   <td>200</td>
    1198. 

  1198.                   <td class="money-val">¥680.00</td>
    1199. 

  1199.                   <td class="money-val">¥136,000</td>
    1200. 

  1200.                 </tr>
    1201. 

  1201.                 <tr>
    1202. 

  1202.                   <td class="ta-left">助剂 B 型</td>
    1203. 

  1203.                   <td>10kg/袋</td>
    1204. 

  1204.                   <td>100</td>
    1205. 

  1205.                   <td class="money-val">¥505.00</td>
    1206. 

  1206.                   <td class="money-val">¥50,500</td>
    1207. 

  1207.                 </tr>
    1208. 

  1208.               </tbody>
    1209. 

  1209.             </table>
    1210. 

  1210.           </div>
    1211. 

  1211.         </div>
    1212. 

  1212.         <div class="view-tab-panel" id="tab-flow">
    1213. 

  1213.           <div class="view-timeline" style="padding-left:18px;border-left:2px solid var(--border);margin-left:6px">
    1214. 

  1214.             <div class="view-tl-item" style="position:relative;padding-bottom:16px;font-size:13px">
    1215. 

  1215.               <div style="font-size:12px;color:var(--text-muted)">2026-06-15 14:30</div>
    1216. 

  1216.               <div style="font-weight:600">销售总监 · 已通过</div>
    1217. 

  1217.               <div style="color:var(--text-muted);font-size:12px;margin-top:2px">同意报价，注意交货周期。</div>
    1218. 

  1218.             </div>
    1219. 

  1219.             <div class="view-tl-item" style="position:relative;padding-bottom:0;font-size:13px">
    1220. 

  1220.               <div style="font-size:12px;color:var(--text-muted)">2026-06-15 11:05</div>
    1221. 

  1221.               <div style="font-weight:600">陈经理 · 提交审批</div>
    1222. 

  1222.             </div>
    1223. 

  1223.           </div>
    1224. 

  1224.         </div>
    1225. 

  1225.         <div class="view-tab-panel" id="tab-files">
    1226. 

  1226.           <div class="attach-grid">
    1227. 

  1227.             <div class="attach-card"><strong>报价单.pdf</strong>2.4 MB · 2026-06-15</div>
    1228. 

  1228.             <div class="attach-card"><strong>产品规格书.pdf</strong>1.8 MB · 2026-06-14</div>
    1229. 

  1229.             <div class="attach-card"><strong>客户询价函.jpg</strong>856 KB · 2026-06-12</div>
    1230. 

  1230.           </div>
    1231. 

  1231.         </div>
    1232. 

  1232.       </div>
    1233. 

  1233.       <div class="dialog-foot">
    1234. 

  1234.         <button type="button" class="btn btn-ghost" data-close>
    1235. 

  1235.           <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
    1236. 

  1236.           关闭
    1237. 

  1237.         </button>
    1238. 

  1238.       </div>
    1239. 

  1239.     </div>
    1240. 

  1240.   </div>
    1241. 

  1241. 

  1242.   <!-- ═══ 弹窗 G · 卡片堆叠 ═══ -->
    1243. 

  1243.   <div class="backdrop" id="dlgG" role="dialog" aria-modal="true">
    1244. 

  1244.     <div class="dialog style-g">
    1245. 

  1245.       <div class="dialog-scroll">
    1246. 

  1246.         <div class="stack-hero">
    1247. 

  1247.           <div class="stack-hero-avatar">华</div>
    1248. 

  1248.           <div>
    1249. 

  1249.             <h2>华东精细化工贸易公司</h2>
    1250. 

  1250.             <p>客户编码 KH-2023-0186 · <span class="tag" style="font-size:11px">战略客户</span></p>
    1251. 

  1251.           </div>
    1252. 

  1252.         </div>
    1253. 

  1253.         <div class="stack-card">
    1254. 

  1254.           <h3><span class="dot"></span>联系信息</h3>
    1255. 

  1255.           <div class="stack-kv-grid">
    1256. 

  1256.             <div class="stack-kv"><div class="k">联系人</div><div class="v">刘总 · 采购部</div></div>
    1257. 

  1257.             <div class="stack-kv"><div class="k">手机</div><div class="v">139****8821</div></div>
    1258. 

  1258.             <div class="stack-kv"><div class="k">地址</div><div class="v">浙江省杭州市 · 滨江区</div></div>
    1259. 

  1259.             <div class="stack-kv"><div class="k">所属行业</div><div class="v">精细化工 / 贸易</div></div>
    1260. 

  1260.           </div>
    1261. 

  1261.         </div>
    1262. 

  1262.         <div class="stack-card">
    1263. 

  1263.           <h3><span class="dot"></span>业务概览</h3>
    1264. 

  1264.           <div class="stack-highlight">
    1265. 

  1265.             <div>
    1266. 

  1266.               <div style="font-size:12px;color:var(--text-muted)">累计成交额（近 12 月）</div>
    1267. 

  1267.               <div class="amount">¥ 8,620,000</div>
    1268. 

  1268.             </div>
    1269. 

  1269.             <div style="text-align:right">
    1270. 

  1270.               <div style="font-size:12px;color:var(--text-muted)">进行中商机</div>
    1271. 

  1271.               <div style="font-size:18px;font-weight:700;color:var(--primary-dark)">3 个</div>
    1272. 

  1272.             </div>
    1273. 

  1273.           </div>
    1274. 

  1274.         </div>
    1275. 

  1275.         <div class="stack-card">
    1276. 

  1276.           <h3><span class="dot"></span>最近跟进</h3>
    1277. 

  1277.           <p style="margin:0;font-size:13px;line-height:1.6;color:var(--text)">
    1278. 

  1278.             2026-06-12 · 陈经理：客户对催化剂 A 型报价满意，计划下周签约框架合同。需协调技术部提供样品检测报告。
    1279. 

  1279.           </p>
    1280. 

  1280.         </div>
    1281. 

  1281.       </div>
    1282. 

  1282.       <div class="dialog-foot">
    1283. 

  1283.         <button type="button" class="btn btn-ghost" data-close>
    1284. 

  1284.           <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
    1285. 

  1285.           关闭
    1286. 

  1286.         </button>
    1287. 

  1287.       </div>
    1288. 

  1288.     </div>
    1289. 

  1289.   </div>
    1290. 

  1290. 

  1291.   <script>
    1292. 

  1292.     document.querySelectorAll("[data-open]").forEach(function (btn) {
    1293. 

  1293.       btn.addEventListener("click", function () {
    1294. 

  1294.         var id = btn.getAttribute("data-open");
    1295. 

  1295.         var dlg = document.getElementById(id);
    1296. 

  1296.         if (dlg) dlg.classList.add("open");
    1297. 

  1297.       });
    1298. 

  1298.     });
    1299. 

  1299. 

  1300.     document.querySelectorAll("[data-close]").forEach(function (btn) {
    1301. 

  1301.       btn.addEventListener("click", function () {
    1302. 

  1302.         btn.closest(".backdrop").classList.remove("open");
    1303. 

  1303.       });
    1304. 

  1304.     });
    1305. 

  1305. 

  1306.     document.querySelectorAll(".backdrop").forEach(function (backdrop) {
    1307. 

  1307.       backdrop.addEventListener("click", function (e) {
    1308. 

  1308.         if (e.target === backdrop) backdrop.classList.remove("open");
    1309. 

  1309.       });
    1310. 

  1310.     });
    1311. 

  1311. 

  1312.     document.addEventListener("keydown", function (e) {
    1313. 

  1313.       if (e.key === "Escape") {
    1314. 

  1314.         document.querySelectorAll(".backdrop.open").forEach(function (b) {
    1315. 

  1315.           b.classList.remove("open");
    1316. 

  1316.         });
    1317. 

  1317.       }
    1318. 

  1318.     });
    1319. 

  1319. 

  1320.     document.querySelectorAll(".style-f .view-tab").forEach(function (tab) {
    1321. 

  1321.       tab.addEventListener("click", function () {
    1322. 

  1322.         var panelId = tab.getAttribute("data-tab");
    1323. 

  1323.         var dialog = tab.closest(".style-f");
    1324. 

  1324.         dialog.querySelectorAll(".view-tab").forEach(function (t) { t.classList.remove("active"); });
    1325. 

  1325.         dialog.querySelectorAll(".view-tab-panel").forEach(function (p) { p.classList.remove("active"); });
    1326. 

  1326.         tab.classList.add("active");
    1327. 

  1327.         var panel = document.getElementById(panelId);
    1328. 

  1328.         if (panel) panel.classList.add("active");
    1329. 

  1329.       });
    1330. 

  1330.     });
    1331. 

  1331.   </script>
    1332. 

  1332. </body>
    1333. 

  1333. </html>
    1334.