style(miniprogram): add invoice thumbnail grid styles for bx.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
wuzilongandCursor committed
1 parent
4201d656b1
commit
01553ef0f7
1 file changed
+184
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user