/* ============================================================================ PO Agent DEMO · 样式 本文件是「Figma 原型 → 网页」的逐条翻译：每段都标注了原型里的来源数值 来源：src/pages/agent-config-v3.js · order-create-v3.js · po-parse-v3.js · order-confirm-v3.js · crm-register-v3.js · agent-workspace-v3.js ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--t1); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; } /* 布局：与原型 1440×900 逐像素对应，但按「100% 无缩放」渲染（不放大字体）。 外壳（顶栏 72 / 导航条 56 / 侧栏 224+32 间距）用固定尺寸，内容区吃掉剩余宽高： 宽了就横向铺满、高了就把最后一张卡撑开 —— 所以不需要下拉，也不会出现小字。 */ .app { display: grid; grid-template-columns: 56px 256px 1fr; grid-template-rows: 72px minmax(0, 1fr); grid-template-areas: "top top top" "rail side content"; height: 100vh; height: 100dvh; overflow: hidden; } /* ---------------- 顶栏（原型 Top Bar：1440×72） ---------------- */ .topbar { grid-area: top; background: #FFFFFF; display: flex; align-items: center; padding: 0 24px 0 16px; } .logo { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: #0B0B0C; width: 64px; line-height: 22px; } /* v3LogoText(26) @ (16,22) */ .ws { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t1); } .ws .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } /* v3Dot(6, 品牌色) @ x=80 */ .chev { width: 10px; height: 5px; fill: none; stroke: var(--t3); stroke-width: 1.5; } .page-name { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--t1); margin-left: 34px; } /* 页面名 15/22/600 */ .top-right { margin-left: auto; display: flex; align-items: center; gap: 16px; } /* 右侧间距 16 */ .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 500; display: grid; place-items: center; } /* v3Avatar(28) */ /* ---------------- 左导航条（原型 全局导航：56 宽，首行 y=88，行距 48） ---------------- 顶栏整条通栏（原型 Top Bar w=1440 覆盖导航条顶部 72），导航条从 y=72 开始 → padding-top 16 后首行正好 y=88 */ .rail { grid-area: rail; background: #FFFFFF; display: flex; flex-direction: column; align-items: center; padding-top: 16px; position: relative; } .rail-item { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px; cursor: pointer; } .rail-item.is-active { background: #F0F3F4; } .rail-item.rail-bottom { position: absolute; bottom: 60px; margin: 0; } /* 原型：设置格 y=800（40 高 → 距底 60） */ .rail-user { position: absolute; bottom: 16px; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 500; display: grid; place-items: center; } /* chip 28×28 @ y=H−44 */ .ico { width: 20px; height: 20px; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .rail-item.is-active .ico { stroke: var(--t1); } .ico-sm { width: 18px; height: 18px; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ico-sm .q { fill: var(--t2); stroke: none; font-size: 11px; font-weight: 500; } /* 头像菜单（审计 / 连接 / 重置 收在这里，顶栏保持原型那排图标） */ .top-right { position: relative; } .menu { position: absolute; top: 44px; right: 0; width: 220px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 28px -10px rgba(15,23,41,.18); padding: 8px; z-index: 30; } .menu[hidden] { display: none !important; } .menu-head { font-size: 12px; line-height: 20px; color: var(--t3); padding: 8px 10px; border-bottom: 1px solid var(--divider); } .menu-head b { color: var(--t1); font-weight: 500; } .menu-item { font-size: 13px; line-height: 20px; color: var(--t1); padding: 9px 10px; border-radius: 8px; cursor: pointer; } .menu-item:hover { background: var(--brand-soft); color: var(--brand); } /* 地球图标 → 语言下拉（中文 / English），挂在图标正下方 */ .lang-wrap { position: relative; display: inline-flex; cursor: pointer; } .lang-menu { left: 50%; right: auto; top: 34px; transform: translateX(-50%); width: 132px; } .lang-menu .menu-item { display: flex; align-items: center; justify-content: space-between; } .lang-menu .menu-item.on { background: var(--brand-soft); color: var(--brand); font-weight: 500; } .lang-menu .menu-item b { font-weight: 500; color: var(--brand); } /* ---------------- 侧栏「任务流程」（原型 侧栏卡：224×792 @ (88,88)，圆角 16） ---------------- */ /* 用户 2026-09-25：**内容多了不把框撑大**（WorkBuddy 那种）—— `1fr` 默认最小是 auto，会被内容顶高 → 改成 minmax(0,1fr)，行高就锁在视口里； `min-height:0` 让这一格可以缩。这样侧栏白卡固定 = 视口 − 顶栏 − 上下留白， 里面的「任务/项目/最近」超出时在卡内滚（.side-scrollall 本来就是 flex:1 + overflow-y:auto）。 */ .side { grid-area: side; padding: 16px 0 0 32px; min-height: 0; } .side-menu { background: #FFFFFF; border: 1px solid rgba(228,228,231,.7); border-radius: 16px; box-shadow: var(--shadow); padding: 20px 16px; height: calc(100% - 20px); overflow: auto; } /* 底边距 20（原型 880），内部滚动 */ .side-title { font-size: 12px; line-height: 20px; font-weight: 500; color: var(--t3); margin: 0 0 12px; } /* 小标题 12/20/500 */ /* 用户 2026-09-25：侧栏最上面只加一个 WorkPlace 品牌头（其它一律不动） */ .side-brand { padding: 2px 12px 14px; } .side-brand .bname { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--t1); } .side-brand .bver { font-size: 11px; line-height: 16px; color: var(--t3); margin-top: 2px; } .side-item { height: 40px; border-radius: 8px; padding: 0 12px; display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 22px; color: var(--t1); cursor: pointer; } .side-item > svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .side-item > svg .fill { fill: var(--t2); stroke: none; } .side-item.is-active > svg { stroke: var(--brand); } .side-item.is-active > svg .fill { fill: var(--brand); stroke: none; } .side-div { height: 1px; background: var(--divider); margin: 12px 0 0; } .task-item { display: flex; gap: 8px; height: 40px; margin-top: 8px; padding-left: 2px; } .task-item .tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--t3); margin-top: 7px; flex: 0 0 auto; } .task-item .tn { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t1); } .task-item .ts { font-size: 12px; line-height: 20px; color: var(--t2); } .side-item + .side-item { margin-top: 4px; } /* 行距 4 */ .side-item:hover { background: #FAFAFB; } .side-item.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 500; } /* 当前步 */ .side-item.is-past { color: var(--t2); } /* ---------------- 内容区（原型 内容列 x=344、卡间距 20、上下留白 16/20） ---------------- 纵向弹性：卡片保持原型高度，多余高度全部给最后一张卡 → 一屏装完，不需要下拉 */ /* 滚动条贴窗口最右边（和 ChatGPT 一样）：滚动容器不带左右留白，留白交给里面那层 */ .content { grid-area: content; padding: 0; overflow-y: auto; overflow-x: hidden; display: flex; } .content-inner { width: 100%; padding: 16px 32px 20px; display: flex; flex-direction: column; gap: 20px; min-height: 0; } /* 细滚动条（像 ChatGPT）：8px、圆角灰拇指、轨道透明 */ .content, .zoom-body, .drawer-body, .side-menu { scrollbar-width: thin; scrollbar-color: #C9CDD4 transparent; } .content::-webkit-scrollbar, .zoom-body::-webkit-scrollbar, .drawer-body::-webkit-scrollbar, .side-menu::-webkit-scrollbar { width: 8px; height: 8px; } .content::-webkit-scrollbar-track, .zoom-body::-webkit-scrollbar-track, .drawer-body::-webkit-scrollbar-track, .side-menu::-webkit-scrollbar-track { background: transparent; } .content::-webkit-scrollbar-thumb, .zoom-body::-webkit-scrollbar-thumb, .drawer-body::-webkit-scrollbar-thumb, .side-menu::-webkit-scrollbar-thumb { background: #C9CDD4; border-radius: 4px; } .content::-webkit-scrollbar-thumb:hover, .zoom-body::-webkit-scrollbar-thumb:hover, .drawer-body::-webkit-scrollbar-thumb:hover, .side-menu::-webkit-scrollbar-thumb:hover { background: #A9AFB8; } /* ============ Prompt 配置弹窗（顶栏齿轮图标）============ */ .pdfpages { display: flex; flex-direction: column; align-items: center; gap: 18px; } .pdfpage { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .pdfpage .pglabel { font-size: 12px; line-height: 18px; color: var(--t3); } .pdfpage canvas { display: block; background: #FFFFFF; box-shadow: 0 1px 3px rgba(15,23,41,.14), 0 10px 24px -14px rgba(15,23,41,.2); } .zoom-pages { font-size: 12px; line-height: 20px; color: var(--t3); margin-left: 12px; margin-right: auto; } .zoom-pages[hidden] { display: none !important; } /* 预览工具条（豆包那套）：缩放方式下拉 + 放大 / 缩小 / 截图 / 下载 / 全屏 */ .pv { display: flex; flex-direction: column; height: 100%; min-height: 0; } .mock.doc .docview { display: flex; flex-direction: column; overflow: hidden; } .mock.doc .docview > .pv { flex: 1 1 auto; min-height: 0; } /* 解析页两列卡：行高锁在容器高度内（否则页面会被预览内容撑高，滚动条跑到整页上） */ .split { grid-template-rows: minmax(0, 1fr); } .pv-bar { flex: 0 0 auto; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: #FFFFFF; border-bottom: 1px solid #E9EAEC; } .pv-pages { font-size: 12px; line-height: 20px; color: var(--t3); } .pv-acts { margin-left: auto; display: flex; align-items: center; gap: 4px; } .pv-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: #EFF1F3; padding: 18px 12px 26px; } .pv-body { position: relative; } /* 截图选区（拖拽框选，不是整页截） */ .pv-sel { position: absolute; inset: 0; z-index: 6; cursor: crosshair; background: rgba(15,23,41,.05); } .pv-sel-box { position: absolute; display: none; border: 1px solid var(--brand); background: rgba(74,123,176,.16); box-shadow: 0 0 0 9999px rgba(15,23,41,.12); } .pv-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 7; background: rgba(17,17,17,.84); color: #FFFFFF; font-size: 12px; line-height: 20px; padding: 4px 10px; border-radius: 6px; white-space: nowrap; } /* 选区浮出的小工具条（复制 / 问问 Agent），和参考图一样压在选区下方 */ .pv-shotbar { position: absolute; z-index: 8; display: flex; align-items: center; gap: 2px; padding: 4px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px -10px rgba(15,23,41,.35); } .pv-shotbar[hidden] { display: none !important; } .pv-shotbar button { height: 28px; padding: 0 10px; border: none; background: transparent; border-radius: 6px; font: 400 13px/20px var(--font); color: var(--t1); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .pv-shotbar button svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .pv-shotbar button:hover { background: var(--brand-soft); color: var(--brand); } .pv-shotbar [data-cancel] { color: var(--t2); padding: 0 8px; } /* 轻提示 */ .app-toast { position: fixed; left: 50%; bottom: 48px; transform: translateX(-50%); z-index: 60; background: rgba(17,17,17,.88); color: #FFFFFF; font: 400 13px/20px var(--font); padding: 8px 16px; border-radius: 8px; } /* 工作台输入框上方的截图附件（"问问 Agent" 贴过来的） */ .shot-chip { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin-bottom: 10px; padding: 6px 10px 6px 6px; background: #F7F8F9; border-radius: 10px; } .shot-chip img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: #FFFFFF; } .shot-chip span { font-size: 13px; line-height: 20px; color: var(--t2); } .shot-chip button { width: 20px; height: 20px; border: none; background: transparent; border-radius: 6px; color: var(--t3); cursor: pointer; font-size: 12px; } .shot-chip button:hover { background: #E9EBEE; color: var(--t1); } .mock .pv-body { max-height: calc(100dvh - 420px); } /* 兜底：页面在面板里滚动，而不是把整页撑高 */ .zt-wrap { position: relative; } /* 用户 2026-09-23：「自动缩放」= **一个图标按钮**（没有文字、没有边框），鼠标移上去才出下拉 */ .zt-btn { width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; } .zt-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* 用户 2026-09-23：工具条上的图标**一律不要灰底**（移上去、开着下拉都不留灰块）—— 原来 :hover 的 #F2F3F5 在"鼠标移上去就出下拉"之后会一直挂在按钮上，看着像残留的灰背景 */ .zt-btn:hover, .zt-btn:focus { background: transparent; } .zt-menu { position: absolute; top: 34px; right: 0; width: 160px; padding: 6px; background: #FFFFFF; z-index: 40; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 10px 24px -8px rgba(15,23,41,.1); } .zt-menu[hidden] { display: none !important; } /* 每行：图标（固定 18 的列，和文字垂直居中对齐）+ 文字 + 勾 */ .zt-menu .it { height: 30px; display: flex; align-items: center; gap: 10px; padding: 0 8px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 20px; color: var(--t1); } .zt-menu .it i { font-style: normal; flex: 1 1 auto; display: block; line-height: 20px; } .zt-menu .it > svg { width: 18px; height: 18px; flex: 0 0 18px; display: block; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* 用户 2026-09-23（照 501）：选中的是**浅绿底 + 绿字 + 绿勾**，勾在文字右边。 用户 2026-09-24：**整块菜单一行灰底都不要** —— 未选中/悬停一律透明（原来悬停的 #F4F9F5 看着就是"没清干净的灰底"）。 */ .zt-menu .it { background: transparent; } .zt-menu .it:hover { background: transparent; color: var(--t1); } .zt-menu .it.is-on { background: #E9F4EC; color: var(--ok-ink); } .zt-menu .it.is-on > svg { stroke: var(--ok-ink); } .zt-menu .tick { width: 12px; flex: 0 0 auto; text-align: right; font-size: 12px; color: transparent; } .zt-menu .it.is-on .tick { color: var(--ok-ink); } .zt-ico { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; } .zt-ico:hover, .zt-ico:focus { background: transparent; } .zt-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .zt-ico[hidden], .zt-wrap[hidden] { display: none !important; } .pm-mask { position: fixed; inset: 0; z-index: 50; background: rgba(15,23,41,.32); } .pm-mask[hidden] { display: none !important; } .pm { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 51; width: 780px; max-width: calc(100vw - 48px); max-height: calc(100vh - 64px); background: #FFFFFF; border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(15,23,41,.4); padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 14px; } .pm[hidden] { display: none !important; } .pm-head { display: flex; align-items: center; gap: 10px; } .pm-ico { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--t1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .pm-head b { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--t1); } .pm-x { margin-left: auto; width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; color: var(--t2); border-radius: 8px; } .pm-x:hover { background: #F2F3F5; color: var(--t1); } .pm-sub { margin: 0; font-size: 13px; line-height: 20px; color: var(--t3); } .pm-tabs { display: flex; gap: 4px; padding: 4px; background: #F4F5F7; border-radius: 10px; } .pm-tab { flex: 0 0 auto; padding: 7px 14px; border-radius: 8px; font-size: 13px; line-height: 20px; color: var(--t2); cursor: pointer; } .pm-tab.on { background: #FFFFFF; color: var(--t1); font-weight: 500; box-shadow: 0 1px 2px rgba(15,23,41,.08); } .pm-body { width: 100%; flex: 1 1 auto; min-height: 300px; resize: vertical; border: 1px solid var(--border); border-radius: 12px; padding: 16px; font: 400 14px/1.75 var(--font); color: var(--t1); background: #FFFFFF; outline: none; overflow: auto; } .pm-body:focus { border-color: var(--brand); } .pm-foot { display: flex; justify-content: flex-end; gap: 12px; } .pm-btn { height: 40px; padding: 0 18px; border: 1px solid var(--border); border-radius: 10px; background: #FFFFFF; display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--font); color: var(--t1); cursor: pointer; } .pm-btn svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .pm-btn:hover { border-color: var(--brand); color: var(--brand); } /* 保存 = 我们自己的主按钮配色（黑底白字，和「开始解析 / 确认无误」一致） */ .pm-btn.primary { background: var(--black); border-color: var(--black); color: #FFFFFF; } .pm-btn.primary:hover { background: var(--brand); border-color: var(--brand); color: #FFFFFF; } .view { display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; min-height: 0; } .view > .card:last-child { flex: 1 1 auto; } /* 撑开剩余高度；内容再高也不裁切，改由内容区滚动 */ .card { background: #FFFFFF; border: 1px solid rgba(228,228,231,.7); border-radius: 16px; box-shadow: var(--shadow); padding: 24px; flex: 0 0 auto; } /* v3Card */ .card > h2 { font-size: 18px; line-height: 28px; font-weight: 600; margin: 0 0 16px; } .card h3 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 20px 0 10px; } .card .desc { font-size: 14px; line-height: 22px; color: var(--t2); margin: 0 0 16px; } /* 问候卡（原型：960×104） */ .greet { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; } .greet h1 { font-size: 24px; line-height: 32px; font-weight: 600; margin: 0 0 6px; } /* 24/32/600 @ (24,22) */ .greet p { font-size: 14px; line-height: 22px; color: var(--t2); margin: 0; } /* 14/22/400 @ (24,60) */ .greet .date { font-size: 13px; line-height: 20px; color: var(--t3); } /* ---------------- 工作台首页（2026-09-21 调整：沿用原组件，只是拼成一张大卡） ---------------- 顶栏 / 左导航 / 侧栏上半（新建任务~更多）**都不动**；这里只改内容区与侧栏下半。 */ .card.home-big { display: flex; flex-direction: column; justify-content: center; gap: 18px; } /* 4 张卡 → 一张；内容垂直居中（照 465） */ /* 中间一列居中（照 465：内容不是铺满整卡，而是一列居中、最大约 860 宽） */ .card.home-big > .greet, .card.home-big > .taskgrid, .card.home-big > .askbox-wrap { width: 100%; max-width: 830px; margin-left: auto; margin-right: auto; } /* 左下角的「+」（照 465 只放一个加号，不要"上传文件"这几个字） */ .upbtn .plus { width: 22px; height: 22px; } .greet.center { justify-content: center; text-align: center; padding: 6px 24px 0; } /* 问候居中（A 版字号） */ .greet.center h1 { font-size: 26px; line-height: 34px; font-weight: 600; color: var(--t1); margin: 0 0 8px; } .greet.center p { font-size: 15px; line-height: 24px; color: var(--t2); margin: 0; } .taskcard .cr { margin-left: auto; color: var(--t3); font-size: 14px; } /* 动作胶囊右侧的 › */ /* 输入框：外层浅灰框 + 里面白底（465 那种"框里套框"）；底部只有 左 + / 右 发送 */ .askbox { height: auto; padding: 8px; background: #F4F4F5; border-radius: 16px; } .askinner { background: #FFFFFF; border-radius: 12px; padding: 12px 12px 8px; } .askbox .askline { width: 100%; min-height: 74px; padding: 0; border: none; background: transparent; resize: none; outline: none; font: 400 13px/20px var(--font); color: var(--t1); } .askbox .askline::placeholder { color: var(--t3); } .askfoot { position: static; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; } .skilltag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; margin-bottom: 10px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); font-size: 13px; } .skilltag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; } .skilltag button { border: none; background: transparent; color: inherit; cursor: pointer; font: 400 12px/20px var(--font); } /* 用户 2026-09-23 定：**上传的文件胶囊照 s182 那套不动**（灰卡 + 品牌色图标 + 「EXCEL · 14KB」）； 只有从知识库带过来的「library」胶囊做成和「文档处理」同一个蓝底蓝字标签（复用的 .skilltag， 所以这里没有额外样式）。 */ .send2:disabled { background: #ECEDEF; cursor: default; } /* 没打字：深一点的灰（=「新建任务」选中底色，用户 2026-09-21） */ .send2:disabled svg { fill: #FFFFFF; } /* 侧栏下半三段（任务 / 项目 / 最近）：各自滚动、无横线、项前无圆点 */ .side-sec { margin-top: 14px; } .side-sec .side-title { margin: 0 0 6px; } .side-scroll { max-height: 96px; overflow-y: auto; scrollbar-width: thin; } .side-scroll::-webkit-scrollbar { width: 6px; } .side-scroll::-webkit-scrollbar-thumb { background: #D8DBE0; border-radius: 3px; } /* ---------------- 工作台首页 · 第二版（2026-09-21 用户对着 WorkBuddy 468/470/471/465 逐条改） ---------------- 内容区：**很大的居中标题** + **一排小白胶囊**（白底黑字灰框、放不下左右滚）+ **居中的大输入框** */ .card.home-big { justify-content: center; gap: 0; padding-bottom: 96px; } /* 整组保持居中（用户：只让标题上移，别动整体） */ .card.home-big > .greet, .card.home-big > .chiprow, .card.home-big > .askbox-wrap { width: 100%; max-width: 830px; margin-left: auto; margin-right: auto; } /* 用户 2026-09-21：不按比例，直接用图上的尺寸 1151 */ .greet.center h1 { font-size: 34px; line-height: 44px; } /* 标题很大（照 465） */ .greet.center p { font-size: 16px; line-height: 26px; } /* 大标题：只有一行「订单 Agent，我帮你」，**黑色、更大**（用户 2026-09-21：删掉"早上好，锦华"） */ .hero { width: 100%; max-width: 830px; margin: -160px auto 182px; text-align: center; } /* 只把标题上移：标题**顶边**对齐侧栏「自动化」的顶边（实测 197）；下面用 174 的 margin 把胶囊/输入框留在原位 */ .hero h1 { font-family: Arial, Helvetica, "Microsoft YaHei", sans-serif; font-size: 31px; line-height: 40px; font-weight: 600; color: #18181B; margin: 0; } /* 字号是按 465 的比例算的：标题字形 38 : 提示字形 17 ≈ 2.24 → 我们的提示 14px × 2.24 ≈ 31px */ /* 功能胶囊：横排 + 放不下左右滚（不是 3×2 网格） */ .chiprow { display: flex; gap: 12px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: thin; } /* 胶囊→输入框 12px（照 465 量：15px 图内 × 0.72） */ .chiprow::-webkit-scrollbar { height: 6px; } .chiprow::-webkit-scrollbar-thumb { background: #D8DBE0; border-radius: 3px; } /* 注意：类名不能叫 .chip —— 订单信息卡里已经有个 .chip（12px 的小状态标签），会被它顶掉（实测又是 20px/12px） */ .skchip { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 28px; padding: 0 14px; /* 尺寸照 465 量出来（38px 图内 ≈ 28px 界面） */ border-radius: 22px; border: 1px solid #EBECEE; background: #FFFFFF; cursor: pointer; font-family: var(--font); font-size: 14px; line-height: 22px; font-weight: 400; color: #3F3F46; } /* 注意：不能写成 font: 400 14px/22px var(--font) —— 简写里带 var() 浏览器会整条丢掉，字号会掉回 13 */ .skchip:hover { background: #FAFAFB; } .skchip b { font-weight: 500; } .skchip > svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* 动作胶囊（点技能之后出现的那排，照 463）：**浅灰底、无边框、没有前置图标**，文字后面一个向下的黑箭头 */ .skchip.actchip { border: none; background: #ECEDEF; } /* 深灰（=「新建任务」选中底色，用户 2026-09-21） */ .skchip.actchip:hover { background: #E3E4E7; } .skchip .cdown { width: 12px; height: 12px; fill: none; stroke: #18181B; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* 条目右边的「⋯」+ 小菜单（置顶 / 重命名 / 删除），照 WorkBuddy 473 */ .ti-more { width: 22px; height: 22px; flex: 0 0 auto; border: none; border-radius: 6px; background: #F1F2F4; color: var(--t2); font-size: 12px; line-height: 22px; cursor: pointer; opacity: 0; transition: opacity .12s; } .ti-head:hover .ti-more { opacity: 1; } .ti-more:hover { background: #E8E9EB; color: var(--t1); } .ti-menu { position: fixed; z-index: 60; padding: 6px; min-width: 128px; /* 定位由 JS 按 ⋯ 的位置给（fixed 才能伸出侧栏） */ background: #FFFFFF; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 6px rgba(15,23,41,.06), 0 12px 28px -10px rgba(15,23,41,.18); } .ti-menu[hidden] { display: none; } .ti-menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: none; border-radius: 8px; background: transparent; cursor: pointer; font-family: var(--font); font-size: 13px; color: var(--t1); } .ti-menu button:hover { background: #F1F2F4; } .ti-menu button svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .ti-menu button.del { color: var(--danger-ink); } .ti-menu button.del svg { stroke: var(--danger-ink); } .ti-menu button.del:hover { background: var(--danger-soft); } /* 标题太长：**鼠标移上去才滚动播放**（用户 2026-09-21）；不悬停就只显示前面的字（省略号） */ .ti-head .tn i { font-style: normal; } /* 标题包在 里做滚动，别变成斜体（实测漏了这条） */ .ti-head .tn.scrollit > i { display: inline-block; } .ti-head:hover .tn.scrollit { text-overflow: clip; } .ti-head:hover .tn.scrollit > i { animation: tscroll 2.4s linear .25s infinite alternate; } /* 滚快一点（用户 2026-09-21：原来 6s 太慢） */ @keyframes tscroll { from { transform: translateX(0); } to { transform: translateX(var(--dx)); } } /* 输入框更大（照 465：又高又宽、居中） */ .askbox { height: auto; padding: 10px; border-radius: 20px; background: #F4F4F5; } /* 白色输入框**四周**都被浅灰包住（用户 2026-09-21） */ .askinner { border-radius: 14px; padding: 18px 18px 12px; } #wsAsk { min-height: 56px; } /* 用户 2026-09-21：整框高度调到 150（灰框 20 + 白框内 130） */ .askbox .askline { min-height: 168px; font-family: var(--font); font-size: 14px; line-height: 22px; font-weight: 400; } .askfoot { position: static; margin-top: 12px; display: flex; align-items: center; justify-content: space-between; } /* ---- 侧栏下半（照 WorkBuddy 468/470/471）：一整块滚动 + 段标题带 (n) 和折叠箭头 + 条目带时间和子项 ---- */ .side-scrollall { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 18px; scrollbar-width: thin; } .side-scrollall::-webkit-scrollbar { width: 6px; } .side-scrollall::-webkit-scrollbar-thumb { background: #D8DBE0; border-radius: 3px; } .side-sec { margin-top: 24px; } /* 段与段之间留足间距 */ .side-sec:first-child { margin-top: 0; } .sec-head { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 13px; line-height: 20px; color: var(--t2); cursor: pointer; } .sec-head:hover { background: #FAFAFB; } .sec-head span { flex: 1 1 auto; } .sec-head .secchev { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: var(--t3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .12s; } .sec-head .secchev.right { transform: rotate(-90deg); } /* 收起时箭头朝右 */ .task-item { display: block; height: auto; margin-top: 2px; padding-left: 0; position: relative; } /* 让「⋯」菜单贴着条目定位 */ .ti-head { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 8px; } .ti-head:hover { background: #FAFAFB; } /* 单行 + 放不下省略号（用户 2026-09-21："PO#10234 创建订单"不要分两行） */ .ti-head .tn { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 20px; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ti-head .tt { flex: 0 0 auto; font-size: 12px; line-height: 20px; color: var(--t3); } .ti-head .badge { flex: 0 0 auto; height: 20px; padding: 0 8px; border-radius: 10px; background: #F1F2F4; color: var(--t2); font-size: 12px; line-height: 20px; } .ti-head .kchev { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: var(--t3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ti-head .kchev.right { transform: rotate(-90deg); } .ti-kids { padding: 2px 12px 6px 24px; } .tk { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 20px; color: var(--t2); } .tk i { font-style: normal; flex: 0 0 auto; } .tk .kdone { color: #22A06B; } /* 完成：绿勾 */ .tk .kwait { color: #E8A33D; font-size: 10px; } /* 未完成：橙点 */ .sec-more { display: block; margin: 4px 12px 0; padding: 0; border: none; background: transparent; color: var(--t3); font: 400 12px/24px var(--font); cursor: pointer; } .sec-more:hover { color: var(--brand); } /* 侧栏字号与下面条目、聊天文字统一成 13（用户 2026-09-21） */ .side-item { font-size: 13px; } /* 当前项底色：比浅灰再深一点的灰 */ .side-item.is-active { background: #ECEDEF; color: var(--t1); font-weight: 500; } /* ---------------- 组件 ---------------- */ .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .row.end { justify-content: flex-end; } .btn { border: 1px solid var(--border); background: #FFFFFF; color: var(--t1); border-radius: 8px; padding: 9px 16px; font: 13px/20px var(--font); font-weight: 500; cursor: pointer; } .btn:hover { border-color: var(--brand); } .btn.primary { background: var(--black); border-color: var(--black); color: #FFFFFF; } /* 主按钮：黑底白字 */ .btn.sm { padding: 6px 10px; font-size: 12px; line-height: 18px; } .btn.ghost { background: #FAFAFB; } .chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 12px; line-height: 20px; font-weight: 500; } /* 状态胶囊 高 20 圆角 6 */ .chip.ok { color: var(--ok-ink); background: var(--ok-soft); } .chip.brand { color: var(--brand); background: var(--brand-soft); } .chip.warn { color: var(--warn-ink); background: var(--warn-soft); } .chip.danger { color: var(--danger-ink); background: var(--danger-soft); } .chip.plain { color: var(--t2); background: var(--divider); } /* 字段格（原型：名称 15/22/600 黑 → 值 13/20/400 灰 → 状态胶囊） */ .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 20px; } .field label { display: block; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--t1); } .field .val { font-size: 13px; line-height: 20px; color: var(--t2); margin-top: 2px; } .field .chip { margin-top: 8px; } /* 输入 / 发送（原型：输入框圆角 10；发送 32×32 黑圆 + 白纸飞机） */ textarea, input[type=text] { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font: 13px/20px var(--font); color: var(--t1); background: #F7F8F9; } textarea:focus, input[type=text]:focus { outline: none; border-color: var(--brand); background: #FFFFFF; } .askbar { display: flex; gap: 16px; align-items: center; } .bar { position: relative; } /* 孤立使用时也要能定位发送按钮 */ .bar input { height: 52px; padding: 0 56px 0 16px; background: #F7F8F9; } .askbar .bar { flex: 1; min-width: 240px; } .askbar .bar input { background: #FFFFFF; } .send { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 16px; border: none; background: var(--black); cursor: pointer; display: grid; place-items: center; } .send svg { width: 16px; height: 16px; fill: #FFFFFF; } /* 上传文件（原型 02-02：输入框左下角 上传图标 + 文案，可点） */ .upbtn { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; border: none; background: transparent; padding: 0; cursor: pointer; font: 400 13px/20px var(--font); color: var(--t2); } .upbtn:hover { color: var(--brand); } .upbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ============ 02-02 工作台主区（逐条对照原型） ============ */ /* 对话区：提问 14/22/500 @(PAD+16,24)；输入框 912×104 圆角 12，示例行在框内，上传左下、发送右下 */ .ask-title { margin: 0 0 0 16px; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--t1); } .askbox { position: relative; height: 104px; margin-top: 16px; padding: 14px 16px 0; background: #F7F8F9; border-radius: 12px; } .askbox .askline { width: 100%; border: none; background: transparent; padding: 0; border-radius: 0; font: 400 13px/20px var(--font); color: var(--t1); } .askbox .askline::placeholder { color: var(--t3); } .askbox .askline:focus { outline: none; background: transparent; } .askbox .hint2 { margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--t3); } .askfoot { position: absolute; left: 16px; right: 16px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .send2 { width: 32px; height: 32px; border: none; border-radius: 16px; background: var(--black); display: grid; place-items: center; cursor: pointer; } .send2 svg { width: 16px; height: 16px; fill: #FFFFFF; } /* 推荐任务：3 × 2，每张 68 高 = 图标 + 一行标题（原型没有副标题） */ .taskgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; margin-top: 14px; } .taskcard { height: 68px; border: 1px solid var(--border); border-radius: 12px; background: #FFFFFF; display: flex; align-items: center; gap: 12px; padding: 0 20px; cursor: pointer; } .taskcard:hover { border-color: var(--brand); background: var(--brand-soft); } .taskcard svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .taskcard svg .fill { fill: var(--t2); stroke: none; } .taskcard b { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--t1); } /* 最近活动：完成 = 绿勾，等待 = 灰点；行距 46、文字 13/20 */ .acts { display: flex; flex-direction: column; gap: 26px; margin-top: 22px; } .act { position: relative; padding-left: 30px; font-size: 13px; line-height: 20px; color: var(--t2); } .act .slot { position: absolute; left: 0; top: 0; width: 14px; height: 20px; display: flex; align-items: center; } .act .slot svg { width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .act:not(.done)::before { content: ""; position: absolute; left: 6px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--t3); } /* 表格（原型：表头 12/20/500 浅灰；单元格 13/20/400；数字右对齐） */ .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th { text-align: left; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--t3); padding: 8px 12px; border-bottom: 1px solid var(--divider); } .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--divider); color: var(--t1); } .tbl tr:last-child td { border-bottom: none; } .tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; } .tbl .subtotal td { border-top: 1px solid var(--divider); border-bottom: none; font-weight: 500; } /* 步骤（解析 / 登记进度；进行中用品牌蓝，不用橙） */ .steps { display: flex; flex-direction: column; gap: 10px; } .step { font-size: 13px; line-height: 20px; color: var(--t2); padding-left: 16px; position: relative; } .step::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--divider); } .step.done::before { background: var(--ok); } .step.doing::before { background: var(--brand); } .step b { color: var(--t1); font-weight: 500; } /* 拖拽区（原型：1.5px 虚线、圆角 12） */ .drop { border: 1.5px dashed var(--border); border-radius: 12px; background: #FAFAFB; padding: 22px; text-align: center; color: var(--t2); font-size: 13px; line-height: 20px; cursor: pointer; } .drop b { color: var(--t1); } /* 底部操作面板（原型：独立圆角面板 #F7F8F9 圆角 14） */ .panel { background: #F7F8F9; border-radius: 14px; padding: 18px 20px; margin-top: 16px; } .panel .panel-label { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t2); margin: 0 0 12px; } /* 一键示例 */ .demo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .demo-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: #FFFFFF; cursor: pointer; } .demo-card:hover { border-color: var(--brand); background: var(--brand-soft); } .demo-card b { display: block; font-size: 14px; line-height: 22px; margin-bottom: 4px; } .demo-card span { font-size: 13px; line-height: 20px; color: var(--t2); } /* ============ 02-03B 按模版生成 PO（与原型逐条对应） ============ */ .card.h16 > h2 { font-size: 16px; line-height: 24px; } /* 原型卡标题 16/24/600 */ /* 模板选择：3 个 40 高的紧凑下拉（控件与「导出」同款），点开是模板列表；选中态 = 品牌浅底 + 品牌描边 */ .tpl-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .tpl-sel { position: relative; } .tpl-btn { width: 100%; height: 40px; border: 1px solid var(--border); border-radius: 8px; background: #FFFFFF; font: 400 13px/20px var(--font); color: var(--t1); display: flex; align-items: center; padding: 0 12px; cursor: pointer; } .tpl-btn svg { width: 9px; height: 5px; margin-left: auto; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; } .tpl-btn:hover { border-color: var(--brand); } .tpl-btn.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 500; } .tpl-btn.on svg { stroke: var(--brand); } /* 分类名前面的小图标（用户 2026-09-21：三个分类各自不同） */ .tpl-btn .ti { width: 16px; height: 16px; margin: 0 8px 0 0; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .tpl-menu { position: absolute; top: 48px; left: 0; right: 0; padding: 8px; background: #FFFFFF; z-index: 30; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 10px 24px -8px rgba(15,23,41,.1); } .tpl-menu[hidden] { display: none !important; } .tpl-menu .it { height: 32px; border-radius: 6px; display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 13px; line-height: 20px; color: var(--t1); cursor: pointer; } .tpl-menu .it svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .tpl-menu .it:first-child { background: #F7F8F9; } .tpl-menu .it:hover { background: var(--brand-soft); color: var(--brand); } .tpl-menu .it.empty { color: var(--t3); cursor: default; background: transparent; } .tpl-menu .it.empty:hover { background: transparent; color: var(--t3); } /* 菜单：顶部搜索框（前面一个放大镜图标）+ 每行 [预览][使用] 两个文字按钮，**并排**（用户 2026-09-21 选 A） */ .tpl-menu .tpl-search { position: relative; padding: 0 0 6px; } .tpl-menu .tpl-search .mag { position: absolute; left: 9px; top: 8px; width: 14px; height: 14px; fill: none; stroke: var(--t3); stroke-width: 1.5; } .tpl-menu .tpl-search input { width: 100%; height: 32px; padding: 0 10px 0 30px; border: 1px solid var(--border); border-radius: 6px; background: #F7F8F9; font: 400 13px/20px var(--font); color: var(--t1); outline: none; } .tpl-menu .tpl-search input:focus { border-color: var(--brand); background: #FFFFFF; } .tpl-menu .it { cursor: default; } /* 点模板名本身不动作（用户 2026-09-21） */ .tpl-menu .it:hover { background: var(--brand-soft); color: var(--t1); } /* 一行三列：图标 / 文件名 / [预览][使用] —— 严格同一行、垂直居中（用户 2026-09-21：按钮不能偏下） */ .tpl-menu .it { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; height: 36px; padding: 0 8px; } .tpl-menu .it .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 注意：类名不能叫 .acts —— 全局有个 .acts { flex-direction: column; margin-top: 22px }， 之前撞名了，把这一行的按钮顶下去 22px（用户 2026-09-21 报的"预览和使用偏下"） */ .tpl-menu .it .rowacts { display: flex; flex-direction: row; align-items: center; gap: 6px; justify-self: end; margin: 0; } .tpl-menu .it.empty { display: flex; align-items: center; height: 32px; } .tpl-menu .it .mini { height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: #FFFFFF; font: 400 12px/22px var(--font); color: var(--t2); cursor: pointer; white-space: nowrap; } .tpl-menu .it .mini:hover { border-color: var(--brand); color: var(--brand); } /* 「预览」和「使用」用**同一种颜色**（用户 2026-09-21：都用预览那种浅灰，不要一个蓝一个灰） */ .tpl-menu .it .using { font-size: 12px; line-height: 24px; color: var(--t3); font-style: normal; padding: 0 4px; } /* "知识库模板"这 5 个字：跟下面对话框里的字一样大（13px），颜色保持原来的灰（用户 2026-09-21） */ .kb-title { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t3); } /* 压矮的卡（02-03B 的三张卡）：把高度让给加高的模板拖拽框。 左右留白仍是 24（和原型一致），只收上下留白与标题间距 */ .card.tight { padding: 18px 24px; } .card.tight > h2 { margin-bottom: 8px; } .card.tight .file-name { margin-top: 10px; } /* 生成 PI 页「告诉 Agent 要改什么」：输入框加高（原来那两行静态回执删掉了，高度给输入框），发送按钮落到底部 */ /* 生成 PI 页的"对话输入框"（对齐豆包：一个大框 + 左下角「+」+ 右下角 发送/导出） */ .chatbox { border: 1px solid var(--border); border-radius: 12px; background: #FFFFFF; padding: 8px 10px 8px; } .chatbox > input { width: 100%; height: 64px; border: none; outline: none; background: transparent; font: 400 14px/22px var(--font); color: var(--t1); padding: 8px 6px 0; } .chatbox > input::placeholder { color: var(--t3); } .chatbox-foot { display: flex; align-items: center; gap: 8px; } .plus-wrap { position: relative; } .plusbtn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: #FFFFFF; display: grid; place-items: center; cursor: pointer; } .plusbtn:hover { border-color: var(--brand); } .plusbtn svg { width: 18px; height: 18px; fill: none; stroke: var(--t1); stroke-width: 1.5; stroke-linecap: round; } .plusmenu { position: absolute; left: 0; bottom: 40px; width: 260px; padding: 6px; background: #FFFFFF; z-index: 30; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 12px 28px -10px rgba(15,23,41,.18); } .plusmenu[hidden] { display: none !important; } .plusmenu .hd { margin: 0; padding: 6px 8px 4px; font-size: 12px; line-height: 18px; color: var(--t3); } .plusmenu .it { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 8px; font-size: 13px; line-height: 20px; color: var(--t1); cursor: pointer; } .plusmenu .it:hover { background: var(--brand-soft); color: var(--brand); } .plusmenu .it svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .chatbox-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; } .send2 { width: 32px; height: 32px; border-radius: 16px; border: none; background: var(--black); cursor: pointer; display: grid; place-items: center; } .send2 svg { width: 16px; height: 16px; fill: #FFFFFF; } /* 上传的文件行（上传 PO 之后出现在输入框上方） */ .file-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .file-line svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .file-line b { font-size: 14px; line-height: 22px; font-weight: 500; } .file-line .muted { font-size: 12px; line-height: 20px; } /* 上传条：912×40 圆角 10，1.5 虚线；右侧「选择文件」88×28 白底 */ .up-strip { height: 40px; background: #FAFAFB; border: 1.5px dashed var(--border); border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; } .up-strip:hover { border-color: var(--brand); } .up-strip svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .up-strip span { font-size: 13px; line-height: 20px; color: var(--t2); } .up-strip .btn { margin-left: auto; width: 88px; height: 28px; padding: 0; font: 500 12px/18px var(--font); border-radius: 8px; } /* 生成结果字段：3 列 × 189、行高 40；label 12 浅灰 / 值 13 黑 500（无胶囊） */ .f-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; } /* 一行 4 个（生成结果 9 个字段 → 4/4/1） */ .f-grid .f { height: 40px; } /* 生成结果：字段名黑字加粗放大、下面的值灰字（参考信息确认页的字号层级，用户 2026-09-20 要求） */ .f-grid .f i { display: block; font-style: normal; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--t1); } .f-grid .f b { display: block; font-size: 13px; line-height: 22px; font-weight: 400; color: var(--t3); } /* 导出：黑色 200×40 + 下拉（02-03B2 展开态） */ .exp { position: relative; } .exp-btn { width: 200px; height: 40px; border: none; border-radius: 8px; background: var(--black); color: #FFFFFF; font: 500 13px/20px var(--font); display: flex; align-items: center; padding: 0 16px; cursor: pointer; } .exp-btn svg { width: 9px; height: 5px; margin-left: auto; fill: none; stroke: #FFFFFF; stroke-width: 1.5; } .exp-dd { position: absolute; top: 48px; right: 0; width: 200px; padding: 8px; background: #FFFFFF; z-index: 20; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 10px 24px -8px rgba(15,23,41,.1); } .exp-dd[hidden] { display: none !important; } .exp-dd .it { height: 32px; border-radius: 6px; display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 13px; line-height: 20px; color: var(--t1); cursor: pointer; } .exp-dd .it:first-child { background: #F7F8F9; } .exp-dd .it:hover { background: var(--brand-soft); color: var(--brand); } .exp-dd .it svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* 文件名：原型是 12/20 浅灰一行，这里保留可改，但视觉仍是一行浅灰小字 */ .file-name { display: flex; align-items: center; gap: 4px; margin-top: 16px; font-size: 12px; line-height: 20px; color: var(--t3); } .file-name input { width: 240px; border: none; background: transparent; padding: 0; font: 400 12px/20px var(--font); color: var(--t3); } .file-name input:focus { outline: none; color: var(--t1); background: #F7F8F9; border-radius: 4px; } /* ============ 02-04 PO 信息解析（左卡「文件」396 + 右卡「解析状态」540） ============ */ .split { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: stretch; } .view > .split { flex: 1 1 auto; } /* 两列卡一起撑满剩余高度（原型底边对齐 880） */ .card.col { display: flex; flex-direction: column; } .card.col, .mock, .mock.doc { min-height: 0; } /* flex 默认 min-height:auto 会被内容撑高，这里显式允许压缩 */ .file-head { display: flex; align-items: center; gap: 8px; } .file-head svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .file-head b { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--t1); } /* PO 文件预览：白底描边圆角 12，里面是骨架线（原型 mock 线条） */ .mock { margin-top: 24px; flex: 1; overflow: hidden; background: #FFFFFF; border: 1px solid var(--border); border-radius: 12px; padding: 24px; } .mock .t { width: 140px; height: 14px; border-radius: 4px; background: var(--border); } /* 🔴 2026-09-24s186：原来写的是 `.mock i` —— 预览工具条「自动缩放」下拉就长在 `.mock.doc` 里面， 菜单每行的文字标签 `` 被这条骨架线规则命中 → 文字后面一条 8px 灰条 + 行高被压到 8px， 看起来就是"菜单里有没清干净的灰底 / 图标和文字不齐"（用户 2026-09-24 报的）。 骨架线本来就只挂在 `.mock` 的直接子节点上，加 `>` 隔开即可。 */ .mock > i { display: block; height: 8px; border-radius: 4px; background: var(--divider); margin-bottom: 26px; } .mock > i:first-of-type { margin-top: 22px; } .mock p { margin: 10px 0 0; font-size: 12px; line-height: 20px; color: var(--t3); } .mock .preal { margin-top: 22px; } .mock .preal div { font-size: 11px; line-height: 18px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock.doc { padding: 12px; } /* 真实文件预览：留白收窄，尽量显示原文 */ .mock.doc .t { display: none; } /* 真文件预览时不要那条占位标题条 */ .mock { display: flex; flex-direction: column; } .mock .docview { margin-top: 4px; flex: 1; min-height: 0; overflow: hidden; } .mock .docview .pdfview { width: 100%; height: 100%; border: 0; } .mock.doc .docview canvas { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px var(--divider); } .mock.doc .docview table { border-collapse: collapse; font: 8px/1.25 "Microsoft YaHei", Arial, sans-serif; color: var(--t1); } .mock.doc .docview td, .mock.doc .docview th { border: 1px solid var(--border); padding: 1px 3px; white-space: nowrap; } .mock.doc .docview tr:first-child td { background: #F7F8F9; font-weight: 600; } .docview table.sheet { border-collapse: collapse; background: #FFFFFF; table-layout: fixed; } .docview table.sheet td { border: 1px solid #D9D9D9; padding: 2px 4px; font: 11px/1.35 "Microsoft YaHei", Arial, sans-serif; color: #1a1a1a; white-space: pre-wrap; word-break: break-word; vertical-align: top; } .zoom-body .pdfview { width: 100%; height: 100%; border: 0; } .mock .pnote { margin-top: 22px; font-size: 12px; line-height: 20px; color: var(--warn-ink); } .mock.doc { cursor: zoom-in; } /* 点击放大 */ /* 预览放大（像 PPT 里点一下图片放大那样） */ .zoom { position: fixed; inset: 0; z-index: 41; background: #FFFFFF; display: flex; flex-direction: column; } /* 模板预览：弹出一个"框框"（留边距 + 圆角 + 投影），和 PO 铺满整页的形态区分开 */ /* 模板预览：像 Prompt 配置那样"弹到屏幕中间"，尺寸取 PO 预览面板的常见尺寸 */ .zoom.boxed { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1360px, calc(100vw - 80px)); height: min(760px, calc(100vh - 80px)); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(15,23,41,.45); overflow: hidden; } .zoom[hidden] { display: none !important; } .zoom-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--divider); } .zoom-head b { font-size: 14px; line-height: 22px; font-weight: 500; } .zoom-body { flex: 1; overflow: auto; padding: 20px; background: #F5F7F9; } .zoom-body { display: flex; flex-direction: column; } .zoom-body canvas { display: block; width: 100%; height: auto; margin-bottom: 12px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--border); } .zoom-body table { border-collapse: collapse; background: #FFFFFF; font: 12px/1.4 "Microsoft YaHei", Arial, sans-serif; } .zoom-body td, .zoom-body th { border: 1px solid var(--border); padding: 3px 6px; white-space: nowrap; } .zoom-body .docx-wrapper { background: transparent; padding: 0; } /* 模板预览：像在线表格预览那样——白底、整表铺开、上下左右自己滚，不做"一页纸"、不整表缩放 */ .zoom-head { position: relative; } .zoom-acts { display: flex; align-items: center; gap: 8px; } .zoom-body.sheetview { background: #FFFFFF; padding: 0; display: block; overflow: auto; } /* 模板预览 = 在线表格编辑器（和文档查看器同一套观感）：灰底上一张"表"，A/B/C 列标 + 1/2/3 行号 + 公式栏 + 格子可点可改。 表里保留**原文件自己的边框/底色/合并**（不许删线）。 */ .zoom-body.sheetview { background: #EFF1F3; padding: 20px 0 28px; } .zoom-body.sheetview table.grid { border-collapse: separate; border-spacing: 0; width: max-content; margin: 0 auto; background: #FFFFFF; box-shadow: 0 1px 3px rgba(15,23,41,.14), 0 10px 24px -14px rgba(15,23,41,.2); font: 13px/1.5 var(--font); color: var(--t1); } .zoom-body.sheetview .grid th, .zoom-body.sheetview .grid td { border-right: 1px solid #E9EAEC; border-bottom: 1px solid #E9EAEC; } .zoom-body.sheetview .grid th.ch { position: sticky; top: 34px; z-index: 2; width: 140px; height: 26px; background: #F7F8F9; color: var(--t2); font-size: 12px; font-weight: 500; } .zoom-body.sheetview .grid th.rh { position: sticky; left: 0; z-index: 1; width: 48px; height: 26px; background: #F7F8F9; color: var(--t3); font-size: 12px; font-weight: 400; text-align: center; } .zoom-body.sheetview .grid th.corner { position: sticky; top: 34px; left: 0; z-index: 3; width: 48px; background: #F1F3F5; } .zoom-body.sheetview .grid td { padding: 4px 8px; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; background: #FFFFFF; } .zoom-body.sheetview .grid thead th.ch { border-top: 1px solid #E9EAEC; } .zoom-body.sheetview .grid tbody th.rh { border-left: 1px solid #E9EAEC; } .zoom-body.sheetview .sheettab { position: sticky; bottom: 0; left: 0; height: 34px; display: flex; align-items: center; padding: 0 16px; background: #FAFAFB; border-top: 1px solid #E9EAEC; font-size: 12px; color: var(--t2); } /* 公式栏（左边格子坐标、右边内容，可改）+ 选中格高亮 */ .zoom-body.sheetview .fbar { position: sticky; top: 0; z-index: 5; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: #FFFFFF; border-bottom: 1px solid #E9EAEC; } .zoom-body.sheetview .fbar .ref { width: 64px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #E3E5E8; border-radius: 4px; font-size: 12px; color: var(--t1); } .zoom-body.sheetview .fbar .fx { font-size: 12px; font-style: italic; color: var(--t3); flex: 0 0 auto; } .zoom-body.sheetview .fbar input { flex: 1 1 auto; height: 24px; border: 1px solid #E3E5E8; border-radius: 4px; padding: 0 8px; font: 400 13px/22px var(--font); color: var(--t1); background: #FFFFFF; } .zoom-body.sheetview .fbar input:focus { outline: none; border-color: var(--brand); } .zoom-body.sheetview .grid td { cursor: cell; } .zoom-body.sheetview .grid td:focus, .zoom-body.sheetview .grid td.sel { outline: 2px solid var(--brand); outline-offset: -2px; } /* 6 条解析步骤：完成 = 绿勾；进行中 = 琥珀圆点 + 黑色加粗 */ .psteps { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; } .pstep { display: flex; align-items: center; font-size: 14px; line-height: 22px; color: var(--t2); } .pstep i { width: 14px; height: 14px; flex: 0 0 auto; margin-right: 12px; display: grid; place-items: center; } .pstep i svg { width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pstep.doing { color: var(--t1); font-weight: 500; } .pstep.doing i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); } /* 进度：分隔线 + 琥珀进度条 */ .div1 { height: 1px; border: none; background: var(--divider); margin: 26px 0 0; } .prog-row { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 8px; } .prog-row span { font-size: 12px; line-height: 20px; font-weight: 500; color: var(--t3); } .prog-row b { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--warn-ink); } .prog { height: 6px; border-radius: 3px; background: var(--divider); } .prog i { display: block; height: 6px; border-radius: 3px; background: var(--warn); } /* ============ 02-05 信息确认（字段固定 2 列 + 底部独立灰面板） ============ */ .fields.two { grid-template-columns: repeat(2, 1fr); gap: 0 16px; } /* 原型 cw=448、行距 80 */ .fields.two .field { height: 80px; } .fields.two .field .val { margin-top: 4px; } .fields.two .field .chip { margin-top: 10px; } .ask-panel { padding: 18px 20px 20px; } .ask-panel .panel-label { margin: 0 0 20px; } .ask-row { display: flex; align-items: center; gap: 12px; } .ask-row .bar { flex: 1; min-width: 240px; } .ask-row .bar input { height: 56px; background: #FFFFFF; } .ask-row .btn.ok { flex: 0 0 auto; width: 120px; height: 40px; padding: 0; } .rc-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .rc-line span:first-child { font-size: 13px; line-height: 20px; color: var(--t2); } .rc-line .undo { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--brand); cursor: pointer; white-space: nowrap; } /* ============ 02-01 Agent 配置（系统连接列表） ============ */ .dropzone { height: 144px; background: #FAFAFB; border: 1.5px dashed var(--border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; } .dropzone:hover { border-color: var(--brand); } .dropzone.dragging { border-color: var(--brand); background: var(--brand-soft); } .dropzone.tiny { height: 96px; gap: 8px; } .dropzone.tiny b { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--t2); } .dropzone svg { width: 20px; height: 20px; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .dropzone b { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--t1); } .dropzone .btn { width: 104px; height: 32px; padding: 0; font: 500 13px/20px var(--font); border-radius: 8px; } .card.next { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .card.next .parse { flex: 0 0 auto; width: 112px; height: 36px; padding: 0; font: 500 13px/20px var(--font); } .fchips { display: flex; flex-direction: column; gap: 24px; margin-top: 20px; } .fchips .row2 { display: grid; gap: 12px; } .fchips .row2 span { height: 36px; display: flex; align-items: center; padding: 0 12px; background: #F7F8F9; border-radius: 8px; font-size: 13px; line-height: 20px; color: var(--t2); } .view.nstretch > .card:last-child { flex: 0 0 auto; } /* 原型这一页内容不拉到底，下方留底色 */ .agentline { display: flex; align-items: center; gap: 10px; margin-top: 18px; } .agentline .core { width: 24px; height: 24px; border-radius: 7px; background: var(--brand-soft); position: relative; flex: 0 0 auto; } .agentline .core::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.2px solid var(--brand); } .agentline .core::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--brand); } .agentline b { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--t1); } .agentline .connsum { margin-left: auto; font-size: 13px; line-height: 20px; color: var(--t2); } .agentline .connsum em { font-style: normal; font-weight: 500; color: var(--brand); } .syslist { margin: 20px -24px 0; border-top: 1px solid var(--divider); } .sys-row { height: 82px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--divider); } .sys-row:last-child { border-bottom: none; } .sys-row .l .n { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--t1); } .sys-row .l .n svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .sys-row .l .d { margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--t2); } .sys-row .r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .sys-row .s1 { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t3); } .sys-row .s2 { display: flex; align-items: center; gap: 16px; font-size: 13px; line-height: 20px; color: var(--t2); } .sys-row .s2 .av { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; } .sys-row .s2 .av svg { width: 14px; height: 14px; fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sys-row .s2 .acc { margin-left: -10px; } .sys-row .s2 .act { font-weight: 500; color: var(--t1); cursor: pointer; } .sys-row .s2 .act:hover { color: var(--brand); } .mark { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #A1A1AA; position: relative; flex: 0 0 auto; } .mark.on { border-color: var(--ok); } .mark.on::after { content: ""; position: absolute; inset: 1.3px; border-radius: 50%; background: var(--ok); } /* ============ 02-08 CRM 登记（连接状态 / CRM 订单信息 / Agent 自动登记） ============ */ .stat2 { display: flex; gap: 24px; } .stat2.card { padding: 16px 24px; } /* 原型该卡上下留白 16/14（卡高 104） */ .stat2 .col { flex: 1; min-width: 0; } .stat2 .lab { margin: 0 0 6px; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--t3); } .ckline { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 20px; color: var(--t2); } .ckline.big { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--t1); margin-bottom: 8px; } .ckline svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--ok); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* CRM 订单信息：4 列 × 4 行，格子高 46（原型），标签 13/500 黑 + 值 13/400 灰 */ .f4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 20px; margin-top: 16px; } .f4 .c { height: 46px; min-width: 0; } .f4 .k { display: block; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t1); } .f4 .v { display: block; font-size: 13px; line-height: 20px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Agent 自动登记：蓝点 + 5 条勾选步骤（两列，行距 26）+ 独立结果框 */ .doing { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t1); } .doing::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; } .rgrid { display: grid; grid-template-columns: 300px 300px; row-gap: 6px; margin-top: 12px; } .resbox { display: grid; grid-template-columns: 90px 1fr; row-gap: 10px; align-items: center; margin-top: 20px; padding: 14px 20px; background: #F7F8F9; border-radius: 12px; font-size: 13px; line-height: 20px; } .resbox .k { color: var(--t3); } .resbox .v { font-weight: 500; color: var(--t1); } /* 抽屉（审计日志 / 连接设置） */ .overlay { position: fixed; inset: 0; background: rgba(15,23,41,.28); z-index: 20; } .drawer { position: fixed; top: 0; right: 0; width: 420px; max-width: 92vw; height: 100vh; background: #FFFFFF; z-index: 21; box-shadow: -12px 0 32px rgba(15,23,41,.12); display: flex; flex-direction: column; } /* 必须显式处理 hidden：drawer 的 display:flex 会覆盖 hidden 属性的 display:none */ .drawer[hidden], .overlay[hidden], .view[hidden] { display: none !important; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--divider); } .drawer-body { padding: 16px 20px; overflow: auto; } .log-item { font-size: 13px; line-height: 20px; color: var(--t2); padding: 10px 0; border-bottom: 1px dashed var(--divider); } .log-item b { color: var(--t1); font-weight: 500; } .muted { color: var(--t3); font-size: 12px; line-height: 20px; } /* 手机：收起导航条与侧栏（面试官可能用手机点开） */ @media (max-width: 900px) { .app { grid-template-columns: 1fr; grid-template-areas: "top" "content"; height: auto; min-height: 100vh; } .content { overflow: visible; } .side-menu { height: auto; } .rail, .side { display: none; } .content { padding: 12px 16px 28px; } .demo-row { grid-template-columns: 1fr; } .fields { grid-template-columns: 1fr 1fr; } } /* 生成 PI 页改版（v2026-09-20s30，用户逐条确认）： 拖拽框 / 将要解析的字段 / 尚未选择文件 三块都删了；「选择模板」卡收在「或上传自己的模板」这行； 下面这张卡撑满剩余高度，输入面板沉到卡片底部（空的地方是对话记录区）， 导出按钮跟「信息确认」页的「确认无误」同位置同尺寸（120×40 黑底）。 */ .card.genchat { display: flex; flex-direction: column; min-height: 0; } /* 对话区 = 第二这条滚动条（用户 2026-09-20 要求「和 ChatGPT 一样，两条滚动条」）： 这块自己滚、条子长在对话区右边缘；条子样式和整页那条一模一样（8px 圆角灰拇指）。 */ .card.genchat .chatlog { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #C9CDD4 transparent; } /* 用户 2026-09-23：**聊天内容要和输入框两端对齐** —— 消息列用和输入框同一个宽度 + 同一个居中， 左右各留 12px（= 输入框内层 `.askinner` 的左右内边距），这样消息气泡和输入框里的文字左右都齐。 */ .card.genchat .chatlog { width: 100%; max-width: 60%; margin-left: auto; margin-right: auto; padding-left: 12px; } /* 用户 2026-09-23：第一条消息离聊天卡顶部**再留多一点**（照别的 AI 的呼吸感） */ .card.genchat .chatlog { padding-top: 24px; } .card.genchat .chatlog::-webkit-scrollbar { width: 8px; } .card.genchat .chatlog::-webkit-scrollbar-track { background: transparent; } .card.genchat .chatlog::-webkit-scrollbar-thumb { background: #C9CDD4; border-radius: 4px; } .card.genchat .chatlog::-webkit-scrollbar-thumb:hover { background: #A9AFB8; } /* 消息气泡：你说的话在右边（黑底白字，和主按钮同色），Agent 回话在左边（浅灰底） */ .chatlog .crow { display: flex; margin-bottom: 12px; } .chatlog .crow.you { justify-content: flex-end; } .chatlog .bub { max-width: 72%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 20px; white-space: pre-wrap; word-break: break-word; } .chatlog .bub.you { background: var(--black); color: #FFFFFF; border-bottom-right-radius: 4px; } .chatlog .bub.ai { background: #F7F8F9; color: var(--t1); border-bottom-left-radius: 4px; } .chatlog .bub .undo { display: block; margin-top: 6px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--brand); cursor: pointer; } .chatlog .chat-hint { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--t3); } /* 文档处理页 · 点聊天里的文件 → 聊天框内部左右分栏（豆包那种）：左聊天、右预览。 只改这一张卡里面，卡片外的问候卡 / 选择模板卡 / 外壳尺寸都不动。 */ .card.genchat.split { flex-direction: row; gap: 20px; } .card.genchat .genmain { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .card.genchat .genpane { flex: 0 0 560px; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* 浏览器全屏时（用户 2026-09-21：不要黑屏、不要冒滚动条）： ① 给查看器一个浅灰底（不然全屏背板是黑的，看着像黑屏）； ② 高度放开（原来 .mock .pv-body 有 max-height: calc(100dvh - 420px)，全屏时把页面压窄 → 出滚动条）。 */ .pv:fullscreen { background: #EFF1F3; display: flex; flex-direction: column; height: 100%; } .pv:fullscreen .pv-bar { flex: 0 0 auto; } .pv:fullscreen .pv-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; } .pv:-webkit-full-screen { background: #EFF1F3; } .pv:-moz-full-screen { background: #EFF1F3; } .genpane .mock { margin-top: 0; min-width: 0; overflow: hidden; } .genpane .docview { display: block; overflow: auto; } /* 里面的表格宽了就自己滚，不许把卡片顶开 */ /* 用户 2026-09-22：预览框里的滚动条要**和聊天框那条一样长**（铺满整个预览框）。 `.mock .pv-body` 原来有 max-height: calc(100dvh - 420px)，把滚动区卡在 597px → 下面空 200 多像素、滚动条也只有一半长。这里只对**预览框里**的查看器放开（全屏那套不动）。 */ .genpane .pv-body { max-height: none; } .pane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .pane-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 20px; color: var(--t2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pane-name svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .pane-head .btn.sm { margin-left: auto; } .pane-head .pane-x { margin-left: auto; } /* 预览头部只剩文件名 + 关闭（用户要求去掉两个下载按钮） */ .pane-src { margin-left: 8px; font-style: normal; font-size: 12px; line-height: 18px; color: var(--t3); } .pane-x { border: none; background: transparent; color: var(--t3); cursor: pointer; font: 400 12px/20px var(--font); padding: 4px 6px; border-radius: 6px; } .pane-x:hover { background: #F2F3F5; color: var(--t1); } /* 聊天里的附件卡（PO / 生成的 PI）：点一下就是上面那个分栏 */ .chatlog .filecard { display: flex; align-items: center; gap: 10px; max-width: 72%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: #FFFFFF; cursor: pointer; } .chatlog .filecard:hover { border-color: var(--brand); background: var(--brand-soft); } .chatlog .filecard svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .chatlog .filecard b { display: block; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t1); } .chatlog .filecard span { font-size: 12px; line-height: 18px; color: var(--t3); } /* 宽气泡：解析清单卡 / 订单信息卡要在气泡里铺满 */ .chatlog .bub.wide { width: 100%; max-width: 100%; } .chatlog .bub .ck-head { margin: 0 0 10px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t1); } .chatlog .bub .ck-ask { margin: 12px 0 0; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--brand); } .chatlog .bub .psteps { margin: 0; } .chatlog .bub .prog-row { margin: 10px 0 0; } .oa-note { margin-right: auto; font-size: 13px; line-height: 20px; color: var(--t2); } @media (max-width: 1100px) { /* 窗口窄了：分栏改上下，别把聊天挤没 */ .card.genchat.split { flex-direction: column; } .card.genchat .genpane { flex: 1 1 auto; } } /* ==== s36（2026-09-20 用户按豆包参考图确认）：聊天记录 = 我发的灰底卡 / Agent 无底色 + 小图标； 点开文件后左边聊天白底、右边预览灰底，五五分页 ==== */ .card.genchat.split { padding: 0; gap: 0; overflow: hidden; } .card.genchat.split .genmain { flex: 1 1 50%; padding: 18px 20px 18px 24px; background: #FFFFFF; } /* 用户 2026-09-22：预览列**下端不留边距**，预览框直接贴到聊天框白底（原来多了 16px 下边距） */ .card.genchat.split .genpane { flex: 1 1 50%; max-width: 50%; padding: 16px 20px 0 16px; background: #F5F6F7; } /* 用户 2026-09-22：预览面板要**铺满卡片高度**（底边跟卡片/导航台齐平），不再按内容高度缩在上边 */ .card.genchat.split .genpane { display: flex; flex-direction: column; } .card.genchat.split .genpane #genDocBox { flex: 1 1 auto; min-height: 0; margin-top: 0; } .card.genchat.split .genpane #genDoc { flex: 1 1 auto; min-height: 0; } /* 用户 2026-09-22：**预览框的滚动条要和聊天框那条一样**（8px / 圆角 4 / 拇指 #C9CDD4 / 轨道透明）。 预览里是文档查看器，滚动条可能在它内部的任意一层，所以整棵子树统一。 */ .genpane, .genpane * { scrollbar-width: thin; scrollbar-color: #C9CDD4 transparent; } .genpane::-webkit-scrollbar, .genpane *::-webkit-scrollbar { width: 8px; height: 8px; } .genpane::-webkit-scrollbar-track, .genpane *::-webkit-scrollbar-track { background: transparent; } .genpane::-webkit-scrollbar-thumb, .genpane *::-webkit-scrollbar-thumb { background: #C9CDD4; border-radius: 4px; } .genpane::-webkit-scrollbar-thumb:hover, .genpane *::-webkit-scrollbar-thumb:hover { background: #A9AFB8; } .genpane .mock { background: transparent; border: none; box-shadow: none; padding: 0; } .pane-head { margin-bottom: 12px; } .chatlog .crow { display: flex; margin-bottom: 18px; } .chatlog .crow.you { justify-content: flex-end; } .chatlog .umsg { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 78%; } .chatlog .utext { padding: 10px 14px; border-radius: 12px; background: #F2F3F5; color: var(--t1); font-size: 13px; line-height: 20px; white-space: pre-wrap; word-break: break-word; } .chatlog .ufile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #F4F4F5; cursor: pointer; position: relative; } .chatlog .ufile:hover { background: #ECECEE; } .chatlog .ufile:hover .chev, .chatlog .afile:hover .chev { opacity: 1; } .chatlog .ufile .chev, .chatlog .afile .chev { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: #E4E4E7; display: grid; place-items: center; opacity: 0; transition: opacity .12s; } .chatlog .ufile .chev svg, .chatlog .afile .chev svg { width: 12px; height: 12px; fill: none; stroke: #71717A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chatlog .ufile svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* 文件类型图标（照豆包截图放大后重画）：淡色圆角底 + 白纸 + 官方标志色的图标 PDF = 红色 Acrobat 飘带；Excel = 绿色 X */ .ic-pdf, .ic-xlsx { fill: none; stroke: none; width: 26px; height: 26px; } .ic-pdf .bg { fill: #FDECEC; } /* 淡粉底 */ .ic-pdf .mk { fill: #EC1C24; stroke: none; } /* 官方 Acrobat 飘带（品牌红 #EC1C24） */ .ic-xlsx .bg { fill: #E9F7EF; } /* 淡绿底 */ .ic-xlsx .mk { fill: #217346; stroke: none; } /* 官方 Excel 标志（品牌绿 #217346） */ /* 同色系描边（用户 2026-09-21：豆包是"淡底 + 深一点的同色边"，没有边就显得糊） */ .ic-pdf .bg { stroke: #F6C6C8; stroke-width: 1px; } .ic-xlsx .bg { stroke: #BFE6CE; stroke-width: 1px; } /* 在文件卡 / 预览头部里比别的图标大一号 */ .chatlog .ufile svg.ic-pdf, .chatlog .ufile svg.ic-xlsx, .chatlog .afile svg.ic-pdf, .chatlog .afile svg.ic-xlsx, .pchip svg.ic-pdf, .pchip svg.ic-xlsx, .pane-name svg.ic-pdf, .pane-name svg.ic-xlsx, .curtpl .ct-name svg.ic-pdf, .curtpl .ct-name svg.ic-xlsx { width: 22px; height: 22px; } .chatlog .ufile b { display: block; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t1); } .chatlog .ufile span { font-size: 12px; line-height: 18px; color: var(--t3); } /* 我发的消息：时间和删除默认不显示，鼠标移上去才出来 */ .chatlog .umeta { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 18px; color: var(--t3); opacity: 0; transition: opacity .12s; } .chatlog .crow.you:hover .umeta { opacity: 1; } .chatlog .umeta a { color: var(--t3); cursor: pointer; } .chatlog .umeta a:hover { color: #D93025; } /* Agent：没有底色；结构化内容（解析清单 / 订单信息）用白卡承载 */ .chatlog .amsg { max-width: 100%; min-width: 0; } .chatlog .atext { font-size: 13px; line-height: 22px; color: var(--t1); white-space: pre-wrap; word-break: break-word; } .chatlog .ameta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--t3); } .chatlog .ico { width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--t3); cursor: pointer; display: grid; place-items: center; } .chatlog .ico:hover { background: #F2F3F5; color: var(--t1); } .chatlog .ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .chatlog .acard { border: 1px solid var(--border); border-radius: 12px; background: #FFFFFF; padding: 14px 16px; } .chatlog .acard .psteps { margin: 0; } .chatlog .acard .prog-row { margin: 10px 0 0; } .chatlog .acard .ck-head { margin: 0 0 10px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t1); } .chatlog .acard .ck-ask { margin: 12px 0 0; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--brand); } .chatlog .atext .undo { margin-left: 10px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--brand); cursor: pointer; } /* 输入框上面的待发文件（选完还没发出去） */ .pending { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; } /* 待发文件（还没发出去）：照豆包 —— 浅灰卡 + 彩色文件图标 + 黑色文件名 + 第二行"PDF · 124KB" */ .pchip { display: inline-flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 12px; background: #F4F4F5; max-width: 320px; } .pchip > div { min-width: 0; } .pchip b { display: block; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t1); max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pchip span { font-size: 12px; line-height: 18px; color: var(--t3); } .pchip button { border: none; background: transparent; color: var(--t3); cursor: pointer; flex: 0 0 auto; font: 400 12px/20px var(--font); padding: 0 2px; } .pchip button:hover { color: var(--t1); } /* Agent 发出来的文件（生成好的 PI 等）：和我发的一样是可点的文件卡，点在右边预览 */ .chatlog .afile { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #F4F4F5; cursor: pointer; position: relative; } .chatlog .afile:hover { background: #ECECEE; } .chatlog .afile svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .chatlog .afile b { display: block; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t1); } .chatlog .afile span { font-size: 12px; line-height: 18px; color: var(--t3); } /* 文件名太长就省略号（照豆包："Goodwiin PI-GW202…"），不要把卡片撑开或换行 */ .chatlog .afile, .chatlog .ufile { max-width: 320px; } .chatlog .afile > div, .chatlog .ufile > div { min-width: 0; } .chatlog .afile b, .chatlog .ufile b { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 「存为 PDF」只打印预览那半（浏览器打印里选「另存为 PDF」） */ @media print { body * { visibility: hidden; } .card.genchat.split .genpane, .card.genchat.split .genpane * { visibility: visible; } .card.genchat.split .genpane { position: absolute; left: 0; top: 0; width: 100%; max-width: none; padding: 0; background: #FFFFFF; } .pane-head { display: none; } } .card.genchat .panel { margin-top: 20px; } .card.genchat .ask-row .send { top: 12px; } /* 56 高的输入框里，圆按钮居中 */ .bar.has-plus input { padding-left: 56px; } /* 给输入框里左侧的「＋」让位 */ /* 生成 PI 页的输入框：两行高（用户 2026-09-21：两行提示词要放得下） */ .bar.has-plus textarea { width: 100%; height: 64px; padding: 10px 56px 10px 56px; border: 1px solid var(--border); border-radius: 10px; background: #FFFFFF; font: 400 13px/20px var(--font); color: var(--t1); resize: none; outline: none; } .bar.has-plus textarea::placeholder { color: var(--t3); } .bar.has-plus textarea:focus { border-color: var(--brand); } /* 对话区顶部"当前使用的 PI"一行（用户 2026-09-21） */ .curtpl { display: flex; align-items: center; gap: 8px; padding: 0 20px; height: 44px; flex: 0 0 auto; border-bottom: 1px solid var(--border); background: #FBFCFD; } .curtpl .ct-name { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: var(--t1); } .curtpl .ct-name b { font-weight: 500; } .curtpl .ct-name svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--brand); stroke-width: 1.5; } .curtpl .ct-x { margin-left: auto; width: 24px; height: 24px; border: none; border-radius: 12px; background: transparent; color: var(--t3); font-size: 12px; cursor: pointer; } .curtpl .ct-x:hover { background: var(--brand-soft); color: var(--brand); } .bar.has-plus .plus-wrap { position: absolute; left: 10px; top: 12px; } .ask-row .exp { flex: 0 0 auto; } .ask-row .exp-btn { width: 120px; height: 40px; padding: 0 14px; } .exp.up .exp-dd { top: auto; bottom: 48px; } /* 面板贴着卡片底部 → 下拉向上展开 */ /* ============ 工作台首页 · 最终覆盖（必须放文件末尾：上面 390 行附近还有旧的 .askbox{height:104px} 会盖掉） ============ */ .card.home-big .askbox { height: auto; padding: 10px; border-radius: 20px; background: #F4F4F5; margin-top: 0; } .card.home-big .askinner { background: #FFFFFF; border-radius: 14px; padding: 18px 18px 12px; } .card.home-big .askline { min-height: 56px; width: 100%; border: none; background: transparent; padding: 0; border-radius: 0; resize: none; outline: none; font-family: var(--font); font-size: 14px; line-height: 22px; color: var(--t1); } .card.home-big .askline::placeholder { color: var(--t3); } .card.home-big .askfoot { position: static; margin-top: 12px; display: flex; align-items: center; justify-content: space-between; } /* ============ 文档处理页 · 输入区照主控台（用户 2026-09-21：按钮做成和主控台一样） ============ */ .card.genchat { overflow: visible; } /* ＋ 的卡片要点出来，不能被卡片裁掉 */ .card.genchat .askbox { height: auto; padding: 0; border-radius: 12px; background: transparent; margin-top: 0; } .card.genchat .ask-row { display: block; } /* 输入框要占满整行（原来是 flex 一行里的固定宽度） */ .card.genchat .askbox { width: 100%; } /* 用户 2026-09-23：输入框**加高**（照着别的 AI 的舒适高度：一行文字 + 下面一排按钮，约 76px） */ .card.genchat .askinner { background: #FFFFFF; border: 1px solid #E9EAEC; border-radius: 14px; padding: 12px 14px 8px; } .card.genchat .askline { min-height: 28px; line-height: 22px; } .card.genchat .askfoot { margin-top: 8px; } .card.genchat .upbtn { width: 28px; height: 28px; } .card.genchat .send2 { width: 32px; height: 32px; } .card.genchat .askline { min-height: 22px; width: 100%; border: none; background: transparent; padding: 0; border-radius: 0; resize: none; outline: none; font-family: var(--font); font-size: 14px; line-height: 22px; color: var(--t1); } .card.genchat .askline::placeholder { color: var(--t3); } .card.genchat .askfoot { position: static; margin-top: 0; display: flex; align-items: center; justify-content: space-between; } /* 卡片高度定死 902px（用户 2026-09-21 确认的样子）： 侧栏是**顶部对齐**的，所以「最近」最后一行永远在 y≈901；902 + 卡片上边 88 = 底边 990， 输入框（71 高 + 18 下留白）的上沿正好落在那一行的顶部 —— 窗口再大再小都不跑位。 */ .card.genchat { padding-bottom: 0; } /* 用户 2026-09-25：这三页原来**写死 910px**（2026-09-22 / 09-24 为了卡原型 1440×900 定的）， 窗口一高就"往上回缩"、下面空一大块，和应用看板对不上 → 改成 **最少 910、剩余撑满**。 ⚠️ 要回退就把这两行换成：`flex: 0 0 auto; height: 910px; min-height: 0;`（回退只需改这两处 + 下面 kb 那处）。 */ .view > .card.genchat:last-child, .view > .card.home-big:last-child { flex: 1 1 auto; height: auto; min-height: 910px; } /* 输入区**不要浅灰底**（用户 2026-09-21）：整块背景透明，只留 18px 下留白 */ .card.genchat .ask-panel { background: transparent; padding: 0 0 18px; } /* 用户 2026-09-23：输入框**不做满宽** —— 居中的窄栏（和豆包 / ChatGPT 一样）；66% → 60%（用户说再窄一点点） */ .card.genchat .ask-panel { width: 100%; max-width: 60%; margin-left: auto; margin-right: auto; } .card.genchat .askfoot .upbtn { margin-left: -4px; } /* 点 ＋ 弹出的卡片：**悬停哪一行、哪一行整条浅灰**（用户 2026-09-21，同「新建任务」底色） */ .card.genchat .plusmenu .it:hover { background: #F4F4F5; color: var(--t1); } .card.genchat .plusmenu .it { cursor: pointer; } /* 侧栏任务子项：跳过的那几步（DEMO 没有 OA / ERP 系统）用灰色短横，不用橙点 */ .tk .kskip { color: #C0C4CC; font-size: 11px; } /* 点到哪里，哪里灰底（全站单选：菜单 / 任务名 / 任务下的步骤，共用一套视觉） */ /* 用户 2026-09-24：灰底**只包文字**（左右留一点内边距），不包含前面的勾/圆点，不铺满整行 */ .tk.is-active { background: none; } .tk.is-active .tk-txt { background: #ECEDEF; border-radius: 6px; padding: 2px 8px; color: var(--t1); } .tk.is-active .kdone, .tk.is-active .kwait, .tk.is-active .kskip { color: var(--t1); } /* ============ 工作台输入框的「＋」弹框（用户 2026-09-21：两个页面要一样） ============ */ .card.home-big { overflow: visible; } /* 弹框要点出来，不能被卡片裁掉 */ .card.home-big .plusmenu .it { cursor: pointer; } .card.home-big .plusmenu .it:hover { background: #F4F4F5; color: var(--t1); } /* 侧栏：灰底跟着"点到哪一个"走（用户 2026-09-21）—— 菜单和任务用同一个底色 #ECEDEF */ .task-item.is-active > .ti-head { background: #ECEDEF; } .task-item.is-active > .ti-head .tn { color: var(--t1); font-weight: 500; } /* 点了动作胶囊：那句完整指令**以普通文字显示在胶囊右边**（用户 2026-09-21：不要胶囊、不要塞进下面输入框） */ .actchip.on { background: #ECEDEF; color: var(--t1); } .chiprow .draftline { flex: 0 0 auto; font-size: 13px; line-height: 20px; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 620px; } /* 方案 2：输入框里「技能标签 + 那句话」同一行 */ .askinner .askskill-row { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; } /* ============ CRM 登记页（用户 2026-09-24 重做：登记信息 + 登记状态两张卡） ============ */ /* 用户 2026-09-23：CRM 这两张卡的**左右留白加大到 48**（工作台那种居中的留白不适合数据页，用 A 方案） */ /* 用户 2026-09-23：CRM 这一页**整体固定 910**，不随内容扩展。 ⚠️ 上一版把 `height:910` 写在 `#view-crm > .card` 上，**两张卡都变成 910** → 页面被顶到 1800+，第二张卡跑出屏幕外，看着就是"乱掉 + 右边/下面一大块底色"。 现在：整页 910，第一张卡按内容高、第二张吃掉剩下的高度（表格自己在里面滚）。 */ #view-crm { flex: 0 0 auto; height: 910px; min-height: 0; } #view-crm > .card { padding: 32px 48px; box-sizing: border-box; } #view-crm > .card:first-child { flex: 0 0 auto; } #view-crm > .card:last-child { flex: 1 1 auto; min-height: 0; } .crm-gochat { color: var(--brand); cursor: pointer; } /* "待提供 · 去对话补充" */ /* 登记明细：**一行两组 + 一条横线**（用户 2026-09-24：不要格子表格） 名称 13/20/500 --t2 ／ 值 14/22 --t1 ／ 名称列 120px ／ 两组间隔 40px ／ 行高 44 ／ 行间 1px --divider */ .crm-rows { margin-top: 4px; } /* 一行四组（四列）：名称 96 / 值 弹性 ×4（用户 2026-09-24 定；右边不留空） */ .crm-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px minmax(0, 1fr) 96px minmax(0, 1fr) 96px minmax(0, 1fr); column-gap: 24px; align-items: center; height: 44px; border-bottom: 1px solid var(--divider); } .crm-row:last-child { border-bottom: none; } .crm-row .k { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t2); } .crm-row .v { font-size: 14px; line-height: 22px; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 登记记录：表头 36 / 行 44；时间·编号·金额·数量用弱化灰，状态用橙/绿 */ /* 用户 2026-09-24：登记记录这张卡**常驻一条竖滚动条**（行多了就滚，不会把卡片顶高/裁掉） */ .crm-tbl { margin-top: 10px; flex: 1 1 auto; min-height: 0; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #C9CDD4 transparent; } .crm-tbl::-webkit-scrollbar { width: 8px; } .crm-tbl::-webkit-scrollbar-track { background: transparent; } .crm-tbl::-webkit-scrollbar-thumb { background: #C9CDD4; border-radius: 4px; } /* 用户 2026-09-24 定：**A 方案** —— 每列按内容固定宽度、整行"间距均匀铺满"（space-between）。 这样列与列之间一样宽，不会出现"某一列特别宽 → 内容离金额老远"，也不会右边空一块。 */ .crm-tr { display: grid; justify-content: space-between; grid-template-columns: 130px 180px 160px 120px 150px 110px 130px 40px; /* 登记时间列加宽到 130（放得下 2026/9/22 23:48） */ align-items: center; height: 44px; border-bottom: 1px solid var(--divider); font-size: 14px; color: var(--t1); } .crm-tr.head { height: 38px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--t3); } /* 用户 2026-09-24：表里的字别做小 —— 行内一律 14/22（和正文一致），弱化只靠颜色 */ .crm-tr .mut { font-size: 14px; line-height: 22px; color: var(--t2); } .crm-tr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 一律一行，不许折行 */ .crm-tr .okink { color: var(--ok-ink); } .crm-tr .warnink { color: var(--warn-ink); } .crm-tr .kdone { color: #22A06B; } .crm-tr .kskip { color: #C0C4CC; } .crm-bottom { display: flex; align-items: center; gap: 12px; height: 40px; margin-top: 12px; } /* 「＋ 登记一条」弹层：宽 420 / padding 20 / 圆角 12 */ .crm-mask { position: fixed; inset: 0; background: rgba(15,23,41,.4); display: grid; place-items: center; z-index: 60; } .crm-mask[hidden] { display: none; } .crm-dlg { width: 420px; background: #FFFFFF; border-radius: 12px; padding: 20px; box-shadow: var(--shadow); } .crm-dlg h3 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0 0 12px; } .crm-dlg label { display: block; font-size: 13px; line-height: 20px; color: var(--t2); margin-bottom: 10px; } .crm-dlg input, .crm-dlg select { width: 100%; height: 36px; margin-top: 4px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; color: var(--t1); background: #FFFFFF; } .askinner .askskill-row .skilltag { flex: 0 0 auto; margin-bottom: 0; margin-top: 2px; } .askinner .askskill-row .askline { flex: 1 1 220px; min-width: 140px; } /* 输入框跟着字长高（用户 2026-09-23，DeepSeek / 豆包那种）：默认不出滚动条，由 JS 量高度 */ .askinner .askline { overflow: hidden; } /* 工作台侧栏：上面 5 个菜单固定，下面「任务 / 项目 / 最近」三段**整体一条滚动条**（用户 2026-09-21 报没了） */ .side-menu.wsmode { display: flex; flex-direction: column; overflow: hidden; } .side-menu.wsmode .side-scrollall { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .side-menu.wsmode .side-scrollall::-webkit-scrollbar { width: 8px; } .side-menu.wsmode .side-scrollall::-webkit-scrollbar-track { background: transparent; } .side-menu.wsmode .side-scrollall::-webkit-scrollbar-thumb { background: #C9CDD4; border-radius: 4px; } /* ============ 知识库页（用户 2026-09-24）：入口在侧栏「知识库」 ============ 大白卡和「新建任务」同尺寸（高 910、圆角 16；卡片自身不留白，左右两栏各自留白）， 左栏 260 = 资料库；右栏 = 最近列表 / 文件预览（预览复用 .mock.doc + 文档查看器）。 */ .view > .card.kb-big:last-child { flex: 1 1 auto; height: auto; min-height: 910px; } /* 同上：最少 910、剩余撑满 */ .card.kb-big { display: flex; flex-direction: row; gap: 0; padding: 0; overflow: hidden; } /* 左右留白 16 = 主控栏 .side-menu 的 20px 16px（用户要求两边和主控栏一致） */ .kb-side { flex: 0 0 260px; display: flex; flex-direction: column; min-height: 0; padding: 20px 16px 14px; border-right: 1px solid var(--divider); } .kb-head { display: flex; align-items: center; height: 28px; padding: 0 12px; margin-bottom: 14px; } .kb-head > span { font: 600 15px/22px var(--font); color: var(--t1); } /* = 顶栏页面名 15/22/600 */ .kb-fold { margin-left: auto; width: 24px; height: 24px; border: none; background: transparent; border-radius: 6px; color: var(--t3); cursor: pointer; display: grid; place-items: center; } .kb-fold:hover { background: #F2F3F5; color: var(--t1); } .kb-fold svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .kb-search { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #FFFFFF; } /* 用户 2026-09-24：搜索不要底色 */ .kb-search svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; } /* 用户 2026-09-23：搜索框里的字**和「新建任务」同字号**（原来 15/24 偏大） */ .kb-search input { flex: 1 1 auto; min-width: 0; padding: 0; border: none; background: transparent; outline: none; font: 400 13px/20px var(--font); color: var(--t1); } .kb-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } /* 最近 / 本地产物：**和主控栏「新建任务」同一个尺寸**（13/20、图标 20，用户 2026-09-23） —— 原来 15/22 + 图标 20 和左栏对不上，看着偏大 */ .kb-navitem { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; font: 400 13px/20px var(--font); color: var(--t1); } .kb-navitem:hover { background: #FAFAFB; } /* = .side-item / .sec-head 的 hover */ .kb-navitem.is-on { background: #ECEDEF; color: var(--t1); } /* = 主控栏当前项底色 */ .kb-navitem svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--t1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .kb-groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } .kb-groups::-webkit-scrollbar { width: 8px; } .kb-groups::-webkit-scrollbar-track { background: transparent; } .kb-groups::-webkit-scrollbar-thumb { background: #C9CDD4; border-radius: 4px; } .kb-groups::-webkit-scrollbar-thumb:hover { background: #A9AFB8; } .kb-ghead { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px; cursor: pointer; font: 400 13px/20px var(--font); color: var(--t2); } /* = 主控栏段标题 */ .kb-ghead:hover { background: #FAFAFB; } .kb-ghead > .kb-gt, .kb-shead > .kb-gt { flex: 0 0 auto; } /* 用户 2026-09-23：⌄ 紧贴文字右边（不再被推到边框） */ .kb-ghead > .kb-sp, .kb-shead > .kb-sp { flex: 1 1 auto; } /* 中间的弹簧 → 「+」永远贴行尾 */ .kb-ghead .kb-add, .kb-shead .kb-add { opacity: 1; } /* 分组行的 + 一直显示（照 502/503） */ .kb-row .kb-add { opacity: 0; transition: opacity .12s; } /* 文件行的 + 悬停该行才出现 */ .kb-row:hover .kb-add, .kb-row.is-on .kb-add { opacity: 1; } .kb-chev { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: var(--t3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .kb-chev.right { transform: rotate(-90deg); } .kb-add { width: 20px; height: 20px; border: none; background: transparent; border-radius: 4px; color: var(--t3); cursor: pointer; display: grid; place-items: center; opacity: 0; } .kb-ghead:hover .kb-add { opacity: 1; } .kb-add:hover { background: #EBECEF; color: var(--t1); } .kb-add svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; } .kb-gbody { padding: 2px 0 6px; } /* 文件行：图标 20 / 文件名 / ⋯（照 490；⋯ 只在悬停该行时出现） */ .kb-row { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; cursor: pointer; } .kb-row:hover { background: #ECEDEF; } /* 用户 2026-09-23：hover = 深灰底（和表格行一致） */ .kb-row.is-on { background: #ECEDEF; } /* = 主控栏当前项底色 */ .kb-ic { display: inline-flex; flex: 0 0 auto; } .kb-ic svg { width: 20px; height: 20px; } .kb-nm { flex: 1 1 auto; min-width: 0; font: 400 13px/20px var(--font); color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 「⋯」照主控栏任务条目的那个（.ti-more）：浅灰小方块 + 12px 文字点，悬停该行才出现 */ .kb-more { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px; background: #F1F2F4; color: var(--t2); font-size: 12px; line-height: 22px; cursor: pointer; opacity: 0; transition: opacity .12s; } .kb-row:hover .kb-more, .kb-row.is-on .kb-more { opacity: 1; } .kb-more:hover { background: #E8E9EB; color: var(--t1); } .kb-quota { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px 0; border-top: 1px solid var(--divider); font: 400 12px/18px var(--font); color: var(--t3); } .kb-quota button { margin-left: auto; border: none; background: transparent; cursor: pointer; font: 500 12px/18px var(--font); color: var(--brand); } .kb-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; /* 用户 2026-09-23：内容整体往下移，让第一行「最近」**和左边搜索框齐平**； 左右留白也加大一些（原来靠边太近）。69 = 搜索框垂直居中(62+18) - 标题行高一半(11) */ padding: 69px 96px 24px; } /* 右栏默认：最近列表（名称 / 类型 / 大小 / 最近使用） */ .kb-recent { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .kb-recent h3 { margin: 0 0 23px; font: 600 15px/22px var(--font); color: var(--t1); } /* 和「知识库」同字号 15/22（用户 2026-09-23） */ /* 用户 2026-09-23：标题↔胶囊、胶囊↔表头 这两处间隔，都做成**左栏「本地产物 ↔ 我的资料」那个间隔**（实测 23px） */ /* 三个 tab 做成一整段（分段控件）：整段浅灰底，选中那段白底 + 黑字加粗，未选中灰字 */ .kb-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 23px; } .kb-seg { display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: 9px; background: #F2F3F5; } /* 用户 2026-09-23：三个 tab 的字号**比 13 再小一号**（12/18），看着才和下面那行表头一样大 （13px 加粗压在灰胶囊里，视觉上会比表头重） */ .kb-seg > button { height: 28px; padding: 0 10px; border: none; border-radius: 7px; background: transparent; cursor: pointer; font: 400 12px/18px var(--font); color: var(--t3); } .kb-seg > button:hover { color: var(--t1); } .kb-seg > button.is-on { background: #FFFFFF; color: var(--t1); font-weight: 600; } .kb-tabs > button.kb-filter { margin-left: auto; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #FFFFFF; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 400 13px/20px var(--font); color: var(--t1); font-weight: 600; } /* 「全部类型」黑字加粗（用户 2026-09-24） */ .kb-tabs > button.kb-filter:hover { background: #FAFAFB; } .kb-tabs > button.kb-filter svg { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: var(--t1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .kb-tablewrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .kb-tablewrap::-webkit-scrollbar { width: 8px; } .kb-tablewrap::-webkit-scrollbar-track { background: transparent; } .kb-tablewrap::-webkit-scrollbar-thumb { background: #C9CDD4; border-radius: 4px; } .kb-tablewrap::-webkit-scrollbar-thumb:hover { background: #A9AFB8; } /* 用户 2026-09-24：四列**定死比例**（原来 auto 布局在大屏上"名称"那一列被撑得特别宽， 于是"所有者"被推到很远）。名称 32% / 所有者 18% / 位置 22% / 最近访问 20%，行尾 ⋯ 固定 44。 */ /* border-collapse 必须用 separate：collapse 下给格子加 border-radius 是不生效的（hover 圆角就没了）。 separate + border-spacing:0 出来的线与原来一致。 */ .kb-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .kb-table th:nth-child(1), .kb-table td:nth-child(1) { width: 32%; } .kb-table th:nth-child(2), .kb-table td:nth-child(2) { width: 18%; } .kb-table th:nth-child(3), .kb-table td:nth-child(3) { width: 22%; } .kb-table th:nth-child(4), .kb-table td:nth-child(4) { width: 20%; } .kb-table th { padding: 0 8px 10px; text-align: left; font: 400 13px/20px var(--font); color: var(--t3); border-bottom: 1px solid var(--divider); } .kb-table td { padding: 12px 8px; font: 400 13px/20px var(--font); color: var(--t1); /* 和「我的资料」同字号 13/20 */ border-bottom: 1px solid var(--divider); } /* 🔴 2026-09-24s186：`display: flex` 的格子不再按列宽算，改成按内容宽（实测 79px vs 表头 247px）—— 文件名被截断、hover 灰底从「所有者」那列才开始。补 `width: 100%` 让它吃满本列（实测 247=247）。 */ .kb-table td:first-child { display: flex; width: 100%; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 用户 2026-09-23：hover = 深灰底（照 497）；用户 2026-09-24：灰底要**圆角**（和其它地方一致）—— 所以背景不画在 tr 上（tr 给不了圆角、圆角处还会露出直角灰块），改画在首/末格子上 */ .kb-table tbody tr { cursor: pointer; } .kb-table tbody tr:hover td { background: #ECEDEF; } .kb-table tbody tr:hover td:first-child { border-radius: 8px 0 0 8px; } .kb-table tbody tr:hover td:last-child { border-radius: 0 8px 8px 0; } .kb-table tbody tr .kb-more { opacity: 0; transition: opacity .12s; } .kb-table tbody tr:hover .kb-more { opacity: 1; } .kb-thc, .kb-tdc { width: 44px; text-align: right; padding-right: 4px; } .kb-table .kb-empty { color: var(--t3); cursor: default; } /* 右栏预览：和文档处理页右侧那份文件预览同一套（.pane-head + .mock.doc + 文档查看器） */ .kb-preview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .kb-preview .mock { margin-top: 0; flex: 1 1 auto; min-height: 0; overflow: hidden; } .kb-preview .mock.doc { padding: 0; } /* 预览底色铺满这一栏，左侧不留白（用户 2026-09-24） */ .kb-preview .docview { display: block; overflow: auto; } /* 预览要"刚好适应这一栏"（用户 2026-09-24）： 文档查看器按 pv-body 的 clientWidth 算缩放，而 clientWidth 含左右各 12px 内边距， 于是画出来比内容区宽 24px → 横向溢出、PDF 左右被裁。这里把左右内边距归零（只动知识库这一栏）。 */ .kb-preview .pv-body { max-height: none; padding-left: 0; padding-right: 0; } .kb-preview .pdfpages, .kb-preview .pdfpage { max-width: 100%; } .kb-preview .pdfpage canvas { max-width: 100%; } /* 抹掉四舍五入带来的 1px 溢出，别出横向滚动条 */ .kb-preview .pglabel { margin-left: 8px; } /* 「Page 1」左端对齐工具条「1 / 1」的左端（= pv-bar 的 8px） */ /* ⋯ 小菜单（用户 2026-09-24：整个框**再小一号**，原来 160×44 的行放到文件行右边会顶出卡片边框） */ .kb-menu { position: fixed; z-index: 40; width: 128px; padding: 4px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 10px 24px -8px rgba(15,23,41,.16); } .kb-menu[hidden] { display: none !important; } .kb-menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: none; background: transparent; border-radius: 6px; cursor: pointer; text-align: left; font: 400 12px/18px var(--font); color: var(--t1); } .kb-menu button:hover { background: #F7F8F9; } .kb-menu button.is-del { color: var(--danger-ink); } /* 「删除」照 497：红字 + 红图标 */ .kb-menu button.is-del svg { stroke: var(--danger-ink); } .kb-menu button.is-del:hover { background: var(--danger-soft); } .kb-menu svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* 「+」菜单（用户 2026-09-24，照 502/503）：上传和导入 ▸（上传文件 / 上传文件夹）/ 添加链接 数值全部沿用上面那支 .kb-menu：卡宽 160、行高 44、13/20、悬停 #F7F8F9、图标 16 描边 --t2 */ .kb-mi { position: relative; } .kb-menu .kb-sub-chev { margin-left: auto; width: 12px; height: 12px; stroke: var(--t3); } .kb-sub { position: absolute; left: 100%; top: -6px; margin-left: 4px; width: 128px; padding: 4px; display: none; background: #FFFFFF; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 10px 24px -8px rgba(15,23,41,.16); } .kb-mi:hover > .kb-sub, .kb-mi.is-sub > .kb-sub { display: block; } /* 「文档模板」子分组（我的资料 / 团队空间 下的一级）：比 .kb-ghead 再缩进 12 */ .kb-shead { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 24px; border-radius: 8px; cursor: pointer; font: 400 13px/20px var(--font); color: var(--t2); } .kb-shead:hover { background: #FAFAFB; } .kb-shead > span { flex: 0 0 auto; } /* ⌄ 紧贴文字（用户 2026-09-23，照 502） */ .kb-shead .kb-more { opacity: 0; transition: opacity .12s; } .kb-shead:hover .kb-more { opacity: 1; } .kb-sbody { padding-left: 12px; } /* Word 图标（用户 2026-09-24：照官方标志取色）—— 和 PDF / Excel 同一套画法 */ .ic-docx { fill: none; width: 26px; height: 26px; } .ic-docx .bg { fill: #E9EFF9; stroke: #C6D5EC; stroke-width: 1px; } .ic-docx .mk { fill: none; stroke: #2B579A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .chatlog .ufile svg.ic-docx, .chatlog .afile svg.ic-docx, .pchip svg.ic-docx, .pane-name svg.ic-docx, .curtpl .ct-name svg.ic-docx { width: 22px; height: 22px; } .slotrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; } .slotbtn { font: inherit; font-size: 12px; line-height: 1; padding: 7px 10px; border: 1px solid #DCE0E6; background: #fff; color: #1B1F24; border-radius: 8px; cursor: pointer; } .slotbtn:hover { border-color: #1B1F24; } /* 方案 C（用户 2026-09-24）：PI 线不在网页里做编辑器 —— 预览只读，最后一公里走本机 Excel。 预览面板标题上那两个入口（在 Excel 里打开 / 下载 Excel） */ .pane-head .pane-acts { display: flex; gap: 6px; margin-left: auto; margin-right: 8px; } /* ==================== 应用看板（用户 2026-09-25）==================== 规矩：卡片永远白底；四色只出现在环形/柱/胶囊/状态点这些小地方。 */ .dashlist { padding: 18px 20px; } /* 用户 2026-09-25：**上面两排也是白卡**（灰底画布上的一小块一小块），不是浅灰底 */ .kpigrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .kpigrid .kpi { position: relative; background: #FFFFFF; border: 1px solid rgba(228,228,231,.7); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 18px; min-height: 100px; display: flex; flex-direction: column; gap: 4px; } /* 用户 2026-09-25：KPI 卡**第一行文字**（待我确认 / 进行中 / 异常 / 完成率）和侧栏「新建任务」一样大（13/20） */ .kpigrid .klab { font-size: 13px; line-height: 20px; color: #475467; font-weight: 500; } .kpigrid .knum { font-size: 30px; line-height: 36px; font-weight: 660; letter-spacing: -.4px; color: #111827; } .kpigrid .spark { position: absolute; right: 14px; bottom: 16px; width: 76px; height: 24px; } /* 用户 2026-09-25：第二排**只留 OA / ERP / CRM 三张**（任务状态卡删掉，和第一排 4 个重复） */ .sysgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .sysgrid .syscard { position: relative; background: #FFFFFF; border: 1px solid rgba(228,228,231,.7); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .15s, background .15s; } .dashsys .syscard:hover { background: #FAFAFB; } .sysgrid .syscard:hover { background: #FAFAFB; } .sysgrid .syscard.is-on { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); } /* 用户 2026-09-25："OA / ERP / CRM 要和「新建任务」一样大" —— 同一字号时**拉丁字母天生矮**（实测字高 11 vs 12）， 所以这两处单独放到 16px，量出来才是同一个字高（都 12px）。 */ .sysgrid .shead { display: flex; align-items: center; font-size: 16px; font-weight: 600; color: #0F172A; } .sysgrid .sarrow { margin-left: auto; font-size: 13px; color: #98A2B3; padding: 2px 4px; border-radius: 6px; } .sysgrid .sarrow:hover { background: #F2F4F7; color: #344054; } /* 用户 2026-09-25：三张卡的**图形底部对齐**（统一 132 高的图形区），**胶囊到底边的距离一致** */ .sysgrid .sbody { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; min-height: 170px; } .sysgrid .sgfx { width: 100%; height: 132px; display: flex; align-items: flex-end; justify-content: center; } .sysgrid .ring { width: 76px; height: 76px; } .sysgrid .ring .rv { font-size: 15px; font-weight: 650; fill: #0F172A; } .sysgrid .ring .rs { font-size: 9px; fill: #98A2B3; } .sysgrid .stack { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; width: 100%; } .sysgrid .stack.big { height: 14px; border-radius: 7px; margin-top: 4px; } .sysgrid .stack i { display: block; } .sysgrid .crmrow { font-size: 12px; color: var(--t2); } .sysgrid .linechart { width: 100%; height: 40px; } .sysgrid .funnel { width: 100%; height: 104px; display: block; } .sysgrid .funnel .ft { fill: #FFFFFF; font-size: 12px; font-weight: 600; } .sysgrid .vbin { display: flex; align-items: flex-end; gap: 6px; height: 72px; width: 100%; } .sysgrid .vbi { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; } .sysgrid .vbi i { display: flex; align-items: flex-end; justify-content: center; width: 100%; border-radius: 4px 4px 0 0; } .sysgrid .vbi em { font-style: normal; font-size: 11px; color: #FFFFFF; line-height: 16px; } .sysgrid .donut { width: 124px; height: 124px; } /* ⚠️ 这里**不能**写 fill —— 会盖掉环里数字自己的深色（用户 2026-09-25 报过） */ .sysgrid .donut .dt { font-size: 12px; font-weight: 650; } .sysgrid .donutlgd { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-size: 11px; color: var(--t2); } .sysgrid .donutlgd i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; } .sysgrid .cpill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 16px; white-space: nowrap; font-weight: 600; } .sysgrid .cpills { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; } /* 用户 2026-09-25：胶囊之间"挤在一起" → 拉开 */ .sysgrid .pillars { display: flex; gap: 10px; width: 100%; height: 100%; align-items: flex-end; } .sysgrid .pil { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .sysgrid .pil i { width: 100%; height: 112px; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: center; } .sysgrid .pil i em { font-style: normal; font-size: 13px; font-weight: 650; } .sysgrid .pil b { font-size: 11px; font-weight: 400; color: var(--t2); margin-top: 4px; white-space: nowrap; } .sysgrid .hbs { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; } .sysgrid .hb { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; width: 100%; } .sysgrid .hbl { font-size: 12px; color: #667085; } .sysgrid .hbt { display: block; height: 16px; background: #F5F6F8; border-radius: 8px; overflow: hidden; } .sysgrid .hbt i { display: block; height: 100%; border-radius: 4px; } .sysgrid .hbn { font-size: 13px; font-weight: 650; text-align: right; min-width: 34px; } .sysgrid .vb { display: flex; align-items: flex-end; gap: 4px; height: 34px; width: 100%; } .sysgrid .vb i { flex: 1 1 0; background: var(--ok); border-radius: 3px 3px 0 0; } .sysgrid .vbl { font-size: 11px; color: #98A2B3; } .sysgrid .sgo2 { border: 1px solid var(--warn); background: var(--warn-soft); color: var(--warn-ink); font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer; align-self: flex-start; } .dashlist { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .dashlist .lhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .dashlist .lhead b { font-size: 16px; font-weight: 600; color: #0F172A; } /* 用户 2026-09-25：和「OA」标题同号 */ .dashlist .filters { margin-left: auto; display: flex; gap: 8px; } .dashlist .fchip { font: inherit; font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer; border: 1px solid #E4E7EC; background: #FFF; color: #475467; } /* 选中态 = **深灰底 + 白字 + 胶囊**（和参考图里那个深色选中胶囊一致） */ .dashlist .fchip.is-on { background: var(--black); border-color: var(--black); color: #fff; font-weight: 500; } .dashlist .lbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; } .dashlist .lbody::-webkit-scrollbar { width: 8px; } .dashlist .lbody::-webkit-scrollbar-thumb { background: #D8DBE0; border-radius: 4px; } /* 用户 2026-09-25：行 = PO+客户 / 时间 / **当前动作胶囊** / ↗；左边和「任务」标题对齐，整行一个字号，鼠标移上去整行灰底 */ .dashlist .drow { display: grid; grid-template-columns: minmax(0, 1fr) 56px auto 26px; align-items: center; gap: 14px; padding: 12px 10px; border-bottom: 1px solid #F2F4F7; cursor: pointer; border-radius: 8px; } /* 悬停底色 = 侧栏「新建任务」那一格的同款灰（实际是 #ECEDEF，用户 2026-09-25 纠正过两次）； **当前正在看的那条任务**也常驻这个灰（和侧栏"同一时刻只有一个灰底"一致） */ .dashlist .drow:hover, .dashlist .drow.is-hov { background: #ECEDEF; } .dashlist .drow.is-cur { background: #ECEDEF; } /* 用户 2026-09-25：PO 号 → 公司名 → 数量 → 总金额，**四段之间间隔一样大**，从 PO 号往左排（PO 号位置不动）； 要调松紧就改这一个 gap（整行一起变）。 */ .dashlist .dleft { display: flex; align-items: baseline; gap: 56px; min-width: 0; } .dashlist .dleft > * { white-space: nowrap; } .dashlist .dleft .dpo-b { font-size: 13px; color: #0F172A; } .dashlist .dcust { font-size: 13px; color: #667085; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .dashlist .dpo { font-size: 13px; color: #98A2B3; } .dashlist .dcell { font-size: 13px; color: #667085; } /* 用户 2026-09-25：和客户名同色 */ .dashlist .dcell i { font-style: normal; color: #667085; margin-right: 6px; } .dashlist .dsteps { display: flex; align-items: center; gap: 4px; min-width: 0; } .dashlist .dtxt { margin-left: 6px; } .dashlist .sd { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .dashlist .dtxt { font-size: 12px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashlist .dtime { font-size: 13px; color: #98A2B3; text-align: right; } .dashlist .dempty { padding: 28px 8px; text-align: center; color: #98A2B3; font-size: 13px; } .dashlist .dstep { font-size: 12px; line-height: 20px; color: #344054; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 状态胶囊：和上面三张系统卡里的胶囊**同款**（浅底 + 同色深字；字号 = 客户名那一档 12px） */ .dashlist .cpill { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; font-size: 13px; line-height: 20px; white-space: nowrap; font-weight: 500; } /* 13px = 任务行公司名那一档 */ /* 行尾那个 ↗：和 OA 卡右上角同款 */ .dashlist .dgo { font: inherit; font-size: 13px; line-height: 1; color: #98A2B3; background: none; border: none; cursor: pointer; padding: 3px 5px; border-radius: 6px; } .dashlist .dgo:hover { background: #F2F4F7; color: #344054; } /* ↗ 小图标的提示框（用户 2026-09-25）：白底 + 浅灰描边，弹在图标左边，不会被窗口右边截住 */ .tipbox { position: fixed; z-index: 90; background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 8px; box-shadow: 0 6px 16px -8px rgba(15,23,41,.22); padding: 5px 9px; font-size: 12px; line-height: 18px; color: #344054; white-space: nowrap; pointer-events: none; } /* 展开内容（用户 2026-09-25）：**白底、一个框、卡内滚动** —— 上面「登记明细」5 列 × 4 行（把 CRM 登记页那 20 格搬过来），中间一条横线，下面「登记记录」表（两个小标题都不写） */ .dashlist .dcard { background: #FFFFFF; border: none; border-radius: 0; padding: 0 10px 10px; margin: 0 0 4px; } .dashlist .dbody { max-height: 272px; overflow-y: auto; scrollbar-width: thin; } .dashlist .dbody::-webkit-scrollbar { width: 8px; } .dashlist .dbody::-webkit-scrollbar-thumb { background: #D8DBE0; border-radius: 4px; } /* 用户 2026-09-25：明细先试**一行放下**（自动横排，多少格都不会换行） */ /* 登记明细：**一行排完**（14 格）—— 用户 2026-09-25 定的这一版：格子等宽、间距 14px、字 13px、 标签在上值在下，值超出打省略号（鼠标停上去有完整值）。这是"开始调间隔"时的状态，别再动。 */ /* 展开区 14 格（用户 2026-09-25 定稿）： - 间隔要齐，但值与值之间不许被省略号截（用户："会被遮住就调整下这些间隔啊，不要这么死板"）。 - 按内容比例给宽度：客户型号 / 颜色 / 定金金额 / 尾款 / 结单日期 宽一点， 单价 / 定金比例 / 已收尾款 / 已出货 / 尾数 窄一点；列间距统一 12px，左右内边距 10px（和上面 PO 行两端对齐）。 - 1600 宽实测：品牌68 内部型号74 SKU68 客户型号118 颜色93 单价62 定金比例62 定金金额84 已收尾款62 尾款78 已出货62 尾数62 结单日期74 生产工厂71。 - 不许自己往展开区加格（我加过「定金日期」被用户退回，已撤）—— 就这 14 格，要加先问用户。 - ⚠️ 踩坑记录（2026-09-25）：这段注释曾被提前闭合，后面几行变成裸 CSS， 结果整条 .dfields 规则失效、展开区**竖排**。改注释只留一对结束符，别在文字里写那个符号。 */ .dashlist .dfields { display: grid; grid-template-columns: 1.05fr 1.15fr 1.05fr 2.05fr 1.5fr 1fr 1fr 1.35fr 1fr 1.25fr 1fr 1fr 1.2fr 1.15fr; gap: 6px 12px; padding: 6px 10px 8px; border-top: 1px solid #F2F4F7; } .dashlist .df { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dashlist .df i { font-style: normal; font-size: 13px; line-height: 20px; color: #98A2B3; white-space: nowrap; } /* 用户 2026-09-26：英文标签比中文长（Balance received / Internal model / Customer model…）→ 允许折行，不再和右边那格**重叠**（中文维持 13px 单行不动）。 */ body.en .dashlist .df i { white-space: normal; overflow-wrap: anywhere; line-height: 16px; } .dashlist .df b { font-size: 13px; line-height: 20px; font-weight: 400; color: #344054; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashlist .dsep { height: 1px; background: #EEF0F3; margin: 0 0 8px; } .dashlist .dtbl2 { display: flex; flex-direction: column; } /* 用户 2026-09-25："照抄 CRM 登记页那张表的间隔" —— 列宽直接用它的 130/180/160/120/150/110/130/40 + space-between， 字号统一 13px（= 任务行里公司名那一档），弱化只靠颜色。 */ .dashlist .dtr2 { display: grid; justify-content: space-between; grid-template-columns: 130px 180px 160px 120px 150px 110px 130px 40px; align-items: center; height: 40px; border-bottom: 1px solid #F0F0F2; font-size: 13px; color: #344054; } .dashlist .dtr2.head { height: 32px; font-weight: 500; color: #98A2B3; } .dashlist .dtr2 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashlist .dtr2 .mut { color: #98A2B3; } .dashlist .dtr2 .dstat { display: inline-flex; align-items: center; gap: 4px; } .dashlist .dtr2 .kdone { color: #22A06B; } .dashlist .dtr2 .kskip { color: #C0C4CC; } /* ==================== 数据中心 › 订单台账（用户 2026-09-25）==================== 宽表靠**横向滚动**；表头固定、PO 列固定、右侧「确认」列固定；待确认整行浅黄底。 */ .dc-card { padding: 0; overflow: hidden; } .dc-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #F2F4F7; } .dc-title { font-size: 16px; font-weight: 600; color: #0F172A; } .dc-hint { margin-left: 10px; font-size: 12px; font-weight: 400; color: #98A2B3; } .dc-count { margin-left: auto; font-size: 13px; color: #667085; } .dc-count b { color: #B08A2E; } .dc-wrap { padding: 0; overflow: auto; border-radius: 0 0 16px 16px; } .dc-wrap::-webkit-scrollbar { height: 10px; width: 10px; } .dc-wrap::-webkit-scrollbar-thumb { background: #D8DBE0; border-radius: 5px; } .dc-table { border-collapse: separate; border-spacing: 0; font-size: 13px; color: #344054; white-space: nowrap; } /* 用户 2026-09-25：要的是**格子**（像 Excel 那样每格都有框线）—— 每格右边 + 下边都画线，表格外再包一圈 */ .dc-table { border: 1px solid #E8E8EC; border-radius: 8px; } .dc-table th, .dc-table td { padding: 0 12px; height: 38px; border-bottom: 1px solid #ECECF0; border-right: 1px solid #ECECF0; text-align: left; background: #FFFFFF; vertical-align: middle; } .dc-table tr > *:last-child { border-right: none; } .dc-table tbody tr:last-child > td { border-bottom: none; } .dc-table td { overflow: hidden; text-overflow: ellipsis; } .dc-table th + th, .dc-table td + td { border-left: 1px solid #EFEFF2; } /* 像 Excel 那样一格一格 */ .dc-table .num { text-align: right; font-variant-numeric: tabular-nums; } /* 数字右对齐，列才齐 */ .dc-table .ctr { text-align: center; } .dc-table thead th { position: sticky; top: 0; z-index: 3; background: #FFFFFF; font-weight: 500; color: #667085; height: 36px; border-bottom: 1px solid #E4E4E7; text-align: center; } /* ⚠️ 表头那个"字段类型"小图标必须给死尺寸 —— 不然 SVG 会撑成 300×150，整行炸掉（2026-09-25 踩过） */ .dc-table .fic { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: #A1A1AA; flex: 0 0 auto; } .dc-table .fic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; } /* 最左的行号列（照桌面那张表）：灰底、居中、固定在左 */ .dc-table td.dc-rownum, .dc-table th.dc-rownum { text-align: center !important; } /* 序号必须居中（用户 2026-09-25） */ .dc-rownum { width: 44px; min-width: 44px; max-width: 44px; text-align: center; color: #98A2B3; background: #FFFFFF; position: sticky; left: 0; z-index: 2; font-size: 12px; } .dc-table thead th.dc-rownum { z-index: 4; } .dc-table .dc-pin { left: 44px; } /* PO 列固定时避开序号列 */ .dc-addrow td { background: #F4F5F7; border-bottom: none; } .dc-table td.dc-pin, .dc-table th.dc-pin { position: sticky; left: 0; z-index: 2; } .dc-table thead th.dc-pin { z-index: 4; } .dc-table .dc-gap { width: 16px; min-width: 16px; background: #FFFFFF; border-bottom: none; border-right: none; } /* 用户 2026-09-25：交期这一块**不要格子、纯白**（只有主表那 21 列有网格线） */ .dc-table th.dc-due, .dc-table td.dc-due { border-left: none; border-right: none; border-bottom: none; } /* 子行明细（出货 / 收款）：照 delivery 那种四列排 */ .dc-subline { display: grid; grid-template-columns: 110px 130px 160px minmax(0, 1fr); gap: 12px; font-size: 12px; line-height: 22px; color: #667085; } .dc-subline.head span { color: #98A2B3; } .dc-row.todo td { background: #FFF7DD; } .dc-row.todo td.dc-act { background: #FFF7DD; } .dc-act { position: sticky; right: 0; z-index: 2; border-left: 1px solid #F2F4F7; } .dc-ok { font: inherit; font-size: 13px; line-height: 1; padding: 5px 12px; border-radius: 999px; border: 1px solid #256548; background: #E8F9F0; color: #256548; cursor: pointer; } .dc-ok:hover { background: #256548; color: #fff; } .dc-tog { font: inherit; font-size: 12px; line-height: 1; color: #98A2B3; background: none; border: none; cursor: pointer; padding: 0 6px 0 0; } .dc-sub td { background: #FFFFFF; color: #344054; font-size: 12px; line-height: 20px; padding: 6px 12px 10px 28px; } /* 用户 2026-09-25：「已收尾款」/「已出货」两格里的 ▾ 下拉（明细就挂在那一格下面） */ .dc-caret { font: inherit; font-size: 10px; line-height: 1; color: #98A2B3; background: none; border: none; cursor: pointer; padding: 0 0 0 4px; } .dc-cellsub td { background: #FFFFFF; padding: 2px 12px 8px; } .dc-cellsub .dc-cellsub-in { padding: 6px 12px 8px; } .dc-cellsub .dc-subline { grid-template-columns: 70px 96px minmax(0, 1fr); gap: 10px; font-size: 12px; line-height: 20px; color: #344054; border-bottom: 1px solid #F0F0F2; padding: 2px 0; } .dc-cellsub .dc-subline:last-child { border-bottom: none; } .dc-cellsub .dc-subline span:last-child { text-align: left; } .dc-empty { padding: 28px 12px; text-align: center; color: #98A2B3; } .dashlist .dchead { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #EEF0F3; } .dashlist .dchead b { font-size: 13px; color: var(--t1); } .dashlist .dchead .dctime { font-size: 12px; color: var(--t3); } .dashlist .dchead .dcstat { font-size: 12px; color: var(--t2); margin-left: auto; } .dashlist .dgrid { display: flex; flex-wrap: wrap; gap: 6px 18px; } .dashlist .dgrid span { font-size: 12px; color: #344054; } .dashlist .dgrid i { font-style: normal; color: #98A2B3; margin-right: 6px; } .dashlist .dtl { margin: 10px 0 4px; border-top: 1px solid #EEF0F3; padding-top: 8px; } .dashlist .tl { display: grid; grid-template-columns: 52px 84px 1fr auto; align-items: center; gap: 8px; padding: 4px 0; } .dashlist .tlt { font-size: 12px; color: #98A2B3; } .dashlist .tl b { font-size: 12px; color: #344054; font-weight: 500; } .dashlist .tl em { font-size: 12px; font-style: normal; color: var(--t2); } .dashlist .dlk { font: inherit; font-size: 11px; color: var(--brand); background: none; border: none; cursor: pointer; padding: 0; } .dashlist .dfoot { display: flex; justify-content: flex-end; } .xlsxdl { font: inherit; font-size: 12px; line-height: 1; margin: 6px 0 0; padding: 7px 10px; border: 1px solid #1B1F24; background: #fff; color: #1B1F24; border-radius: 8px; cursor: pointer; } .xlsxdl:hover { background: #1B1F24; color: #fff; } /* ── 统计 / 订单台账（用户 2026-09-25）────────────────────────────────────────── ⚠️ 胶囊被用户否掉了 → 换成**分页式**（下划线 tab）。 ⚠️ **侧栏不要动**：侧栏仍是 新建任务/项目/自动化/应用看板/数据中心/知识库/更多， 这两页共用 #view-dc，所以台账那张卡隔了一层 #dcBody，撑高的规矩要重写一份。 */ .topnav { display: flex; align-items: center; gap: 10px; margin-left: 28px; } /* ⚠️ 必须补这条：.topnav 的 display:flex 会盖掉浏览器默认的 [hidden]{display:none}， 否则 JS 里设了 hidden 也藏不住（用户 2026-09-25：别的页面也看得到这两个项） */ .topnav[hidden] { display: none; } .topnav-item { font: inherit; font-size: 15px; line-height: 22px; font-weight: 600; padding: 0; background: none; border: none; color: var(--t1); cursor: pointer; } /* 用户 2026-09-25：这两项的字号 / 颜色 / 字重**和其它页面的页名（.page-name 15/22/600 + var(--t1)）完全一样**， 所以 is-on 这里不再改样式 —— 靠页面内容区分（要再加高亮跟我说一声）。 */ .topnav-item.is-on { color: var(--t1); font-weight: 600; } /* 箭头用**订单 Agent 旁边那个同款**（.chev，10×5 的细箭头），不要自己画长箭头 */ .topnav-arrow { flex: 0 0 auto; margin: 0 2px; } #dcBody { display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; min-height: 0; } /* 用户 2026-09-25：**最后一张卡一律撑满剩余高度**（台账那张内部自己滚； 统计页最后一张是「月度趋势」→ 它的图跟着长高、底边和别的页对齐）。 */ #dcBody > .card:last-child { flex: 1 1 auto; } /* 用户 2026-09-25：月度趋势**固定 300 高**（不跟着窗口一起长）→ 它的顶边往下落， 多出来的高度全给上面那个 2×2 网格（四张框更高）；底边仍然贴页面底部。 */ /* 用户 2026-09-25：月度趋势从固定 300px 收到 240px —— 让出 60px 给上面那个 2×2 网格 （网格是 `flex:1 1 auto`，会自动把让出来的高度吃满，页面底部不会多出空白）。 */ #dcBody > .card.dcstat-month { flex: 0 0 auto; height: 240px; min-height: 220px; } .dcstat-kpi { padding: 20px 24px; } .kpigrid .ksub { font-size: 12px; line-height: 18px; color: #98A2B3; } .kpigrid .knum.mny { font-size: 24px; line-height: 32px; } /* 金额位数多，30px 会顶到卡片边 */ .dcstat-due { padding: 0; overflow: hidden; } .dtlist { padding: 6px 18px 14px; } .dtrow { display: flex; align-items: center; gap: 10px; height: 38px; font-size: 13px; border-bottom: 1px solid #F2F4F7; } .dtrow:last-child { border-bottom: none; } .dtpo { color: #0F172A; font-weight: 500; } .dtcust { color: #667085; } .dtdue { margin-left: auto; color: #98A2B3; } .dtrow em { font-style: normal; width: 92px; text-align: right; } .dtrow em.late { color: #C4626A; } .dtrow em.soon { color: #B08A2E; } .dtdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #90D5AF; } .dc-count .dtdot { margin-right: 5px; vertical-align: 1px; } .dtdot.late { background: #E7979A; } .dtdot.soon { background: #E2CB81; } .dtdot.ok { background: #90D5AF; } .dtempty, .dtmore { font-size: 13px; color: #98A2B3; padding: 10px 0; } /* 交期：正三角形三层图（配色抄 OA）+ 图下面三个文字胶囊。 排法：**左 = PO/客户，中 = 图 + 胶囊，右 = 交期/状态**； 「图 ↔ 胶囊」的间距 = 12px，和「本周 vs 上周」里柱子到胶囊的间距一致（用户 2026-09-25）。 */ .dcstat-due { display: flex; flex-direction: column; } .duebody { display: grid; grid-template-columns: minmax(0, 1.25fr) 256px minmax(0, 0.85fr); gap: 10px; flex: 1 1 auto; min-height: 0; padding: 6px 6px 12px 6px; } /* 用户 2026-09-25：右边（日期/状态）再往右靠一点 —— **右边留白 = 左边留白**（都以 6px 贴边）， "天"字到右边框的距离 = "PO"到左边框的距离。 */ .dtlist { min-width: 0; } .dttrail { text-align: right; } .dtrow2 { justify-content: flex-end; } .dtrow2 .dtdue { margin-left: 0; } .dtrow2 .dtdue, .dtrow2 em { white-space: nowrap; } /* 日期不再折成两行 */ .dtcust { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .duefig { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; } /* 用户 2026-09-25：**放不下就自己缩小** —— 宽度上限 220px，高度按卡片剩余空间自适应（保比例、不裁切）， 胶囊永远留在底部（到卡片底边框 12px 不动）。 */ .dctri { flex: 0 1 auto; width: min(100%, 220px); height: auto; max-height: calc(100% - 44px); display: block; } .dctripills { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; } .dctripills .cpill, .wlab .cpill, .dc-count.wleg .cpill { /* 和应用看板的胶囊（.sysgrid .cpill）**完全同一套**：11px / 16 / 600 / 内边距 2×8 —— 之前我这边是 12px 常规字重，看着"颜色不一样"，其实差在字重 */ display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 16px; white-space: nowrap; font-weight: 600; } .dtnone { align-self: center; font-size: 12px; color: #98A2B3; } /* 用户 2026-09-25：统计页这 5 张卡（本周vs上周 / 交期 / 按客户 / 产品畅销榜 / 月度趋势） **内容里不要横线** —— 标题下面那条分隔线、列表行与行之间那条，全去掉； 「订单台账」那张卡用自己那套样式，不受影响。 */ .dcstat-box .dc-head, .dcstat-due .dc-head { border-bottom: none; } .dtrow, .rkrow { border-bottom: none; } /* ── 统计 tab 的 ③④⑤⑥（用户 2026-09-25：先把六块做齐，排版最后再统一调）── */ /* 用户 2026-09-25：统计第一排那 6 格**完全对齐应用看板第一排** —— 高度 / 内边距 / 字号 / 折线位置一律用 `.kpigrid .kpi` 那套原值，这里**只多一条列数**。 */ .kpigrid.k6 { grid-template-columns: repeat(6, 1fr); } /* 用户 2026-09-25：②③ 两行是**一个 2×2 网格** —— `grid-template-rows: 1fr 1fr` 让**两行等高**， 配合网格默认的 stretch，四张框高度一致；网格自己吃剩余高度，月度趋势再吃剩下的。 */ .dcgrid2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; flex: 1 1 auto; min-height: 0; } /* 用户 2026-09-25：卡片做成竖向 flex —— 里面的 `.rklist` 才能 `flex:1` 把行距撑开 */ .dcstat-box { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .dcstat-box .dc-title, .dcstat-due .dc-title { font-size: 15px; } /* 交期预警的标题原来 16px，和客户排名对齐成 15px */ .dcstat-month { display: flex; flex-direction: column; } /* 月度趋势：卡片是竖向 flex，图吃剩余高度 */ /* 本周 vs 上周：**也必须做成竖向 flex**，否则柱子高度百分比没有基准 → 高度算成 0（图就"没了"） */ .dcstat-wk { display: flex; flex-direction: column; } /* 用户 2026-09-25：柱子加粗、组与组之间别拉那么开（只有 4 组，居中排、间距固定）； 数值**贴在柱子正上方**（绝对定位跟着柱高走），组名在柱子下面。月度趋势那 12 组不动。 */ /* 用户 2026-09-25：柱子**再粗一点**、四组**居中**摆、彼此别拉太开 */ .wchart { display: flex; justify-content: center; gap: 26px; padding: 16px 18px 14px; flex: 1 1 auto; min-height: 0; } .wgroup { display: flex; flex-direction: column; flex: 0 0 auto; width: 74px; } .wcols { display: flex; align-items: flex-end; justify-content: center; gap: 4px; flex: 1 1 auto; min-height: 60px; } .wcol { position: relative; height: 100%; flex: 0 0 auto; width: 46px; display: flex; align-items: flex-end; } .wcol i { display: block; width: 100%; border-radius: 4px 4px 0 0; } /* 柱子上方两行：「本周 / 上周」+ 数字（用户 2026-09-25），两行同字号同颜色（颜色由行内给 = 该色系深一号） */ /* 数字在柱子里面居中；「本周 / 上周」在柱子上方（同字号同色） */ .wnum { position: absolute; left: 50%; transform: translate(-50%, 50%); font-size: 12px; font-weight: 600; white-space: nowrap; } /* 数字在柱子**正中**（水平+垂直居中） */ .wname { position: absolute; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; } /* 月度趋势（用户 2026-09-25 定稿）：1–12 月、一根橙柱、数字在柱子里面居中、柱子加粗、间距收紧 */ .mchart2 { display: flex; align-items: stretch; gap: 10px; padding: 14px 18px; flex: 1 1 auto; min-height: 190px; } .mcol2 { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; } .marea { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 60px; } .mbar2 { position: relative; display: block; width: 42px; border-radius: 4px 4px 0 0; background: #E2CB81; } .mbar2 b { position: absolute; left: 50%; bottom: 50%; transform: translate(-50%, 50%); font-size: 12px; font-weight: 600; color: #73580C; white-space: nowrap; } /* 数字在柱子里面居中 */ .mlab2 { font-size: 13px; color: #0F172A; } .wlab { margin-top: 12px; display: flex; justify-content: center; white-space: nowrap; } /* ③ 本周 vs 上周 */ .wlist { padding: 8px 18px 14px; } /* 卡头那行图例做成胶囊（用户 2026-09-25）：本周 = 实色、上周 = 同色浅底 */ .dc-count.wleg { display: flex; align-items: center; gap: 8px; } /* ④⑤ 排行 */ /* 用户 2026-09-25（本轮）：① 行与行之间那条横线**删掉**（以前 `.rkrow` 在下面又写了一次 `border-bottom`，把上面 `.dtrow,.rkrow{border-bottom:none}` 盖掉 —— 典型的重复规则坑）； ② **行距不写死**：列表 `flex:1 + justify-content:space-evenly` —— 框有多高就自动均匀撑开 （窗口高一点更松，矮一点也不会把第 5 行挤掉；用户："不用调这么密集，开一些"）； ③ 底部留白 12px = 「交期预警」卡 `.duebody` 的底部内距（两张卡一致）。 */ .rklist { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; padding: 2px 24px 12px; } /* 左右 24px = 交期预警卡里文字到边框的距离（6+18） */ .rkrow { display: grid; grid-template-columns: minmax(0, 1fr) 1fr 88px 104px; gap: 10px; align-items: center; padding: 2px 0; line-height: 20px; font-size: 13px; } .rkno { color: #98A2B3; font-size: 12px; } .rkno.star { color: #B08A2E; font-size: 13px; } .rkname { color: #0F172A; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 用户 2026-09-25（本轮）：横条**加粗**（8px → 11px），看着更有分量 */ .rkbar { height: 11px; background: #F2F4F7; border-radius: 6px; overflow: hidden; display: flex; justify-content: center; } /* 图形在格子里居中（用户第 2 条） */ .rkbar i { flex: 0 0 auto; height: 100%; border-radius: 6px; background: #A0C6EA; } .rkval { text-align: right; color: #0F172A; } .rkqty { text-align: right; color: #667085; font-weight: 400; } /* ⑥ 月度趋势 */ .mctrl { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* 没有图例了，控件自己贴右边 */ .dsel { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid #E4E4E7; background: #FFFFFF; color: #475467; } .dtoggle { display: inline-flex; border: 1px solid #E4E4E7; border-radius: 999px; overflow: hidden; } .dtoggle button { font: inherit; font-size: 12px; padding: 4px 12px; border: none; background: #FFFFFF; color: #475467; cursor: pointer; } .dtoggle button.is-on { background: var(--black); color: #FFFFFF; } .mchart { display: flex; align-items: stretch; gap: 6px; padding: 12px 18px; flex: 1 1 auto; min-height: 178px; } .mcol { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; } .mbars { flex: 1 1 auto; min-height: 60px; display: flex; align-items: flex-end; gap: 3px; } .mbars i { display: block; width: 9px; border-radius: 3px 3px 0 0; background: #A0C6EA; } .mbars i.ms { background: #CFE0F2; } .mlab, .mval { font-size: 11px; color: #98A2B3; }