From e7c5d7032e7acdc40e3c67e025470cf34245b550 Mon Sep 17 00:00:00 2001
From: liuhanqing <liuhanqing1@bonc.com.cn>
Date: Thu, 11 Dec 2025 15:06:48 +0800
Subject: [PATCH] =?UTF-8?q?style(bas):=20=E8=B0=83=E6=95=B4=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E4=BB=A3=E7=A0=81=E6=A0=87=E7=AD=BE=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改标签预览弹窗宽度从900px为600px
- 更新二维码尺寸从180为200
- 移除预览容器内边距和边框样式
- 简化预览内容布局和字体样式
- 调整打印样式页面尺寸为80mm*50mm
- 优化移动端预览展示效果
- 统一预览区域文本对齐方式为左对齐
- 修正二维码容器定位和边距设置
---
 .../src/views/bas/BasProductCode/index.vue    | 115 ++++--------------
 1 file changed, 26 insertions(+), 89 deletions(-)

diff --git a/ruoyi-ui/src/views/bas/BasProductCode/index.vue b/ruoyi-ui/src/views/bas/BasProductCode/index.vue
index 08ac641..d899db1 100644
--- a/ruoyi-ui/src/views/bas/BasProductCode/index.vue
+++ b/ruoyi-ui/src/views/bas/BasProductCode/index.vue
@@ -54,7 +54,7 @@
          <el-dialog
            title="标签预览"
            :visible.sync="showPreview"
-           width="900px"
+           width="800px"
            :close-on-click-modal="false"
            append-to-body
          >
@@ -116,7 +116,7 @@
 
           <!-- 打印专用区域（隐藏） -->
           <vue-easy-print style="display: none;" ref="easyPrint2">
-            <div class="vue-easy-print" style="page-break-after:always">
+            <div style="page-break-after:always">
               <div class="label-content">
                 <div class="preview-box">
                   <div class="preview-content">
@@ -161,7 +161,7 @@
                   <div class="qrcode-container">
                     <vue-qr
                       :text="qrCodeValue"
-                      :size="180"
+                      :size="200"
                       :margin="0"
                       :correctLevel="2"
                       error-correction-level="M"
@@ -837,20 +837,16 @@ export default {
 }
 
 .form-container {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
-.preview-container {
-  padding: 20px;
-}
+
 
 .preview-box {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  padding: 20px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
+  padding: 0;
 }
 
 .preview-content {
@@ -858,30 +854,14 @@ export default {
   margin-right: 20px;
 }
 
-.preview-row {
-  margin-bottom: 15px;
-}
 
-.preview-label {
-  font-weight: bold;
-  margin-right: 10px;
-}
 
-.qrcode-container {
-  width: 180px;
-  height: 180px;
-}
 
 .list-container .el-table {
   height: 100%;
 }
 
-.preview-container {
-  position: sticky;
-  top: 20px;
-  height: 450px;
-  overflow: hidden;
-}
+
 
 .preview-display {
   height: 100%;
@@ -940,42 +920,23 @@ export default {
   color: #f78989 !important;
 }
 
-/* 预览区域样式 */
-.preview-container {
-  padding: 0;
-}
-
-.empty-preview {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 300px;
-  margin: 0 20px 20px;
-  border: 2px dashed #dcdfe6;
-  border-radius: 8px;
-  color: #909399;
-  font-size: 14px;
-}
 
 .empty-preview i {
   font-size: 48px;
   margin-bottom: 16px;
-  color: #c0c4cc;
+  color: #000000;
 }
 
 .empty-preview p {
   margin: 0;
 }
 
-.preview-display {
-  padding: 0 20px 20px;
-}
 
 .label-content {
   border: 1px solid #e4e7ed;
-  border-radius: 8px;
+  border-radius: 0px;
   overflow: hidden;
+  text-align: left;
 }
 
 .preview-box {
@@ -988,20 +949,14 @@ export default {
   box-sizing: border-box;
 }
 
-.preview-content {
-  margin-right: 200px;
-}
 
 .preview-row {
   display: flex;
   align-items: center;
-  margin-bottom: 25px;
-  min-height: 40px;
+  margin-bottom: 40px;
+  min-height: 15px;
 }
 
-.preview-row:last-child {
-  margin-bottom: 0;
-}
 
 .preview-col {
   flex: 1;
@@ -1010,35 +965,26 @@ export default {
 }
 
 .preview-label {
-  font-weight: 600;
+  font-weight: 240;
   margin-right: 15px;
-  min-width: 80px;
-  font-size: 24px;
-  color: #303133;
+  min-width: 4px;
+  font-size: 30px;
+  color: #000000;
 }
 
 .preview-value {
   flex: 1;
-  font-size: 24px;
-  color: #606266;
+  font-size: 30px;
+  color: #000000;
   word-break: break-all;
 }
 
-.qrcode-container {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  padding: 0;
-  background-color: transparent;
-  border: none;
-  text-align: center;
-}
 
 .qrcode-label {
-  margin-top: 8px;
-  font-size: 14px;
+  margin-top: 1px;
+  font-size: 20px;
   font-weight: 600;
-  color: #303133;
+  color: #000000;
   text-align: center;
 }
 
@@ -1047,11 +993,6 @@ export default {
   .app-container {
     padding: 10px;
   }
-
-  .preview-container {
-    position: static;
-    max-height: none;
-  }
 }
 
 @media (max-width: 768px) {
@@ -1066,15 +1007,12 @@ export default {
     justify-content: flex-end;
   }
 
-  .preview-content {
-    margin-right: 0;
-    margin-bottom: 140px;
-  }
 
   .qrcode-container {
     position: static;
-    margin-top: 20px;
+    margin-bottom: 0;
     text-align: center;
+    right: 30px;
   }
 }
 
@@ -1102,8 +1040,7 @@ export default {
 /* 打印样式 */
 @media print {
   @page {
-    margin: 0;
-    size: auto;
+    size: 80mm 50mm
   }
 
   body {
@@ -1119,8 +1056,8 @@ export default {
   .qrcode-container {
     border: none;
     position: absolute !important;
-    top: 20px !important;
-    right: 20px !important;
+    top: 10px !important;
+    right: 50px !important;
     padding: 0;
     background-color: transparent;
   }