/* ================================================================== v15.css — 第六次调整（基于 v14，仅改两点，其余全部继承 v1~v14） ------------------------------------------------------------------ 1) PC 端中奖结果弹层（#modalResult）加宽 + 三列不换行 · 弹层宽度由 720px 提升到 min(1100px, 92vw) 量级； · 奖项等级 / 奖品信息 / 数量 三列一律 white-space:nowrap，单行显示； · 「奖品信息」列限宽 600px（520~640 区间），内容超宽时在单元格内 横向滚动（滚动发生在 .sku-scroll 内，表格与弹层均不被撑破）； · 表格外包 .sum-scroll 兜底容器：极端情况下横向滚动只发生在容器内， 弹层本身不横滚、页面不横滚； · 仅 ≥768px 生效，移动端卡片式布局（v14.css）完全不变。 2) 中奖概率改为合计 100%，并在库存耗尽时按比例分摊 （逻辑在 mock/data.js 的 pickOne / activePool 与 js/api.js 的 draw —— 本文件不涉及，此处仅作版本说明） 本文件必须在 v14.css 之后引入（index.html 中为最后一个 ）。 ================================================================== */ /* ================================================================== 1｜PC 端中奖结果弹层：加宽 + 三列单行 + 奖品信息列单元格内横滚 ------------------------------------------------------------------ 断点沿用站内既有移动端断点：≥768px 视为 PC。 v14.css 的移动端卡片化规则全部包在 @media (max-width: 767px) 内， 因此这里只写 PC 规则，互不干扰。 ================================================================== */ @media (min-width: 768px) { /* ——— 1.1 弹层加宽 ——— */ #modalResult .result-dialog, #modalResult.result-dialog { width: min(1100px, 92vw) !important; max-width: min(1100px, 92vw) !important; box-sizing: border-box !important; } /* ——— 1.2 表格兜底滚动容器 ——— 正常情况下三列合计远小于可用宽度，容器不会出现滚动条； 仅当极端窄屏 PC（768~900px）时，横向滚动被限制在容器内。 */ #modalResult .sum-scroll { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; overscroll-behavior-x: contain !important; scrollbar-width: thin !important; scrollbar-color: rgba(227, 185, 95, .45) transparent !important; } #modalResult .sum-scroll::-webkit-scrollbar { height: 6px; } #modalResult .sum-scroll::-webkit-scrollbar-track { background: transparent; } #modalResult .sum-scroll::-webkit-scrollbar-thumb { background: rgba(227, 185, 95, .45); border-radius: 3px; } /* ——— 1.3 表格回归标准表格布局 ——— v13.css 曾把 .tier-cell / .sku-cell 设为 display:block（移动端卡片化 的旧写法），在 PC 端会把单元格从 table-cell 布局中剥离，造成列错位、 内容纵向折断。此处显式恢复 table-cell。 宽度策略：表格不再强撑 100%（否则 auto 布局会把富余宽度继续塞给 「奖品信息」列，列宽突破 640px 上限）；改为按三列内容定宽后整体 居中，奖品信息列被稳定锁在 600px。 */ #modalResult .sum-table { width: auto !important; max-width: 100% !important; margin: 0 auto !important; table-layout: auto !important; border-collapse: collapse !important; } #modalResult .sum-table .tier-cell, #modalResult .sum-table .sku-cell { display: table-cell !important; } /* ——— 1.4 三列一律不换行、单行基线对齐 ——— */ #modalResult .sum-table thead th, #modalResult .sum-table tbody td, #modalResult .sum-table tfoot td { white-space: nowrap !important; word-break: keep-all !important; word-wrap: normal !important; overflow-wrap: normal !important; vertical-align: middle !important; } /* 列宽分配：等级列与数量列收紧，奖品信息列锁定 600px */ #modalResult .sum-table thead th:nth-child(1), #modalResult .sum-table tbody td.tier-cell { width: 130px !important; } #modalResult .sum-table thead th:nth-child(2) { width: 600px !important; min-width: 600px !important; max-width: 600px !important; } #modalResult .sum-table thead th:nth-child(3), #modalResult .sum-table tbody td.num-cell { width: 110px !important; text-align: left !important; } /* ——— 1.5 奖品信息列：限宽 600px（落在 520~640 区间）+ 单元格内横向滚动 ——— */ #modalResult .sum-table tbody td.sku-cell { width: 600px !important; min-width: 600px !important; max-width: 600px !important; box-sizing: border-box !important; padding-right: 12px !important; } #modalResult .sum-table .sku-scroll { display: block !important; width: 100% !important; max-width: 600px !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain !important; white-space: nowrap !important; padding-bottom: 2px !important; scrollbar-width: thin !important; scrollbar-color: rgba(227, 185, 95, .5) transparent !important; } #modalResult .sum-table .sku-scroll::-webkit-scrollbar { height: 5px; } #modalResult .sum-table .sku-scroll::-webkit-scrollbar-track { background: transparent; } #modalResult .sum-table .sku-scroll::-webkit-scrollbar-thumb { background: rgba(227, 185, 95, .5); border-radius: 3px; } /* 型号与奖品名同处一行，绝不换行（v3.css 的 inline-block 口径保持） */ #modalResult .sum-table .sku-scroll .sum-name { display: inline-block !important; margin: 0 0 0 10px !important; white-space: nowrap !important; vertical-align: baseline !important; } /* 合计行注脚同样单行 */ #modalResult .sum-table tfoot td.tf-note { white-space: nowrap !important; } } /* ================================================================== 2｜移动端（≤767px）：新增的包裹层需"透明化"，卡片式布局保持 v14 原样 ------------------------------------------------------------------ v14.css 里 .sum-table 直接挂在 .result-dialog 下参与宽度计算； 本版在中间插入 .sum-scroll 与 .sku-scroll 两层 div， 这里把它们还原为无样式容器，保证 v14 的卡片规则逐条命中。 ================================================================== */ @media (max-width: 767px) { #modalResult .sum-scroll { display: block !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } #modalResult .sum-table .sku-cell { display: block !important; } #modalResult .sum-table .sku-scroll { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; padding-bottom: 0 !important; } #modalResult .sum-table .sku-scroll .sum-name { display: block !important; margin: 3px 0 0 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; font-size: 12.5px !important; line-height: 1.45 !important; color: rgba(255, 238, 214, .72) !important; } }