设备打印标签优化

src/views/system/jbdScan/goods/deviceTagTemplateThree.vue

@@ -37,14 +37,10 @@
                                             <div
                                                 v-for="(e,t) in midData.columns"
                                                 :key="'zi'+t"
-                                                :class="{
-                                                    'single-row': t== midData.columns.length-1||t== midData.columns.length-2||t== midData.columns.length-5||t== midData.columns.length-6,
-                                                    'double-row': !(t== midData.columns.length-1||t== midData.columns.length-2||t== midData.columns.length-5||t== midData.columns.length-6)
-                                                }"
                                                 class="lh"
                                             >
                                                 <div class="qianZhi">{{ e.label }}：</div>
-                                                <div class="qianZhi">{{ item[e.field] }}</div>
+                                                <div>{{ item[e.field] }}</div>
                                             </div>
                                         </div>
                                     </div>
@@ -293,25 +289,44 @@ export default {
 }
 
 .tagBox {
-    width: 360px; // 300  240 231
-    position: relative;
-    border: 1px solid #000000;
-    border-top: 0px;
-    display: inline-block;
-    background-color: #fff;
-    line-height: 1.5;
+  width: 360px;
+  border: 1px solid #000;
+  border-top: 0;
+  background-color: #fff;
+  line-height: 1.5;
+  margin: 0 auto
 }
-.midSty{
-    display: flex;
-    justify-items: center;
-    align-items: center;
-    flex-wrap: wrap;
+
+.midSty {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 每行两列 */
+  gap: 0px; /* 元素间距 */
 }
-.ewm {
-    margin-left: 10px;
+
+/* 特殊位置的元素占满整行 */
+.midSty > div:nth-last-child(1),
+.midSty > div:nth-last-child(2),
+.midSty > div:nth-last-child(5),
+.midSty > div:nth-last-child(6) {
+  grid-column: span 2; /* 跨两列 */
+}
+
+.lh {
+  display: flex; /* 内部使用 flex 排列标签和内容 */
 }
+
 .qianZhi {
-    white-space: nowrap;
+  white-space: nowrap;
+  // margin-right: 5px;
+}
+.single-row{
+    width: 100%;
+}
+.double-row {
+    width: 50%
+}
+.ewm {
+    margin-left: 10px;
 }
 
 .la {
@@ -338,12 +353,7 @@ export default {
 .lh:nth-last-child(-n+1) {
     border-bottom: none;
 }
-.single-row{
-    width: 100%;
-}
-.double-row {
-    width: 50%
-}
+
 .container {
     width: 360px;
     height: 50px;