This commit is contained in:
xielue 2023-09-11 15:41:46 +08:00
parent 3e205b72cc
commit c970eb9fff
2 changed files with 37 additions and 27 deletions

View File

@ -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>
@ -57,6 +57,10 @@
</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>

View File

@ -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>