|
|
@@ -100,11 +100,541 @@
|
|
|
<div class="basic-details-title">
|
|
|
<span class="border-span">条码样例</span>
|
|
|
</div>
|
|
|
- <div class="vue-qr">
|
|
|
- <vue-qr
|
|
|
- :text="config.value ? config.value : ''"
|
|
|
- class="vueQrSize"
|
|
|
- ></vue-qr>
|
|
|
+ <div class="barIcon">
|
|
|
+ <!-- 条码编排设置 -->
|
|
|
+ <div class="mapShow">
|
|
|
+ <div class="type">
|
|
|
+ <div
|
|
|
+ ><span>条码摆放类型：</span
|
|
|
+ >{{ form.putType == 1 ? '横向摆放' : '纵向摆放' }}<span></span
|
|
|
+ ></div>
|
|
|
+ <div>
|
|
|
+ <span>条码尺寸：</span>
|
|
|
+ <span>{{ form.sizeWide }}</span>
|
|
|
+ <span> cm</span>
|
|
|
+ <span class="mult">*</span>
|
|
|
+ <span>{{ form.sizeLong }}</span>
|
|
|
+ <span> cm</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 动态图示模板 -->
|
|
|
+ <div class="activeMode" v-if="horizontalBool">
|
|
|
+ <div
|
|
|
+ ref="print-content"
|
|
|
+ :class="horizontalBool == true ? 'crosswise' : 'lengthways'"
|
|
|
+ :style="
|
|
|
+ 'width:' +
|
|
|
+ horWidth +
|
|
|
+ 'cm;' +
|
|
|
+ 'height:' +
|
|
|
+ horHeight +
|
|
|
+ 'cm;' +
|
|
|
+ 'border: 2px black solid;'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="active-top" v-show="horizontalBool == true">
|
|
|
+ <div class="span-con">
|
|
|
+ <div class="con-top">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode1 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode1
|
|
|
+ "
|
|
|
+ >{{ form.code1 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode2 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode2
|
|
|
+ "
|
|
|
+ >{{ form.code2 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode3 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode3
|
|
|
+ "
|
|
|
+ >{{ form.code3 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="con-bottom">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode4 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode4
|
|
|
+ "
|
|
|
+ >{{ form.code4 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode5 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode5
|
|
|
+ "
|
|
|
+ >{{ form.code5 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode6 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode6
|
|
|
+ "
|
|
|
+ >{{ form.code6 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="logoImg">
|
|
|
+ <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="active-bottom" v-show="horizontalBool == true">
|
|
|
+ <div class="left-con">
|
|
|
+ <div class="span-box">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode7 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode7
|
|
|
+ "
|
|
|
+ >{{ form.code7 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode8 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode8
|
|
|
+ "
|
|
|
+ >{{ form.code8 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="span-box">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode9 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode9
|
|
|
+ "
|
|
|
+ >{{ form.code9 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode10 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode10
|
|
|
+ "
|
|
|
+ >{{ form.code10 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="span-box">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode11 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode11
|
|
|
+ "
|
|
|
+ >{{ form.code11 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode12 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode12
|
|
|
+ "
|
|
|
+ >{{ form.code12 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="span-box">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode13 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode13
|
|
|
+ "
|
|
|
+ >{{ form.code13 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode14 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode14
|
|
|
+ "
|
|
|
+ >{{ form.code14 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="vue-qr">
|
|
|
+ <vue-qr
|
|
|
+ :text="(form && form.value) || ''"
|
|
|
+ class="vueQrSize"
|
|
|
+ ></vue-qr>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="horizontalBool == false" class="vertical-top1">
|
|
|
+ <div class="top-img">
|
|
|
+ <div class="top-span">
|
|
|
+ <p
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode1 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode1
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ form.code1 }}
|
|
|
+ </p>
|
|
|
+ <p
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode2 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode2
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ form.code2 }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="logoImg">
|
|
|
+ <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-span">
|
|
|
+ <div class="top">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode3 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode3
|
|
|
+ "
|
|
|
+ >{{ form.code3 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode4 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode4
|
|
|
+ "
|
|
|
+ >{{ form.code4 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode5 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode5
|
|
|
+ "
|
|
|
+ >{{ form.code5 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode6 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode6
|
|
|
+ "
|
|
|
+ >{{ form.code6 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-show="horizontalBool == false"
|
|
|
+ class="vertical-bottom1"
|
|
|
+ >
|
|
|
+ <div class="bot-top">
|
|
|
+ <div class="bot-con">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode7 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode7
|
|
|
+ "
|
|
|
+ >{{ form.code7 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode8 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode8
|
|
|
+ "
|
|
|
+ >{{ form.code8 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="bot-con">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode9 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode9
|
|
|
+ "
|
|
|
+ >{{ form.code9 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode10 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode10
|
|
|
+ "
|
|
|
+ >{{ form.code10 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="bot-con">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode11 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode11
|
|
|
+ "
|
|
|
+ >{{ form.code11 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode12 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode12
|
|
|
+ "
|
|
|
+ >{{ form.code12 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bot-bottom">
|
|
|
+ <div class="qr-span">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode13 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode13
|
|
|
+ "
|
|
|
+ >{{ form.code13 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode14 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode14
|
|
|
+ "
|
|
|
+ >{{ form.code14 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="vue-qr">
|
|
|
+ <vue-qr
|
|
|
+ :text="(form && form.qrCode) || ''"
|
|
|
+ class="vueQrSize"
|
|
|
+ ></vue-qr>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="activeMode" v-else>
|
|
|
+ <div
|
|
|
+ ref="print-content"
|
|
|
+ class="lengthways"
|
|
|
+ :style="
|
|
|
+ 'width:' +
|
|
|
+ verWidth +
|
|
|
+ 'cm;' +
|
|
|
+ 'height:' +
|
|
|
+ verHeight +
|
|
|
+ 'cm;' +
|
|
|
+ 'border: 2px black solid;'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="vertical-top1">
|
|
|
+ <div class="top-img">
|
|
|
+ <div class="top-span">
|
|
|
+ <p
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode1 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode1
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ form.code1 }}
|
|
|
+ </p>
|
|
|
+ <p
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode2 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode2
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ form.code2 }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="logoImg">
|
|
|
+ <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-span">
|
|
|
+ <div class="top">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode3 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode3
|
|
|
+ "
|
|
|
+ >{{ form.code3 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode4 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode4
|
|
|
+ "
|
|
|
+ >{{ form.code4 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode5 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode5
|
|
|
+ "
|
|
|
+ >{{ form.code5 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode6 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode6
|
|
|
+ "
|
|
|
+ >{{ form.code6 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="vertical-bottom1">
|
|
|
+ <div class="bot-top">
|
|
|
+ <div class="vue-qr">
|
|
|
+ <vue-qr
|
|
|
+ :text="(form && form.value) || ''"
|
|
|
+ class="vueQrSize"
|
|
|
+ ></vue-qr>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bot-bottom">
|
|
|
+ <div class="bot-con">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode7 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode7
|
|
|
+ "
|
|
|
+ >{{ form.code7 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode8 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode8
|
|
|
+ "
|
|
|
+ >{{ form.code8 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="bot-con">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode9 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode9
|
|
|
+ "
|
|
|
+ >{{ form.code9 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode10 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode10
|
|
|
+ "
|
|
|
+ >{{ form.code10 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="bot-con">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode11 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode11
|
|
|
+ "
|
|
|
+ >{{ form.code11 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode12 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode12
|
|
|
+ "
|
|
|
+ >{{ form.code12 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="bot-con">
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode13 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode13
|
|
|
+ "
|
|
|
+ >{{ form.code13 }}</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="
|
|
|
+ 'font-size:' +
|
|
|
+ form.fontSizeCode14 +
|
|
|
+ 'cm;font-family:' +
|
|
|
+ form.typefaceCode14
|
|
|
+ "
|
|
|
+ >{{ form.code14 }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -133,6 +663,11 @@
|
|
|
components: { selectUpload, print, addComponent, VueQr },
|
|
|
data() {
|
|
|
return {
|
|
|
+ horizontalBool: false,
|
|
|
+ horWidth: 0,
|
|
|
+ horHeight: 0,
|
|
|
+ verWidth: 0,
|
|
|
+ verHeight: 0,
|
|
|
num: 1,
|
|
|
dialogVisible: false, //编辑弹窗
|
|
|
data: {},
|
|
|
@@ -196,6 +731,11 @@
|
|
|
const fontTypeObj = { 1: '宋体', 2: '微软雅黑', 3: 'Arial' };
|
|
|
const useModeList = res.data.useModeList;
|
|
|
// 回显条码模板14个下拉数据
|
|
|
+ this.horizontalBool = res.data.putType == 1 ? true : false;
|
|
|
+ this.horWidth = res.data.sizeWide;
|
|
|
+ this.horHeight = res.data.sizeLong;
|
|
|
+ this.verWidth = res.data.sizeWide;
|
|
|
+ this.verHeight = res.data.sizeLong;
|
|
|
this.config = {
|
|
|
putType: res.data.putType,
|
|
|
sizeWide: res.data.sizeWide,
|
|
|
@@ -244,6 +784,7 @@
|
|
|
typefaceCode13: fontTypeObj[useModeList[12].fontType],
|
|
|
typefaceCode14: fontTypeObj[useModeList[13].fontType]
|
|
|
};
|
|
|
+ this.form = deepClone(this.config);
|
|
|
// console.log(this.barCodeList)
|
|
|
// this.config = {
|
|
|
// imagePath: '',
|
|
|
@@ -257,48 +798,48 @@
|
|
|
// ? res.data.size_long * 25
|
|
|
// : res.data.size_long * 8,
|
|
|
// value: res.data.qrCode,
|
|
|
- // code1: res.data.stripcodeset.code1,
|
|
|
- // code2: res.data.stripcodeset.code2,
|
|
|
- // code3: res.data.stripcodeset.code3,
|
|
|
- // code4: res.data.stripcodeset.code4,
|
|
|
- // code5: res.data.stripcodeset.code5,
|
|
|
- // code6: res.data.stripcodeset.code6,
|
|
|
- // code7: res.data.stripcodeset.code7,
|
|
|
- // code8: res.data.stripcodeset.code8,
|
|
|
- // code9: res.data.stripcodeset.code9,
|
|
|
- // code10: res.data.stripcodeset.code10,
|
|
|
- // code11: res.data.stripcodeset.code11,
|
|
|
- // code12: res.data.stripcodeset.code12,
|
|
|
- // code13: res.data.stripcodeset.code13,
|
|
|
- // code14: res.data.stripcodeset.code14,
|
|
|
- // fontSizeCode1: res.data.stripcodeset.fontSizeCode1,
|
|
|
- // fontSizeCode2: res.data.stripcodeset.fontSizeCode2,
|
|
|
- // fontSizeCode3: res.data.stripcodeset.fontSizeCode3,
|
|
|
- // fontSizeCode4: res.data.stripcodeset.fontSizeCode4,
|
|
|
- // fontSizeCode5: res.data.stripcodeset.fontSizeCode5,
|
|
|
- // fontSizeCode6: res.data.stripcodeset.fontSizeCode6,
|
|
|
- // fontSizeCode7: res.data.stripcodeset.fontSizeCode7,
|
|
|
- // fontSizeCode8: res.data.stripcodeset.fontSizeCode8,
|
|
|
- // fontSizeCode9: res.data.stripcodeset.fontSizeCode9,
|
|
|
- // fontSizeCode10: res.data.stripcodeset.fontSizeCode10,
|
|
|
- // fontSizeCode11: res.data.stripcodeset.fontSizeCode11,
|
|
|
- // fontSizeCode12: res.data.stripcodeset.fontSizeCode12,
|
|
|
- // fontSizeCode13: res.data.stripcodeset.fontSizeCode13,
|
|
|
- // fontSizeCode14: res.data.stripcodeset.fontSizeCode14,
|
|
|
- // typefaceCode1: res.data.stripcodeset.typefaceCode1,
|
|
|
- // typefaceCode2: res.data.stripcodeset.typefaceCode2,
|
|
|
- // typefaceCode3: res.data.stripcodeset.typefaceCode3,
|
|
|
- // typefaceCode4: res.data.stripcodeset.typefaceCode4,
|
|
|
- // typefaceCode5: res.data.stripcodeset.typefaceCode5,
|
|
|
- // typefaceCode6: res.data.stripcodeset.typefaceCode6,
|
|
|
- // typefaceCode7: res.data.stripcodeset.typefaceCode7,
|
|
|
- // typefaceCode8: res.data.stripcodeset.typefaceCode8,
|
|
|
- // typefaceCode9: res.data.stripcodeset.typefaceCode9,
|
|
|
- // typefaceCode10: res.data.stripcodeset.typefaceCode10,
|
|
|
- // typefaceCode11: res.data.stripcodeset.typefaceCode11,
|
|
|
- // typefaceCode12: res.data.stripcodeset.typefaceCode12,
|
|
|
- // typefaceCode13: res.data.stripcodeset.typefaceCode13,
|
|
|
- // typefaceCode14: res.data.stripcodeset.typefaceCode14
|
|
|
+ // code1: res.data.code1,
|
|
|
+ // code2: res.data.code2,
|
|
|
+ // code3: res.data.code3,
|
|
|
+ // code4: res.data.code4,
|
|
|
+ // code5: res.data.code5,
|
|
|
+ // code6: res.data.code6,
|
|
|
+ // code7: res.data.code7,
|
|
|
+ // code8: res.data.code8,
|
|
|
+ // code9: res.data.code9,
|
|
|
+ // code10: res.data.code10,
|
|
|
+ // code11: res.data.code11,
|
|
|
+ // code12: res.data.code12,
|
|
|
+ // code13: res.data.code13,
|
|
|
+ // code14: res.data.code14,
|
|
|
+ // fontSizeCode1: res.data.fontSizeCode1,
|
|
|
+ // fontSizeCode2: res.data.fontSizeCode2,
|
|
|
+ // fontSizeCode3: res.data.fontSizeCode3,
|
|
|
+ // fontSizeCode4: res.data.fontSizeCode4,
|
|
|
+ // fontSizeCode5: res.data.fontSizeCode5,
|
|
|
+ // fontSizeCode6: res.data.fontSizeCode6,
|
|
|
+ // fontSizeCode7: res.data.fontSizeCode7,
|
|
|
+ // fontSizeCode8: res.data.fontSizeCode8,
|
|
|
+ // fontSizeCode9: res.data.fontSizeCode9,
|
|
|
+ // fontSizeCode10: res.data.fontSizeCode10,
|
|
|
+ // fontSizeCode11: res.data.fontSizeCode11,
|
|
|
+ // fontSizeCode12: res.data.fontSizeCode12,
|
|
|
+ // fontSizeCode13: res.data.fontSizeCode13,
|
|
|
+ // fontSizeCode14: res.data.fontSizeCode14,
|
|
|
+ // typefaceCode1: res.data.typefaceCode1,
|
|
|
+ // typefaceCode2: res.data.typefaceCode2,
|
|
|
+ // typefaceCode3: res.data.typefaceCode3,
|
|
|
+ // typefaceCode4: res.data.typefaceCode4,
|
|
|
+ // typefaceCode5: res.data.typefaceCode5,
|
|
|
+ // typefaceCode6: res.data.typefaceCode6,
|
|
|
+ // typefaceCode7: res.data.typefaceCode7,
|
|
|
+ // typefaceCode8: res.data.typefaceCode8,
|
|
|
+ // typefaceCode9: res.data.typefaceCode9,
|
|
|
+ // typefaceCode10: res.data.typefaceCode10,
|
|
|
+ // typefaceCode11: res.data.typefaceCode11,
|
|
|
+ // typefaceCode12: res.data.typefaceCode12,
|
|
|
+ // typefaceCode13: res.data.typefaceCode13,
|
|
|
+ // typefaceCode14: res.data.typefaceCode14
|
|
|
// };
|
|
|
// }
|
|
|
// }
|
|
|
@@ -469,4 +1010,339 @@
|
|
|
.full {
|
|
|
background: #cc3300;
|
|
|
}
|
|
|
+ .barIcon {
|
|
|
+ .barCodeSize {
|
|
|
+ display: flex;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 30px;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+ .mult {
|
|
|
+ display: inline-block;
|
|
|
+ width: 10px;
|
|
|
+ margin-left: -5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mapShow {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 20px 0;
|
|
|
+ .type {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ > div:first-child {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .staticMode {
|
|
|
+ width: 42%;
|
|
|
+ height: 300px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .modelicon {
|
|
|
+ border: 2px black solid;
|
|
|
+ height: 300px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ .modelicon-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 40%;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 2px black solid;
|
|
|
+ .sel {
|
|
|
+ width: 80%;
|
|
|
+ padding: 5px;
|
|
|
+ .sel-top,
|
|
|
+ .sel-bottom {
|
|
|
+ display: flex;
|
|
|
+ .el-select {
|
|
|
+ margin: 10px 5px;
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .logoImg {
|
|
|
+ width: 20%;
|
|
|
+ height: 70%;
|
|
|
+ margin: 10px;
|
|
|
+ text-align: right;
|
|
|
+ img {
|
|
|
+ width: 80%;
|
|
|
+ height: 80%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .modelicon-bottom {
|
|
|
+ height: 60%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left-con {
|
|
|
+ width: 70%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .sel-box {
|
|
|
+ margin: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .el-select {
|
|
|
+ margin: 0 5px;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vue-qr {
|
|
|
+ width: 30%;
|
|
|
+ height: 100%;
|
|
|
+ border-left: 2px black solid;
|
|
|
+ .vueQrSize {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .activeMode {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px;
|
|
|
+ overflow: auto;
|
|
|
+ .active-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 40%;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 2px black solid;
|
|
|
+ .span-con {
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 5px 10px;
|
|
|
+ .con-top,
|
|
|
+ .con-bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .logoImg {
|
|
|
+ width: 20%;
|
|
|
+ height: 70%;
|
|
|
+ margin: 10px;
|
|
|
+ text-align: right;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 80%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active-bottom {
|
|
|
+ height: 60%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left-con {
|
|
|
+ padding: 5px;
|
|
|
+ width: 70%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .span-box {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ span {
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vue-qr {
|
|
|
+ width: 40%;
|
|
|
+ height: 100%;
|
|
|
+ border-left: 2px black solid;
|
|
|
+ .vueQrSize {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vertical-top1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 40%;
|
|
|
+ border-bottom: 2px black solid;
|
|
|
+ .top-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ .top-span {
|
|
|
+ width: 70%;
|
|
|
+ height: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ p {
|
|
|
+ font-weight: bold;
|
|
|
+ height: 50%;
|
|
|
+ line-height: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .logoImg {
|
|
|
+ width: 30%;
|
|
|
+ height: 80%;
|
|
|
+ text-align: right;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-span {
|
|
|
+ padding: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ .top,
|
|
|
+ .bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ margin-top: 2%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ span {
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ height: 50%;
|
|
|
+ line-height: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vertical-bottom1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 60%;
|
|
|
+ .bot-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 55%;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .bot-con {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 5%;
|
|
|
+ span {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bot-bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 45%;
|
|
|
+ display: flex;
|
|
|
+ .qr-span {
|
|
|
+ width: 60%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ span {
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ line-height: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vue-qr {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ border-left: 2px black solid;
|
|
|
+ border-top: 2px black solid;
|
|
|
+ .vueQrSize {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .vertical-top2 {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 30%;
|
|
|
+ // border-bottom: 2px black solid;
|
|
|
+ // }
|
|
|
+ // .vertical-bottom2 {
|
|
|
+ // .vue-qr {
|
|
|
+ // width: 100%;
|
|
|
+ // text-align: center;
|
|
|
+ // .vueQrSize {
|
|
|
+ // width: 60%;
|
|
|
+ // height: 100%;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .lengthways {
|
|
|
+ .vue-qr {
|
|
|
+ width: 65% !important;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-span,
|
|
|
+ .top-img {
|
|
|
+ padding: 0 10px !important;
|
|
|
+
|
|
|
+ span {
|
|
|
+ line-height: 1 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .vertical-top1 {
|
|
|
+ height: 30% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vertical-bottom1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 70% !important;
|
|
|
+ .bot-top {
|
|
|
+ height: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bot-bottom {
|
|
|
+ width: auto !important;
|
|
|
+ height: auto !important;
|
|
|
+ flex: 1;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .bot-con {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .crosswise,
|
|
|
+ .lengthways {
|
|
|
+ transition: all 0.5s;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
ysy