This commit is contained in:
parent
3e205b72cc
commit
c970eb9fff
|
|
@ -3,16 +3,16 @@
|
|||
|
||||
|
||||
|
||||
<div class="card-container">
|
||||
<div :class="item.isSelected ? 'card card-selected' : 'card'" v-for="(item, index) in InkjetPrinterData"
|
||||
<div class="printcard-container">
|
||||
<div :class="item.isSelected ? 'printcard printcard-selected' : 'printcard'" v-for="(item, index) in InkjetPrinterData"
|
||||
:key="index" @click="toggleCard(item)">
|
||||
<!-- 卡片内容 -->
|
||||
<div class="card-content">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<div class="printcard-content">
|
||||
<div class="printcard-header">
|
||||
<div class="printcard-title">
|
||||
<h4> {{ item.name }}</h4>
|
||||
</div>
|
||||
<div class="card-buttons">
|
||||
<div class="printcard-buttons">
|
||||
<a-button type="primary" @click.stop="pageStart(item)">启动</a-button>
|
||||
<a-button type="danger" @click.stop="pageStop(item)" style=" margin-left: 5px; ">停止</a-button>
|
||||
</div>
|
||||
|
|
@ -56,7 +56,11 @@
|
|||
</vxe-column>
|
||||
|
||||
</vxe-table>
|
||||
|
||||
|
||||
<div style="margin: 9px;width:300px;display: flex;">
|
||||
<a-input v-model="addText" /> <a-button style="margin-left: 4px;" @click.stop="pageAdd()">增加条码</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -82,7 +86,8 @@ export default {
|
|||
},
|
||||
|
||||
currentPrint: null,
|
||||
table1Height: 400,
|
||||
table1Height: 300,
|
||||
addText:'',
|
||||
InkjetPrinterData: [
|
||||
|
||||
],
|
||||
|
|
@ -131,6 +136,11 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
pageAdd(){
|
||||
|
||||
this.detailsData = [...this.detailsData ,{ fileName: this.addText || '', x: 0, y: 0, direction: 0, fontName: 'Arial', fontSize: 24, fontSpacing: 10 }]
|
||||
|
||||
},
|
||||
|
||||
printInit() {
|
||||
this.$mk.post({
|
||||
|
|
@ -158,9 +168,9 @@ export default {
|
|||
heightInit() {
|
||||
|
||||
this.$nextTick(() => {
|
||||
let h = this.$mk.getWindowSize().height - this.$mk.getOffsetTop(this.$refs.xTable.$el) - 300;
|
||||
if (h < 300) {
|
||||
h = 300;
|
||||
let h = this.$mk.getWindowSize().height - this.$mk.getOffsetTop(this.$refs.xTable.$el) - 360;
|
||||
if (h < 250) {
|
||||
h = 250;
|
||||
}
|
||||
|
||||
this.table1Height = h;
|
||||
|
|
@ -274,12 +284,12 @@ export default {
|
|||
|
||||
</script>
|
||||
<style>
|
||||
.card-container {
|
||||
.printcard-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
.printcard {
|
||||
width: calc(33.33% - 20px);
|
||||
/* 调整卡片宽度,包括间距 */
|
||||
margin: 10px;
|
||||
|
|
@ -294,34 +304,34 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
.printcard:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
/* 鼠标悬停时增加阴影效果 */
|
||||
}
|
||||
|
||||
.card-content {
|
||||
.printcard-content {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card-content .ant-input {
|
||||
.printcard-content .ant-input {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.printcard-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
.printcard-title {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.card-buttons {
|
||||
.printcard-buttons {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-selected {
|
||||
.printcard-selected {
|
||||
background-color: #b2d9f1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
</vxe-form>
|
||||
|
||||
|
||||
<div class="card-container">
|
||||
<div class="card" v-for="(item, index) in settingData" :key="index">
|
||||
<div class="settingcard-container">
|
||||
<div class="settingcard" v-for="(item, index) in settingData" :key="index">
|
||||
<!-- 卡片内容 -->
|
||||
<div class="card-content">
|
||||
<div class="settingcard-content">
|
||||
<h4> {{ item.title }}</h4>
|
||||
<a-input v-if="item.type == 'integer'" v-model="item.value" />
|
||||
<a-select style="width:100%;margin-bottom: 5px;" v-if="item.type == 'select'" v-model="item.value"
|
||||
|
|
@ -168,12 +168,12 @@ export default {
|
|||
|
||||
</script>
|
||||
<style>
|
||||
.card-container {
|
||||
.settingcard-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
.settingcard {
|
||||
width: calc(33.33% - 20px);
|
||||
/* 调整卡片宽度,包括间距 */
|
||||
margin: 10px;
|
||||
|
|
@ -186,18 +186,18 @@ export default {
|
|||
/* 添加过渡效果 */
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
.settingcard:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
/* 鼠标悬停时增加阴影效果 */
|
||||
}
|
||||
|
||||
.card-content {
|
||||
.settingcard-content {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card-content .ant-input {
|
||||
.settingcard-content .ant-input {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue