style(bas): 调整产品代码标签预览样式
- 修改标签预览弹窗宽度从900px为600px - 更新二维码尺寸从180为200 - 移除预览容器内边距和边框样式 - 简化预览内容布局和字体样式 - 调整打印样式页面尺寸为80mm*50mm - 优化移动端预览展示效果 - 统一预览区域文本对齐方式为左对齐 - 修正二维码容器定位和边距设置
This commit is contained in:
liuhanqing
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user