/* Add-inquiry page (route #/rfq). Replaces the quote modal for every quote entry point. */ #rfq-page{padding:26px 0 72px;background:var(--paper,#f6f7f9);min-height:70vh} #rfq-page[hidden]{display:none} body.rfq-page-open main{display:none} .rfq-page-shell{display:flex;flex-direction:column;gap:20px} /* ---------------------------------------------------------------- page head */ .rfq-page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid var(--line,#e3e5e9)} /* 返回按钮才是头部高度的实际决定者（原 padding:8px 14px，约 35px 高，比文字行还高）， 要把整块压到原高度的 1/3，必须连它一起收。 */ .rfq-back{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line,#e3e5e9);background:var(--white,#fff);color:var(--muted,#5b6270);border-radius:999px;padding:4px 11px;font-size:11px;cursor:pointer;flex:0 0 auto} .rfq-back:hover{color:var(--orange,#0048a8);border-color:var(--orange,#0048a8)} /* 头部高度压到原来的约 1/3（真实单号状态实测 103px -> 约 30px，比值约 0.3）。 原来 单号(22px) / 标题(19px) / 提示(12px) 各占一行、各带 6px 上边距，再加 16px 下内边距。现在把三者并在同一行，字号与间距同步收紧。 注意：.rfq-page-identity 本身是 .rfq-page-head 的 flex 子项，必须给它 flex:1 1 auto——原来这里是 flex:1 1 320px，基准宽只有 320px，三个子元素会 各自换行（只给子元素加 flex-wrap 没用，实测仍是 3 行、比值只到 0.447）。 */ .rfq-page-identity{display:flex;flex:1 1 auto;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0} .rfq-page-ref{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink,#14161a);line-height:1.2} .rfq-page-ref.is-placeholder{font-family:inherit;font-size:11px;font-weight:600;color:var(--muted,#5b6270);border:1px dashed var(--line,#e3e5e9);border-radius:999px;padding:3px 9px} .rfq-page-title{margin:0 0 0 -5px;padding:1px 5px;border-radius:5px;font-size:15px;font-weight:700;color:var(--ink,#14161a);line-height:1.25;word-break:break-word;cursor:text;transition:background 140ms ease,box-shadow 140ms ease} .rfq-page-title:hover{background:var(--white,#fff);box-shadow:inset 0 0 0 1px var(--line,#e3e5e9)} .rfq-page-title:focus-visible{outline:2px solid var(--orange,#0048a8);outline-offset:2px} .rfq-page-title-input{width:100%;min-width:170px;font:inherit;color:inherit;border:0;border-bottom:2px solid var(--orange,#0048a8);background:transparent;padding:0 0 1px;outline:none} .rfq-page-sub{margin:0;font-size:11px;line-height:1.3;color:var(--muted,#5b6270);flex:1 1 auto;min-width:0;max-width:none} @media (max-width:1080px){ /* 窄屏放不下就自然换行，不截断提示文案。 */ .rfq-page-sub{flex-basis:100%} } /* ------------------------------------------------------------------- layout */ .rfq-page-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:20px;align-items:start} .rfq-page-main,.rfq-page-side{min-width:0;display:flex;flex-direction:column;gap:16px} .rfq-page-card{background:var(--white,#fff);border:1px solid var(--line,#e3e5e9);border-radius:14px;padding:18px} .rfq-page-card>h2{margin:0 0 12px;font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink,#14161a)} .rfq-page-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px} .rfq-page-card-head h2{margin:0;font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase} .rfq-page-count{font-size:11px;color:var(--muted,#5b6270)} /* -------------------------------------------------------------------- table */ .rfq-page-table-wrap{overflow-x:auto;border:1px solid var(--line,#e3e5e9);border-radius:10px} /* 本页零件列表不要筛选条件与列头排序（rfq-page.js 里已逐列关掉 sortable/filterable）。 关掉后模块仍会渲染一条筛选行——单元格里只放 .tt-filter-none 占位（高 1px）， 加上内边距与边框会留下一条约 10px 的空白带，所以整行隐藏。 只做 CSS 隐藏，DOM 保持完整，模块内部的筛选行引用不会失效。 */ #rfq-page .tt-filter-row{display:none} .rfq-page-table{width:100%;border-collapse:collapse;font-size:12px;min-width:820px} .rfq-page-table th{position:sticky;top:0;background:var(--paper,#fafbfc);text-align:left;font-weight:700;color:var(--muted,#5b6270);padding:10px 9px;border-bottom:1px solid var(--line,#e3e5e9);white-space:nowrap;font-size:11px;letter-spacing:.03em;text-transform:uppercase} .rfq-page-table td{padding:7px 9px;border-bottom:1px solid #f0f1f4;vertical-align:top} .rfq-page-table tr:last-child td{border-bottom:0} .rfq-page-table input{width:100%;min-width:88px;padding:7px 8px;font-size:12px;border:1px solid var(--line,#e3e5e9);border-radius:8px;background:var(--white,#fff)} .rfq-page-table input:focus{outline:2px solid rgba(0,72,168,.28);border-color:var(--orange,#0048a8)} .rfq-page-table input:invalid:not(:placeholder-shown){border-color:#d94a3d} /* 2026-09-30（REQ98）：用户要求「数量列宽度减半」。列宽在 rfq-page.js 里声明（148 → 74）， 这里把该列的单元格内边距与输入框最小宽度一起收窄——通用规则给的 min-width:88px 是为了 让「材料 / 工艺 / 公差」这类文本输入框可读，但表格是 table-layout:fixed：88px 放进 74px 的列 不会把列撑开，只会压住右边的「材料」列。收窄后典型的 1~4 位数量完整可见；字段上限的 8 位值（10000000）会在输入框内部横向滚动，输入框本身不会变宽、也不会越出单元格。 */ .rfq-cell-quantity{padding-left:6px;padding-right:6px} .rfq-page-table td.rfq-cell-quantity input{min-width:0;padding-left:6px;padding-right:6px;box-sizing:border-box} .rfq-page-table td small{display:block;margin-top:4px;font-size:10px;color:var(--muted,#5b6270);word-break:break-all} .rfq-cell-index{width:52px;color:var(--muted,#5b6270);font-weight:700;text-align:center} .rfq-row-remove{border:1px solid var(--line,#e3e5e9);background:var(--white,#fff);color:var(--muted,#5b6270);border-radius:7px;padding:6px 9px;font-size:11px;cursor:pointer;white-space:nowrap} .rfq-row-remove:hover{color:#d94a3d;border-color:#d94a3d} .rfq-page-empty{display:flex;flex-direction:column;gap:6px;padding:34px 18px;text-align:center;border:1px dashed var(--line,#e3e5e9);border-radius:10px;color:var(--muted,#5b6270)} .rfq-page-empty b{font-size:14px;color:var(--ink,#14161a)} .rfq-page-empty span{font-size:12px;max-width:60ch;margin:0 auto;line-height:1.6} /* --------------------------------------------------------------- pagination */ .rfq-page-pagination{margin-top:12px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:flex-start} .rfq-page-pagination label{display:flex;align-items:center;gap:6px;margin:0} .rfq-page-pagination select,.rfq-page-pagination input[type="number"]{width:auto;min-width:64px;padding:6px 8px;font-size:12px} .rfq-page-pagination>span{font-size:12px;color:var(--muted,#5b6270)} .rfq-page-pagination[hidden]{display:none} /* ------------------------------------------------------------- side column */ .rfq-page-side .upload-zone{margin-bottom:14px} .rfq-defaults{border-top:1px solid var(--line,#e3e5e9);padding-top:13px} .rfq-defaults h3{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#5b6270)} .rfq-defaults .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px} .rfq-page-side .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .rfq-page-side label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted,#5b6270)} .rfq-page-side label>span{font-weight:600} .rfq-page-side input,.rfq-page-side select,.rfq-page-side textarea{width:100%;padding:8px 9px;font-size:12px;border:1px solid var(--line,#e3e5e9);border-radius:8px;background:var(--white,#fff);color:var(--ink,#14161a)} /* Checkboxes must not inherit the 100% width above: at 400px they squeeze the label text into a one-character column. */ .rfq-page-side input[type="checkbox"],.rfq-page-side input[type="radio"]{width:15px!important;height:15px!important;min-width:15px;flex:none;padding:0;border-radius:3px} .rfq-page-side .checkbox-row{flex-direction:row;align-items:flex-start;gap:9px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line,#e3e5e9)} .rfq-page-side .compliance-check span{flex:1;min-width:0;font-size:11px;font-weight:500;line-height:1.5;color:var(--muted,#5b6270)} /* 「账单地址同运输地址」这一行要横向靠左、只占一行。 注意级联是按属性生效的：banner-billing.css 的 .rfq-address-fields .billing-same 只声明了 display/align-items/gap，并没有声明 flex-direction，所以上面第 59 行 .rfq-page-side label 的 flex-direction:column 依然生效——选框与文字被竖排， 再叠加 .billing-same 的 align-items:center，整行就变成了居中堆叠。 这里显式声明回 row 并靠左，同时不换行。 */ #rfq-page .rfq-address-fields .billing-same{flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;white-space:nowrap} #rfq-page .rfq-address-fields .billing-same span{white-space:nowrap} /* .rfq-address-fields is authored in banner-billing.css; do not restyle it here or the shipping/billing panel loses its intended layout. */ #rfq-page .exw-carrier-panel{margin-top:16px} /* ------------------------------------------------------------------ actions */ .rfq-page-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;padding-top:4px} .rfq-page-hint{margin:0;font-size:11px;color:var(--muted,#5b6270);flex:1 1 240px;text-align:right} .rfq-confirm-button{min-width:190px;justify-content:center} .rfq-confirm-button.is-login{background:var(--ink,#14161a)} .rfq-confirm-button[disabled]{opacity:.6;cursor:not-allowed} /* ------------------------------------------------------------------- notice */ .rfq-page-notice[hidden]{display:none} .rfq-page-notice p{white-space:pre-line} /* ------------------------------------------------------------------ responsive */ /* Keep room for editable parts beside the stacked upload and trade cards. Below 1081px the existing single-column responsive layout still applies. */ #rfq-page .rfq-page-shell{max-width:none;margin:0;padding-left:70px;padding-right:70px} @media (min-width:1081px){ #rfq-page .rfq-page-grid{grid-template-columns:minmax(0,1fr) minmax(320px,360px)} /* Trade fields wrap within the available sidebar width. */ #rfq-page .rfq-page-side .form-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} } /* Keep the uploaded parts at left and the upload/trade cards stacked at right. */ #rfq-page .rfq-page-main{width:100%;min-width:0} #rfq-page:not(.is-empty) .rfq-page-side{display:flex;flex-direction:column;align-items:stretch;width:100%;min-width:0} #rfq-page .rfq-page-card--compliance{grid-column:1/-1} #rfq-page .rfq-row-actions{display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px} #rfq-page .rfq-row-actions .list-action{white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;width:auto;min-width:max-content;max-width:none} /* The shared upload control uses the card's full inner width on both portals. */ #rfq-page #rfq-page-upload-zone{width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box} #rfq-page .rfq-page-empty[hidden]{display:none} /* REQ113: only the buyer drawing editor fits its available column space. Narrow rows reflow their existing fields; nothing is clipped or discarded. */ #rfq-page:not([data-customer-rfq-page]) .rfq-page-table{min-width:0} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table th, #rfq-page:not([data-customer-rfq-page]) .rfq-page-table td{padding:7px 6px;min-width:0} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table input{min-width:0;max-width:100%;box-sizing:border-box} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table td small{white-space:normal;overflow-wrap:anywhere} #rfq-page:not([data-customer-rfq-page]) .rfq-row-actions .list-action{white-space:normal!important;min-width:0;max-width:100%;overflow-wrap:anywhere!important} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"]{display:block} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] .tt-resizer{display:none} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] tbody{display:block;width:100%} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:10px;border-bottom:1px solid var(--line,#e3e5e9)} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] tbody tr:last-child{border-bottom:0} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] td{display:block;width:auto;padding:0;border:0} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] td::before{content:attr(data-field-label);display:block;margin-bottom:4px;font-size:11px;font-weight:600;color:var(--muted,#5b6270)} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] .rfq-cell-index, #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] .rfq-cell-name, #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] .rfq-cell-notes, #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] .rfq-cell-actions{grid-column:1/-1} #rfq-page:not([data-customer-rfq-page]) .rfq-page-table[data-tt-fit="wrap"] .rfq-cell-index{display:flex;align-items:baseline;gap:8px;text-align:left} #rfq-page:not([data-customer-rfq-page]) .tt-column-list>li{grid-template-columns:minmax(0,1fr) auto auto;gap:5px} #rfq-page:not([data-customer-rfq-page]) .tt-panel{min-width:0;max-width:100%;box-sizing:border-box} /* 压缩右栏纵向高度：目标是让用户不用拖很久滚动条就能点到「确认询价」。 地址面板（.rfq-address-fields）的样式归 banner-billing.css 管，这里只在 本页范围内收窄它的间距；选择器带 #rfq-page 前缀，其它使用该面板的流程不受影响。 */ #rfq-page .rfq-page-side{gap:12px} #rfq-page .rfq-page-side>.rfq-page-card{padding:14px} #rfq-page .rfq-page-side .form-grid{gap:8px 10px} #rfq-page .rfq-page-side .form-grid>label{justify-content:flex-end} #rfq-page .rfq-page-side label{gap:3px} /* 「新行默认值」（数量/材料/关键公差/表面处理）不再显示在上传卡片里： 上传后每一行的这些参数都在左侧列表里按行维护，这里再放一份默认值是重复的。 节点保留在 DOM 中只做隐藏——defaultsFromInputs() 仍要从这些输入读新行的初始值。 */ #rfq-page .rfq-defaults{display:none} /* 上传后（停靠在右上角那张卡片里）上传控件要占卡片高度的 2/3， 余下的 1/3 让下方「贸易与运输」等内容整体上移。 卡片高度 = 上下内边距 28px + 标题块约 50px + 控件高度， 要让控件正好是整体的 2/3，控件高度取 156px（156 / (78 + 156) = 0.667）。 */ #rfq-page:not(.is-empty) #rfq-page-upload-zone{min-height:156px} /* 用户要求：上传后停靠态**仍要保留**「选择文件」入口，只是小一号。 停靠条只有 156px 高，不能沿用空态那套 padding:11px 30px / font-size:14px。 align-self:center 是必需的：停靠态的 zone 实测是 flex 容器，flex 子项会被 blockify（inline-block→block）并被默认 align-items:stretch 拉成通栏色块； 实测过 444px 宽的一条橘色横条，不符合"小一点"。加 align-self 后按内容收缩居中， 若该容器不是 flex 则此属性被忽略，inline-block 本身也会正确收缩。 */ #rfq-page:not(.is-empty) .rfq-upload-cta{align-self:center;margin-top:7px;padding:6px 16px;font-size:12px;border-radius:7px;box-shadow:none} #rfq-page .rfq-address-fields{margin-top:12px;padding-top:11px} #rfq-page .rfq-address-fields h3{font-size:13px;margin:0 0 6px} #rfq-page .rfq-address-fields label{margin:7px 0} #rfq-page .rfq-address-fields textarea{min-height:52px;margin-top:4px;padding:7px 8px;font-size:12px} #rfq-page .rfq-address-fields small{display:block;font-size:10px;line-height:1.5} #rfq-page .rfq-page-card--trade textarea#rfq-default-notes{min-height:56px} #rfq-page .rfq-page-card--compliance{padding:10px 14px} #rfq-page .rfq-page-card--compliance .compliance-check{margin:0;padding-top:0;border-top:0} /* ------------------------------------------------- 空态：中间只留大号上传控件 */ /* 未上传图纸时不显示零件列表、贸易资料与合规勾选，只保留上传卡片并放大居中。 */ #rfq-page.is-empty .rfq-page-main, #rfq-page.is-empty .rfq-page-card--trade, #rfq-page.is-empty .rfq-page-card--compliance, #rfq-page.is-empty .rfq-defaults{display:none} #rfq-page.is-empty .rfq-page-grid{grid-template-columns:minmax(0,1fr)} /* 空态上传卡片要横贯整幅内容宽度（与参考图一致：拖放区几乎占满左右留白之间）， 所以这里不设 max-width，让它铺满 #rfq-page 的 70px 留白之间。 */ #rfq-page.is-empty .rfq-page-side{grid-column:1/-1;width:100%;max-width:none;margin:0} #rfq-page.is-empty .rfq-page-card--upload{padding:30px} #rfq-page.is-empty #rfq-page-upload-zone{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px} #rfq-page.is-empty #rfq-page-upload-zone b{font-size:19px} #rfq-page.is-empty #rfq-page-upload-zone small{font-size:12px} /* 空态的上传引导：说明行 + 拖放区里的实心按钮 + 格式与限制说明。 参考了同行的组织方式（先讲清"传什么、怎么传、有什么限制"），但用的是我们 自己的品牌色、自己的措辞，以及我们真实支持的格式与限制—— 3D：STEP/IGES/Parasolid/ACIS/SolidWorks/Inventor/CATIA/Creo/NX/STL/OBJ/3MF/JT/3DM； 2D：PDF/DWG/DXF/DWF/SVG/TIFF/BMP/EMF/PNG/JPG/WebP/GIF； 压缩包：zip、7z（自动解压，每张图纸一行；rar 不支持，界面必须明说）； 单个文件 ≤ 30MB、每次 ≤ 20 个文件（压缩包按 1 个计）、合计 ≤ 100MB。 文案的唯一来源是 rfq-page.js 的 renderUploadGuide()，且必须与后端 backend/app/drawing_formats.py 的白名单一致，否则用户传了会被服务端拒绝。 这些块只在上传前（空态）显示；上传后右栏仍收成紧凑的停靠条，不会变高。 */ .rfq-upload-lead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;margin:0 0 10px;font-size:12px;color:var(--muted)} .rfq-upload-lead>span{min-width:0;max-width:100%;overflow-wrap:anywhere} .rfq-upload-secure{font-size:11px;white-space:normal} .rfq-upload-cta{display:inline-block;padding:11px 30px;border-radius:9px;background:var(--orange);color:var(--white);font-weight:700;font-size:14px;letter-spacing:.02em;box-shadow:0 6px 16px rgba(0,74,173,.28);transition:background 160ms ease} #rfq-page.is-empty #rfq-page-upload-zone:hover .rfq-upload-cta{background:var(--orange-2)} .rfq-upload-specs{margin:14px 0 0;font-size:12px;color:var(--muted);line-height:1.7} .rfq-upload-specs p{margin:0 0 3px} .rfq-upload-specs b{color:var(--ink);margin-right:6px} .rfq-upload-limits{margin-top:9px !important;padding-top:9px;border-top:1px dashed var(--line);font-size:11px;line-height:1.6} #rfq-page:not(.is-empty) .rfq-upload-lead, #rfq-page:not(.is-empty) .rfq-upload-specs{display:none} /* 拖拽上传：整张「DRAWINGS」卡片都是投放区（见 rfq-page.js 的 uploadCard 绑定）， 拖到卡片任意位置都给同一个高亮，避免用户以为只有虚线框那一小块能放。 */ #rfq-page .rfq-page-card--upload.drop-active{background:#e9f1fb;outline:2px dashed var(--orange);outline-offset:-5px} /* 上传控件从居中位置“飞”到右上角：位移+缩放由 JS 用 FLIP 做， 文字做反向缩放以免被拉伸；同时让新出现的卡片淡入上浮。 */ #rfq-page #rfq-page-upload-zone{will-change:transform} #rfq-page.rfq-layout-enter .rfq-page-main, #rfq-page.rfq-layout-enter .rfq-page-card--trade, #rfq-page.rfq-layout-enter .rfq-page-card--compliance{animation:rfqRiseIn 520ms cubic-bezier(.22,.61,.36,1) both} @keyframes rfqRiseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ #rfq-page.rfq-layout-enter .rfq-page-main, #rfq-page.rfq-layout-enter .rfq-page-card--trade, #rfq-page.rfq-layout-enter .rfq-page-card--compliance{animation:none} } @media (max-width:1080px){ #rfq-page .rfq-page-shell{padding-left:20px;padding-right:20px} .rfq-page-grid{grid-template-columns:minmax(0,1fr)} .rfq-page-actions{flex-direction:column;align-items:stretch} .rfq-page-hint{text-align:left;flex-basis:auto} .rfq-confirm-button{width:100%} }