附加费结算:收紧顶部概览/筛选/导入区 (#318)

This commit is contained in:
zhoushengchen 2026-10-13 10:29:37 +08:00
parent f663ddc51f
commit 03fea599fb

View File

@ -60,7 +60,7 @@
--settlement-soft: var(--vip-content-accent-soft, #f7f0de);
--settlement-border: var(--vip-border, #d8d2c7);
display: grid;
gap: 1rem;
gap: .65rem;
min-width: 0;
color: var(--settlement-ink);
font-family: "JetBrains Mono", "Microsoft YaHei", "PingFang SC", monospace;
@ -97,36 +97,36 @@
}
.settlement-summary__intro,
.settlement-summary__metric { min-width: 0; padding: 1rem 1.15rem; }
.settlement-summary__intro { display: flex; align-items: center; gap: .75rem; }
.settlement-summary__icon { display: grid; flex: none; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: .6rem; background: var(--settlement-soft); color: var(--settlement-accent); }
.settlement-summary__title { font-size: .95rem; font-weight: 700; }
.settlement-summary__subtitle { margin-top: .2rem; color: var(--settlement-muted); font-size: .72rem; }
.settlement-summary__metric { min-width: 0; padding: .55rem .9rem; }
.settlement-summary__intro { display: flex; align-items: center; gap: .6rem; }
.settlement-summary__icon { display: grid; flex: none; width: 1.9rem; height: 1.9rem; place-items: center; border-radius: .5rem; background: var(--settlement-soft); color: var(--settlement-accent); }
.settlement-summary__title { font-size: .875rem; font-weight: 700; }
.settlement-summary__subtitle { margin-top: .1rem; color: var(--settlement-muted); font-size: .68rem; }
.settlement-summary__metric { border-left: 1px solid var(--settlement-border); }
.settlement-summary__label { color: var(--settlement-muted); font-size: .72rem; }
.settlement-summary__value { margin-top: .25rem; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.settlement-summary__label { color: var(--settlement-muted); font-size: .68rem; }
.settlement-summary__value { margin-top: .15rem; font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.settlement-filter-bar {
display: grid;
grid-template-columns: repeat(4, minmax(10rem, 1fr));
gap: .7rem;
gap: .45rem .6rem;
align-items: end;
padding: 1rem 1.15rem;
padding: .55rem .9rem;
border: 1px solid var(--settlement-border);
border-radius: .75rem;
background: #fffdf8;
}
.settlement-field { display: grid; gap: .3rem; min-width: 0; }
.settlement-field label { color: var(--settlement-muted); font-size: .72rem; font-weight: 600; }
.settlement-field { display: grid; gap: .2rem; min-width: 0; }
.settlement-field label { color: var(--settlement-muted); font-size: .68rem; font-weight: 600; }
.settlement-field input,
.settlement-field select {
width: 100%;
height: 2.2rem;
height: 1.9rem;
min-width: 0;
padding: 0 .6rem;
padding: 0 .5rem;
border: 1px solid var(--settlement-border);
border-radius: .45rem;
border-radius: .4rem;
background: #fff;
color: var(--settlement-ink);
font: inherit;
@ -134,14 +134,15 @@
.settlement-field input:focus,
.settlement-field select:focus { border-color: var(--settlement-accent); outline: none; box-shadow: 0 0 0 3px rgba(133, 102, 50, .18); }
.settlement-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: end; }
.settlement-button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.2rem; padding: 0 .75rem; border: 1px solid var(--settlement-border); border-radius: .45rem; background: #fff; color: var(--settlement-ink); font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.settlement-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: end; }
.settlement-filter-bar .settlement-actions { grid-column: 1 / -1; }
.settlement-button { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 1.9rem; padding: 0 .65rem; border: 1px solid var(--settlement-border); border-radius: .4rem; background: #fff; color: var(--settlement-ink); font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.settlement-button--primary { border-color: var(--settlement-accent); background: var(--settlement-accent); color: #fff; }
.settlement-button .material-icons-outlined { font-size: 1rem; }
.settlement-import-bar { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1rem; margin-top: .75rem; padding: .85rem 1.15rem; border: 1px solid var(--settlement-border); border-radius: .75rem; background: #fff; }
.settlement-button .material-icons-outlined { font-size: .95rem; }
.settlement-import-bar { display: flex; flex-wrap: wrap; align-items: end; gap: .45rem .75rem; margin-top: .45rem; padding: .5rem .9rem; border: 1px solid var(--settlement-border); border-radius: .75rem; background: #fff; }
.settlement-import-bar .settlement-field { flex: 0 1 22rem; }
.settlement-import-bar input[type="file"] { width: 100%; height: 2.2rem; padding: .35rem .5rem; border: 1px dashed var(--settlement-border); border-radius: .45rem; background: #fffdf8; color: var(--settlement-ink); font: inherit; }
.settlement-import-bar .settlement-table-hint { align-self: center; }
.settlement-import-bar input[type="file"] { width: 100%; height: 1.9rem; padding: .25rem .5rem; border: 1px dashed var(--settlement-border); border-radius: .4rem; background: #fffdf8; color: var(--settlement-ink); font: inherit; }
.settlement-import-bar .settlement-table-hint { align-self: center; flex-basis: 100%; }
.settlement-table-surface { overflow: visible; border: 1px solid var(--settlement-border); border-radius: .75rem; background: #fff; }
.settlement-table-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; padding: .85rem 1.15rem; border-bottom: 1px solid var(--settlement-border); }
@ -236,8 +237,8 @@
<div class="settlement-actions">
<button class="settlement-button settlement-button--primary" type="submit"><span class="material-icons-outlined" aria-hidden="true">upload_file</span>导入并下载结果</button>
<a class="settlement-button" href="{{ route('business.courier-surcharge.settlement.import-template') }}"><span class="material-icons-outlined" aria-hidden="true">download</span>下载导入模板</a>
<span class="settlement-table-hint">首行需包含「单号」「附加费类型」,建议提供「快递名称」;「金额」可选,填了会返回导入金额与差异金额(系统金额 − 导入金额)。未生成结算行的运单用导入核验获取字段明细。</span>
</div>
<span class="settlement-table-hint">首行需包含「单号」「附加费类型」,建议提供「快递名称」;「金额」可选,填了会返回导入金额与差异金额(系统金额 − 导入金额)。未生成结算行的运单用导入核验获取字段明细。</span>
</form>
<div class="settlement-table-surface" data-finance-table-surface>