工程管理系统导航门户：深色工业风设计，四大子系统卡片化呈现

By 15547946974, 14 April, 2026

角色

assistant

content

```json{
"summary": "设计了一个工程管理系统导航门户页面，采用深色工业风格（深蓝灰主色 + 橙色点缀），体现工程建设的专业感与力量感。四大子系统（安全、质量、环保、应急）以分组卡片形式呈现，每个子系统入口配有独特图标和悬停动效。背景使用几何网格纹理增加层次感，整体布局采用非对称分组设计，视觉重心清晰。",
"widget": {"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>工程管理系统导航门户</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.c…\">\n <style>\n :root {\n --bg-deep: #0a0e1a;\n --bg-card: #0f1628;\n --bg-card-hover: #151d35;\n --border-subtle: rgba(255,255,255,0.06);\n --border-glow: rgba(255,140,0,0.4);\n --accent-orange: #ff8c00;\n --accent-orange-light: #ffaa33;\n --accent-blue: #1e90ff;\n --accent-green: #00c896;\n --accent-red: #ff4d6d;\n --accent-teal: #00d4aa;\n --text-primary: #e8eaf0;\n --text-secondary: #8892a4;\n --text-muted: #4a5568;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: 'Rajdhani', 'Noto Serif SC', sans-serif;\n background-color: var(--bg-deep);\n color: var(--text-primary);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n /* Grid background */\n .grid-bg {\n position: fixed;\n inset: 0;\n background-image:\n linear-gradient(rgba(30,144,255,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(30,144,255,0.04) 1px, transparent 1px);\n background-size: 60px 60px;\n pointer-events: none;\n z-index: 0;\n }\n\n /* Radial glow */\n .radial-glow {\n position: fixed;\n top: -20%;\n left: 50%;\n transform: translateX(-50%);\n width: 900px;\n height: 500px;\n background: radial-gradient(ellipse, rgba(255,140,0,0.07) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }\n\n .radial-glow-2 {\n position: fixed;\n bottom: -10%;\n right: -10%;\n width: 600px;\n height: 600px;\n background: radial-gradient(ellipse, rgba(30,144,255,0.06) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }\n\n /* Header */\n .header {\n position: relative;\n z-index: 10;\n padding: 32px 48px 24px;\n border-bottom: 1px solid var(--border-subtle);\n background: linear-gradient(180deg, rgba(10,14,26,0.95) 0%, transparent 100%);\n }\n\n .header-inner {\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .logo-area {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .logo-icon {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, var(--accent-orange), #ff6600);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n color: white;\n box-shadow: 0 0 20px rgba(255,140,0,0.4);\n }\n\n .logo-text {\n display: flex;\n flex-direction: column;\n }\n\n .logo-title {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 22px;\n font-weight: 700;\n color: var(--text-primary);\n letter-spacing: 2px;\n line-height: 1.2;\n }\n\n .logo-subtitle {\n font-family: 'Rajdhani', sans-serif;\n font-size: 11px;\n color: var(--text-muted);\n letter-spacing: 3px;\n text-transform: uppercase;\n }\n\n .header-meta {\n display: flex;\n align-items: center;\n gap: 24px;\n }\n\n .status-dot {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n color: var(--text-secondary);\n letter-spacing: 1px;\n }\n\n .dot-live {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--accent-green);\n box-shadow: 0 0 8px var(--accent-green);\n animation: pulse-dot 2s infinite;\n }\n\n @keyframes pulse-dot {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.6; transform: scale(0.8); }\n }\n\n /* Hero section */\n .hero {\n position: relative;\n z-index: 10;\n padding: 48px 48px 32px;\n max-width: 1400px;\n margin: 0 auto;\n }\n\n .hero-label {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: 'Rajdhani', sans-serif;\n font-size: 11px;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: var(--accent-orange);\n margin-bottom: 16px;\n }\n\n .hero-label::before {\n content: '';\n display: block;\n width: 24px;\n height: 1px;\n background: var(--accent-orange);\n }\n\n .hero-title {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: clamp(28px, 4vw, 48px);\n font-weight: 700;\n color: var(--text-primary);\n letter-spacing: 4px;\n line-height: 1.2;\n margin-bottom: 12px;\n }\n\n .hero-title span {\n background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .hero-desc {\n font-size: 14px;\n color: var(--text-secondary);\n letter-spacing: 1px;\n max-width: 600px;\n }\n\n /* Stats bar */\n .stats-bar {\n position: relative;\n z-index: 10;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 48px 40px;\n display: flex;\n gap: 32px;\n }\n\n .stat-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 20px;\n background: rgba(255,255,255,0.03);\n border: 1px solid var(--border-subtle);\n border-radius: 8px;\n }\n\n .stat-icon {\n font-size: 18px;\n }\n\n .stat-num {\n font-family: 'Rajdhani', sans-serif;\n font-size: 22px;\n font-weight: 700;\n line-height: 1;\n }\n\n .stat-label {\n font-size: 11px;\n color: var(--text-muted);\n letter-spacing: 1px;\n }\n\n /* Main content */\n .main-content {\n position: relative;\n z-index: 10;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 48px 80px;\n display: flex;\n flex-direction: column;\n gap: 48px;\n }\n\n /* Category section */\n .category-section {\n display: flex;\n flex-direction: column;\n gap: 20px;\n opacity: 0;\n transform: translateY(30px);\n animation: fadeUp 0.6s ease forwards;\n }\n\n .category-section:nth-child(1) { animation-delay: 0.1s; }\n .category-section:nth-child(2) { animation-delay: 0.25s; }\n .category-section:nth-child(3) { animation-delay: 0.4s; }\n .category-section:nth-child(4) { animation-delay: 0.55s; }\n\n @keyframes fadeUp {\n to { opacity: 1; transform: translateY(0); }\n }\n\n .category-header {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .category-icon-wrap {\n width: 40px;\n height: 40px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n flex-shrink: 0;\n }\n\n .category-name {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 18px;\n font-weight: 600;\n letter-spacing: 3px;\n color: var(--text-primary);\n }\n\n .category-count {\n font-family: 'Rajdhani', sans-serif;\n font-size: 12px;\n color: var(--text-muted);\n letter-spacing: 2px;\n margin-left: auto;\n }\n\n .category-line {\n flex: 1;\n height: 1px;\n background: linear-gradient(90deg, var(--border-subtle) 0%, transparent 100%);\n }\n\n /* Cards grid */\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n gap: 16px;\n }\n\n /* System card */\n .sys-card {\n position: relative;\n background: var(--bg-card);\n border: 1px solid var(--border-subtle);\n border-radius: 14px;\n padding: 24px 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n overflow: hidden;\n text-decoration: none;\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n\n .sys-card::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: 14px;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .sys-card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n border-radius: 14px 14px 0 0;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .sys-card:hover {\n background: var(--bg-card-hover);\n transform: translateY(-4px);\n border-color: transparent;\n }\n\n .sys-card:hover::before { opacity: 1; }\n .sys-card:hover::after { opacity: 1; }\n\n /* Safety - orange */\n .cat-safety .category-icon-wrap {\n background: rgba(255,140,0,0.15);\n color: var(--accent-orange);\n }\n .cat-safety .category-name { color: var(--accent-orange-light); }\n .cat-safety .sys-card:hover { box-shadow: 0 8px 32px rgba(255,140,0,0.15), 0 0 0 1px rgba(255,140,0,0.3); }\n .cat-safety .sys-card::before { background: radial-gradient(ellipse at top left, rgba(255,140,0,0.06) 0%, transparent 60%); }\n .cat-safety .sys-card::after { background: linear-gradient(90deg, var(--accent-orange), transparent); }\n .cat-safety .card-icon { color: var(--accent-orange); }\n .cat-safety .card-arrow { color: var(--accent-orange); }\n\n /* Quality - blue */\n .cat-quality .category-icon-wrap {\n background: rgba(30,144,255,0.15);\n color: var(--accent-blue);\n }\n .cat-quality .category-name { color: #5aabff; }\n .cat-quality .sys-card:hover { box-shadow: 0 8px 32px rgba(30,144,255,0.15), 0 0 0 1px rgba(30,144,255,0.3); }\n .cat-quality .sys-card::before { background: radial-gradient(ellipse at top left, rgba(30,144,255,0.06) 0%, transparent 60%); }\n .cat-quality .sys-card::after { background: linear-gradient(90deg, var(--accent-blue), transparent); }\n .cat-quality .card-icon { color: var(--accent-blue); }\n .cat-quality .card-arrow { color: var(--accent-blue); }\n\n /* Eco - green */\n .cat-eco .category-icon-wrap {\n background: rgba(0,200,150,0.15);\n color: var(--accent-green);\n }\n .cat-eco .category-name { color: #33d9b2; }\n .cat-eco .sys-card:hover { box-shadow: 0 8px 32px rgba(0,200,150,0.15), 0 0 0 1px rgba(0,200,150,0.3); }\n .cat-eco .sys-card::before { background: radial-gradient(ellipse at top left, rgba(0,200,150,0.06) 0%, transparent 60%); }\n .cat-eco .sys-card::after { background: linear-gradient(90deg, var(--accent-green), transparent); }\n .cat-eco .card-icon { color: var(--accent-green); }\n .cat-eco .card-arrow { color: var(--accent-green); }\n\n /* Emergency - red */\n .cat-emergency .category-icon-wrap {\n background: rgba(255,77,109,0.15);\n color: var(--accent-red);\n }\n .cat-emergency .category-name { color: #ff7090; }\n .cat-emergency .sys-card:hover { box-shadow: 0 8px 32px rgba(255,77,109,0.15), 0 0 0 1px rgba(255,77,109,0.3); }\n .cat-emergency .sys-card::before { background: radial-gradient(ellipse at top left, rgba(255,77,109,0.06) 0%, transparent 60%); }\n .cat-emergency .sys-card::after { background: linear-gradient(90deg, var(--accent-red), transparent); }\n .cat-emergency .card-icon { color: var(--accent-red); }\n .cat-emergency .card-arrow { color: var(--accent-red); }\n\n .card-top {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n }\n\n .card-icon {\n font-size: 22px;\n line-height: 1;\n }\n\n .card-arrow {\n font-size: 12px;\n opacity: 0;\n transform: translateX(-6px);\n transition: all 0.3s ease;\n }\n\n .sys-card:hover .card-arrow {\n opacity: 1;\n transform: translateX(0);\n }\n\n .card-name {\n font-family: 'Noto Serif SC', serif;\n font-size: 14px;\n font-weight: 600;\n color: var(--text-primary);\n letter-spacing: 1px;\n line-height: 1.5;\n }\n\n .card-tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-family: 'Rajdhani', sans-serif;\n font-size: 10px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--text-muted);\n padding: 3px 8px;\n background: rgba(255,255,255,0.04);\n border-radius: 4px;\n border: 1px solid var(--border-subtle);\n width: fit-content;\n }\n\n /* Noise overlay */\n .noise {\n position: fixed;\n inset: 0;\n opacity: 0.025;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\");\n pointer-events: none;\n z-index: 1;\n }\n\n /* Responsive */\n @media (max-width: 1024px) {\n .header, .hero, .stats-bar, .main-content { padding-left: 32px; padding-right: 32px; }\n .cards-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }\n }\n\n @media (max-width: 768px) {\n .header, .hero, .stats-bar, .main-content { padding-left: 20px; padding-right: 20px; }\n .header-meta { display: none; }\n .stats-bar { flex-wrap: wrap; gap: 12px; }\n .cards-grid { grid-template-columns: repeat(2, 1fr); }\n .hero-title { font-size: 26px; }\n }\n\n @media (max-width: 480px) {\n .cards-grid { grid-template-columns: 1fr; }\n }\n\n /* Scan line animation on header */\n .scan-line {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(255,140,0,0.6), transparent);\n animation: scan 4s linear infinite;\n z-index: 100;\n pointer-events: none;\n }\n\n @keyframes scan {\n 0% { top: 0; opacity: 1; }\n 95% { opacity: 0.3; }\n 100% { top: 100vh; opacity: 0; }\n }\n </style>\n</head>\n<body>\n\n <div class=\"grid-bg\"></div>\n <div class=\"radial-glow\"></div>\n <div class=\"radial-glow-2\"></div>\n <div class=\"noise\"></div>\n <div class=\"scan-line\"></div>\n\n \n <header class=\"header\">\n <div class=\"header-inner\">\n <div class=\"logo-area\">\n <div class=\"logo-icon\">\n <i class=\"fa-solid fa-building-columns\"></i>\n </div>\n <div class=\"logo-text\">\n <div class=\"logo-title\">工程管理综合平台</div>\n <div class=\"logo-subtitle\">ENGINEERING MANAGEMENT SYSTEM</div>\n </div>\n </div>\n <div class=\"header-meta\">\n <div class=\"status-dot\">\n <div class=\"dot-live\"></div>\n <span>系统运行正常</span>\n </div>\n <div style=\"font-family:'Rajdhani',sans-serif; font-size:13px; color:var(--text-muted); letter-spacing:1px;\" id=\"clock\"></div>\n </div>\n </div>\n </header>\n\n \n <section class=\"hero\">\n <div class=\"hero-label\">SYSTEM PORTAL</div>\n <h1 class=\"hero-title\">子系统<span>导航中心</span></h1>\n <p class=\"hero-desc\">统一接入安全、质量、环保、应急四大管理领域，快速进入各业务子系统</p>\n </section>\n\n \n <div class=\"stats-bar\">\n <div class=\"stat-item\">\n <div class=\"stat-icon\" style=\"color:var(--accent-orange)\"><i class=\"fa-solid fa-shield-halved\"></i></div>\n <div>\n <div class=\"stat-num\" style=\"color:var(--accent-orange)\">7</div>\n <div class=\"stat-label\">安全管理系统</div>\n </div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-icon\" style=\"color:var(--accent-blue)\"><i class=\"fa-solid fa-circle-check\"></i></div>\n <div>\n <div class=\"stat-num\" style=\"color:var(--accent-blue)\">7</div>\n <div class=\"stat-label\">质量管理系统</div>\n </div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-icon\" style=\"color:var(--accent-green)\"><i class=\"fa-solid fa-leaf\"></i></div>\n <div>\n <div class=\"stat-num\" style=\"color:var(--accent-green)\">1</div>\n <div class=\"stat-label\">环保管理系统</div>\n </div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-icon\" style=\"color:var(--accent-red)\"><i class=\"fa-solid fa-triangle-exclamation\"></i></div>\n <div>\n <div class=\"stat-num\" style=\"color:var(--accent-red)\">1</div>\n <div class=\"stat-label\">应急管理系统</div>\n </div>\n </div>\n </div>\n\n \n <main class=\"main-content\">\n\n \n <div class=\"category-section cat-safety\">\n <div class=\"category-header\">\n <div class=\"category-icon-wrap\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n </div>\n <div class=\"category-name\">安全管理</div>\n <div class=\"category-line\"></div>\n <div class=\"category-count\">07 SYSTEMS</div>\n </div>\n <div class=\"cards-grid\">\n <a href=\"#\" class=\"sys-card\">\n <div class=\"card-top\">\n <div class=\"card-icon\"><i class=\"fa-solid fa-eye\"></i></div>\n <div class=\"card-arrow\"><i class=\"fa-solid fa-arrow-right\"></i></div>\n </div>\n <div class=\"card-name\">安全监管平台</div>\n <div class=\"card-tag\"><i class=\"fa-solid fa-circle\" style=\"font-size:6px\"></i> SAFETY</div>\n </a>\n <a href=\"#\" class=\"sys-card\">\n <div class=\"card-top\">\n <div class=\"card-icon\"><i class=\"fa-solid fa-star-of-life\"></i></div>\n <div class=\"card-arrow\"><i class=\"fa-solid fa-arrow-right\"></i></div>\n </div>\n <div class=\"card-name\">平安中交评审系统</div>\n <div class=\"card-tag\"><i class=\"fa-solid fa-circle\" style=\"font-size:6px\"></i> REVIEW</div>\n </a>\n <a href=\"#\" class=\"sys-card\">\n <div class=\"card-top\">\n <div class=\"card-icon\"><i class=\"fa-solid fa-mountain\"></i></div>\n <div class=\"card-arrow\"><i class=\"fa-solid fa-arrow-right\"></i></div>\n </div>\n <div class=\"card-name\">隧道安全监控系统</div>\n <div class=\"card-tag\"><i class=\"fa-solid fa-circle\" style=\"font-size:6px\"></i> TUNNEL</div>\n </a>\n <a href=\"#\" class=\"sys-card\">\n <div class=\"card-top\">\n <div class=\"card-icon\"><i class=\"fa-solid fa-gear\"></i></div>\n <div class=\"card-arrow\"><i class=\"fa-solid fa-arrow-right\"></i></div>\n </div>\n <div class=\"card-name\">盾构监控系统</div>\n <div class=\"card-tag\"><i class=\"fa-solid fa-circle\" style=\"font-size:6px\"></i> SHIELD</div>\n </a>\n <a href=\"#\" class=\"sys-card\">\n <div class=\"card-top\">\n <div class=\"card-icon\"><i class=\"fa-solid fa-ship\"></i></div>\n <div class=\"card-arrow\"><i class=\"fa-solid fa-arrow-right\"></i></div>\n </div>\n <div class=\"card-name\">船舶安全监控系统</div>\n <div class=\"card-tag\"><i class=\"fa-solid fa-circle\" style=\"font-size:6px\"></i> VESSEL</div>\n </a>\n <a href=\"#\" class=\"sys-card\">\n <div class=\"card-top\">\n <div class=\"card-icon\"><i class=\"fa-solid fa-bridge\"></i></div>\n <div class=\"card-arrow\"><i class=\"fa-solid fa-arrow-right\"></i></div>\n </div>\n <div class=\"card-name\">桥梁施工安全监控系统</div>\n <div class=\"card-tag\"><i class=\"fa-solid fa-circle\" style=\"font-size:6px\"></i> BRIDGE</div>\n </a>\n <a href=\"#\" class=\"sys-card\">\n <div class=\"card-top\">\n <div class=\"card-icon\"><i class=\"fa-solid fa-gauge-high\"></i></div>\n <div class=\"card-arrow\"><i class=\"fa-solid fa-arrow-right\"></i></div>\n </div>\n <div class=\"card-name\">特种设备运行风险监控系统</div>\n <div class=\"card-tag\"><i class=\"fa-solid fa-circle\" style=\"font-size:6px\"></i> SPECIAL</div>\n </a>\n </div>\n </div>\n\n \n <div class=\"category-section cat-quality\">\n <div class=\"category-header\">\n <div class=\"category-icon-wrap\">\n <i class=\"fa-solid fa-circle-check\"></i>\n </div>\n <div class=\"category-name\">质量管理</div>\n <div class=\"category-line\"></div>\n <div class=\"category-count\">07 SYSTEMS</div>\n </div>\n <div class=\"cards-grid\">\n <a href=\"#\" class=\"sys-card\">\n <div class=\"card-top\">\n <div class=\"card-icon\"><i class=\"fa-solid fa-clipboard-check\"></i></div>\n <div class=\"card-arrow\"><i class=\"fa-solid fa-arrow-

total_tokens

17799

summary

设计了一个工程管理系统导航门户页面，采用深色工业风格（深蓝灰主色 + 橙色点缀），体现工程建设的专业感与力量感。四大子系统（安全、质量、环保、应急）以分组卡片形式呈现，每个子系统入口配有独特图标和悬停动效。背景使用几何网格纹理增加层次感，整体布局采用非对称分组设计，视觉重心清晰。

uiParsing

关闭