duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

标签float环绕布局: QR左浮+文字自然折行+clear:both防序列号乱入

Browse Source
This commit is contained in:
duxingchen
2026-08-06 11:04:03 +08:00
parent 49c8707955
commit 3176bcde6f
1 changed files with 13 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/pages/admin/CreateProductDialog.tsx
View File

@ -314,7 +314,7 @@ export default function CreateProductDialog({ open, onClose, onCreated }: Props)
body { margin: 0; padding: 0; background: #fff; display: flex; align-items: center; justify-content: center; min-height: 100vh; } body { margin: 0; padding: 0; background: #fff; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
</style> </style>
</head> </head>
<body><div style="display:flex;flex-direction:column;width:100%;max-width:360px;padding:12px;box-sizing:border-box;background:#fff;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">${printContent}</div></body> <body><div style="width:100%;max-width:360px;margin:0 auto;padding:12px;box-sizing:border-box;background:#fff;font-family:monospace,'Helvetica Neue',sans-serif;">${printContent}</div></body>
</html> </html>
`); `);
doc.close(); doc.close();
@ -343,35 +343,25 @@ export default function CreateProductDialog({ open, onClose, onCreated }: Props)
/* ---- 成功页 ---- */ /* ---- 成功页 ---- */
<div className="py-4"> <div className="py-4">
<div id="label-print-area" style={{ <div id="label-print-area" style={{
display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '360px', width: '100%', maxWidth: '360px', margin: '0 auto', padding: '12px',
margin: '0 auto', padding: '12px', boxSizing: 'border-box', background: '#fff', boxSizing: 'border-box', background: '#fff',
fontFamily: 'monospace, "Helvetica Neue", Helvetica, sans-serif', fontFamily: 'monospace, "Helvetica Neue", Helvetica, sans-serif',
border: '1px solid #e5e7eb', height: 'fit-content' border: '1px solid #e5e7eb'
}}> }}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '12px', width: '100%' }}> <div style={{ width: '100%' }}>
<div style={{ flex: '0 0 110px', width: '110px', height: '110px' }}> <div style={{ float: 'left', width: '110px', height: '110px', marginRight: '10px', marginBottom: '4px' }}>
<img src={`/api/v1/products/qrcode/${createdSn}`} alt="QR" <img src={`/api/v1/products/qrcode/${createdSn}`} alt="QR"
style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} /> style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
</div> </div>
<div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: '6px' }}> <div style={{ fontSize: '13px', fontWeight: 900, color: '#000', lineHeight: '1.4', wordBreak: 'break-all' }}>
<div style={{ fontSize: '12px', fontWeight: 900, color: '#000', lineHeight: '1.4', <div style={{ marginBottom: '4px' }}>名: {selected?.material_name ?? ""}</div>
wordBreak: 'break-all', display: '-webkit-box', WebkitLineClamp: 3, <div style={{ marginBottom: '4px' }}>规: {selected?.spec_model ?? ""}</div>
WebkitBoxOrient: 'vertical', overflow: 'hidden', maxHeight: '50px' }}> <div style={{ marginBottom: '4px' }}>单: {orderNo || "—"}</div>
名: {selected?.material_name ?? ""}
</div> </div>
<div style={{ fontSize: '12px', fontWeight: 900, color: '#000', lineHeight: '1.2', <div style={{ clear: 'both' }}></div>
wordBreak: 'break-all', overflow: 'hidden', maxHeight: '30px' }}>
规: {selected?.spec_model ?? ""}
</div> </div>
<div style={{ fontSize: '12px', fontWeight: 900, color: '#000', lineHeight: '1.2', <div style={{ width: '100%', marginTop: '8px', paddingTop: '8px', borderTop: '2px solid #000',
wordBreak: 'break-all', overflow: 'hidden', maxHeight: '30px' }}> textAlign: 'center', fontSize: '16px', fontWeight: 900, color: '#000', letterSpacing: '1px' }}>
单: {orderNo || "—"}
</div>
</div>
</div>
<div style={{ width: '100%', marginTop: '12px', paddingTop: '8px',
borderTop: '2px solid #000', textAlign: 'center', fontSize: '16px',
fontWeight: 900, color: '#000', letterSpacing: '1px' }}>
码: {createdSn} 码: {createdSn}
</div> </div>
</div> </div>