From deece687b14bc4542562a38abe3c2d0c4e6ffe3f Mon Sep 17 00:00:00 2001
From: heshaofeng <heshaofeng@hnkhzn.com>
Date: 星期日, 30 十一月 2025 15:30:22 +0800
Subject: [PATCH] 代码提交
---
项目代码/WIDESEA_WMSClient/src/extension/outbound/extend/printView.vue | 771 +++++++++++++++++++++++++++-------------------------------
1 files changed, 357 insertions(+), 414 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/printView.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/printView.vue"
index a7156f3..8ad79b4 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/printView.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/printView.vue"
@@ -1,239 +1,246 @@
<template>
- <div>
- <vol-box v-model="showDetialBox" :lazy="true" width="500px" :padding="15" title="">
- <!-- 鎵撳嵃涓撶敤瀹瑰櫒 -->
- <div id="printContainer" style="position: absolute; left: -9999px;">
- <div class="print-page" v-for="(item, index) in printData" :key="index">
- <div class="material-card">
- <!-- <div class="header">鍗撳姏鑳界墿鏂欐爣璇嗗崱(灏忓寘)</div> -->
- <div class="dual-column preview-card-header-qrcode">
- <div class="preview-card-header">鐗╂枡鍗� {{ idx + 1 }}</div>
- <VueQrcode :value="generateQr(item)" :size="20" id="qrcode" />
+ <div>
+ <vol-box v-model="showDetialBox" :lazy="true" width="500px" :padding="15" title="">
+ <!-- 鎵撳嵃涓撶敤瀹瑰櫒 -->
+ <div id="printContainer" style="position: absolute; left: -9999px">
+ <div class="print-page" v-for="(item, index) in printData" :key="index">
+ <div class="material-card">
+ <div class="dual-column header-section">
+ <div class="header">鍗撳姏鑳界墿鏂欐爣璇嗗崱(灏忓寘)</div>
+ <VueQrcode :value="generateQr(item)" :size="60" class="qrcode" />
+ </div>
+ <div class="content">
+ <div class="row dual-column">
+ <div class="column">
+ <span class="label">鏂欏彿</span>
+ <span class="value code-value full-width">{{ item.materialCode }}</span>
+ </div>
+ <div class="column">
+ <span class="label">渚涘簲鍟嗙紪鐮�</span>
+ <span class="value full-width">{{ item.supplierCode }}</span>
+ </div>
+ </div>
+
+ <div class="row dual-column">
+ <div class="column">
+ <span class="label">鍝佸悕</span>
+ <span class="value full-width">{{ item.materialName }}</span>
+ </div>
+ <div class="column">
+ <span class="label">閲囪喘鍗曞彿</span>
+ <span class="value full-width">{{ item.purchaseOrderNo }}</span>
+ </div>
+ </div>
+
+ <div class="row dual-column">
+ <div class="column">
+ <span class="label">瑙勬牸</span>
+ <span class="value full-width">{{ item.specification }}</span>
+ </div>
+ <div class="column">
+ <span class="label">鏁伴噺/鎬绘暟</span>
+ <span class="value full-width">{{ item.quantityTotal }}</span>
+ </div>
+ </div>
+
+ <div class="row dual-column">
+ <div class="column">
+ <span class="label">鎵瑰彿</span>
+ <span class="value full-width">{{ item.batchNumber }}</span>
+ </div>
+ <div class="column">
+ <span class="label">鎵规</span>
+ <span class="value full-width">{{ item.batch }}</span>
+ </div>
+ </div>
+
+ <div class="row dual-column">
+ <div class="column">
+ <span class="label">鍘傚尯</span>
+ <span class="value full-width">{{ item.factory }}</span>
+ </div>
+ <div class="column">
+ <span class="label">鏃ユ湡</span>
+ <span class="value full-width">{{ item.date }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- <div class="content">
- <!-- 浜岀淮鐮佹斁鍦ㄥ彸涓婅 -->
- <!-- <div class="qr-section"> -->
- <!-- <VueQrcode :value="generateQr(item)" id="qrcode" /> -->
- <!-- </div> -->
- <div class="row dual-column">
- <div class="column">
- <span class="label">鏂欏彿</span>
- <span class="value code-value">{{ item.materialCode }}</span>
- </div>
- <div class="column">
- <span class="label">渚涘簲鍟嗙紪鐮�</span>
- <span class="value">{{ item.supplierCode }}</span>
- </div>
- </div>
- <div class="row dual-column">
- <div class="column">
- <span class="label">鍝佸悕</span>
- <span class="value">{{ item.materialName }}</span>
- </div>
- <div class="column">
- <span class="label">閲囪喘鍗曞彿</span>
- <span class="value">{{ item.purchaseOrderNo }}</span>
- </div>
- </div>
+ <!-- 棰勮鍖哄煙淇濇寔涓嶅彉 -->
+ <div id="previewContent" class="preview-container">
+ <div class="preview-header">鍗撳姏鑳界墿鏂欐爣璇嗗崱(灏忓寘) - 棰勮 (鍏眥{ printData.length }}涓�)</div>
+ <div class="preview-scroll">
+ <div v-for="(item, idx) in printData" :key="idx" class="preview-card">
+ <div class="dual-column preview-card-header-qrcode">
+ <div class="preview-card-header">鍗撳姏鑳界墿鏂欐爣璇嗗崱(灏忓寘)</div>
+ <VueQrcode :value="generateQr(item)" :size="40" class="qrcode-preview" />
+ </div>
+ <div class="preview-wrapper">
+ <div class="content-preview">
+ <div class="row-preview dual-column">
+ <div class="column-preview">
+ <span class="label-preview">鏂欏彿</span>
+ <span class="value-preview code-value full-width">{{ item.materialCode }}</span>
+ </div>
+ <div class="column-preview">
+ <span class="label-preview">渚涘簲鍟嗙紪鐮�</span>
+ <span class="value-preview full-width">{{ item.supplierCode }}</span>
+ </div>
+ </div>
- <div class="row dual-column">
- <div class="column">
- <span class="label">瑙勬牸</span>
- <span class="value full-width">{{ item.specification }}</span>
- </div>
- <div class="column">
- <span class="label">鏁伴噺/鎬绘暟</span>
- <span class="value">{{ item.quantityTotal }}</span>
- </div>
- </div>
+ <div class="row-preview dual-column">
+ <div class="column-preview">
+ <span class="label-preview">鍝佸悕</span>
+ <span class="value-preview full-width">{{ item.materialName }}</span>
+ </div>
+ <div class="column-preview">
+ <span class="label-preview">閲囪喘鍗曞彿</span>
+ <span class="value-preview full-width">{{ item.purchaseOrderNo }}</span>
+ </div>
+ </div>
- <div class="row dual-column">
- <div class="column">
- <span class="label">鎵瑰彿</span>
- <span class="value">{{ item.batchNumber }}</span>
- </div>
- <div class="column">
- <span class="label">鎵规</span>
- <span class="value">{{ item.batch }}</span>
- </div>
- </div>
+ <div class="row-preview dual-column">
+ <div class="column-preview">
+ <span class="label-preview">瑙勬牸</span>
+ <span class="value-preview full-width">{{ item.specification }}</span>
+ </div>
+ <div class="column-preview">
+ <span class="label-preview">鏁伴噺/鎬绘暟</span>
+ <span class="value-preview full-width">{{ item.quantityTotal }}</span>
+ </div>
+ </div>
- <div class="row dual-column">
- <div class="column">
- <span class="label">鍘傚尯</span>
- <span class="value">{{ item.factory }}</span>
+ <div class="row-preview dual-column">
+ <div class="column-preview">
+ <span class="label-preview">鎵瑰彿</span>
+ <span class="value-preview full-width">{{ item.batchNumber }}</span>
+ </div>
+ <div class="column-preview">
+ <span class="label-preview">鎵规</span>
+ <span class="value-preview full-width">{{ item.batch }}</span>
+ </div>
+ </div>
+
+ <div class="row-preview dual-column">
+ <div class="column-preview">
+ <span class="label-preview">鍘傚尯</span>
+ <span class="value-preview full-width">{{ item.factory }}</span>
+ </div>
+ <div class="column-preview">
+ <span class="label-preview">鏃ユ湡</span>
+ <span class="value-preview full-width">{{ item.date }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- <div class="column">
- <span class="label">鏃ユ湡</span>
- <span class="value">{{ item.date }}</span>
- </div>
- </div>
</div>
- </div>
- </div>
- </div>
- <!-- 棰勮鍖哄煙 -->
- <div id="previewContent" class="preview-container">
- <div class="preview-header">鍗撳姏鑳界墿鏂欐爣璇嗗崱(灏忓寘) - 棰勮 (鍏眥{ printData.length }}涓�)</div>
- <div class="preview-scroll">
- <div v-for="(item, idx) in printData" :key="idx" class="preview-card">
- <div class="dual-column preview-card-header-qrcode">
- <div class="preview-card-header">鐗╂枡鍗� {{ idx + 1 }}</div>
- <VueQrcode :value="generateQr(item)" :size="20" id="qrcode" />
- </div>
- <div class="preview-wrapper">
- <div class="content-preview">
- <div class="row-preview dual-column">
- <div class="column-preview">
- <span class="label-preview">鏂欏彿</span>
- <span class="value-preview code-value">{{ item.materialCode }}</span>
- </div>
- <div class="column-preview">
- <span class="label-preview">渚涘簲鍟嗙紪鐮�</span>
- <span class="value-preview">{{ item.supplierCode }}</span>
- </div>
+ <template #footer>
+ <div class="footer-actions">
+ <span class="print-count">鍏� {{ printData.length }} 涓墿鏂欏崱寰呮墦鍗�</span>
+ <div>
+ <el-button type="primary" size="small" @click="print">鎵撳嵃鍏ㄩ儴</el-button>
+ <el-button type="danger" size="small" @click="showDetialBox = false">鍏抽棴</el-button>
+ </div>
</div>
-
- <div class="row-preview dual-column">
- <div class="column-preview">
- <span class="label-preview">鍝佸悕</span>
- <span class="value-preview">{{ item.materialName }}</span>
- </div>
- <div class="column-preview">
- <span class="label-preview">閲囪喘鍗曞彿</span>
- <span class="value-preview">{{ item.purchaseOrderNo }}</span>
- </div>
- </div>
-
- <div class="row-preview dual-column">
- <div class="column-preview">
- <span class="label-preview">瑙勬牸</span>
- <span class="value-preview full-width">{{ item.specification }}</span>
- </div>
- <div class="column-preview">
- <span class="label-preview">鏁伴噺/鎬绘暟</span>
- <span class="value-preview">{{ item.quantityTotal }}</span>
- </div>
- </div>
-
- <div class="row-preview dual-column">
- <div class="column-preview">
- <span class="label-preview">鎵瑰彿</span>
- <span class="value-preview">{{ item.batchNumber }}</span>
- </div>
- <div class="column-preview">
- <span class="label-preview">鎵规</span>
- <span class="value-preview">{{ item.batch }}</span>
- </div>
- </div>
-
- <div class="row-preview dual-column">
- <div class="column-preview">
- <span class="label-preview">鍘傚尯</span>
- <span class="value-preview">{{ item.factory }}</span>
- </div>
- <div class="column-preview">
- <span class="label-preview">鏃ユ湡</span>
- <span class="value-preview">{{ item.date }}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <template #footer>
- <div class="footer-actions">
- <span class="print-count">鍏� {{ printData.length }} 涓墿鏂欏崱寰呮墦鍗�</span>
- <div>
- <el-button type="primary" size="small" @click="print">鎵撳嵃鍏ㄩ儴</el-button>
- <el-button type="danger" size="small" @click="showDetialBox = false">鍏抽棴</el-button>
- </div>
- </div>
- </template>
- </vol-box>
- </div>
+ </template>
+ </vol-box>
+ </div>
</template>
<script>
-import VolBox from "@/components/basic/VolBox.vue";
-import VueQrcode from "vue-qrcode";
+import VolBox from '@/components/basic/VolBox.vue'
+import VueQrcode from 'vue-qrcode'
export default {
- components: { VolBox, VueQrcode },
- data() {
- return {
- showDetialBox: false,
- printData: [], // 瀛樺偍鎵撳嵃鏁版嵁闆嗗悎
- };
- },
- methods: {
- generateQr(item) {
- return `${item.batchNumber}`;
+ components: { VolBox, VueQrcode },
+ data() {
+ return {
+ showDetialBox: false,
+ printData: []
+ }
},
+ methods: {
+ generateQr(item) {
+ return `${item.batchNumber}`
+ },
- open(rows) {
- this.showDetialBox = true;
- this.printData = Array.isArray(rows) ? rows : [rows];
- console.log('鎵撳嵃鏁版嵁:', this.printData);
- },
+ open(rows) {
+ this.showDetialBox = true
+ this.printData = Array.isArray(rows) ? rows : [rows]
+ console.log('鎵撳嵃鏁版嵁:', this.printData);
+ },
- async print() {
- if (this.printData.length === 0) {
- this.$message.warning('娌℃湁鍙墦鍗扮殑鏁版嵁');
- return;
- }
+ async print() {
+ if (this.printData.length === 0) {
+ this.$message.warning('娌℃湁鍙墦鍗扮殑鏁版嵁')
+ return
+ }
- this.$nextTick(() => {
- try {
- const printContent = document.getElementById("printContainer").innerHTML;
- const printWindow = window.open("", "_blank", "width=800,height=600,scrollbars=yes");
+ this.$nextTick(() => {
+ try {
+ const printContent = document.getElementById('printContainer').innerHTML
+ const printWindow = window.open('', '_blank', 'width=800,height=600,scrollbars=yes')
- if (!printWindow) {
- this.$message.error('鏃犳硶鎵撳紑鎵撳嵃绐楀彛锛岃妫�鏌ユ祻瑙堝櫒寮圭獥璁剧疆');
- return;
- }
+ if (!printWindow) {
+ this.$message.error('鏃犳硶鎵撳紑鎵撳嵃绐楀彛锛岃妫�鏌ユ祻瑙堝櫒寮圭獥璁剧疆')
+ return
+ }
- printWindow.document.write(`
+ printWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鐗╂枡鏍囪瘑鍗℃墦鍗� - 鍏�${this.printData.length}涓�</title>
<style>
- /* 閲嶇疆鎵�鏈夋牱寮� */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
- }
-
- body {
- font-family: SimSun, "瀹嬩綋", sans-serif;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
- #qrcode {
- width: 60px;
- height: 60px;
- display: block;
- margin: 0, 15px
+
+ body {
+ font-family: "Microsoft YaHei", "SimHei", Arial, sans-serif;
+ background: white !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ width: 80mm !important;
}
+
+ .qrcode {
+ width: 15mm !important;
+ height: 15mm !important;
+ display: block;
+ }
+
+ .qrcode canvas {
+ width: 15mm !important;
+ height: 15mm !important;
+ image-rendering: -webkit-optimize-contrast;
+ image-rendering: crisp-edges;
+ }
+
@media print {
@page {
- size: 80mm 60mm;
- margin: 0;
- padding: 0;
+ size: 80mm 60mm !important;
+ margin: 0 !important;
+ padding: 0 !important;
}
body {
+ width: 80mm !important;
+ height: 60mm !important;
margin: 0 !important;
padding: 0 !important;
- width: 80mm !important;
background: white !important;
}
@@ -241,44 +248,52 @@
width: 80mm !important;
height: 60mm !important;
page-break-after: always !important;
- break-after: page !important;
margin: 0 !important;
- padding: 2mm !important;
- display: block !important;
- }
-
- .print-page:last-child {
- page-break-after: auto !important;
- }
-
- .material-card {
- width: 80mm !important;
- height: 56mm !important;
- border: 0.3mm solid #000 !important;
padding: 1mm !important;
- box-sizing: border-box !important;
- position: relative !important;
+ display: block !important;
background: white !important;
}
+ .print-page:last-child {
+ page-break-after: avoid !important;
+ }
+
+ .material-card {
+ width: 78mm !important;
+ height: 58mm !important;
+ border: 0.5mm solid #000 !important;
+ padding: 1.5mm !important;
+ box-sizing: border-box !important;
+ position: relative !important;
+ background: white !important;
+ font-family: "Microsoft YaHei", "SimHei", Arial, sans-serif !important;
+ }
+
+ .header-section {
+ display: flex !important;
+ justify-content: space-between !important;
+ align-items: center !important;
+ margin-bottom: 1.5mm !important;
+ padding-bottom: 1mm !important;
+ border-bottom: 0.3mm solid #000 !important;
+ }
+
.header {
- font-size: 3.5mm !important;
+ font-size: 4mm !important;
font-weight: bold !important;
- text-align: center !important;
- margin-bottom: 1mm !important;
- padding-bottom: 0.5mm !important;
- border-bottom: 0.2mm solid #000 !important;
+ white-space: nowrap !important;
}
.content {
- height: calc(100% - 6mm) !important;
+ height: calc(100% - 10mm) !important;
position: relative !important;
}
.row {
display: flex !important;
- margin-bottom: 0.8mm !important;
- min-height: 6mm !important;
+ margin-bottom: 1.2mm !important;
+ min-height: 6.5mm !important;
+ align-items: stretch !important;
}
.dual-column {
@@ -290,101 +305,44 @@
flex: 1 !important;
display: flex !important;
align-items: center !important;
+ min-height: 5mm !important;
}
.column:first-child {
- margin-right: 2mm !important;
+ margin-right: 2.5mm !important;
}
.label {
- font-weight: bold !important;
- flex: 0 0 15mm !important;
+ flex: 0 0 8mm !important;
white-space: nowrap !important;
- font-size: 2.2mm !important;
+ font-size: 2.5mm !important;
+ line-height: 1.3 !important;
}
.value {
flex: 1 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
- white-space: nowrap !important;
- border-bottom: 0.1mm dashed #666 !important;
- padding-bottom: 0.2mm !important;
- min-height: 2.5mm !important;
- font-size: 2.2mm !important;
+ white-space: normal !important;
+ word-break: break-all !important;
+ word-wrap: break-word !important;
+ min-height: 4mm !important;
+ font-size: 2.5mm !important;
+ line-height: 1.3 !important;
+ border-bottom: none !important;
+ padding: 0.5mm !important;
+ }
+
+ .full-width {
+ display: block !important;
+ white-space: normal !important;
+ word-break: break-all !important;
+ word-wrap: break-word !important;
+ line-height: 1.3 !important;
}
.code-value {
font-weight: bold !important;
- }
-
- .full-width {
- white-space: normal !important;
- word-break: break-all !important;
- line-height: 1.2 !important;
- }
-
- /* 浜岀淮鐮佹牱寮� */
- .qr-section {
- width: 10mm !important;
- height: 12mm !important;
- font-siz:10px;
- }
-
- .qr-section canvas {
- width: 10mm !important;
- height: 10mm !important;
- max-width: 100% !important;
- max-height: 100% !important;
- }
- }
-
- /* 灞忓箷棰勮鏍峰紡 */
- @media screen {
- body {
- background: #f5f5f5;
- padding: 10px;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- .print-page {
- width: 80mm;
- height: 60mm;
- margin: 10px 0;
- padding: 2mm;
- background: white;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
- border: 1px dashed #ccc;
- }
-
- .material-card {
- width: 80mm;
- height: 60mm;
- border: 0.3mm solid #000;
- padding: 1.5mm;
- background: white;
- position: relative;
- }
-
- .qr-section {
- position: absolute;
- top: 4mm;
- right: 2mm;
- width: 12mm;
- height: 12mm;
- border: 0.2mm solid #ccc;
- padding: 0.5mm;
- background: white;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .qr-section canvas {
- width: 10mm !important;
- height: 10mm !important;
}
}
</style>
@@ -393,196 +351,181 @@
${printContent}
<script>
window.onload = function() {
- console.log('鎵撳嵃椤甸潰鍔犺浇瀹屾垚锛屽叡${this.printData.length}涓墿鏂欏崱');
- // 绛夊緟浜岀淮鐮佹覆鏌撳畬鎴�
setTimeout(() => {
- // 寮哄埗璁剧疆浜岀淮鐮乧anvas灏哄
const canvases = document.querySelectorAll('canvas');
canvases.forEach(canvas => {
- canvas.style.width = '10mm !important';
- canvas.style.height = '10mm !important';
+ canvas.setAttribute('width', '60');
+ canvas.setAttribute('height', '60');
+ canvas.style.width = '15mm';
+ canvas.style.height = '15mm';
});
window.print();
+ setTimeout(() => { window.close(); }, 500);
}, 800);
- };
-
- window.onafterprint = function() {
- setTimeout(() => {
- window.close();
- }, 500);
};
<\/script>
</body>
</html>
- `);
+ `)
- printWindow.document.close();
-
- } catch (error) {
- console.error('鎵撳嵃閿欒:', error);
- this.$message.error('鎵撳嵃澶辫触: ' + error.message);
+ printWindow.document.close()
+ } catch (error) {
+ console.error('鎵撳嵃閿欒:', error)
+ this.$message.error('鎵撳嵃澶辫触: ' + error.message)
+ }
+ })
}
- });
}
- }
-};
+}
</script>
<style scoped>
-#qrcode {
- width: 60px;
- height: 60px;
- display: block;
- margin: 0, 15px
+.qrcode {
+ width: 60px;
+ height: 60px;
+ display: block;
+}
+
+.qrcode-preview {
+ width: 40px;
+ height: 40px;
+ display: block;
}
.preview-container {
- max-height: 500px;
- overflow: hidden;
- display: flex;
- flex-direction: column;
+ max-height: 500px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
}
.preview-header {
- text-align: center;
- font-size: 16px;
- font-weight: bold;
- margin-bottom: 10px;
- padding: 8px;
- background: #f0f0f0;
- border-radius: 4px;
+ text-align: center;
+ font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 10px;
+ padding: 8px;
+ background: #f0f0f0;
+ border-radius: 4px;
}
.preview-scroll {
- max-height: 400px;
- overflow-y: auto;
- padding: 10px;
- border: 1px solid #e0e0e0;
- border-radius: 4px;
- background: #f9f9f9;
+ max-height: 400px;
+ overflow-y: auto;
+ padding: 10px;
+ border: 1px solid #e0e0e0;
+ border-radius: 4px;
+ background: #f9f9f9;
}
.preview-card {
- width: 320px;
- height: 240px;
- margin: 0 auto 15px auto;
- padding: 8px;
- border: 1px solid #ccc;
- font-family: SimSun;
- box-sizing: border-box;
- border: 2px solid #000;
- background: white;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
- position: relative;
+ width: 320px;
+ height: 240px;
+ margin: 0 auto 15px auto;
+ padding: 8px;
+ border: 2px solid #000;
+ font-family: 'Microsoft YaHei', sans-serif;
+ box-sizing: border-box;
+ background: white;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ position: relative;
}
.preview-card:last-child {
- margin-bottom: 0;
+ margin-bottom: 0;
}
.preview-card-header {
- text-align: center;
- font-size: 14px;
- /* font-weight: bold;
- margin-bottom: 8px;
- padding-bottom: 4px;
- border-bottom: 1px solid #000;
- background: #f5f5f5;
- padding: 4px; */
- height: 60px;
- width: 60px;
+ font-size: 14px;
+ font-weight: bold;
+ white-space: nowrap;
}
.preview-wrapper {
- position: relative;
- height: calc(100% - 40px);
+ position: relative;
+ height: calc(100% - 30px);
}
.content-preview {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
.row-preview {
- /* margin-bottom: px; */
- min-height: 32px;
+ margin-bottom: 6px;
+ min-height: 24px;
+ display: flex;
+ align-items: center;
}
.dual-column {
- display: flex;
- justify-content: space-between;
+ display: flex;
+ justify-content: space-between;
}
.column-preview {
- flex: 1;
- display: flex;
- align-items: center;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ min-height: 22px;
}
.column-preview:first-child {
- margin-right: 10px;
+ margin-right: 8px;
}
.label-preview {
- font-weight: bold;
- flex: 0 0 60px;
- white-space: nowrap;
- font-size: 12px;
+ font-weight: bold;
+ flex: 0 0 30px;
+ white-space: nowrap;
+ font-size: 12px;
+ line-height: 1.2;
}
.value-preview {
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 12px;
- border-bottom: 1px dashed #666;
- padding-bottom: 2px;
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 10px;
+ padding-bottom: 2px;
+ line-height: 1.2;
+ font-weight: normal;
}
.code-value {
- font-weight: bold;
+ font-weight: bold;
}
.full-width {
- display: block;
- margin-top: 2px;
- white-space: normal;
- word-break: break-all;
- line-height: 1.2;
- font-size: 12px;
+ display: block;
+ white-space: normal;
+ word-break: break-all !important;
+ line-height: 1.2;
+ font-size: 11px;
+ min-height: auto;
+ word-wrap: break-word !important;
}
-/* 棰勮鍖哄煙浜岀淮鐮佹牱寮� */
-.qr-section-preview {
- position: absolute;
- top: 10px;
- right: 10px;
- width: 150px;
- height: 175px;
- display: flex;
- align-items: center;
- justify-content: center;
- border: 1px solid #ddd;
- background: white;
- padding: 2px;
-}
-
-.qr-section-preview canvas {
- width: 56px !important;
- height: 56px !important;
+.preview-card-header-qrcode {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 8px;
+ border-bottom: 2px solid #000;
+ padding-bottom: 4px;
}
.footer-actions {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
}
.print-count {
- font-size: 14px;
- color: #409EFF;
- font-weight: bold;
+ font-size: 14px;
+ color: #409eff;
+ font-weight: bold;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3