/* * archive-kiosk.css * * 上海市流动人员人事档案咨询 · 公共自助终端「单会话 Kiosk 模式」专用样式。 * 仅在 上挂 data-archive-kiosk="1" 时生效（由 archive-kiosk.js 在 * URL ?kiosk=archive-assistant 时挂载）。普通访问完全不受影响。 * * 适配硬件：1080x1920 竖屏 / 1920x1080 横屏 自助一体机；字号采用 clamp + vmin * 自适应，远距离触屏可见、可点。 */ /* ============================================================ * 1. 隐藏左侧历史会话菜单 / 全局导航 / Agent 选择器 * 使用宽泛的选择器命中各类侧栏实现。仅在 kiosk 模式下生效。 * ============================================================ */ html[data-archive-kiosk="1"] aside, html[data-archive-kiosk="1"] nav[role="navigation"], html[data-archive-kiosk="1"] .ant-layout-sider, html[data-archive-kiosk="1"] [class*="ConversationList"], html[data-archive-kiosk="1"] [class*="conversation-list"], html[data-archive-kiosk="1"] [class*="conv-list"], html[data-archive-kiosk="1"] [class*="ConvList"], html[data-archive-kiosk="1"] [class*="SidebarLeft"], html[data-archive-kiosk="1"] [class*="sidebar-left"], html[data-archive-kiosk="1"] [class*="LeftSidebar"], html[data-archive-kiosk="1"] [class*="left-sider"], html[data-archive-kiosk="1"] [class*="LeftSider"], html[data-archive-kiosk="1"] [class*="HistoryList"], html[data-archive-kiosk="1"] [class*="history-list"], html[data-archive-kiosk="1"] [class*="AgentSelector"], html[data-archive-kiosk="1"] [class*="agent-selector"], html[data-archive-kiosk="1"] [class*="AgentSwitcher"], html[data-archive-kiosk="1"] [class*="agent-switcher"] { display: none !important; } html[data-archive-kiosk="1"] { --sidebar-width: 0px !important; } /* ============================================================ * 2. 隐藏「主页」上与档案咨询无关的内容区块（咨询页只保留对话功能） * ============================================================ */ html[data-archive-kiosk="1"] .app-home-hero, html[data-archive-kiosk="1"] .home-quick-section, html[data-archive-kiosk="1"] .home-feature-section, html[data-archive-kiosk="1"] .home-recent-section, html[data-archive-kiosk="1"] [class*="MobilePicker"], html[data-archive-kiosk="1"] [class*="mobile-picker"] { display: none !important; } /* 隐藏 composer 中的 agent / 模型选择 chip（用户不需要切换，避免误触）*/ html[data-archive-kiosk="1"] .unified-composer-chip { display: none !important; } /* ============================================================ * 3. 进入咨询页后只保留与档案咨询相关的内容 * - 隐藏 .agent-skills-section：那是给开发者看的 skill 列表（archive-query / archive-search * 的英文标识 + 内部描述），对终端用户没意义反而困惑。 * - 保留 .agent-chat-ready-header（agent logo / 名称 / greeting / description） * - 保留 .agent-questions-section（"试试问我" + agent.json 里的 openingQuestions） * 这样引导问题列表完全由 React 原生渲染，永不会被重渲染冲掉。 * * 字体 / 尺寸适配策略：使用 clamp(min, X, max)，X 优先用 vh（垂直方向受限时优先缩小， * 避免溢出滚动），关键水平指标辅以 vmin 防止极宽屏过大。这样在 1080x1920 竖屏、 * 1920x1080 横屏、桌面 1024x600 等不同比例下均不会出现滚动条，且字号合理。 * ============================================================ */ html[data-archive-kiosk="1"] .agent-skills-section { display: none !important; } html[data-archive-kiosk="1"] .agent-chat-ready-content { max-width: min(960px, 94vw) !important; margin: 0 auto !important; padding-top: clamp(16px, 3.5vh, 56px) !important; padding-bottom: clamp(12px, 2vh, 24px) !important; } html[data-archive-kiosk="1"] .agent-chat-ready-header { margin-bottom: clamp(16px, 3vh, 32px) !important; } html[data-archive-kiosk="1"] .agent-chat-ready-avatar-lg { width: clamp(48px, 9vh, 96px) !important; height: clamp(48px, 9vh, 96px) !important; border-radius: clamp(12px, 1.6vmin, 22px) !important; box-shadow: 0 6px 20px rgba(22, 119, 255, 0.18); } html[data-archive-kiosk="1"] .agent-chat-ready-name { font-size: clamp(20px, 3.6vh, 36px) !important; font-weight: 700 !important; letter-spacing: 0.04em; margin-top: clamp(6px, 1vh, 12px) !important; } html[data-archive-kiosk="1"] .agent-chat-ready-greeting { font-size: clamp(13px, 2.2vh, 20px) !important; color: var(--ant-color-text-secondary, #595959) !important; margin-top: clamp(4px, 0.8vh, 10px) !important; } html[data-archive-kiosk="1"] .agent-chat-ready-desc { font-size: clamp(12px, 1.8vh, 16px) !important; color: var(--ant-color-text-tertiary, #8c8c8c) !important; margin-top: clamp(2px, 0.6vh, 8px) !important; line-height: 1.6 !important; } html[data-archive-kiosk="1"] .agent-questions-section { margin-top: clamp(12px, 2.5vh, 28px) !important; } html[data-archive-kiosk="1"] .agent-questions-section .agent-skills-label { font-size: clamp(12px, 1.8vh, 16px) !important; color: var(--ant-color-text-secondary, #595959) !important; margin-bottom: clamp(8px, 1.4vh, 14px) !important; letter-spacing: 0.04em; } /* * 默认（窄屏 / 竖屏）单列；横屏宽屏自动 2 列，让 4 个问题压成 2x2， * 避免出现垂直滚动条。 */ html[data-archive-kiosk="1"] .agent-questions-list { display: grid !important; grid-template-columns: 1fr !important; gap: clamp(8px, 1.4vh, 14px) !important; } @media (orientation: landscape) and (min-width: 720px) { html[data-archive-kiosk="1"] .agent-questions-list { grid-template-columns: 1fr 1fr !important; } } html[data-archive-kiosk="1"] .agent-question-item { padding: clamp(10px, 1.8vh, 18px) clamp(14px, 1.8vw, 22px) !important; border-radius: clamp(8px, 1.2vmin, 14px) !important; border: 1px solid rgba(22, 119, 255, 0.22) !important; background: rgba(22, 119, 255, 0.04) !important; font-size: clamp(13px, 1.9vh, 18px) !important; line-height: 1.55 !important; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } html[data-archive-kiosk="1"] .agent-question-item:hover { background: rgba(22, 119, 255, 0.1) !important; border-color: #1677ff !important; } html[data-archive-kiosk="1"] .agent-question-item:active { transform: scale(0.985); } /* ============================================================ * 4. 欢迎页（全屏覆盖）—— 重新设计的政务自助终端版 * 适配 1080x1920 竖屏 / 横屏，字号自适应 * ============================================================ */ .archive-kiosk-welcome { position: fixed; inset: 0; z-index: 99999; color: #fff; user-select: none; -webkit-user-select: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", Roboto, "Helvetica Neue", Arial, sans-serif; overflow: hidden; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 60%), radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 50%), linear-gradient(180deg, #0a3a8e 0%, #062a6c 50%, #04194a 100%); } /* 顶部品牌区（左上 logo + 机构名）*/ .archive-kiosk-welcome-brand { position: absolute; top: clamp(24px, 4vh, 56px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); color: rgba(255, 255, 255, 0.92); font-size: clamp(14px, 1.8vmin, 20px); letter-spacing: 0.18em; font-weight: 500; } .archive-kiosk-welcome-brand-bar { width: clamp(28px, 4vmin, 56px); height: 2px; background: rgba(255, 216, 107, 0.85); } /* 主卡片区 */ .archive-kiosk-welcome-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; max-width: min(900px, 90vw); padding: 0 clamp(20px, 4vw, 60px); width: 100%; } /* 圆形徽章 */ .archive-kiosk-welcome-logo { width: clamp(96px, 14vmin, 180px); height: clamp(96px, 14vmin, 180px); margin: 0 auto clamp(28px, 4vh, 56px); border-radius: 50%; background: linear-gradient(135deg, #ffd86b 0%, #f4b942 100%); display: flex; align-items: center; justify-content: center; font-size: clamp(48px, 7vmin, 96px); font-weight: 700; color: #062a6c; box-shadow: 0 16px 60px rgba(0, 0, 0, 0.4), inset 0 -8px 24px rgba(0, 0, 0, 0.12), inset 0 4px 12px rgba(255, 255, 255, 0.5); position: relative; } .archive-kiosk-welcome-logo::before, .archive-kiosk-welcome-logo::after { content: ""; position: absolute; inset: -10px; border: 2px solid rgba(255, 216, 107, 0.4); border-radius: 50%; pointer-events: none; } .archive-kiosk-welcome-logo::after { inset: -22px; border-color: rgba(255, 216, 107, 0.18); } /* 主标题（中文）*/ .archive-kiosk-welcome h1 { font-size: clamp(28px, 5vmin, 64px); font-weight: 700; margin: 0 0 clamp(8px, 1.2vh, 16px); letter-spacing: 0.08em; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); line-height: 1.3; } /* 副标题（英文 / 简介）*/ .archive-kiosk-welcome-en { font-size: clamp(13px, 1.6vmin, 20px); color: rgba(255, 216, 107, 0.85); letter-spacing: 0.32em; margin: 0 0 clamp(20px, 3vh, 40px); font-weight: 400; text-transform: uppercase; } /* 副说明文字 */ .archive-kiosk-welcome-sub { font-size: clamp(15px, 2vmin, 24px); color: rgba(255, 255, 255, 0.85); margin: 0 0 clamp(36px, 5vh, 80px); line-height: 1.85; max-width: 640px; margin-left: auto; margin-right: auto; } /* 大按钮 */ .archive-kiosk-start-btn { font-size: clamp(20px, 3vmin, 36px); font-weight: 700; letter-spacing: 0.5em; padding-left: 0.5em; padding-right: 0; padding-top: clamp(18px, 2.6vh, 32px); padding-bottom: clamp(18px, 2.6vh, 32px); min-width: clamp(280px, 40vmin, 480px); border: none; border-radius: clamp(12px, 1.6vmin, 20px); background: linear-gradient(135deg, #fff 0%, #f5faff 100%); color: #062a6c; cursor: pointer; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 -4px 0 rgba(0, 0, 0, 0.06); transition: transform 0.18s ease, box-shadow 0.18s ease; font-family: inherit; } .archive-kiosk-start-btn:hover { transform: translateY(-3px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42), 0 6px 18px rgba(0, 0, 0, 0.22), inset 0 -4px 0 rgba(0, 0, 0, 0.06); } .archive-kiosk-start-btn:active { transform: translateY(0); } /* 底部提示 */ .archive-kiosk-welcome-tip { position: absolute; bottom: clamp(24px, 4vh, 56px); left: 50%; transform: translateX(-50%); margin: 0; font-size: clamp(12px, 1.5vmin, 18px); color: rgba(255, 255, 255, 0.65); line-height: 1.8; text-align: center; letter-spacing: 0.04em; } .archive-kiosk-welcome-tip strong { color: rgba(255, 216, 107, 0.92); font-weight: 500; } /* ============================================================ * 5. "结束咨询"按钮：定位到输入框（unified-composer）右上方边缘外 * - 让 .unified-composer 成为定位参考（position: relative） * - overflow: visible 防止按钮被裁切 * - 按钮 absolute 定位，top 用负值悬浮于 composer 上沿之上 * ============================================================ */ html[data-archive-kiosk="1"] .unified-composer { position: relative !important; overflow: visible !important; } .archive-kiosk-end-btn { position: absolute; top: clamp(-60px, -6.5vh, -46px); right: clamp(4px, 0.6vw, 12px); z-index: 10; padding: clamp(8px, 1.2vh, 14px) clamp(16px, 2.2vw, 24px); border: 2px solid #ff4d4f; background: #fff; color: #ff4d4f; border-radius: clamp(8px, 1vmin, 12px); font-size: clamp(13px, 1.6vmin, 18px); font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(255, 77, 79, 0.22); transition: background 0.18s ease, color 0.18s ease; font-family: inherit; letter-spacing: 0.08em; } .archive-kiosk-end-btn:hover { background: #ff4d4f; color: #fff; } .archive-kiosk-end-btn::before { content: "✕ "; font-weight: 700; } /* ============================================================ * 6. 闲置预警模态框 * ============================================================ */ .archive-kiosk-modal { position: fixed; inset: 0; z-index: 99998; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; font-family: inherit; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .archive-kiosk-modal-card { background: #fff; border-radius: clamp(12px, 1.6vmin, 20px); padding: clamp(28px, 4vh, 48px) clamp(28px, 4vw, 56px); min-width: min(420px, 86vw); max-width: min(560px, 90vw); text-align: center; box-shadow: 0 24px 72px rgba(0, 0, 0, 0.4); } .archive-kiosk-modal-card h3 { font-size: clamp(20px, 2.6vmin, 28px); font-weight: 700; margin: 0 0 clamp(10px, 1.4vh, 16px); color: #1f1f1f; } .archive-kiosk-modal-card p { font-size: clamp(14px, 1.8vmin, 20px); color: #666; margin: 0 0 clamp(20px, 3vh, 32px); line-height: 1.7; } .archive-kiosk-modal-card .archive-kiosk-countdown { color: #ff4d4f; font-weight: 700; font-size: 1.2em; } .archive-kiosk-modal-actions { display: flex; gap: clamp(10px, 1.6vw, 18px); justify-content: center; } .archive-kiosk-btn { padding: clamp(10px, 1.4vh, 16px) clamp(24px, 3vw, 36px); border-radius: clamp(8px, 1vmin, 12px); font-size: clamp(14px, 1.8vmin, 20px); font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; font-family: inherit; } .archive-kiosk-btn-primary { background: #1677ff; color: #fff; } .archive-kiosk-btn-primary:hover { background: #4096ff; } .archive-kiosk-btn-danger { background: #fff; color: #ff4d4f; border-color: #ff4d4f; } .archive-kiosk-btn-danger:hover { background: #ff4d4f; color: #fff; } /* ============================================================ * 7. 防误触：在 kiosk 模式下禁用文本选中（避免长按选中后弹出系统菜单） * 但保留输入框可交互。 * ============================================================ */ html[data-archive-kiosk="1"] body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } html[data-archive-kiosk="1"] input, html[data-archive-kiosk="1"] textarea, html[data-archive-kiosk="1"] [contenteditable="true"] { -webkit-user-select: text; user-select: text; }