244 lines
12 KiB
HTML
244 lines
12 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>FMS 布局 Demo v3 - 一体化平面</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
fms: {
|
||
bg: 'var(--fms-bg)',
|
||
card: 'var(--fms-card)',
|
||
sidebar: 'var(--fms-sidebar)',
|
||
secondary: 'var(--fms-secondary)',
|
||
'secondary-hover': 'var(--fms-secondary-hover)',
|
||
border: 'var(--fms-border)',
|
||
text: 'var(--fms-text)',
|
||
'text-secondary': 'var(--fms-text-secondary)',
|
||
primary: 'var(--fms-primary)',
|
||
'primary-text': 'var(--fms-primary-text)',
|
||
},
|
||
},
|
||
boxShadow: {
|
||
card: 'var(--fms-shadow)',
|
||
pop: '0 4px 16px rgba(0,0,0,0.08)',
|
||
},
|
||
borderRadius: {
|
||
card: '12px',
|
||
control: '8px',
|
||
},
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
:root {
|
||
--fms-bg: #f4f4f5;
|
||
--fms-card: #ffffff;
|
||
--fms-sidebar: #f4f4f5;
|
||
--fms-secondary: #f4f4f5;
|
||
--fms-secondary-hover: #e9e9ec;
|
||
--fms-border: #e4e4e7;
|
||
--fms-text: #18181b;
|
||
--fms-text-secondary: #71717a;
|
||
--fms-primary: #2563eb;
|
||
--fms-primary-text: #ffffff;
|
||
--fms-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
}
|
||
.dark {
|
||
--fms-bg: #09090b;
|
||
--fms-card: #18181b;
|
||
--fms-sidebar: #131316;
|
||
--fms-secondary: #27272a;
|
||
--fms-secondary-hover: #3f3f46;
|
||
--fms-border: #3f3f46;
|
||
--fms-text: #fafafa;
|
||
--fms-text-secondary: #a1a1aa;
|
||
--fms-primary: #3b82f6;
|
||
--fms-primary-text: #ffffff;
|
||
--fms-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* 侧栏菜单项 */
|
||
.nav-item {
|
||
display: flex; align-items: center; gap: 10px;
|
||
height: 34px; padding: 0 10px;
|
||
border-radius: 8px; color: var(--fms-text-secondary);
|
||
font-size: 13.5px; cursor: pointer; transition: background .15s;
|
||
}
|
||
.nav-item:hover { background: var(--fms-secondary-hover); color: var(--fms-text); }
|
||
.nav-item.active { background: var(--fms-card); color: var(--fms-text); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
|
||
|
||
/* 胶囊式页签：圆角块，无边框；激活项浅底+主色，不靠分割线 */
|
||
.pill {
|
||
display: inline-flex; align-items: center;
|
||
height: 28px; padding: 0 10px;
|
||
border-radius: 7px;
|
||
font-size: 13px; color: var(--fms-text-secondary);
|
||
cursor: pointer; white-space: nowrap;
|
||
transition: background .15s, color .15s;
|
||
}
|
||
.pill:hover { background: var(--fms-secondary); color: var(--fms-text); }
|
||
.pill.active { background: var(--fms-secondary); color: var(--fms-primary); font-weight: 500; }
|
||
.pill .x { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; margin-left: 6px; margin-right: -4px; color: var(--fms-text-secondary); }
|
||
.pill .x:hover { background: var(--fms-secondary-hover); color: var(--fms-text); }
|
||
|
||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||
</style>
|
||
</head>
|
||
<body class="text-fms-text antialiased">
|
||
<div class="flex h-screen overflow-hidden">
|
||
|
||
<!-- ===== 侧栏：灰底，无色差边框 ===== -->
|
||
<aside class="flex w-[220px] shrink-0 flex-col bg-fms-sidebar">
|
||
<!-- 团队 -->
|
||
<div class="flex items-center gap-2 px-3 py-3">
|
||
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-[10px] bg-fms-primary text-[15px] font-bold text-fms-primary-text">F</div>
|
||
<div class="min-w-0 flex-1">
|
||
<div class="truncate text-[14px] font-semibold leading-5">财务管理系统</div>
|
||
<div class="text-xs text-fms-text-secondary leading-4">企业版</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 菜单 -->
|
||
<div class="flex-1 overflow-y-auto px-2 pb-3 pt-1 space-y-0.5">
|
||
<div class="px-2 pb-1 pt-2 text-[11px] font-medium uppercase tracking-wider text-fms-text-secondary/70">工作台</div>
|
||
<div class="nav-item active">🏠 工作台</div>
|
||
|
||
<div class="px-2 pb-1 pt-3 text-[11px] font-medium uppercase tracking-wider text-fms-text-secondary/70">业务</div>
|
||
<div class="nav-item">📄 订单管理</div>
|
||
<div class="nav-item">👥 客户管理</div>
|
||
<div class="nav-item">💰 应收账款</div>
|
||
<div class="nav-item">📦 库存管理</div>
|
||
|
||
<div class="px-2 pb-1 pt-3 text-[11px] font-medium uppercase tracking-wider text-fms-text-secondary/70">系统</div>
|
||
<div class="nav-item">⚙️ 系统设置</div>
|
||
<div class="nav-item">🔐 权限管理</div>
|
||
</div>
|
||
|
||
<!-- 底部用户 -->
|
||
<div class="border-t border-fms-border px-3 py-3">
|
||
<div class="flex items-center gap-2 rounded-control px-1.5 py-1 hover:bg-fms-secondary-hover cursor-pointer">
|
||
<span class="flex h-8 w-8 items-center justify-center rounded-lg bg-fms-primary/15 text-sm font-semibold text-fms-primary">张</span>
|
||
<div class="min-w-0 flex-1 leading-tight">
|
||
<div class="truncate text-[13px] font-medium">张三</div>
|
||
<div class="truncate text-xs text-fms-text-secondary">admin@fms.com</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ===== 主区：一整块平面，无卡片、无边框 ===== -->
|
||
<div class="flex min-w-0 flex-1 flex-col bg-fms-card">
|
||
|
||
<!-- topbar：白底通栏，无底边框（与 tabs 一体） -->
|
||
<header class="flex h-12 shrink-0 items-center gap-2 px-3">
|
||
<button class="flex h-8 w-8 items-center justify-center rounded-control text-fms-text-secondary hover:bg-fms-secondary hover:text-fms-text">☰</button>
|
||
<span class="ml-1 text-[13px] text-fms-text-secondary">财务管理系统</span>
|
||
<div class="ml-auto flex items-center gap-0.5">
|
||
<button class="flex h-8 w-8 items-center justify-center rounded-control text-fms-text-secondary hover:bg-fms-secondary hover:text-fms-text" title="语言">🌐</button>
|
||
<button class="flex h-8 w-8 items-center justify-center rounded-control text-fms-text-secondary hover:bg-fms-secondary hover:text-fms-text" title="主题">🎨</button>
|
||
<button class="flex h-8 w-8 items-center justify-center rounded-control text-fms-text-secondary hover:bg-fms-secondary hover:text-fms-text" title="深浅色">◐</button>
|
||
<button class="flex h-8 w-8 items-center justify-center rounded-control text-fms-text-secondary hover:bg-fms-secondary hover:text-fms-text" title="通知">🔔</button>
|
||
<span class="mx-2 h-4 w-px bg-fms-border"></span>
|
||
<button class="flex items-center gap-2 rounded-control px-1.5 py-1 hover:bg-fms-secondary-hover">
|
||
<span class="flex h-7 w-7 items-center justify-center rounded-lg bg-fms-primary/15 text-sm font-semibold text-fms-primary">张</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- tabs：胶囊式，白底一体，无边框；激活项浅灰底+主色字 -->
|
||
<div class="flex h-11 shrink-0 items-center gap-1.5 px-3">
|
||
<div class="no-scrollbar flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
|
||
<span class="pill active">工作台</span>
|
||
<span class="pill">订单管理 <span class="x">×</span></span>
|
||
<span class="pill">客户列表 <span class="x">×</span></span>
|
||
<span class="pill">财务报表 <span class="x">×</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- content：直接铺开 -->
|
||
<main class="flex-1 overflow-y-auto px-6 py-5">
|
||
<!-- 页面标题 -->
|
||
<div class="flex items-center justify-between">
|
||
<h1 class="text-lg font-semibold">工作台</h1>
|
||
<div class="flex items-center gap-2">
|
||
<button class="flex h-8 items-center gap-1.5 rounded-control bg-fms-secondary px-3 text-[13px] hover:bg-fms-secondary-hover">📥 导出</button>
|
||
<button class="flex h-8 items-center gap-1.5 rounded-control bg-fms-primary px-3 text-[13px] font-medium text-fms-primary-text hover:opacity-90">＋ 新建</button>
|
||
</div>
|
||
</div>
|
||
<p class="mt-1 text-[13px] text-fms-text-secondary">早上好，张三。以下是最新的业务概览。</p>
|
||
|
||
<!-- 统计（内容自身的轻卡片，无边框） -->
|
||
<div class="mt-5 grid grid-cols-2 gap-3 md:grid-cols-4">
|
||
<div class="rounded-card bg-fms-secondary p-4">
|
||
<div class="text-xs text-fms-text-secondary">本月订单</div>
|
||
<div class="mt-1.5 text-2xl font-semibold">1,286</div>
|
||
<div class="mt-1 text-xs text-emerald-600">↑ 12.4%</div>
|
||
</div>
|
||
<div class="rounded-card bg-fms-secondary p-4">
|
||
<div class="text-xs text-fms-text-secondary">待审批</div>
|
||
<div class="mt-1.5 text-2xl font-semibold">23</div>
|
||
<div class="mt-1 text-xs text-amber-600">需处理</div>
|
||
</div>
|
||
<div class="rounded-card bg-fms-secondary p-4">
|
||
<div class="text-xs text-fms-text-secondary">本月回款</div>
|
||
<div class="mt-1.5 text-2xl font-semibold">¥86.5万</div>
|
||
<div class="mt-1 text-xs text-emerald-600">↑ 8.2%</div>
|
||
</div>
|
||
<div class="rounded-card bg-fms-secondary p-4">
|
||
<div class="text-xs text-fms-text-secondary">逾期应收</div>
|
||
<div class="mt-1.5 text-2xl font-semibold">¥12.3万</div>
|
||
<div class="mt-1 text-xs text-red-600">↓ 关注</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 简单表格（内容行线，非布局分割） -->
|
||
<div class="mt-6">
|
||
<div class="text-[14px] font-medium">最近订单</div>
|
||
<table class="mt-3 w-full text-left text-[13px]">
|
||
<thead>
|
||
<tr class="text-xs text-fms-text-secondary border-b border-fms-border">
|
||
<th class="py-2 pr-3 font-medium">订单号</th>
|
||
<th class="py-2 pr-3 font-medium">客户</th>
|
||
<th class="py-2 pr-3 font-medium">金额</th>
|
||
<th class="py-2 pr-3 font-medium">状态</th>
|
||
<th class="py-2 font-medium">日期</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="text-fms-text">
|
||
<tr class="border-b border-fms-border/60 hover:bg-fms-secondary/50">
|
||
<td class="py-2.5 pr-3">SO-2026-0812-01</td>
|
||
<td class="py-2.5 pr-3">华信科技</td>
|
||
<td class="py-2.5 pr-3">¥12,800</td>
|
||
<td class="py-2.5 pr-3"><span class="rounded-md bg-emerald-500/10 px-2 py-0.5 text-xs text-emerald-600">已完成</span></td>
|
||
<td class="py-2.5">2026-08-12</td>
|
||
</tr>
|
||
<tr class="border-b border-fms-border/60 hover:bg-fms-secondary/50">
|
||
<td class="py-2.5 pr-3">SO-2026-0811-03</td>
|
||
<td class="py-2.5 pr-3">远大集团</td>
|
||
<td class="py-2.5 pr-3">¥8,450</td>
|
||
<td class="py-2.5 pr-3"><span class="rounded-md bg-blue-500/10 px-2 py-0.5 text-xs text-blue-600">审批中</span></td>
|
||
<td class="py-2.5">2026-08-11</td>
|
||
</tr>
|
||
<tr class="border-b border-fms-border/60 hover:bg-fms-secondary/50">
|
||
<td class="py-2.5 pr-3">SO-2026-0810-07</td>
|
||
<td class="py-2.5 pr-3">启明电子</td>
|
||
<td class="py-2.5 pr-3">¥32,100</td>
|
||
<td class="py-2.5 pr-3"><span class="rounded-md bg-amber-500/10 px-2 py-0.5 text-xs text-amber-600">待付款</span></td>
|
||
<td class="py-2.5">2026-08-10</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|