404 lines
17 KiB
HTML
404 lines
17 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>方案 D · 顶栏 Mega + Bento 工作台 — 中科兴皖</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
<style>
|
|
:root {
|
|
--primary: #10b981;
|
|
--primary-dark: #059669;
|
|
--primary-bg: #ecfdf5;
|
|
--text: #1e293b;
|
|
--text-muted: #64748b;
|
|
--border: #d9e8e2;
|
|
--surface: #ffffff;
|
|
--bg-page: #f0f9ff;
|
|
--radius: 12px;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: Inter, -apple-system, sans-serif;
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
background: linear-gradient(180deg, #f0f9ff 0%, #f8fafc 40%, #ecfdf5 100%);
|
|
}
|
|
|
|
/* 顶栏 */
|
|
.topbar {
|
|
height: 56px;
|
|
padding: 0 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 32px;
|
|
background: rgba(255,255,255,0.85);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
}
|
|
.logo {
|
|
display: flex; align-items: center; gap: 8px;
|
|
font-weight: 700; font-size: 15px;
|
|
flex-shrink: 0;
|
|
}
|
|
.logo-mark {
|
|
width: 28px; height: 28px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, var(--primary), #0ea5e9);
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.logo span { color: var(--primary); }
|
|
|
|
.mega-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
|
|
.mega-item {
|
|
position: relative;
|
|
padding: 8px 14px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.mega-item:hover, .mega-item.active {
|
|
background: var(--primary-bg);
|
|
color: var(--primary-dark);
|
|
}
|
|
.mega-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 8px);
|
|
left: 0;
|
|
min-width: 480px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 12px 40px rgba(15,23,42,0.1);
|
|
padding: 16px;
|
|
display: none;
|
|
z-index: 100;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
.mega-item:hover .mega-dropdown { display: grid; }
|
|
.mega-link {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
transition: background 0.1s;
|
|
}
|
|
.mega-link:hover { background: var(--primary-bg); color: var(--primary-dark); }
|
|
.mega-link-icon {
|
|
width: 32px; height: 32px;
|
|
border-radius: 8px;
|
|
background: #f1f5f9;
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
.mega-link:hover .mega-link-icon { background: var(--primary-bg); color: var(--primary); }
|
|
|
|
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
|
|
.search-pill {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 6px 14px;
|
|
border-radius: 999px;
|
|
background: #f8fafc;
|
|
border: 1px solid var(--border);
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
}
|
|
.avatar {
|
|
width: 32px; height: 32px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--primary), #0ea5e9);
|
|
}
|
|
|
|
.content { padding: 28px 24px 48px; max-width: 1280px; margin: 0 auto; }
|
|
|
|
/* Bento 工作台 */
|
|
.welcome {
|
|
margin-bottom: 24px;
|
|
}
|
|
.welcome h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
|
|
.welcome p { margin: 0; color: var(--text-muted); }
|
|
|
|
.bento {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-auto-rows: minmax(120px, auto);
|
|
gap: 16px;
|
|
}
|
|
.bento-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 20px;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.bento-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(16,185,129,0.08);
|
|
}
|
|
.bento-card.span-4 { grid-column: span 4; }
|
|
.bento-card.span-3 { grid-column: span 3; }
|
|
.bento-card.span-6 { grid-column: span 6; }
|
|
.bento-card.span-8 { grid-column: span 8; }
|
|
.bento-card.span-12 { grid-column: span 12; }
|
|
@media (max-width: 1000px) {
|
|
.bento-card.span-4, .bento-card.span-3, .bento-card.span-6, .bento-card.span-8 { grid-column: span 12; }
|
|
}
|
|
|
|
.bento-card.hero-card {
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e3a2f 100%);
|
|
color: #f8fafc;
|
|
border: none;
|
|
}
|
|
.bento-card.hero-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -50%; right: -20%;
|
|
width: 200px; height: 200px;
|
|
background: radial-gradient(circle, rgba(16,185,129,0.3), transparent);
|
|
border-radius: 50%;
|
|
}
|
|
.hero-card h3 { margin: 0 0 8px; font-size: 16px; position: relative; }
|
|
.hero-card .stat { font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 600; color: #6ee7b7; position: relative; }
|
|
.hero-card p { margin: 8px 0 0; font-size: 13px; color: #94a3b8; position: relative; }
|
|
|
|
.card-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
display: flex; align-items: center; gap: 6px;
|
|
}
|
|
.card-label .dot {
|
|
width: 6px; height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
.card-value { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 600; }
|
|
.card-list { list-style: none; margin: 0; padding: 0; }
|
|
.card-list li {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 13px;
|
|
}
|
|
.card-list li:last-child { border-bottom: none; }
|
|
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
|
.tag.warning { background: #fffbeb; color: #d97706; }
|
|
.tag.success { background: var(--primary-bg); color: var(--primary-dark); }
|
|
|
|
.quick-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
}
|
|
.quick-item {
|
|
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
padding: 16px 8px;
|
|
border-radius: 10px;
|
|
background: #f8fafc;
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
text-decoration: none;
|
|
color: var(--text);
|
|
}
|
|
.quick-item:hover {
|
|
background: var(--primary-bg);
|
|
border-color: rgba(16,185,129,0.3);
|
|
color: var(--primary-dark);
|
|
}
|
|
.quick-item svg { color: var(--primary); }
|
|
|
|
.chart-placeholder {
|
|
height: 80px;
|
|
display: flex; align-items: flex-end; gap: 6px;
|
|
padding-top: 12px;
|
|
}
|
|
.chart-bar {
|
|
flex: 1;
|
|
background: linear-gradient(180deg, var(--primary), rgba(16,185,129,0.3));
|
|
border-radius: 4px 4px 0 0;
|
|
min-height: 20px;
|
|
}
|
|
|
|
.scheme-badge {
|
|
position: fixed; bottom: 16px; right: 16px;
|
|
padding: 8px 14px;
|
|
background: rgba(15,23,42,0.85);
|
|
color: #94a3b8;
|
|
border-radius: 8px;
|
|
font-size: 12px; z-index: 100;
|
|
}
|
|
.scheme-badge a { color: #6ee7b7; text-decoration: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="logo">
|
|
<div class="logo-mark">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/></svg>
|
|
</div>
|
|
中科兴皖<span>一体化</span>
|
|
</div>
|
|
|
|
<nav class="mega-nav">
|
|
<div class="mega-item active">
|
|
工作台
|
|
</div>
|
|
<div class="mega-item">
|
|
细胞存储
|
|
<div class="mega-dropdown">
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg></div>采集协议单</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>样本信息管理</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/></svg></div>入库放行审核</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20"/></svg></div>缴费信息</a>
|
|
</div>
|
|
</div>
|
|
<div class="mega-item">
|
|
质检管理
|
|
<div class="mega-dropdown">
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg></div>样本接收</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/></svg></div>质检工单</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>环境检测管理</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/></svg></div>质检任务</a>
|
|
</div>
|
|
</div>
|
|
<div class="mega-item">
|
|
生产管理
|
|
<div class="mega-dropdown">
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/></svg></div>生产工单</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8"/></svg></div>库位管理</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12"/></svg></div>SOP文档</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg></div>工艺库管理</a>
|
|
</div>
|
|
</div>
|
|
<div class="mega-item">
|
|
市场 · 系统
|
|
<div class="mega-dropdown">
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/></svg></div>客户管理</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4"/></svg></div>用户管理</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg></div>角色管理</a>
|
|
<a class="mega-link" href="#"><div class="mega-link-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></div>租户管理</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="topbar-right">
|
|
<div class="search-pill">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
搜索
|
|
<kbd style="font-size:11px;padding:1px 5px;border-radius:4px;background:#e2e8f0;border:1px solid var(--border)">⌘K</kbd>
|
|
</div>
|
|
<div class="avatar"></div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<div class="welcome">
|
|
<h1>工作台</h1>
|
|
<p>顶部 Mega 菜单按业务域分组，侧栏彻底移除；首页 Bento 宫格聚合待办与快捷入口</p>
|
|
</div>
|
|
|
|
<div class="bento">
|
|
<div class="bento-card hero-card span-4">
|
|
<h3>今日待办</h3>
|
|
<div class="stat">18</div>
|
|
<p>质检 6 · 生产 5 · 财务 4 · 其他 3</p>
|
|
</div>
|
|
<div class="bento-card span-4">
|
|
<div class="card-label"><span class="dot"></span> 进行中工单</div>
|
|
<div class="card-value">12</div>
|
|
<div class="chart-placeholder">
|
|
<div class="chart-bar" style="height:45%"></div>
|
|
<div class="chart-bar" style="height:70%"></div>
|
|
<div class="chart-bar" style="height:55%"></div>
|
|
<div class="chart-bar" style="height:90%"></div>
|
|
<div class="chart-bar" style="height:60%"></div>
|
|
<div class="chart-bar" style="height:75%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bento-card span-4">
|
|
<div class="card-label">本月完成率</div>
|
|
<div class="card-value" style="color:var(--primary-dark)">96.8%</div>
|
|
<p style="margin:8px 0 0;font-size:13px;color:var(--text-muted)">较上月 ↑ 2.1%</p>
|
|
</div>
|
|
|
|
<div class="bento-card span-8">
|
|
<div class="card-label">待处理事项</div>
|
|
<ul class="card-list">
|
|
<li><span>质检工单 QC-2026-0312 待复核</span><span class="tag warning">进行中</span></li>
|
|
<li><span>入库放行审核 — 样本 SMP-A10284</span><span class="tag warning">待审核</span></li>
|
|
<li><span>生产工单 PRD-0089 耗材申领</span><span class="tag success">正常</span></li>
|
|
<li><span>缴退费财务确认 — 协议 CP-2026-0156</span><span class="tag warning">待确认</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="bento-card span-4">
|
|
<div class="card-label">系统状态</div>
|
|
<ul class="card-list">
|
|
<li><span>API 服务</span><span class="tag success">正常</span></li>
|
|
<li><span>数据库</span><span class="tag success">正常</span></li>
|
|
<li><span>对象存储</span><span class="tag success">正常</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bento-card span-12">
|
|
<div class="card-label">快捷入口</div>
|
|
<div class="quick-grid">
|
|
<a class="quick-item" href="#">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
|
|
新增质检工单
|
|
</a>
|
|
<a class="quick-item" href="#">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>
|
|
样本接收
|
|
</a>
|
|
<a class="quick-item" href="#">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/></svg>
|
|
生产工单
|
|
</a>
|
|
<a class="quick-item" href="#">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/></svg>
|
|
客户管理
|
|
</a>
|
|
<a class="quick-item" href="#">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/></svg>
|
|
入库放行
|
|
</a>
|
|
<a class="quick-item" href="#">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12"/></svg>
|
|
采集协议单
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="scheme-badge" style="display:flex;align-items:center;gap:10px">
|
|
方案 D · 薄荷绿
|
|
<a href="scheme-d-top-mega-bento-tech-blue.html" style="color:#6ee7b7;text-decoration:none;padding:4px 10px;border-radius:6px;background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.3);font-size:11px;font-weight:600">切换科技蓝版</a>
|
|
<a href="index.html" style="color:#6ee7b7;text-decoration:none">返回对比</a>
|
|
</div>
|
|
</body>
|
|
</html>
|