/* ============================================ portal.css 企业级门户 UI 设计规范（Portal Layer） - 独立于 /admin/layout.css - 复用全局 Design System 的色彩与节奏 ============================================ */ /* 1. 基础变量（与后台 Design System 对齐，可复用） */ :root { --portal-bg-body: #f5f5f7; --portal-bg-surface: #ffffff; --portal-border-subtle: #e5e5e5; --portal-text-main: #111827; --portal-text-muted: #6b7280; --portal-text-link: #2563eb; --portal-primary: #2563eb; --portal-primary-hover: #1d4ed8; --portal-primary-soft: #e0edff; --portal-radius-lg: 12px; --portal-radius-md: 8px; --portal-radius-full: 999px; --portal-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08); --portal-nav-height: 64px; --portal-content-max-width: 1120px; } /* 2. 全局基础（仅作用于门户，可在下使用） */ body.portal { margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; background: var(--portal-bg-body); color: var(--portal-text-main); } /* 3. 固定导航栏（企业级门户专用） */ .portal-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--portal-nav-height); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(229, 231, 235, 0.8); display: flex; align-items: center; justify-content: center; z-index: 999; } /* 导航内部容器（全宽 + 左右留白 + 居中） */ .portal-nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: min(1600px, calc(100% - 24px)); /* 左右各留 12px */ margin: 0 auto; padding: 0; } /* 左侧整体：Logo + 菜单 */ .portal-nav-left { display: flex; align-items: center; gap: 32px; } /* 右侧按钮区域：保持一行靠右 */ .portal-nav-actions { display: flex; align-items: center; gap: 10px; } /* 左侧 Logo 区域 */ .portal-nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; color: var(--portal-text-main); } .portal-nav-brand-mark { width: 28px; height: 28px; border-radius: 10px; background: linear-gradient(135deg, #2563eb, #4f46e5); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 14px; font-weight: 700; } /* 中间菜单区域 */ .portal-nav-menu { display: flex; align-items: center; gap: 20px; } .portal-nav-link { font-size: 14px; color: var(--portal-text-muted); text-decoration: none; padding: 6px 10px; border-radius: 999px; transition: color 0.15s ease, background 0.15s ease; } .portal-nav-link:hover { color: var(--portal-text-main); background: #f3f4f6; } .portal-nav-link.active { color: var(--portal-primary); background: var(--portal-primary-soft); } /* 右侧操作区域（登录 / 注册 / 进入后台） */ .portal-nav-actions { display: flex; align-items: center; gap: 10px; } /* 手机端汉堡按钮（默认隐藏） */ .portal-nav-toggle { display: none; font-size: 22px; cursor: pointer; padding: 6px 10px; border-radius: 8px; user-select: none; } /* 次要按钮（文本型） */ .portal-btn-ghost { border: none; background: transparent; padding: 6px 12px; font-size: 14px; color: var(--portal-text-muted); cursor: pointer; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease; } .portal-btn-ghost:hover { background: #f3f4f6; color: var(--portal-text-main); } /* 主要按钮（实心） */ .portal-btn-primary { border: none; background: var(--portal-primary); color: #ffffff; padding: 8px 16px; font-size: 14px; border-radius: 999px; cursor: pointer; font-weight: 500; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .portal-btn-primary:hover { background: var(--portal-primary-hover); box-shadow: 0 10px 28px rgba(37, 99, 235, 0.3); transform: translateY(-1px); } /* 4. 内容区域基础布局（避让导航栏 + 居中） */ .portal-page { padding-top: calc(var(--portal-nav-height) + 32px); padding-bottom: 40px; } .portal-container { width: 100%; max-width: none; /* ✅ 取消最大宽度限制 */ margin: 0; padding: 0 24px; /* 可保留左右边距，也可设为 0 */ } /* 新增：内容居中容器（首页、文档中心都用它） */ .portal-wrapper { width: 100%; max-width: min(1600px, calc(100% - 16px)); /* 左右各留 8px */ margin: 0 auto; padding: 0; } /* 5. Hero 区域（你首页那块“欢迎来到企业级自动化平台”） */ .portal-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 40px; } .portal-hero { max-width: none; width: 100%; padding: 0 24px; /* 可选：保留一点左右间距 */ } .portal-hero-title { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; } .portal-hero-subtitle { font-size: 15px; line-height: 1.6; color: var(--portal-text-muted); margin-bottom: 20px; } .portal-hero-actions { display: flex; align-items: center; gap: 12px; } /* 右侧信息卡片（比如“管理员后台 / 系统文档 / 注册账号”那一列） */ .portal-hero-side { display: flex; flex-direction: column; gap: 12px; } .portal-card { background: var(--portal-bg-surface); border-radius: var(--portal-radius-lg); padding: 16px 18px; border: 1px solid var(--portal-border-subtle); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); } .portal-card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .portal-card-desc { font-size: 13px; color: var(--portal-text-muted); margin-bottom: 10px; } .portal-card-actions { display: flex; align-items: center; gap: 8px; } /* 6. 底部区域（可用于“系统特性 / 支持场景”等） */ .portal-section { margin-top: 32px; } .portal-section-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; } .portal-section-subtitle { font-size: 13px; color: var(--portal-text-muted); margin-bottom: 16px; } /* 7. 响应式适配 */ @media (max-width: 960px) { .portal-hero { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { .portal-nav-inner { padding: 0 16px; } .portal-nav-menu { display: none; /* 简化：先隐藏中间菜单，后续可做折叠菜单 */ } /* 手机端显示汉堡按钮 */ .portal-nav-toggle { display: block; } /* ✅ 新增：隐藏右侧按钮 */ .portal-nav-actions { display: none; } .portal-page { padding-top: calc(var(--portal-nav-height) + 20px); } .portal-container { padding: 0 16px; } .portal-hero-title { font-size: 26px; } } /* 覆盖首页整体布局为全宽 */ .portal-page { width: 100%; max-width: none; margin: 0; padding-left: 0; padding-right: 0; } /* 手机端下拉菜单展开 */ body.portal-menu-open .portal-nav-menu { display: flex !important; flex-direction: column; position: absolute; top: var(--portal-nav-height); left: 0; right: 0; background: #fff; padding: 16px; gap: 16px; /* ✅ 新增：左对齐菜单项 */ align-items: flex-start; border-bottom: 1px solid #e5e7eb; z-index: 998; } /* 手机菜单项左对齐（关键） */ body.portal-menu-open .portal-nav-menu a, body.portal-menu-open .portal-nav-menu button { width: 100%; text-align: left; } /* 手机菜单里的按钮区域（默认隐藏） */ .portal-nav-mobile-actions { display: none; flex-direction: row; /* ✅ 横向排列 */ gap: 12px; justify-content: flex-start; /* ✅ 左对齐 */ } /* 手机菜单展开时显示按钮 */ body.portal-menu-open .portal-nav-mobile-actions { display: flex; } /* 手机菜单里的按钮样式优化 */ body.portal-menu-open .portal-nav-mobile-actions button { flex: 1; text-align: center; }