lhq/FT517-WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(bas): 调整产品标签打印样式

Browse Source 
- 简化打印预览布局结构
- 减小二维码尺寸从200到100
- 调整预览行间距和字体大小
- 移除响应式媒体查询
- 更新打印页面尺寸为auto
- 调整打印区域右侧边距
This commit is contained in:
liuhanqing
2025-12-11 15:42:45 +08:00
parent e7c5d7032e
commit e8bf190856
1 changed files with 59 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
ruoyi-ui/src/views/bas/BasProductCode/index.vue
View File

@@ -117,59 +117,56 @@
<!-- 打印专用区域（隐藏） --> <!-- 打印专用区域（隐藏） -->
<vue-easy-print style="display: none;" ref="easyPrint2"> <vue-easy-print style="display: none;" ref="easyPrint2">
<div style="page-break-after:always"> <div style="page-break-after:always">
<div class="label-content"> <div class="preview-row">
<div class="preview-box"> <span class="preview-label">MODEL:</span>
<div class="preview-content"> <span class="preview-value">{{ previewData.model }}</span>
<div class="preview-row"> </div>
<span class="preview-label">MODEL:</span> <div class="preview-row">
<span class="preview-value">{{ previewData.model }}</span> <span class="preview-label">SERIAL:</span>
</div> <span class="preview-value">{{ previewData.serial }}</span>
<div class="preview-row"> </div>
<span class="preview-label">SERIAL:</span> <div class="preview-row">
<span class="preview-value">{{ previewData.serial }}</span> <span class="preview-label">COLOR:</span>
</div> <span class="preview-value">{{ previewData.color }}</span>
<div class="preview-row"> </div>
<span class="preview-label">COLOR:</span> <div class="preview-row">
<span class="preview-value">{{ previewData.color }}</span> <div class="preview-col">
</div> <span class="preview-label">V:</span>
<div class="preview-row"> <span class="preview-value">{{ previewData.v }}</span>
<div class="preview-col"> </div>
<span class="preview-label">V:</span> <div class="preview-col">
<span class="preview-value">{{ previewData.v }}</span> <span class="preview-label">Hz:</span>
</div> <span class="preview-value">{{ previewData.hz }}</span>
<div class="preview-col"> </div>
<span class="preview-label">Hz:</span> <div class="preview-col">
<span class="preview-value">{{ previewData.hz }}</span> <span class="preview-label">PH:</span>
</div> <span class="preview-value">{{ previewData.ph }}</span>
<div class="preview-col">
<span class="preview-label">PH:</span>
<span class="preview-value">{{ previewData.ph }}</span>
</div>
</div>
<div class="preview-row">
<div class="preview-col">
<span class="preview-label">N.W.:</span>
<span class="preview-value">{{ previewData.nW }}</span>
</div>
<div class="preview-col">
<span class="preview-label">G.W.:</span>
<span class="preview-value">{{ previewData.gW }}</span>
</div>
</div>
</div>
<!-- 二维码区域 -->
<div class="qrcode-container">
<vue-qr
:text="qrCodeValue"
:size="200"
:margin="0"
:correctLevel="2"
error-correction-level="M"
/>
<div class="qrcode-label">{{ previewData.spare4 }}</div>
</div>
</div> </div>
</div> </div>
<div class="preview-row">
<div class="preview-col">
<span class="preview-label">N.W.:</span>
<span class="preview-value">{{ previewData.nW }}</span>
</div>
<div class="preview-col">
<span class="preview-label">G.W.:</span>
<span class="preview-value">{{ previewData.gW }}</span>
</div>
</div>
<div class="qrcode-container">
<vue-qr
:text="qrCodeValue"
:size="100"
:margin="0"
:correctLevel="2"
error-correction-level="M"
/>
<div class="qrcode-label">{{ previewData.spare4 }}</div>
</div>
<!-- <div class="label-content">
</div>-->
</div> </div>
</vue-easy-print> </vue-easy-print>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@@ -348,7 +345,7 @@
import VueQr from 'vue-qr' import VueQr from 'vue-qr'
import VueEasyPrint from 'vue-easy-print' import VueEasyPrint from 'vue-easy-print'
import {addBasProductCode, delBasProductCode, listBasProductCode, updateBasProductCode} from "@/api/bas/BasProductCode" import {addBasProductCode, delBasProductCode, listBasProductCode, updateBasProductCode} from "@/api/bas/BasProductCode"
import { listBasProduct } from "@/api/bas/BasProduct" import {listBasProduct} from "@/api/bas/BasProduct"
// 常量配置 // 常量配置
const FORM_FIELDS = [ const FORM_FIELDS = [
@@ -842,17 +839,8 @@ export default {
.preview-box {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0;
}
.preview-content {
flex: 1;
margin-right: 20px;
}
@@ -953,8 +941,9 @@ export default {
.preview-row { .preview-row {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 40px; margin-bottom: 30px;
min-height: 15px; min-height: 0;
padding-left: 15px;
} }
@@ -967,14 +956,14 @@ export default {
.preview-label { .preview-label {
font-weight: 240; font-weight: 240;
margin-right: 15px; margin-right: 15px;
min-width: 4px; min-width: 10px;
font-size: 30px; font-size: 10px;
color: #000000; color: #000000;
} }
.preview-value { .preview-value {
flex: 1; flex: 1;
font-size: 30px; font-size: 10px;
color: #000000; color: #000000;
word-break: break-all; word-break: break-all;
} }
@@ -982,40 +971,12 @@ export default {
.qrcode-label { .qrcode-label {
margin-top: 1px; margin-top: 1px;
font-size: 20px; font-size: 10px;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
text-align: center; text-align: center;
} }
/* 响应式设计 */
@media (max-width: 1200px) {
.app-container {
padding: 10px;
}
}
@media (max-width: 768px) {
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.header-actions {
width: 100%;
justify-content: flex-end;
}
.qrcode-container {
position: static;
margin-bottom: 0;
text-align: center;
right: 30px;
}
}
/* 动画效果 */ /* 动画效果 */
.preview-display { .preview-display {
animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out;
@@ -1040,7 +1001,7 @@ export default {
/* 打印样式 */ /* 打印样式 */
@media print { @media print {
@page { @page {
size: 80mm 50mm size: auto
} }
body { body {
@@ -1057,7 +1018,7 @@ export default {
border: none; border: none;
position: absolute !important; position: absolute !important;
top: 10px !important; top: 10px !important;
right: 50px !important; right: 30px !important;
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
} }