From 01553ef0f7f6696aa33ce9159f245c475e1b4f24 Mon Sep 17 00:00:00 2001 From: wuzilong <704541015@qq.com> Date: Wed, 16 Sep 2026 21:15:31 +0800 Subject: [PATCH] style(miniprogram): add invoice thumbnail grid styles for bx. Co-authored-by: Cursor --- miniprogram/styles/bx-theme.scss | 184 +++++++++++++++++++++++++++++++ 1 file changed, 184 insertions(+) diff --git a/miniprogram/styles/bx-theme.scss b/miniprogram/styles/bx-theme.scss index a154d076e..f1bde0b1d 100644 --- a/miniprogram/styles/bx-theme.scss +++ b/miniprogram/styles/bx-theme.scss @@ -1174,6 +1174,190 @@ font-size: 16px; } +/* 关联发票缩略图(申请已选 / 详情 / 选择弹层) */ +.bx-page .invoice-thumb-grid { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 12px; +} + +.bx-page .invoice-thumb { + position: relative; + width: 72px; +} + +.bx-page .invoice-thumb__media { + width: 72px; + height: 72px; + border-radius: 8px; + overflow: hidden; + border: 1px solid var(--border); + background: #f1f5f9; +} + +.bx-page .invoice-thumb__media image { + width: 100%; + height: 100%; +} + +.bx-page .invoice-thumb__doc { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2px; + padding: 6px; + font-size: 10px; + color: var(--text-muted); + text-align: center; +} + +.bx-page .invoice-thumb__doc-ext { + font-weight: 700; + font-size: 12px; + color: var(--text-sec); +} + +.bx-page .invoice-thumb__meta { + width: 72px; + margin-top: 4px; + text-align: center; +} + +.bx-page .invoice-thumb__amt { + display: block; + font-size: 11px; + font-weight: 600; + color: var(--primary-dark); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.bx-page .invoice-thumb__date { + display: block; + font-size: 10px; + color: var(--text-muted); + margin-top: 1px; +} + +.bx-page .invoice-thumb__del { + position: absolute; + top: 2px; + right: 2px; + z-index: 2; + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; + border-radius: 50%; + background: rgba(15, 23, 42, 0.55); + color: #fff; + font-size: 13px; +} + +.bx-page .bx-sheet__body--invoice-thumbs { + padding: 12px; + max-height: 50vh; +} + +.bx-page .invoice-pick-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; +} + +.bx-page .invoice-pick-card { + position: relative; + border: 1.5px solid var(--border); + border-radius: 8px; + overflow: hidden; + background: var(--surface); + padding: 0; + text-align: left; +} + +.bx-page .invoice-pick-card.is-selected { + border-color: var(--primary); + box-shadow: 0 0 0 1px var(--primary); +} + +.bx-page .invoice-pick-card__check { + position: absolute; + top: 6px; + right: 6px; + z-index: 2; + width: 22px; + height: 22px; + border-radius: 50%; + border: 1.5px solid #fff; + background: rgba(15, 23, 42, 0.25); + color: #fff; + font-size: 12px; + display: flex; + align-items: center; + justify-content: center; +} + +.bx-page .invoice-pick-card.is-selected .invoice-pick-card__check { + background: var(--primary); +} + +.bx-page .invoice-pick-card__preview { + width: 100%; + aspect-ratio: 1 / 1; + background: #f1f5f9; + overflow: hidden; +} + +.bx-page .invoice-pick-card__preview image { + width: 100%; + height: 100%; +} + +.bx-page .invoice-pick-card__doc { + width: 100%; + height: 100%; + min-height: 96px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; + padding: 8px; + font-size: 11px; + color: var(--text-muted); + text-align: center; +} + +.bx-page .invoice-pick-card__meta { + padding: 6px 8px 8px; + border-top: 1px solid var(--border); +} + +.bx-page .invoice-pick-card__amt { + font-size: 12px; + font-weight: 700; + color: var(--primary-dark); +} + +.bx-page .invoice-pick-card__date { + margin-top: 2px; + font-size: 10px; + color: var(--text-muted); +} + +.bx-page .invoice-pick-footer-tip { + margin-top: 10px; + text-align: center; + font-size: 12px; + color: var(--text-muted); + padding: 4px 0 8px; +} + .bx-page .bx-sheet-mask { position: fixed; inset: 0;