）
--------------------------------------------------------------------------
官方样式（shoppingCar.css / settlement.css）：表头 #eef4ff 蓝底 + 0.46rem 行高、
每格都有 1px #e6e7eb 边框，整张表像 Excel 表格 ⇒ 弱化边框、抬高行高。
========================================================================== */
.template .goods-table {
border: 1px solid #EAECF0 !important;
border-radius: 0 !important;
overflow: hidden;
}
.template .goods-table thead,
.template .goods-table thead tr {
background: #F7F9FC !important;
height: auto !important;
line-height: 1 !important;
}
.template .goods-table thead th {
padding-top: 13px !important;
padding-bottom: 13px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #55637A !important;
border-bottom: 1px solid #EAECF0 !important;
}
.template .goods-table tbody tr td {
border-bottom: 1px solid #F2F4F7 !important;
vertical-align: middle;
}
.template .goods-table tbody tr:last-child td { border-bottom: 0 !important; }
.template .goods-table tbody tr:hover td { background: #FAFBFD; }
/* ==========================================================================
十四、购物车空状态 · 「去选购」按钮
--------------------------------------------------------------------------
el-empty 默认只有一句灰字，用户点进来没东西可做。
模板改动：shoppingCar.php 的 el-empty 里加了一个按钮（文案 lang.shoppingCar_go_goods）。
========================================================================== */
.template .el-empty .zk-empty-btn {
height: 38px !important;
padding: 0 26px !important;
margin-top: 6px;
border: 0 !important;
border-radius: 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: .3px;
background: linear-gradient(135deg, var(--zk-navy-soft), var(--zk-navy)) !important;
color: #fff !important;
box-shadow: 0 6px 14px rgba(var(--zk-navy-rgb), .22);
transition: box-shadow .2s ease, transform .2s ease;
}
.template .el-empty .zk-empty-btn:hover {
box-shadow: 0 10px 20px rgba(var(--zk-navy-rgb), .30);
transform: translateY(-1px);
}
/* ==========================================================================
十五、手机端补充（≤750px）
========================================================================== */
@media (max-width: 750px) {
/* 机型表：手机上「卡片化」——隐藏表头，一行 = 一张卡片，
每个单元格变成「列名 —— 值」的一行。列名由 js/goods.js 的
decorateModelTable() 从真实表头写进 .cell 的 data-zk-label，
所以多语言、以及「GPU 列有没有」这类条件列都能自适应。
（不再用横向滚动：手机上要横着滑才看得全，体验更差。） */
.zk-goods .mf-dcim .el-table {
max-height: none !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
}
.zk-goods .mf-dcim .el-table__header-wrapper { display: none !important; }
/* 给卡片化的行留出空间：主卡右内边距会切掉一点点，这里补回来 */
.zk-goods .mf-dcim .el-table__body-wrapper,
.zk-goods .mf-dcim .el-table__fixed,
.zk-goods .mf-dcim .el-table__fixed-right { overflow: visible !important; }
.zk-goods .mf-dcim .el-table__body-wrapper,
.zk-goods .mf-dcim .el-table__body,
.zk-goods .mf-dcim .el-table__body > tbody {
display: block !important;
width: 100% !important;
}
/* 一行 = 一张卡片；右侧留出单选框的位置 */
.zk-goods .mf-dcim .el-table__body tr {
display: block !important;
position: relative;
height: auto !important;
margin-bottom: 12px;
padding: 6px 40px 6px 12px;
background: #fff !important;
border: 1px solid #E8ECF2 !important;
border-radius: 0 !important;
}
.zk-goods .mf-dcim .el-table__body tr:last-child { margin-bottom: 0; }
.zk-goods .mf-dcim .el-table__body tr:has(.el-radio__input.is-checked) {
border-color: rgba(var(--zk-navy-rgb), .45) !important;
box-shadow: 0 0 0 3px rgba(var(--zk-navy-rgb), .07);
}
/* 卡片化后要清掉桌面端的「选中行淡蓝底 + 首格左侧竖条」——
首格已被抽到右上角，那条竖条会挂在错误的位置上。 */
.zk-goods .mf-dcim .el-table__body tr:has(.el-radio__input.is-checked) > td.el-table__cell {
background: transparent !important;
}
.zk-goods .mf-dcim .el-table__body tr:has(.el-radio__input.is-checked) > td.el-table__cell:first-child {
box-shadow: none !important;
}
.zk-goods .mf-dcim .el-table__body tr:hover > td.el-table__cell { background: transparent !important; }
/* 单元格：一行「列名 —— 值」 */
.zk-goods .mf-dcim .el-table__body tr > td.el-table__cell {
display: block !important;
width: auto !important;
padding: 8px 0 !important;
border: 0 !important;
border-bottom: 1px dashed #F0F2F5 !important;
font-size: 13px !important;
text-align: right !important;
}
.zk-goods .mf-dcim .el-table__body tr > td.el-table__cell:last-child { border-bottom: 0 !important; }
.zk-goods .mf-dcim .el-table__body tr > td.el-table__cell > .cell {
display: flex !important;
align-items: baseline;
justify-content: space-between;
gap: 12px;
width: 100% !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.5;
}
/* 左侧列名（来自 data-zk-label） */
.zk-goods .mf-dcim .el-table__body tr > td.el-table__cell > .cell[data-zk-label]::before {
content: attr(data-zk-label);
flex: 0 0 auto;
color: #7A8699;
font-weight: 400;
}
/* 第 0 列（单选框）抽到卡片右上角 */
.zk-goods .mf-dcim .el-table__body tr > td.el-table__cell:first-child {
position: absolute;
top: 12px;
right: 12px;
width: auto !important;
padding: 0 !important;
border: 0 !important;
text-align: left !important;
}
.zk-goods .mf-dcim .el-table__body tr > td.el-table__cell:first-child > .cell {
display: block !important;
width: auto !important;
}
/* 机型名单独放大一点，卡片标题感 */
.zk-goods .mf-dcim .el-table__body tr > td.el-table__cell:nth-child(2) > .cell {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--zk-navy) !important;
}
.zk-goods .mf-dcim .el-table__body tr > td.el-table__cell:nth-child(2) > .cell[data-zk-label]::before {
font-size: 13px !important;
font-weight: 400 !important;
color: #7A8699 !important;
}
.zk-goods .mf-dcim .el-table th.el-table__cell,
.zk-goods .mf-dcim .el-table td.el-table__cell {
padding-left: 6px !important;
padding-right: 6px !important;
font-size: 13px !important;
}
/* 筛选器：两个下拉各占一整行，指头好点 */
.zk-goods .mf-dcim .top-select { flex-direction: column; align-items: stretch; gap: 10px; }
.zk-goods .mf-dcim .top-select .el-select { flex: 0 0 auto; width: 100% !important; }
/* 配置表单里的下拉 / 输入框统一拉满宽度，避免半截宽度的输入框 */
.zk-goods .mf-dcim .el-form-item__content { width: 100% !important; margin-left: 0 !important; }
.zk-goods .mf-dcim .el-form-item__label {
float: none !important;
display: block !important;
width: auto !important;
text-align: left !important;
padding: 0 0 6px !important;
line-height: 1.4 !important;
}
.zk-goods .mf-dcim .el-form-item .el-select,
.zk-goods .mf-dcim .el-form-item .el-input,
.zk-goods .mf-dcim .el-form-item .el-input-number { width: 100% !important; }
/* 商品明细表：手机上只留必要列宽，横向能滚 */
.template .goods-table thead th,
.template .goods-table tbody td {
padding-left: 8px !important;
padding-right: 8px !important;
}
/* 空状态按钮做大一点，好点 */
.template .el-empty .zk-empty-btn { height: 42px !important; padding: 0 30px !important; }
}
/* ==========================================================================
十六、商品卡描述 —— 「标签 / 值」两栏 + 行首小图标
--------------------------------------------------------------------------
后台商品描述实际长这样（纯文本 +
，不带任何标签）：
CPU:8H 高性能E5
内存8G DDR4
硬盘:40G SSD
带宽:50M上下
区域:西安
这种结构下，上一节 1a（第一节「规格描述：两栏」）里按 `> p` 写的规则一条都套不上，
所以左栏（`js/goodsList.js` 的 fmtDesc()）会把它改写成
标签
值
这里负责这套新结构的样式。
⚠️ 描述是后台富文本：fmtDesc() 只在「整段都是 标签:值 +
」时才改写，
出现图片/表格/列表等结构就原样返回，此时仍走上面那套 `> p` 的规则。
========================================================================== */
.shopping-item .goods-description .zk-spec {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
gap: 12px;
margin: 0 !important;
padding: 7px 0 !important;
border-bottom: 1px dashed var(--zk-line-soft);
font-size: 13px !important;
line-height: 1.6 !important;
}
.shopping-item .goods-description .zk-spec:last-child { border-bottom: 0 !important; }
/* 切不出「标签 / 值」的行（后台写成了整句），整行当值，不做两栏 */
.shopping-item .goods-description .zk-spec-plain { justify-content: flex-start !important; }
.shopping-item .goods-description .zk-spec-k {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
color: var(--zk-muted);
white-space: nowrap;
}
.shopping-item .goods-description .zk-spec-v {
color: var(--zk-ink);
text-align: right;
word-break: break-word;
}
/* 图标：内联 SVG（stroke = 品牌深海蓝），不依赖任何外部资源或图标字体 */
.shopping-item .goods-description .zk-ic {
display: inline-block;
flex: 0 0 14px;
width: 14px;
height: 14px;
opacity: .82;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.shopping-item .goods-description .zk-ic-cpu {
background-color: var(--zk-navy);
-webkit-mask: url("data:image/svg+xml,") center/contain no-repeat;
mask: url("data:image/svg+xml,") center/contain no-repeat;
}
.shopping-item .goods-description .zk-ic-ram {
background-color: var(--zk-navy);
-webkit-mask: url("data:image/svg+xml,") center/contain no-repeat;
mask: url("data:image/svg+xml,") center/contain no-repeat;
}
.shopping-item .goods-description .zk-ic-disk {
background-color: var(--zk-navy);
-webkit-mask: url("data:image/svg+xml,") center/contain no-repeat;
mask: url("data:image/svg+xml,") center/contain no-repeat;
}
.shopping-item .goods-description .zk-ic-net {
background-color: var(--zk-navy);
-webkit-mask: url("data:image/svg+xml,") center/contain no-repeat;
mask: url("data:image/svg+xml,") center/contain no-repeat;
}
.shopping-item .goods-description .zk-ic-loc {
background-color: var(--zk-navy);
-webkit-mask: url("data:image/svg+xml,") center/contain no-repeat;
mask: url("data:image/svg+xml,") center/contain no-repeat;
}
.shopping-item .goods-description .zk-ic-os {
background-color: var(--zk-navy);
-webkit-mask: url("data:image/svg+xml,") center/contain no-repeat;
mask: url("data:image/svg+xml,") center/contain no-repeat;
}
.shopping-item .goods-description .zk-ic-shield {
background-color: var(--zk-navy);
-webkit-mask: url("data:image/svg+xml,") center/contain no-repeat;
mask: url("data:image/svg+xml,") center/contain no-repeat;
}
.shopping-item .goods-description .zk-ic-dot {
background-color: var(--zk-navy);
-webkit-mask: url("data:image/svg+xml,") center/contain no-repeat;
mask: url("data:image/svg+xml,") center/contain no-repeat;
}
/* ==========================================================================
十七、商品选购页 · 快捷筛选标签（价格区间）
--------------------------------------------------------------------------
纯前端过滤 `goodsList`（见 js/goodsList.js 的 filteredGoodsList），不动接口。
标签文案走多语言键 cart_filter_*（三个语言目录的 index.js 都加了）。
========================================================================== */
.zk-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
}
.zk-chip {
padding: 5px 14px;
font-size: 13px;
line-height: 20px;
color: #4A5668;
background: #F2F5F9;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.zk-chip:hover {
color: var(--zk-navy);
background: #E9EFF7;
}
.zk-chip.is-active {
color: #fff;
background: var(--zk-navy);
border-color: var(--zk-navy);
box-shadow: 0 4px 10px rgba(var(--zk-navy-rgb), .20);
}
/* ==========================================================================
十八、配置页 · 专业术语问号提示
--------------------------------------------------------------------------
解释文案走多语言键 zk_term_*（三个语言目录的 index.js 都加了），
由 js/goods.js 的 applyTermTips() 在插件表单渲染完成后挂上去。
· 表单标签：挂自己写的 .zk-term 气泡（纯 CSS，hover 显示）；
· 机型表表头：气泡会被 .el-table 的 overflow 裁掉 ⇒ 只加原生 title，
并把问号做成不可点的静态标记。
========================================================================== */
.zk-goods .mf-dcim .el-form-item__label .zk-term,
.zk-term {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
margin-left: 5px;
border-radius: 50%;
background: #E8ECF2;
color: #55637A;
font-size: 10px;
font-weight: 700;
line-height: 1;
vertical-align: 1px;
cursor: help;
transition: background .16s ease, color .16s ease;
}
.zk-term:hover { background: var(--zk-navy); color: #fff; }
/* 气泡：默认隐藏，hover / 聚焦时淡入 */
.zk-term::after {
content: attr(data-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 9px);
transform: translateX(-50%) translateY(3px);
width: 250px;
padding: 9px 12px;
border-radius: 0;
background: rgba(21, 32, 51, .95);
color: #fff;
font-size: 12px;
font-weight: 400;
line-height: 1.7;
text-align: left;
white-space: normal;
word-break: break-word;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 3000;
box-shadow: 0 10px 24px rgba(16, 24, 40, .22);
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.zk-term::before {
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 3px);
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(21, 32, 51, .95);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 3000;
transition: opacity .16s ease, visibility .16s;
}
.zk-term:hover::after,
.zk-term:hover::before,
.zk-term.is-open::after,
.zk-term.is-open::before { opacity: 1; visibility: visible; }
.zk-term:hover::after,
.zk-term.is-open::after { transform: translateX(-50%) translateY(0); }
/* 靠左的标签（如「区域」「可用区」）气泡会顶出卡片，改成左对齐展开 */
.zk-goods .mf-dcim .el-form-item__label .zk-term::after {
left: -4px;
transform: translateX(0) translateY(3px);
}
.zk-goods .mf-dcim .el-form-item__label .zk-term::before {
left: 7px;
transform: translateX(0);
}
.zk-goods .mf-dcim .el-form-item__label .zk-term:hover::after,
.zk-goods .mf-dcim .el-form-item__label .zk-term.is-open::after {
transform: translateX(0) translateY(0);
}
/* 机型表表头：原生 title 方案，问号只是个静态小标记 */
.zk-goods .mf-dcim .el-table th .zk-term-head {
cursor: help;
border-bottom: 1px dotted #A9B4C4;
}
.zk-goods .mf-dcim .el-table th .zk-term-head::after {
content: "?";
display: inline-flex;
align-items: center;
justify-content: center;
width: 13px;
height: 13px;
margin-left: 4px;
border-radius: 50%;
background: #E8ECF2;
color: #55637A;
font-size: 10px;
font-weight: 700;
line-height: 1;
vertical-align: 1px;
}
/* ==========================================================================
十九、手机端 · 左侧分类栏改「抽屉」
--------------------------------------------------------------------------
手机上分类面板原本折到内容上方、限高 220px，仍然占掉半屏。
现在改成：默认收起，由内容区顶部一个按钮唤出，从左侧滑入 + 遮罩。
· 桌面端（>750px）完全不受影响：入口条与遮罩都 display:none，
.zk-cat 仍是原来的左侧固定栏（sticky / 应用壳）。
· 抽屉靠 position:fixed 脱离文档流，所以不会在 .main-content-box 里占位。
========================================================================== */
.zk-cat-bar,
.zk-cat-mask,
.zk-cat-mobile-head { display: none; }
@media (max-width: 750px) {
/* 入口按钮 */
.zk-cat-bar { display: flex; margin-bottom: 12px; }
.zk-cat-open {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 9px 14px;
font-size: 14px;
color: var(--zk-navy);
background: #fff;
border: 1px solid var(--zk-line);
border-radius: 0;
cursor: pointer;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.zk-cat-open > span {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.zk-cat-open .el-icon-menu { font-size: 16px; }
.zk-cat-open .el-icon-arrow-down { font-size: 12px; color: #98A2B3; }
/* 遮罩 */
.zk-cat-mask {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(16, 24, 40, .45);
z-index: 2050;
}
/* 抽屉本体 */
.zk-cat {
position: fixed !important;
top: 0 !important;
left: 0 !important;
bottom: 0;
width: 78vw !important;
max-width: 300px;
height: 100vh !important;
max-height: none !important;
flex: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: 4px 0 24px rgba(16, 24, 40, .18);
z-index: 2051;
transform: translateX(-102%);
transition: transform .26s ease;
display: flex;
flex-direction: column;
}
.zk-cat.is-open { transform: translateX(0); }
/* 抽屉标题栏 */
.zk-cat-mobile-head {
display: flex;
align-items: center;
justify-content: space-between;
flex: 0 0 auto;
padding: 14px 16px;
font-size: 15px;
font-weight: 600;
color: var(--zk-navy);
border-bottom: 1px solid var(--zk-line-soft);
}
.zk-cat-mobile-head .el-icon-close {
padding: 4px;
font-size: 18px;
color: #98A2B3;
cursor: pointer;
}
.zk-cat-list { flex: 1 1 auto; overflow-y: auto; }
/* 抽屉打开时，右侧内容不要再抢滚动 */
.zk-cat-open { position: relative; z-index: 1; }
}
@media (min-width: 751px) {
/* 桌面端即便残留 is-open 也不该有视觉变化（防止窗口从窄拉宽后卡住） */
.zk-cat.is-open { transform: none; }
}
/* ==========================================================================
二十、手机端（≤750px）· 购物车明细表卡片化 + 底栏重排 + 触点放大
--------------------------------------------------------------------------
390×844 实测发现的四类问题：
① 购物车明细表 table.goods-table 实测宽 862px，容器只有 366px
⇒「数量 / 小计 / 操作」三列被整个裁掉，用户在手机上既看不到小计，
也点不到数量加减和删除 ⇒ 整表转成卡片。
每格的列名由 shoppingCar.js / settlement.js 写进 data-zk-label
（取真实表头文字 ⇒ 跟着语言走，不硬编码中文）。
② 底部结算条把「删除选中的商品」做成大号红字贴在左侧，和「全选」只隔几像素，
误触即删单 ⇒ 改成「次要操作一行、合计+大按钮一行」。
③ 多处可点区域小于 36px：筛选标签 32 / 配置页下拉 34 / 机型表单选 14 /
返回入口 30 / 抽屉关闭 26 / 购物车「修改配置」29×11。
④ 商品卡片里那条空「活动」占位行（模板内联 opacity:0）白占 36px，
在手机上看起来就是一条莫名其妙的空白灰条。
回滚：删掉本节即可（桌面端 >750px 完全不受影响）。
========================================================================== */
@media (max-width: 750px) {
/* ------------------------------------------------------------------
1. 购物车 / 结算页 · 明细表转卡片
------------------------------------------------------------------ */
.template .goods-table {
display: block !important;
width: 100% !important;
border: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
}
.template .goods-table thead { display: none !important; }
.template .goods-table tbody,
.template .goods-table tbody tr {
display: block !important;
width: 100% !important;
}
/* 卡片本体就是外层 .shopping-goods（内含勾选框 + 商品名 + 明细表） */
.template .shopping-goods {
position: relative !important;
display: block !important;
padding: 14px 14px 4px !important;
margin-bottom: 12px !important;
background: #fff !important;
border: 1px solid #E8ECF2 !important;
border-radius: 0 !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}
.template .shopping-goods .table-content { overflow: visible !important; }
.template .shopping-goods .table-name {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
padding: 0 38px 12px 0 !important;
margin: 0 !important;
border-bottom: 1px solid #F0F2F5 !important;
overflow: visible !important;
}
.template .shopping-goods .table-name .goods-name {
font-size: 15px !important;
font-weight: 600 !important;
color: #1F2D3D !important;
}
/* 「修改配置」原来只有 29×11，放大成能点的胶囊 */
.template .shopping-goods .table-name .edit-goods {
flex: 0 0 auto;
margin-left: auto !important;
padding: 8px 11px !important;
font-size: 13px !important;
line-height: 1 !important;
border-radius: 0 !important;
background: rgba(var(--zk-navy-rgb), .06) !important;
}
/* 每一个单元格 = 一行「列名 …… 值」 */
.template .goods-table tbody tr td {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px 10px !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
padding: 10px 0 !important;
border: 0 !important;
border-bottom: 1px dashed #EEF1F5 !important;
background: transparent !important;
font-size: 13px !important;
text-align: left !important;
}
.template .goods-table tbody tr td:last-child { border-bottom: 0 !important; }
/* 列名吃掉全部剩余宽度 ⇒ 后面的值被顶到最右，且「¥1.00 / 年」这种组合不会被拆散 */
.template .goods-table tbody tr td::before {
content: attr(data-zk-label);
flex: 0 0 auto;
margin-right: auto;
font-size: 13px !important;
color: #7A8699 !important;
}
/* 第 1 格（配置详情）与删除格不显示列名 */
.template .goods-table tbody tr td:first-child::before,
.template .goods-table tbody tr td.delete-btn::before,
.template .goods-table tbody tr td[data-zk-label=""]::before { display: none !important; }
/* 第 1 格：配置明细整段通栏，内部再按「名称 …… 价格」排 */
.template .goods-table tbody tr td:first-child {
display: block !important;
padding: 2px 0 8px !important;
}
.template .goods-table tbody tr td:first-child .info-box { width: 100% !important; }
.template .goods-table tbody tr td:first-child .goodsInfo-type { width: auto !important; flex: 1 1 auto; }
.template .goods-table tbody tr td:first-child .goodsInfo-price { flex: 0 0 auto; color: #1F2D3D !important; }
.template .goods-table tbody tr td:first-child .goods-info {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
gap: 12px !important;
padding: 7px 0 !important;
margin: 0 !important;
border-bottom: 1px dashed #F4F6F9 !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
.template .goods-table tbody tr td:first-child .goods-info:last-child { border-bottom: 0 !important; }
/* 数量：选择器靠右（靠 ::before 的 margin-right:auto 顶过去，不再重复 margin-left） */
.template .goods-table tbody tr td .el-input-number {
margin-left: 0 !important;
width: 136px !important;
}
.template .goods-table tbody tr td .el-input-number .el-input__inner {
height: 36px !important;
line-height: 36px !important;
font-size: 14px !important;
}
.template .goods-table tbody tr td .el-input-number .el-input-number__decrease,
.template .goods-table tbody tr td .el-input-number .el-input-number__increase {
width: 36px !important;
height: 36px !important;
line-height: 36px !important;
font-size: 15px !important;
}
.template .goods-table tbody tr td .qty-num,
.template .goods-table tbody tr td .qty-tips { flex-basis: 100%; margin: 4px 0 0 !important; text-align: right; }
/* 小计：金额提级 */
.template .goods-table tbody tr td.item-total {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--zk-navy) !important;
}
.template .goods-table tbody tr td.item-total .original-price { font-weight: 400 !important; }
/* 删除：从表格末列抽到卡片右上角，触控区 36×36 */
.template .goods-table tbody tr td.delete-btn {
position: absolute !important;
top: 10px !important;
right: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
.template .goods-table tbody tr td.delete-btn i.el-icon-delete {
font-size: 18px !important;
color: #98A2B3 !important;
}
/* 失效商品那一行 */
.template .goods-table tbody tr td.no-goods-td {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
.template .goods-table .no-goods-tips { font-size: 13px !important; white-space: normal !important; }
.template .goods-table .buy-again-btn {
height: 36px !important;
line-height: 36px !important;
font-size: 14px !important;
border-radius: 0 !important;
margin-left: 0 !important;
}
/* ------------------------------------------------------------------
2. 底部结算条：次要操作一行、合计 + 大按钮一行
------------------------------------------------------------------ */
.template .el-footer {
padding: 12px 14px !important;
border-radius: 0 !important;
box-shadow: 0 -2px 16px rgba(16, 24, 40, .10) !important;
}
.template .el-footer .footer-box {
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
height: auto !important;
}
/* 次要操作行 */
.template .el-footer .footer-left {
order: 1;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px 10px !important;
width: 100% !important;
padding: 0 0 10px !important;
margin: 0 0 10px !important;
border-bottom: 1px solid #F0F2F5 !important;
font-size: 13px !important;
line-height: 1.4 !important;
color: #7A8699 !important;
}
/* 「已选择 N 件商品」排到「全选」之后，别孤零零占一行 */
.template .el-footer .footer-left .all-check { order: 1; }
.template .el-footer .footer-left > span:not(.delect-btn) { order: 2; }
.template .el-footer .footer-left .all-check .el-checkbox__label {
font-size: 13px !important;
color: #55637A !important;
}
/* 删除：弱化成小号描边胶囊，并推到最右，远离「全选」 */
.template .el-footer .footer-left .delect-btn { order: 3; margin: 0 0 0 auto !important; }
.template .el-footer .footer-left .delect-goods {
display: inline-flex !important;
align-items: center !important;
min-height: 36px !important;
padding: 0 12px !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1 !important;
border-radius: 0 !important;
background: rgba(217, 45, 32, .06) !important;
}
/* 主操作行：合计在左、大按钮在右（结算页额外多一行协议勾选） */
.template .el-footer .footer-right {
order: 2;
display: grid !important;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px 12px !important;
width: 100% !important;
font-size: 13px !important;
}
.template .el-footer .footer-right .totalprice-box,
.template .el-footer .footer-right .zk-total-row {
grid-column: 1;
grid-row: 1;
}
.template .el-footer .footer-right .totalprice-box { height: auto !important; padding: 0 !important; }
.template .el-footer .footer-right .zk-total-row { justify-content: flex-start !important; margin: 0 !important; }
.template .el-footer .footer-right .zk-total-label { font-size: 13px !important; color: #7A8699 !important; }
.template .el-footer .footer-right .total-price { font-size: 20px !important; font-weight: 700 !important; }
/* .btn-box 拆成网格项，让「提交订单」和「合计」并排，协议勾选单独一行 */
.template .el-footer .footer-right .btn-box { display: contents !important; }
.template .el-footer .footer-right .buy-btn,
.template .el-footer .btn-box .buy-btn {
grid-column: 2;
grid-row: 1;
justify-self: end;
width: auto !important;
min-width: 128px !important;
height: 44px !important;
line-height: 44px !important;
margin: 0 !important;
padding: 0 20px !important;
font-size: 16px !important;
font-weight: 600 !important;
border-radius: 0 !important;
}
.template .el-footer .footer-right .check-box {
grid-column: 1 / -1;
grid-row: 2;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 2px 6px !important;
font-size: 12px !important;
line-height: 1.5 !important;
color: #7A8699 !important;
}
/* 固定底栏要盖住内容，主区底部留出让位空间（配置页已有 130px，不重复加） */
.template .el-main > .main-card:not(:has(.main-content-box.has-cat)) {
padding-bottom: 132px !important;
}
/* ⚠️ 上面那条会连带命中配置页底栏里的 main-card —— .f-order 底下同样是
.el-main > .main-card、里面同样没有 .main-content-box，于是底栏也被塞进
132px 下内边距：底栏从 ~119px 被撑成 234px（吃掉手机 1/3 屏高），
两行内容还被 align-content 拉开一大段空档。这里用更高权重按回去。 */
.zk-goods .config-box .f-order .el-main > .main-card {
padding-top: 10px !important;
padding-bottom: 16px !important;
}
/* ------------------------------------------------------------------
3. 触点放大：所有小于 36px 的可点区域
------------------------------------------------------------------ */
/* 勾选框：视觉 17px，实际触控区由 min-height 撑到 36px */
.template .el-checkbox {
display: inline-flex !important;
align-items: center !important;
min-height: 36px !important;
padding: 0 !important;
}
.template .el-checkbox__inner { width: 17px !important; height: 17px !important; }
.template .el-checkbox__inner::after {
top: 2px !important;
left: 5px !important;
width: 4px !important;
height: 8px !important;
}
/* 列表页筛选标签 32 → 38。
⚠️ 把高度撑到 38px 后，行高仍是桌面继承来的 20px ⇒ 文字贴在按钮顶端
（实测上留 2px、下留 21px，就是用户说的「字体偏上」）。
用 flex 居中把文字摆正，上下各留 10px。 */
.zk-main .zk-chip,
.zk-chip {
min-height: 38px;
padding: 0 16px !important;
font-size: 13px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 筛选标签：5 个标签合计 482px、手机只有 340px 宽。原先排成一行横向滚动，
结果最右边那个标签被切掉一半，看着像「显示坏了」（用户反馈）。
改成换行 —— 3 + 2 两行，全部标签完整可见，也不用再横滑。 */
.zk-main .zk-filters,
.zk-filters {
flex-wrap: wrap !important;
overflow: visible !important;
row-gap: 8px !important;
column-gap: 8px !important;
padding-bottom: 0 !important;
margin-bottom: 14px !important;
}
.zk-filters .zk-chip { flex: 0 0 auto !important; }
/* ---------- 4. 商品列表卡片：去掉空「活动」占位行 ----------
模板在没有任何活动时，仍渲染一个 ，
视觉看不见但白占 36px（gap 14 + 行高 22），在手机上就是一条空白灰条。 */
.shopping-item .goods-active:has(> .active-name[style*="opacity: 0"]) { display: none !important; }
.shopping-item { gap: 12px !important; }
/* ------------------------------------------------------------------
5. 商品配置页：下拉/输入/单选框放大，「返回」入口加高
------------------------------------------------------------------ */
.zk-crumb-back { margin-bottom: 10px; }
.zk-back-link {
min-height: 40px;
padding: 0 16px 0 13px !important;
font-size: 14px !important;
}
.zk-goods .el-form-item .el-input__inner,
.zk-goods .el-form-item .el-select .el-input__inner,
.zk-goods .mf-dcim .top-select .el-select .el-input__inner {
height: 44px !important;
line-height: 44px !important;
font-size: 14px !important;
}
.zk-goods .el-form-item .el-select .el-input__icon,
.zk-goods .mf-dcim .top-select .el-select .el-input__icon { line-height: 44px !important; }
.zk-goods .el-form-item .el-input-number__decrease,
.zk-goods .el-form-item .el-input-number__increase {
height: 44px !important;
line-height: 44px !important;
width: 34px !important;
}
/* 机型表上的单选框：14 → 20，并把整行变成可点（JS 已把 label 绑在行上） */
.zk-goods .mf-dcim .el-radio { padding: 6px; }
.zk-goods .mf-dcim .el-radio__inner { width: 20px !important; height: 20px !important; }
.zk-goods .mf-dcim .el-table__body tr { cursor: pointer; }
.zk-goods .mf-dcim .top-select { padding: 10px 12px; gap: 10px; }
/* 底栏里的时长 / 数量控件 34 → 42 */
.zk-goods .f-order .el-input__inner {
height: 42px !important;
line-height: 42px !important;
font-size: 14px !important;
}
.zk-goods .f-order .duration-select { width: 104px !important; }
.zk-goods .f-order .el-input-number { width: 122px !important; }
.zk-goods .f-order .el-input-number__decrease,
.zk-goods .f-order .el-input-number__increase {
width: 34px !important;
height: 42px !important;
line-height: 42px !important;
font-size: 13px !important;
}
.zk-goods .f-order .right .add-cart { width: 42px !important; height: 42px !important; border-radius: 0 !important; }
.zk-goods .f-order .right .buy {
height: 42px !important;
line-height: 42px !important;
min-width: 106px !important;
border-radius: 0 !important;
}
/* ------------------------------------------------------------------
6. 术语问号：触屏可用
气泡宽度沿用桌面端的 250px（390 视口下：标签左边界约 70px + 250px 仍在屏内）。
⚠️ 这里千万不要改成 width:auto —— 绝对定位 + 只给 left 时 shrink-to-fit
会退化成「一个字一行」的竖条（实测宽度 12px、高 320px，整个竖着贴在页头）。
------------------------------------------------------------------ */
.zk-term {
width: 18px !important;
height: 18px !important;
margin-left: 6px !important;
font-size: 11px !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.zk-term::after { font-size: 12px !important; }
/* ------------------------------------------------------------------
7. 分类抽屉：关闭按钮 / 搜索按钮放大
------------------------------------------------------------------ */
.zk-cat-mobile-head { padding: 10px 10px 10px 16px !important; }
.zk-cat-mobile-head .el-icon-close {
padding: 9px !important;
font-size: 19px !important;
}
.zk-cat-search-btn.el-button { min-width: 38px !important; height: 38px !important; }
/* ------------------------------------------------------------------
8. 配置页插件表单 · 小字统一
插件模板（mf_*.css）按桌面基准写 rem（1rem = 100px），而手机根字号是
屏宽 / 7.5（390 ⇒ 52px）⇒ 同一个 0.12rem 只剩 6.2px，配置页上一堆
6~9px 的字。这里把已知节点统一到 12~14px。
------------------------------------------------------------------ */
/* 镜像卡（系统 / 机型图标格）：桌面这张卡是 1.9rem × 0.84rem，手机根字号只有
52px ⇒ 实得 99 × 44px，而卡里「名字 + 版本」两行字要 50px 高、光
「Proxmox-VE」一个词就 60px 宽，塞不进 55px 的文字区 ⇒ 文字整个挤出卡片，
截图里满屏乱窜。所以手机端不只是调字号，得把卡改成「两列等宽 + 内容不许溢出」。 */
.zk-goods .image-box,
.zk-goods .image-ul {
max-width: none !important;
width: 100% !important;
}
.zk-goods .image-ul { gap: 8px !important; }
/* 收起态官方写的是 height: 1rem（手机上 52px），装不下 56px 的卡 */
.zk-goods .image-ul.hide { height: 64px !important; }
.zk-goods .image-ul .image-item,
.zk-goods .image-ul .empty-image {
width: calc(50% - 4px) !important;
height: 56px !important;
min-width: 0 !important;
padding: 8px 10px !important;
margin: 0 !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
}
.zk-goods .image-ul .image-item .icon {
width: 20px !important;
height: 20px !important;
flex: 0 0 auto !important;
}
.zk-goods .image-ul .image-item .r-info {
margin-left: 6px !important;
min-width: 0 !important;
flex: 1 1 auto !important;
overflow: hidden !important;
}
.zk-goods .image-ul .image-item .r-info .name {
font-size: 13px !important;
line-height: 17px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.zk-goods .image-ul .image-item .r-info .version {
font-size: 11px !important;
line-height: 15px !important;
margin-top: 3px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 点开机型后下方展开的版本列表 */
.zk-goods .image-ul .image-item .version-select .v-item { padding: 9px 10px !important; }
.zk-goods .image-ul .image-item .version-select .v-item span { font-size: 12px !important; }
/* 表单下方的灰色说明（「不支持切换地域；」「Linux系统：系统盘容量需…」） */
.zk-goods .el-form-item__content .s-tip,
.zk-goods .el-form-item__content .s-tip span {
font-size: 12px !important;
line-height: 1.55 !important;
}
/* 单选按钮（登录方式：自动创建密码 / 自定义密码 / SSH 密钥）：
官方在这张表单里把按钮写死 width: 1.44rem（手机 74.9px）、padding 0，
可「自动创建密码」六个字就要 84px ⇒ 最后一个字戳到按钮框外面。
手机端改成「宽度跟着文字走、但不少于原来的宽度」，短选项外观不变。 */
.zk-goods .mf-dcim .el-form .el-radio-button__inner,
.zk-goods .mf-cloud .el-form .el-radio-button__inner {
width: auto !important;
min-width: 1.44rem !important;
padding: 0 9px !important;
box-sizing: border-box !important;
font-size: 13px !important;
white-space: nowrap !important;
}
/* 分节标题：基础配置 / 机型配置 / 网络配置 / 系统配置 */
.zk-goods .mf-dcim .con > .com-tit,
.zk-goods .mf-dcim .con form > .com-tit { font-size: 14px !important; }
/* 底栏「订购时长 / 订购数量」标签 */
.zk-goods .f-order .l-txt { font-size: 13px !important; }
/* 「使用优惠码」入口（配置页底栏与购物车页都有）：整块收小一圈 */
.discount-popover .discount-text,
.template .discount-text,
.zk-goods .f-order .discount-text {
font-size: 11px !important;
line-height: 16px !important;
padding: 0 5px !important;
border-radius: 0 !important;
}
/* 配置页商品主标题（h1.tit 原 12.5px，比正文还小）。
注意它不是 .zk-goods 的后代，而是 .template 的直接子元素。
⚠️ 必须写成 .zk-goods .content .template > h1.tit —— 桌面那段
`.zk-goods .content .template > .tit`（0,4,0）带 !important，
权重比 `.template > h1.tit`（0,2,1）高，写低了压不过。 */
.zk-goods .content .template > h1.tit,
.zk-goods .content .template > .tit,
.zk-goods h1.tit,
.zk-goods .main-card > .tit { font-size: 16px !important; }
/* ---------- 整体收一档：底栏合计与主按钮、面包屑 ---------- */
/* 底栏合计金额 20 → 18（页面最大字，仍保持最醒目） */
.template .el-footer .footer-right .total-price { font-size: 18px !important; }
/* 底栏主按钮 16 → 15 */
.template .el-footer .footer-right .buy-btn,
.template .el-footer .btn-box .buy-btn { font-size: 15px !important; }
/* 面包屑（「云产品 › 测试」）14 → 12 */
.zk-crumb { font-size: 12px !important; }
/* 配置页底栏价格 20 → 18 */
.zk-goods .f-order .bot-price .new span { font-size: 18px !important; }
/* 选购页商品卡价格 30 → 18（桌面是 30px，手机上过于夸张） */
.template .shopping-item .price-box .item-price { font-size: 18px !important; }
.template .shopping-item .price-box .item-price .item-price-prefix { font-size: 12px !important; }
}
/* ==========================================================================
窗口 / 浮层里的「零碎字号」归位（两端通用）
--------------------------------------------------------------------------
背景：插件 CSS 按「1rem = 100px（1920 基准）」设计，但根字号随视口缩放
（1440 屏 1rem = 75px、1366 屏 71.1px、手机 52px），同一段 0.13rem 的文字
在大屏上 13px、1440 屏 9.75px、手机上只剩 6.8px —— 这是「同一个界面里
字体忽大忽小」的根因。下面统一改成固定 px。
回滚：删掉本节即可。
========================================================================== */
/* ---------- 「当前配置详情 / 配置费用明细」浮层：标签与值全部 13px ----------
插件原值 0.13rem（桌面 9.75px、手机 6.8px），连值里的
都单独写了字号，所以要连子孙一起点名。 */
.zk-goods .cur-content .c-item,
.zk-goods .cur-content .c-item *,
.zk-goods .free-content .c-item,
.zk-goods .free-content .c-item * {
font-size: 13px !important;
line-height: 20px !important;
}
/* 浮层里的小标题比正文大一档 */
.zk-goods .cur-content .tit,
.zk-goods .free-content .tit { font-size: 14px !important; }
/* 浮层里的按钮 */
.zk-goods .cur-content .el-button,
.zk-goods .free-content .el-button,
.el-popover .el-button { font-size: 13px !important; }
/* ---------- 表单下方的灰色说明（「不支持切换地域；」「Linux系统：…」）----------
插件的 0.13rem ⇒ 桌面 9.75px。归到「次要说明」12px。 */
.zk-goods .s-tip,
.zk-goods .s-tip span,
.zk-goods .el-form-item__content .s-tip,
.zk-goods .el-form-item__content .s-tip span {
font-size: 12px !important;
line-height: 1.6 !important;
}
/* ==========================================================================
桌面端专项（@media min-width:751px）
⚠️ 手机端对下面这几处有自己的一套（见文件里的手机端各节），
所以必须包在媒体查询里，写在媒体查询外面会反过来盖掉手机端设置。
========================================================================== */
@media (min-width: 751px) {
/* ---------- ① 配置页底栏 ---------- */
.zk-goods .f-order .l-txt,
.zk-goods .f-order .r-txt { font-size: 13px !important; }
/* 「使用优惠码」：桌面是 9px（0.12rem），统一到 12px */
.zk-goods .f-order .discount-text,
.discount-popover .discount-text,
.template .discount-text { font-size: 12px !important; }
/* ---------- ② 机型格（系统镜像卡）----------
名字 12px、版本 9px（0.12rem）—— 同一格里两个字号差 3px。
统一 12px，层级靠颜色/字重区分。 */
.zk-goods .image-ul .image-item .r-info .name,
.zk-goods .image-ul .image-item .r-info .version { font-size: 12px !important; line-height: 1.45 !important; }
.zk-goods .image-ul .image-item .version-select .v-item span { font-size: 12px !important; }
/* ---------- ③ 术语问号圆点 10 → 11（与手机端一致，这是本项目最小的一档）---------- */
.zk-goods .mf-dcim .el-form-item__label .zk-term,
.zk-term { font-size: 11px !important; }
.zk-goods .mf-dcim .el-table th .zk-term-head { font-size: 11px !important; }
}
/* ==========================================================================
30. 购物车侧：文字对比度达标（WCAG AA ≥ 4.5:1）
--------------------------------------------------------------------------
全量体检（.workbuddy/audit_ui.js）发现购物车页有 8 类文字对比度不足，
最差只有 1.90:1（底栏「已选 0 件」的黄色数字压在白底上）。
这些颜色都写在页面级 CSS（goodsList.css / shoppingCar.css / settlement.css）
里，而页面级 CSS 加载在本文件之后 ⇒ 必须 !important 才能压过。
色值全部沿用既有变量或既有色相，只压深，不改配色风格。
========================================================================== */
/* 价格前缀「￥」#F0142F → #D92D20（4.33 → 4.83） */
.shopping-item .price-box .item-price .item-price-prefix,
.zk-goods .f-order .bot-price .new > span,
.template .goods-table td.item-total,
.template .goods-table td.item-total span {
color: #D92D20 !important;
}
/* 底栏「已选 N 件」的数字原本是黄 #FAAD10（1.90:1），改成同一个红 */
.template .el-footer .footer-left .text-red,
.template .el-footer .footer-left span .text-red,
.template .footer-box .footer-left .text-red,
.text-red {
color: #D92D20 !important;
}
/* 「删除选中的商品」#F13939 → #D92D20（3.90 → 4.83） */
.template .el-footer .delect-goods,
.template .el-footer .delect-goods .el-link--inner,
.template .footer-box .delect-goods,
.template .footer-box .delect-btn a,
.template .footer-box .delect-btn a span {
color: #D92D20 !important;
}
/* 底栏合计金额 #E5484D → #D92D20 */
.template .el-footer .total-price,
.template .footer-box .total-price,
.template .totalprice-box .total-price,
.zk-total-row .total-price {
color: #D92D20 !important;
}
/* 「使用优惠码」胶囊 #F99600 / #E5484D → #B54708（2.24 → 5.43） */
.discount-popover .discount-text,
.template .discount-text,
.zk-goods .f-order .discount-text,
.discount-box .discount-text {
color: #B54708 !important;
border-color: #B54708 !important;
}
/* 次要灰字：--zk-muted #8A94A6 → #667085（3.06 → 4.90） */
:root { --zk-muted: #667085; }
.template .el-footer .footer-right .zk-total-label,
.zk-total-row .zk-total-label,
.zk-cat-subitem,
.zk-crumb-item { color: #667085 !important; }
/* 面包屑各段：分隔符比文字更淡是刻意的，但也要达标 */
.zk-crumb,
.zk-crumb span { color: #667085 !important; }
/* 底栏主操作按钮（「提交订单」/「立即购买」）的圆角统一。
同一个按钮，结算页是 10px（= --zk-r-md，来自会员中心皮肤里那条
`.btn-box .buy-btn`，它会跟着共用 header 一起在购物车页生效），
购物车页却是 8px（= 全局 .el-button 的 --zk-r-sm）——两页看着不一样。
这里统一到 --zk-r-md。手机会员端第 2050 行那条更具体（0,4,0），
手机上仍是 8px，不受影响。 */
.template .el-footer .buy-btn,
.template .el-footer .add-cart,
.template .footer-box .footer-right .buy-btn,
.template .footer-box .footer-right .add-cart,
.template .footer-box .btn-box .buy-btn {
border-radius: 0 !important;
}
/* ==========================================================================
11. 全场直角（2026-10-04 · 用户要求「全改直角」）
--------------------------------------------------------------------------
做法：先把所有元素的圆角归零，再把「本来就是圆形」的少数几个恢复成圆。
为什么不逐个列组件：官方 element-ui.css(90 处) + common.css(37 处) +
各页面级 css(100+ 处) 都写了圆角，而且大量用 rem（会随屏幕缩放变化），
逐个覆盖既容易漏、又会被后面加载的页面级 css 反压。通配一刀切最彻底。
⚠️ 伪元素（::before / ::after / 滚动条 thumb）不受 `*` 影响，
圆形小装饰天然保留，无需处理。
圆角总闸：值取自 --zk-r-all（见文件开头的设计令牌）。
0 = 直角；想全局改圆角只改那一个变量即可，不用碰本节。
回滚：删掉本节，并把文件开头的 --zk-r-* 圆角刻度改回 6 / 8 / 10 / 14 / 18。
========================================================================== */
body * { border-radius: var(--zk-r-all, 0) !important; }
/* 保留圆形 —— 这些不是「框」，是圆点/头像，变方反而难看 */
.el-radio__inner, /* 单选钮的圆点 */
.el-avatar, /* 头像组件 */
.el-header .head-box, /* 顶栏用户头像 */
.el-slider__button, /* 滑动条的滑块 */
.zk-term, /* 商品配置页的圆形问号图标 */
[class*="avatar"], [class*="circle"] {
border-radius: 50% !important;
}
/* ==========================================================================
十二、白卡撑到屏幕底部
用户反馈：购物车内容下面空着一大片（白卡只有内容那么高，下面露出网页底色）。
做法：给白卡一个「至少一屏高」的下限 = 视口高度 - 顶栏 40px，
白卡底边正好落到屏幕底边，下面不再露底色。
内容比一屏高时正常按内容走，不影响滚动。
适用范围：选购页 / 商品配置页（有 .main-content-box 的那两个根容器）。
回滚：删掉本节。
========================================================================== */
@media (min-width: 1025px) {
.template > .el-container > .el-container > .el-main:has(.main-content-box),
.zk-goods > .el-container > .el-container > .el-main:has(.main-content-box) {
min-height: calc(100vh - 40px) !important;
}
/* 购物车 / 结算页：底部那条「全选 / 合计 / 结算」操作条是固定贴在屏幕上的
（约 141px = 1.2rem 条高 + 底部间隙），主内容区要按
「视口高度 - 顶栏 40px - 操作条 141px」撑满，否则内容少的时候
操作条上方会露出一条灰底。
⚠️ 141 写固定 px：本站在 ≥1025px 下 1rem 恒为 100px，换算成 rem 反而多一层漂移。 */
.template > .el-container > .el-container:has(> .el-footer) > .el-main {
min-height: calc(100vh - 40px - 141px) !important;
}
/* 兜底：这两页主内容区之外的底色跟白卡一样是白的，不露灰 */
.template > .el-container > .el-container:has(> .el-footer) {
background: #FFFFFF !important;
}
}