feat: OPC 社区运营公共服务平台 Demo v1.3
一人公司/超级个体产业社区公共服务基础设施 Demo，包含： - 18 个角色页面（运营商/OPC/企业/个人/学员/培训机构/服务机构/政府/审计/金融） - 暖橙活力主题 UI（渐变毛玻璃 + 暖色侧栏） - 五步运营闭环（选方向→育人才→建平台→立SOP→聚产业） - 华强北硬件供应链接入 - 蜂群式交付 + 产业集聚效应展示 - 需求文档（REQ-001~118 全覆盖） Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Devin
@@ -0,0 +1,215 @@
|
||||
/**
|
||||
* OPC 公共服务平台 Demo —— 角色登录态与权限导航
|
||||
* 静态演示：角色存 localStorage，无真实后端鉴权。
|
||||
*/
|
||||
|
||||
const ROLES = {
|
||||
operator: { name: '社区运营商', home: 'operator.html' },
|
||||
opc: { name: 'OPC/一人公司', home: 'opc.html' },
|
||||
learner: { name: '培训学员', home: 'training.html' },
|
||||
enterprise: { name: '企业客户', home: 'enterprise.html' },
|
||||
personal: { name: '个人客户', home: 'enterprise.html' },
|
||||
trainer: { name: '培训机构/导师', home: 'institution.html' },
|
||||
service: { name: '服务机构', home: 'service.html' },
|
||||
gov: { name: '政府主管部门', home: 'government.html' },
|
||||
auditor: { name: '审计/评估机构', home: 'audit.html' },
|
||||
finance: { name: '金融/园区/平台方', home: 'policy.html' },
|
||||
};
|
||||
|
||||
/** 导航菜单：roles 为 '*' 表示所有角色可见；group 用于侧边栏分组 */
|
||||
const MENUS = [
|
||||
{ page: 'index', label: '门户首页', href: 'index.html', roles: '*', group: '公共' },
|
||||
{ page: 'showcase', label: '社区大屏', href: 'showcase.html', roles: [], group: '公共' },
|
||||
{ page: 'operator', label: '运营工作台', href: 'operator.html', roles: ['operator'], group: '运营管理' },
|
||||
{ page: 'leads', label: '供需对接', href: 'leads.html', roles: ['operator', 'gov'], group: '运营管理' },
|
||||
{ page: 'profile', label: '画像中心', href: 'profile.html', roles: ['operator', 'gov', 'enterprise'], group: '运营管理' },
|
||||
{ page: 'opc', label: 'OPC 工作台', href: 'opc.html', roles: ['opc'], group: '我的工作台' },
|
||||
{ page: 'enterprise', label: '企业工作台', href: 'enterprise.html', roles: ['enterprise', 'personal'], labelMap: { personal: '个人工作台' }, group: '我的工作台' },
|
||||
{ page: 'order', label: '订单与协同', href: 'order.html', roles: ['opc', 'enterprise', 'personal', 'operator'], group: '我的工作台' },
|
||||
{ page: 'market', label: '橙果商城', href: 'market.html', roles: ['opc', 'enterprise', 'personal', 'learner', 'operator'], group: '我的工作台' },
|
||||
{ page: 'service', label: '企业服务中心', href: 'service.html', roles: ['opc', 'enterprise', 'personal', 'service', 'operator'], group: '服务与政策' },
|
||||
{ page: 'policy', label: '政策服务', href: 'policy.html', roles: ['opc', 'enterprise', 'personal', 'finance', 'learner', 'operator'], group: '服务与政策' },
|
||||
{ page: 'training', label: '培训认证', href: 'training.html', roles: ['opc', 'trainer', 'learner', 'operator'], group: '培训与机构' },
|
||||
{ page: 'institution', label: '机构管理', href: 'institution.html', roles: ['trainer', 'operator'], group: '培训与机构' },
|
||||
{ page: 'government', label: '政府驾驶舱', href: 'government.html', roles: ['gov', 'auditor', 'operator'], group: '监管与审计' },
|
||||
{ page: 'audit', label: '审计视图', href: 'audit.html', roles: ['auditor', 'operator'], group: '监管与审计' },
|
||||
];
|
||||
|
||||
function currentRole() {
|
||||
return localStorage.getItem('opc_role') || null;
|
||||
}
|
||||
|
||||
function currentUser() {
|
||||
return localStorage.getItem('opc_user') || '';
|
||||
}
|
||||
|
||||
function canAccess(page, role) {
|
||||
const menu = MENUS.find(m => m.page === page);
|
||||
if (!menu) return true;
|
||||
// 公开页面（index/showcase）任何人都可访问
|
||||
if (['index', 'showcase'].includes(page)) return true;
|
||||
return menu.roles === '*' || menu.roles.includes(role);
|
||||
}
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem('opc_role');
|
||||
localStorage.removeItem('opc_user');
|
||||
location.href = 'index.html';
|
||||
}
|
||||
|
||||
function renderNav() {
|
||||
const role = currentRole();
|
||||
const page = document.body.dataset.page;
|
||||
const host = document.getElementById('topnav');
|
||||
if (!host || page === 'login') return;
|
||||
|
||||
// 门户首页和社区大屏公开可访问，不强制登录
|
||||
const publicPages = ['index', 'showcase'];
|
||||
if (!role && !publicPages.includes(page)) {
|
||||
location.href = 'login.html';
|
||||
return;
|
||||
}
|
||||
|
||||
const user = currentUser();
|
||||
const visibleMenus = role ? MENUS.filter(m => m.roles === '*' || m.roles.includes(role)) : [];
|
||||
|
||||
// 未登录访问大屏：只显示精简顶栏（品牌 + 返回门户），不显示侧边栏
|
||||
if (!role && page === 'showcase') {
|
||||
host.innerHTML = `
|
||||
<a class="brand" href="index.html">OPC<span>公共服务平台</span></a>
|
||||
<a href="index.html" class="muted" style="margin-left:auto;font-size:13px">← 返回门户</a>
|
||||
`;
|
||||
document.body.style.paddingLeft = '0';
|
||||
return;
|
||||
}
|
||||
|
||||
// 未登录（仅在门户首页）：顶栏只显示品牌 + 帮助 + 登录按钮，不显示侧边栏
|
||||
if (!role) {
|
||||
host.innerHTML = `
|
||||
<a class="brand" href="index.html">OPC<span>公共服务平台</span></a>
|
||||
<a href="req-doc.html" class="muted" style="margin-left:auto;font-size:13px" target="_blank">帮助 / 需求文档</a>
|
||||
<a href="login.html" class="btn sm">登录</a>
|
||||
`;
|
||||
document.body.style.paddingLeft = '0';
|
||||
return;
|
||||
}
|
||||
|
||||
// 按分组组织菜单
|
||||
const groups = [];
|
||||
const groupMap = {};
|
||||
visibleMenus.forEach(m => {
|
||||
if (!groupMap[m.group]) { groupMap[m.group] = []; groups.push(m.group); }
|
||||
groupMap[m.group].push(m);
|
||||
});
|
||||
|
||||
const sidebarLinks = groups.map(g => `
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">${g}</div>
|
||||
${groupMap[g].map(m => `<a href="${m.href}" class="${m.page === page ? 'active' : ''}">${(m.labelMap && m.labelMap[role]) || m.label}</a>`).join('')}
|
||||
</div>`).join('');
|
||||
|
||||
// 顶栏：品牌 + 帮助（左）| 角色 + 重置 + 退出 + 菜单按钮（右）
|
||||
host.innerHTML = `
|
||||
<a class="brand" href="index.html">OPC<span>公共服务平台</span></a>
|
||||
<a href="req-doc.html" class="muted" style="font-size:13px" target="_blank">帮助 / 需求文档</a>
|
||||
<span style="margin-left:auto;display:flex;align-items:center;gap:12px">
|
||||
<span class="role-badge">${ROLES[role].name}${user ? ' · ' + user : ''}</span>
|
||||
<a href="javascript:resetDemo()" class="muted" style="font-size:12px" title="清除 localStorage 中的演示数据，恢复 mock.json 初始状态">重置数据</a>
|
||||
<a href="javascript:logout()" class="muted" style="font-size:12px">退出</a>
|
||||
</span>
|
||||
<button class="nav-toggle" id="navToggle" aria-label="切换菜单">☰</button>
|
||||
`;
|
||||
|
||||
// 侧边栏（底部不再放用户信息和退出，已移至顶栏右侧）
|
||||
let sidebar = document.getElementById('sidebar');
|
||||
if (!sidebar) {
|
||||
sidebar = document.createElement('aside');
|
||||
sidebar.id = 'sidebar';
|
||||
sidebar.className = 'sidebar';
|
||||
document.body.appendChild(sidebar);
|
||||
}
|
||||
sidebar.innerHTML = `
|
||||
<div class="sidebar-head">
|
||||
<a class="brand" href="index.html">OPC<span>公共服务平台</span></a>
|
||||
<button class="nav-close" id="navClose" aria-label="关闭菜单">×</button>
|
||||
</div>
|
||||
<nav class="sidebar-nav">${sidebarLinks}</nav>
|
||||
`;
|
||||
|
||||
// 移动端切换
|
||||
const toggle = document.getElementById('navToggle');
|
||||
const close = document.getElementById('navClose');
|
||||
if (toggle) toggle.onclick = () => { sidebar.classList.add('open'); };
|
||||
if (close) close.onclick = () => { sidebar.classList.remove('open'); };
|
||||
|
||||
if (!canAccess(page, role)) {
|
||||
const main = document.querySelector('.container');
|
||||
if (main) {
|
||||
const tip = document.createElement('div');
|
||||
tip.className = 'notice';
|
||||
tip.style.marginBottom = '16px';
|
||||
tip.textContent = `当前角色「${ROLES[role].name}」无本模块操作权限，以下为演示预览模式。`;
|
||||
main.prepend(tip);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', renderNav);
|
||||
|
||||
/* ===== 演示交互组件：Toast / Modal / Confirm ===== */
|
||||
|
||||
function toast(msg, type = 'ok') {
|
||||
let host = document.getElementById('toasts');
|
||||
if (!host) {
|
||||
host = document.createElement('div');
|
||||
host.id = 'toasts';
|
||||
document.body.appendChild(host);
|
||||
}
|
||||
const el = document.createElement('div');
|
||||
el.className = 'toast ' + type;
|
||||
el.textContent = msg;
|
||||
host.appendChild(el);
|
||||
setTimeout(() => el.remove(), 3200);
|
||||
}
|
||||
|
||||
function openModal({ title, body, actions }) {
|
||||
const mask = document.createElement('div');
|
||||
mask.className = 'modal-mask';
|
||||
const btns = (actions || [{ label: '关闭' }])
|
||||
.map((a, i) => `<button class="btn ${a.cls || ''}" data-i="${i}">${a.label}</button>`)
|
||||
.join('');
|
||||
mask.innerHTML = `
|
||||
<div class="modal">
|
||||
<span class="close-x" data-x="1">×</span>
|
||||
<h3>${title}</h3>
|
||||
<div class="modal-body">${body}</div>
|
||||
<div class="modal-foot">${btns}</div>
|
||||
</div>`;
|
||||
mask.addEventListener('click', e => {
|
||||
if (e.target === mask || e.target.dataset.x) mask.remove();
|
||||
const i = e.target.dataset && e.target.dataset.i;
|
||||
if (i !== undefined) {
|
||||
const act = (actions || [{ label: '关闭' }])[+i];
|
||||
if (act && act.onClick) act.onClick(mask);
|
||||
else mask.remove();
|
||||
}
|
||||
});
|
||||
document.body.appendChild(mask);
|
||||
return mask;
|
||||
}
|
||||
|
||||
function confirmDlg(title, msg, okLabel, onOk) {
|
||||
openModal({
|
||||
title,
|
||||
body: `<p>${msg}</p>`,
|
||||
actions: [
|
||||
{ label: '取消', cls: 'ghost' },
|
||||
{ label: okLabel || '确认', onClick: m => { m.remove(); onOk && onOk(); } },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
/** 演示用：更新单元格为徽章 */
|
||||
function setBadge(cell, text, cls) {
|
||||
cell.innerHTML = `<span class="badge ${cls}">${text}</span>`;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* Demo 数据层：统一加载 assets/mock.json
|
||||
* 页面定义 window.renderPage(DB) 后由本文件回调渲染；
|
||||
* 交互函数直接修改 DB 并调用对应 renderPage 重渲染。
|
||||
* 交互产生的数据变更通过 localStorage 持久化，跨页面/刷新保留；
|
||||
* mock.json 结构升级时提升 SCHEMA_VER 使旧存档失效。
|
||||
*/
|
||||
|
||||
const SCHEMA_VER = 4;
|
||||
const DB_KEY = 'opc_demo_db';
|
||||
|
||||
let DB = null;
|
||||
|
||||
/** 徽章 */
|
||||
const B = (pair) => pair ? `<span class="badge ${pair[1]}">${pair[0]}</span>` : '—';
|
||||
/** 进度条 */
|
||||
const BAR = (w, cls = '') => `<div class="bar"><i class="${cls}" style="width:${w}%"></i></div>`;
|
||||
/** 步骤条 */
|
||||
const STEPS = (steps) => `<div class="steps">` + steps
|
||||
.map((s, i) => `${i ? '<span class="arrow">→</span>' : ''}<span class="step ${s[1]}">${s[0]}</span>`)
|
||||
.join('') + `</div>`;
|
||||
/** 标签 */
|
||||
const TAG = (t) => `<span class="tag">${t}</span>`;
|
||||
/** 列表行（key-value） */
|
||||
const LI = (l, r) => `<li><span>${l}</span><span>${r}</span></li>`;
|
||||
|
||||
/** 将当前 DB 持久化到 localStorage */
|
||||
function saveDB() {
|
||||
if (!DB) return;
|
||||
try {
|
||||
localStorage.setItem(DB_KEY, JSON.stringify({ v: SCHEMA_VER, data: DB }));
|
||||
} catch (e) { /* 存储满或隐私模式下静默降级 */ }
|
||||
}
|
||||
|
||||
/** 清除演示存档，恢复 mock.json 初始数据 */
|
||||
function resetDemo() {
|
||||
localStorage.removeItem(DB_KEY);
|
||||
location.reload();
|
||||
}
|
||||
|
||||
async function loadMock() {
|
||||
let fresh = {};
|
||||
try {
|
||||
const res = await fetch('assets/mock.json');
|
||||
fresh = await res.json();
|
||||
} catch (e) {
|
||||
console.error('mock.json 加载失败（请通过 http 服务访问，勿用 file:// 直开）', e);
|
||||
}
|
||||
let saved = null;
|
||||
try {
|
||||
const raw = localStorage.getItem(DB_KEY);
|
||||
if (raw) {
|
||||
const pack = JSON.parse(raw);
|
||||
if (pack.v === SCHEMA_VER) saved = pack.data;
|
||||
}
|
||||
} catch (e) { /* 存档损坏时回退到初始数据 */ }
|
||||
// 存档优先，但用 fresh 补齐新增加的业务域
|
||||
DB = saved ? Object.assign({}, fresh, saved) : fresh;
|
||||
window.addEventListener('beforeunload', saveDB);
|
||||
if (typeof window.renderPage === 'function') window.renderPage(DB);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadMock);
|
||||
@@ -0,0 +1,364 @@
|
||||
:root {
|
||||
--primary: #f97316;
|
||||
--primary-dark: #ea580c;
|
||||
--primary-light: #fb923c;
|
||||
--primary-50: #fff7ed;
|
||||
--primary-100: #ffedd5;
|
||||
--primary-200: #fed7aa;
|
||||
--bg: #faf9f7;
|
||||
--bg-gradient: linear-gradient(135deg, #faf9f7 0%, #fff7ed 50%, #faf9f7 100%);
|
||||
--card: rgba(255, 255, 255, 0.82);
|
||||
--card-solid: #ffffff;
|
||||
--border: #f0ebe5;
|
||||
--border-strong: #e8e0d6;
|
||||
--text: #292524;
|
||||
--text-2: #78716c;
|
||||
--text-3: #a8a29e;
|
||||
--success: #059669;
|
||||
--warning: #d97706;
|
||||
--danger: #e11d48;
|
||||
--info: #0284c7;
|
||||
--radius: 0.75rem;
|
||||
--shadow: 0 4px 24px rgba(120, 90, 50, 0.08);
|
||||
--shadow-lg: 0 8px 32px rgba(120, 90, 50, 0.12);
|
||||
--glass-blur: blur(12px);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: var(--bg-gradient);
|
||||
background-attachment: fixed;
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
a { color: var(--primary); text-decoration: none; }
|
||||
a:hover { color: var(--primary-dark); }
|
||||
|
||||
/* ===== 顶部精简栏 + 侧边导航 ===== */
|
||||
.topnav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
height: 52px;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: center;
|
||||
padding: 0 20px; gap: 16px;
|
||||
}
|
||||
.topnav .brand { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; }
|
||||
.topnav .brand span { color: var(--primary); }
|
||||
.topnav .role-badge {
|
||||
font-size: 12px; padding: 4px 10px;
|
||||
border-radius: 999px; background: var(--primary-100); color: var(--primary-dark);
|
||||
border: 1px solid var(--primary-200);
|
||||
}
|
||||
.topnav .muted { color: var(--text-2); text-decoration: none; }
|
||||
.topnav .muted:hover { color: var(--primary); }
|
||||
.topnav .nav-toggle {
|
||||
display: none; border: 1px solid var(--border); background: #fff;
|
||||
border-radius: 8px; padding: 4px 10px; font-size: 16px; cursor: pointer; color: var(--text);
|
||||
}
|
||||
|
||||
/* 侧边栏 */
|
||||
.sidebar {
|
||||
position: fixed; top: 0; left: 0; bottom: 0;
|
||||
width: 220px; z-index: 150;
|
||||
background: #fff8f0; border-right: 1px solid var(--border);
|
||||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sidebar-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 18px; border-bottom: 1px solid var(--border); height: 52px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sidebar-head .brand { font-weight: 700; font-size: 15px; }
|
||||
.sidebar-head .brand span { color: var(--primary); }
|
||||
.sidebar-head .nav-close {
|
||||
display: none; border: none; background: none; font-size: 22px;
|
||||
cursor: pointer; color: var(--text-2); line-height: 1;
|
||||
}
|
||||
.sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
|
||||
.nav-group { margin-bottom: 4px; }
|
||||
.nav-group-title {
|
||||
font-size: 11px; font-weight: 600; color: var(--text-3);
|
||||
padding: 10px 18px 4px; text-transform: uppercase; letter-spacing: .5px;
|
||||
}
|
||||
.sidebar-nav a {
|
||||
display: block; padding: 8px 18px; font-size: 13px;
|
||||
color: var(--text-2); border-left: 3px solid transparent;
|
||||
transition: all .15s;
|
||||
}
|
||||
.sidebar-nav a:hover { background: var(--primary-50); color: var(--primary-dark); }
|
||||
.sidebar-nav a.active { background: var(--primary-100); color: var(--primary-dark); border-left-color: var(--primary); font-weight: 600; }
|
||||
|
||||
/* body 留出侧边栏空间（login/showcase 无侧边栏除外） */
|
||||
body { padding-left: 220px; }
|
||||
body[data-page="login"], body.screen { padding-left: 0; }
|
||||
@media (max-width: 900px) {
|
||||
body { padding-left: 0; }
|
||||
.topnav .nav-toggle { display: inline-block; }
|
||||
.sidebar { transform: translateX(-100%); transition: transform .2s; box-shadow: 2px 0 12px rgba(0,0,0,.1); }
|
||||
.sidebar.open { transform: translateX(0); }
|
||||
.sidebar-head .nav-close { display: inline-block; }
|
||||
.topnav .brand { margin-right: auto; }
|
||||
}
|
||||
|
||||
/* ===== 布局 ===== */
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }
|
||||
.page-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
|
||||
.page-sub { color: var(--text-2); font-size: 13px; margin-bottom: 20px; }
|
||||
.grid { display: grid; gap: 16px; }
|
||||
.grid-2 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid-4 { grid-template-columns: repeat(4, 1fr); }
|
||||
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } }
|
||||
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
|
||||
|
||||
/* ===== 卡片（毛玻璃） ===== */
|
||||
.card {
|
||||
background: var(--card);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 18px;
|
||||
box-shadow: var(--shadow);
|
||||
transition: box-shadow .2s;
|
||||
}
|
||||
.card:hover { box-shadow: var(--shadow-lg); }
|
||||
.card h3 { font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
|
||||
.card .sub { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
|
||||
.card .num { font-size: 26px; font-weight: 700; color: var(--primary-dark); }
|
||||
.card .num small { font-size: 12px; font-weight: 400; color: var(--text-2); }
|
||||
.section { margin-top: 24px; }
|
||||
.section > h2 { font-size: 17px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
|
||||
.section > h2 .req { font-size: 11px; font-weight: 400; color: var(--text-2); }
|
||||
|
||||
/* ===== 标签/徽章 ===== */
|
||||
.badge {
|
||||
display: inline-block; padding: 2px 8px; border-radius: 999px;
|
||||
font-size: 11px; font-weight: 500;
|
||||
}
|
||||
.badge.ok { background: #d1fae5; color: var(--success); }
|
||||
.badge.warn { background: #fef3c7; color: var(--warning); }
|
||||
.badge.err { background: #ffe4e6; color: var(--danger); }
|
||||
.badge.info { background: #e0f2fe; color: var(--info); }
|
||||
.badge.gray { background: #f5f5f4; color: var(--text-2); }
|
||||
.badge.pri { background: var(--primary-100); color: var(--primary-dark); }
|
||||
.tag {
|
||||
display: inline-block; padding: 2px 8px; margin: 2px 4px 2px 0;
|
||||
border: 1px solid var(--border-strong); border-radius: 6px;
|
||||
font-size: 11px; color: var(--text-2); background: #fff;
|
||||
}
|
||||
|
||||
/* ===== 表格 ===== */
|
||||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); }
|
||||
th { color: var(--text-2); font-weight: 600; font-size: 12px; background: var(--primary-50); }
|
||||
tr:hover td { background: var(--primary-50); }
|
||||
|
||||
/* ===== 按钮 ===== */
|
||||
.btn {
|
||||
display: inline-block; padding: 8px 16px; border-radius: 8px;
|
||||
font-size: 13px; font-weight: 500; cursor: pointer; border: none;
|
||||
background: var(--primary); color: #fff;
|
||||
transition: all .15s;
|
||||
}
|
||||
.btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
|
||||
.btn.ghost { background: rgba(255,255,255,0.7); color: var(--text); border: 1px solid var(--border-strong); }
|
||||
.btn.ghost:hover { background: var(--primary-50); border-color: var(--primary-200); color: var(--primary-dark); }
|
||||
.btn.sm { padding: 4px 10px; font-size: 12px; }
|
||||
|
||||
/* ===== 步骤/状态机 ===== */
|
||||
.steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
|
||||
.steps .step {
|
||||
padding: 5px 12px; border-radius: 999px; background: #f5f5f4; color: var(--text-2);
|
||||
}
|
||||
.steps .step.done { background: #d1fae5; color: var(--success); }
|
||||
.steps .step.cur { background: var(--primary); color: #fff; font-weight: 600; }
|
||||
.steps .arrow { color: var(--text-3); }
|
||||
|
||||
/* ===== 进度条 ===== */
|
||||
.bar { height: 8px; background: #f5f5f4; border-radius: 999px; overflow: hidden; }
|
||||
.bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
|
||||
.bar i.ok { background: var(--success); }
|
||||
.bar i.warn { background: var(--warning); }
|
||||
|
||||
/* ===== 门户 Hero ===== */
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
|
||||
color: #fff; border-radius: var(--radius); padding: 40px 36px; margin-bottom: 24px;
|
||||
box-shadow: 0 8px 32px rgba(234, 88, 12, 0.2);
|
||||
}
|
||||
.hero h1 { font-size: 28px; margin-bottom: 8px; }
|
||||
.hero p { opacity: .92; font-size: 14px; max-width: 640px; }
|
||||
.hero .btn { background: rgba(255,255,255,0.9); color: var(--primary-dark); }
|
||||
.hero .btn:hover { background: #fff; }
|
||||
.hero .btn.ghost { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
|
||||
.hero .btn.ghost:hover { background: rgba(255,255,255,0.25); }
|
||||
.entry-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: -20px; }
|
||||
@media (max-width: 800px) { .entry-cards { grid-template-columns: 1fr; } }
|
||||
.entry-card {
|
||||
background: var(--card);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-radius: var(--radius); padding: 22px;
|
||||
border: 1px solid var(--border); box-shadow: var(--shadow-lg);
|
||||
}
|
||||
.entry-card h3 { font-size: 16px; margin-bottom: 6px; }
|
||||
.entry-card p { font-size: 12px; color: var(--text-2); margin-bottom: 12px; }
|
||||
|
||||
/* ===== 政府端暗色顶栏 + 侧边栏 ===== */
|
||||
.gov .topnav { background: #1c1410; border-bottom-color: #3a2a1e; }
|
||||
.gov .topnav .brand { color: #f5f5f4; }
|
||||
.gov .topnav .brand span { color: var(--primary-light); }
|
||||
.gov .topnav .role-badge { background: #422006; color: #fbbf24; border-color: #92400e; }
|
||||
.gov .topnav .muted { color: #a8a29e; }
|
||||
.gov .topnav .muted:hover { color: var(--primary-light); }
|
||||
.gov .sidebar { background: #1c1410; border-right-color: #3a2a1e; }
|
||||
.gov .sidebar-head { border-bottom-color: #3a2a1e; }
|
||||
.gov .sidebar-head .brand { color: #f5f5f4; }
|
||||
.gov .sidebar-head .brand span { color: var(--primary-light); }
|
||||
.gov .nav-group-title { color: #78716c; }
|
||||
.gov .sidebar-nav a { color: #d6d3d1; }
|
||||
.gov .sidebar-nav a:hover { background: #2a1f18; color: #fff; }
|
||||
.gov .sidebar-nav a.active { background: #2a1f18; color: var(--primary-light); border-left-color: var(--primary); }
|
||||
.gov-banner {
|
||||
background: #1c1410; color: #e7e5e4; border-radius: var(--radius);
|
||||
padding: 18px 22px; margin-bottom: 20px; font-size: 13px;
|
||||
display: flex; gap: 10px; align-items: center;
|
||||
}
|
||||
.gov-banner .badge { background: var(--primary); color: #fff; font-weight: 700; }
|
||||
|
||||
/* ===== 其他 ===== */
|
||||
.notice {
|
||||
border-left: 3px solid var(--primary); background: var(--primary-50);
|
||||
padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 12px; color: var(--primary-dark);
|
||||
}
|
||||
.muted { color: var(--text-2); font-size: 12px; }
|
||||
.list { list-style: none; }
|
||||
.list li { padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13px; display: flex; justify-content: space-between; gap: 10px; }
|
||||
.list li:last-child { border-bottom: none; }
|
||||
.flow { font-size: 12px; color: var(--text-2); }
|
||||
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
|
||||
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
|
||||
.footer { text-align: center; color: var(--text-3); font-size: 12px; padding: 24px 0; }
|
||||
|
||||
/* ===== 弹窗 ===== */
|
||||
.modal-mask {
|
||||
position: fixed; inset: 0; z-index: 200;
|
||||
background: rgba(28, 20, 16, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex; align-items: center; justify-content: center; padding: 16px;
|
||||
}
|
||||
.modal {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
max-width: 560px; width: 100%; max-height: 85vh; overflow: auto;
|
||||
padding: 20px 22px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
|
||||
}
|
||||
.modal h3 { font-size: 16px; margin-bottom: 12px; }
|
||||
.modal .modal-body { font-size: 13px; }
|
||||
.modal .modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
|
||||
.modal .close-x { float: right; cursor: pointer; color: var(--text-2); font-size: 18px; line-height: 1; }
|
||||
|
||||
/* ===== 表单 ===== */
|
||||
.field { margin-bottom: 12px; }
|
||||
.field label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
|
||||
.field input, .field select, .field textarea {
|
||||
width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong);
|
||||
border-radius: 8px; font-size: 13px; font-family: inherit; background: rgba(255,255,255,0.8);
|
||||
}
|
||||
.field input:focus, .field select:focus, .field textarea:focus {
|
||||
outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100);
|
||||
}
|
||||
.field textarea { min-height: 72px; resize: vertical; }
|
||||
.checks label { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; }
|
||||
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
|
||||
/* ===== Toast ===== */
|
||||
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
|
||||
.toast {
|
||||
background: #1c1410; color: #fff; padding: 10px 16px; border-radius: 8px;
|
||||
font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.2);
|
||||
animation: tin .2s ease-out; max-width: 320px;
|
||||
}
|
||||
.toast.ok { border-left: 3px solid var(--success); }
|
||||
.toast.warn { border-left: 3px solid var(--warning); }
|
||||
.toast.err { border-left: 3px solid var(--danger); }
|
||||
.toast.info { border-left: 3px solid var(--info); }
|
||||
@keyframes tin { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
|
||||
|
||||
.btn.danger { background: var(--danger); }
|
||||
.btn.danger:hover { background: #be123c; }
|
||||
.btn.ok { background: var(--success); }
|
||||
.btn.ok:hover { background: #047857; }
|
||||
|
||||
/* ===== 甘特图（REQ-036） ===== */
|
||||
.gantt { font-size: 12px; }
|
||||
.gantt-row { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: center; padding: 5px 0; }
|
||||
.gantt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
|
||||
.gantt-axis { position: relative; height: 16px; margin-bottom: 2px; }
|
||||
.gantt-axis span { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--text-2); }
|
||||
.gantt-track {
|
||||
position: relative; height: 24px; border-radius: 4px;
|
||||
background: repeating-linear-gradient(90deg, #f5f5f4 0 1px, transparent 1px calc(100% / 20));
|
||||
}
|
||||
.gantt-bar {
|
||||
position: absolute; top: 4px; height: 16px; border-radius: 8px;
|
||||
background: var(--primary); color: #fff; font-size: 10px; line-height: 16px;
|
||||
padding: 0 8px; white-space: nowrap; overflow: hidden;
|
||||
}
|
||||
.gantt-bar.ok { background: var(--success); }
|
||||
.gantt-bar.warn { background: var(--warning); }
|
||||
.gantt-bar.err { background: var(--danger); }
|
||||
.gantt-today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--danger); opacity: .6; }
|
||||
|
||||
/* ===== 转化漏斗（REQ-097） ===== */
|
||||
.funnel-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 13px; }
|
||||
.funnel-stage { width: 90px; color: var(--text-2); flex-shrink: 0; }
|
||||
.funnel-bar {
|
||||
height: 28px; border-radius: 6px; background: var(--primary); color: #fff;
|
||||
display: flex; align-items: center; padding: 0 10px; font-size: 12px; min-width: 60px;
|
||||
}
|
||||
.funnel-conv { color: var(--text-2); font-size: 11px; margin-left: auto; }
|
||||
|
||||
/* ===== 展览大屏（REQ-118 · 暖橙暗色） ===== */
|
||||
.screen { background: #1a1410; color: #e7e5e4; }
|
||||
.screen .sidebar, .screen .topnav { display: none !important; }
|
||||
.screen { padding-left: 0 !important; }
|
||||
.screen .container { max-width: 1400px; }
|
||||
.screen .card {
|
||||
background: rgba(42, 31, 24, 0.6);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-color: #3a2a1e; color: #e7e5e4;
|
||||
}
|
||||
.screen .card h3 { color: #a8a29e; }
|
||||
.screen .num { color: var(--primary-light); font-size: 32px; }
|
||||
.screen .muted, .screen .page-sub { color: #78716c; }
|
||||
.screen table th { background: #2a1f18; color: #a8a29e; }
|
||||
.screen td { border-bottom-color: #3a2a1e; }
|
||||
.screen tr:hover td { background: #2a1f18; }
|
||||
.screen .footer { color: #57534e; }
|
||||
.screen .bar { background: #3a2a1e; }
|
||||
.screen .bar i { background: var(--primary-light); }
|
||||
.screen-hero { text-align: center; padding: 20px 0 8px; }
|
||||
.screen-hero h1 { font-size: 26px; letter-spacing: 4px; color: var(--primary-light); }
|
||||
.screen-hero p { color: #78716c; font-size: 13px; }
|
||||
.ticker-wrap { overflow: hidden; background: #2a1f18; border: 1px solid #3a2a1e; border-radius: var(--radius); padding: 10px 0; }
|
||||
.ticker { display: flex; gap: 48px; white-space: nowrap; animation: tick 24s linear infinite; font-size: 13px; color: var(--primary-light); }
|
||||
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
|
||||
.screen .funnel-bar { background: var(--primary); }
|
||||
.screen .badge.pri { background: rgba(249, 115, 22, 0.2); color: var(--primary-light); }
|
||||
|
||||
/* ===== 打印（政府报告） ===== */
|
||||
@media print {
|
||||
.topnav, .sidebar, .btn, .footer, #toasts, .no-print { display: none !important; }
|
||||
body { padding-left: 0 !important; background: #fff; }
|
||||
.card { background: #fff; box-shadow: none; border: 1px solid #999; break-inside: avoid; backdrop-filter: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user