dachui/order_site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(worker-consignment): 优化寄卖卡片截图展示为紧凑单行并排布局

Browse Source 
1. 将提报商品截图与赠送凭证截图重构为同一行紧凑胶囊栏，减少上下两行占用空间；
2. 分别保留商品截图与赠送凭证的张数、缩略图与大图预览画廊，视觉更精致。
This commit is contained in:
yml2213
2026-09-18 18:38:43 +08:00
parent c38f6dfbfd
commit 771deb221e
1 changed files with 48 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/pages/worker/WorkerConsignmentPage.tsx
+48 -46
View File
@@ -1103,52 +1103,54 @@ function ConsignmentRecordCard({
) : null}
</Space>
) : null}
{shots.length > 0 ? (
<div className="worker-consignment-record-shots" style={{ marginTop: 8 }}>
<Typography.Text type="secondary" style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }}>
<PictureOutlined />
提报商品截图（共 {shots.length} 张）：
</Typography.Text>
<Image.PreviewGroup>
<Space size={8} wrap>
{shots.map((src, i) => (
<Image
key={`submission-shot-${src}-${i}`}
src={src}
width={48}
height={48}
style={{ objectFit: 'cover', borderRadius: 6, border: '1px solid #e2e8f0' }}
/>
))}
</Space>
</Image.PreviewGroup>
</div>
) : null}
{giftShots.length > 0 ? (
<div className="worker-consignment-gift-shots-wrap" style={{ marginTop: 8, padding: '8px 12px', background: '#f0fdf4', borderRadius: 6, border: '1px solid #bbf7d0' }}>
<Typography.Text strong style={{ fontSize: 13, color: '#15803d', display: 'flex', alignItems: 'center', gap: 6 }}>
<CheckCircleOutlined />
已提交赠送凭证（共 {giftShots.length} 张截图，等待客服验收）：
</Typography.Text>
<div style={{ marginTop: 6 }}>
<Image.PreviewGroup>
<Space size={8} wrap>
{giftShots.map((src, i) => (
<Image
key={`gift-shot-${i}`}
src={src}
width={52}
height={52}
style={{ objectFit: 'cover', borderRadius: 6, border: '1px solid #86efac' }}
/>
))}
</Space>
</Image.PreviewGroup>
</div>
{record.giftEvidenceNote ? (
<Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 4 }}>
赠送备注：{record.giftEvidenceNote}
</Typography.Text>
{shots.length > 0 || giftShots.length > 0 ? (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 8, alignItems: 'center' }}>
{shots.length > 0 ? (
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#f8fafc', padding: '4px 10px', borderRadius: 6, border: '1px solid #e2e8f0' }}>
<Typography.Text type="secondary" style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap' }}>
<PictureOutlined />
商品截图({shots.length})
</Typography.Text>
<Image.PreviewGroup>
<Space size={6}>
{shots.map((src, i) => (
<Image
key={`submission-shot-${src}-${i}`}
src={src}
width={38}
height={38}
style={{ objectFit: 'cover', borderRadius: 4, border: '1px solid #e2e8f0' }}
/>
))}
</Space>
</Image.PreviewGroup>
</div>
) : null}
{giftShots.length > 0 ? (
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#f0fdf4', padding: '4px 10px', borderRadius: 6, border: '1px solid #bbf7d0' }}>
<Typography.Text strong style={{ fontSize: 12, color: '#15803d', display: 'flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap' }}>
<CheckCircleOutlined />
赠送凭证({giftShots.length})
</Typography.Text>
<Image.PreviewGroup>
<Space size={6}>
{giftShots.map((src, i) => (
<Image
key={`gift-shot-${i}`}
src={src}
width={38}
height={38}
style={{ objectFit: 'cover', borderRadius: 4, border: '1px solid #86efac' }}
/>
))}
</Space>
</Image.PreviewGroup>
{record.giftEvidenceNote ? (
<Typography.Text type="secondary" style={{ fontSize: 11, color: '#4b5563', maxWidth: 160 }} ellipsis={{ tooltip: record.giftEvidenceNote }}>
{record.giftEvidenceNote}
</Typography.Text>
) : null}
</div>
) : null}
</div>
) : null}