明亮日间风格系统导航页面设计：白色基调搭配彩色顶边高亮

By 15547946974, 14 April, 2026

角色

assistant

content

```json{
"summary": "创建明亮日间风格的系统入口导航页面，采用白色主基调搭配浅灰背景，卡片设计为白色带细边框和柔和阴影，悬停时实现轻微上浮和彩色顶边高亮效果。使用 Noto Sans SC 和 Poppins 字体搭配，四个系统分类分别使用蓝、绿、青、橙四种彩色顶边高亮，整体呈现专业、通透、易读的视觉体验。",
"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+Sans+SC:wght@300;400;500;…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <style>\n :root {\n --color-safety: #3b82f6;\n --color-quality: #10b981;\n --color-environment: #06b6d4;\n --color-emergency: #f59e0b;\n }\n \n * {\n font-family: 'Noto Sans SC', 'Poppins', sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n min-height: 100vh;\n }\n \n .nav-card {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n }\n \n .nav-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: var(--card-color);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n .nav-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 6px 10px rgba(0, 0, 0, 0.04);\n }\n \n .nav-card:hover::before {\n transform: scaleX(1);\n }\n \n .nav-card:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 10px 25px rgba(0, 0, 0, 0.08);\n }\n \n .category-icon {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n }\n \n .safety .category-icon { background: rgba(59, 130, 246, 0.1); color: var(--color-safety); }\n .quality .category-icon { background: rgba(16, 185, 129, 0.1); color: var(--color-quality); }\n .environment .category-icon { background: rgba(6, 182, 212, 0.1); color: var(--color-environment); }\n .emergency .category-icon { background: rgba(245, 158, 11, 0.1); color: var(--color-emergency); }\n \n .safety .nav-card { --card-color: var(--color-safety); }\n .quality .nav-card { --card-color: var(--color-quality); }\n .environment .nav-card { --card-color: var(--color-environment); }\n .emergency .nav-card { --card-color: var(--color-emergency); }\n \n .category-header {\n position: relative;\n padding-left: 16px;\n }\n \n .category-header::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 4px;\n height: 24px;\n border-radius: 2px;\n }\n \n .safety .category-header::before { background: var(--color-safety); }\n .quality .category-header::before { background: var(--color-quality); }\n .environment .category-header::before { background: var(--color-environment); }\n .emergency .category-header::before { background: var(--color-emergency); }\n \n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n .animate-fade-in-up {\n animation: fadeInUp 0.5s ease-out forwards;\n }\n \n .delay-100 { animation-delay: 0.1s; }\n .delay-200 { animation-delay: 0.2s; }\n .delay-300 { animation-delay: 0.3s; }\n .delay-400 { animation-delay: 0.4s; }\n </style>\n</head>\n<body class=\"p-6 md:p-10 lg:p-12\">\n <div class=\"max-w-7xl mx-auto\">\n \n <header class=\"mb-10 md:mb-12 animate-fade-in-up\">\n <h1 class=\"text-3xl md:text-4xl font-semibold text-gray-800 mb-2\">系统入口导航</h1>\n <p class=\"text-gray-500 text-base md:text-lg\">选择您需要访问的系统</p>\n </header>\n \n \n <section class=\"mb-10 safety animate-fade-in-up delay-100\">\n <h2 class=\"text-xl font-semibold text-gray-700 mb-5 category-header\">安全管理</h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4\">\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-shield-alt\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">安全监管平台</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-clipboard-check\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">平安中交评审系统</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-road\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">隧道安全监控系统</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-cogs\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">盾构监控系统</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-ship\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">船舶安全监控系统</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-bridge\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">桥梁施工安全监控系统</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-exclamation-triangle\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">特种设备运行风险监控系统</h3>\n </div>\n </div>\n </a>\n </div>\n </section>\n \n \n <section class=\"mb-10 quality animate-fade-in-up delay-200\">\n <h2 class=\"text-xl font-semibold text-gray-700 mb-5 category-header\">质量管理</h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4\">\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-tasks\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">工程质量监督管理系统</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-trophy\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">质量创优管理系统</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-check-double\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">工序质量检验控制信息系统</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-chart-line\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">质量监控中心</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-cube\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">水泥混凝土质量监控分中心</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-road\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">沥青路面质量监控分中心</h3>\n </div>\n </div>\n </a>\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-flask\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">试验检测监控分中心</h3>\n </div>\n </div>\n </a>\n </div>\n </section>\n \n \n <section class=\"mb-10 environment animate-fade-in-up delay-300\">\n <h2 class=\"text-xl font-semibold text-gray-700 mb-5 category-header\">环保管理</h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4\">\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-leaf\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">节能环保信息统计报送管理系统</h3>\n </div>\n </div>\n </a>\n </div>\n </section>\n \n \n <section class=\"mb-10 emergency animate-fade-in-up delay-400\">\n <h2 class=\"text-xl font-semibold text-gray-700 mb-5 category-header\">应急管理</h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4\">\n <a href=\"#\" class=\"nav-card p-5 cursor-pointer\" tabindex=\"0\">\n <div class=\"flex items-center gap-4\">\n <div class=\"category-icon\">\n <i class=\"fas fa-bell\"></i>\n </div>\n <div>\n <h3 class=\"font-medium text-gray-800 text-base\">应急管理平台</h3>\n </div>\n </div>\n </a>\n </div>\n </section>\n </div>\n</body>\n</html>"
},
"next": ["深色主题", "图标优化", "搜索功能", "快捷入口", "数据统计"],
"breakpoint": "none"
}
```

total_tokens

8477

summary

创建明亮日间风格的系统入口导航页面，采用白色主基调搭配浅灰背景，卡片设计为白色带细边框和柔和阴影，悬停时实现轻微上浮和彩色顶边高亮效果。使用 Noto Sans SC 和 Poppins 字体搭配，四个系统分类分别使用蓝、绿、青、橙四种彩色顶边高亮，整体呈现专业、通透、易读的视觉体验。

uiParsing

关闭