签章能够缩放

This commit is contained in:
2026-06-30 15:13:10 +08:00
parent 6dc1c80320
commit f8d4adfd5f
@@ -369,6 +369,17 @@
<div class="section-subtitle"> <div class="section-subtitle">
2拖动签章到文档上{{ sealList.length }} 2拖动签章到文档上{{ sealList.length }}
</div> </div>
<div class="seal-size-control">
<span>签章大小</span>
<a-slider
v-model:value="sealDefaultScale"
:min="0.3"
:max="2.0"
:step="0.1"
style="flex: 1"
/>
<span class="seal-size-label">{{ Math.round(sealDefaultScale * 100) }}%</span>
</div>
<div class="seal-drag-list"> <div class="seal-drag-list">
<div <div
v-for="seal in sealList" v-for="seal in sealList"
@@ -377,7 +388,7 @@
draggable="true" draggable="true"
@dragstart="onDragSealStart($event, seal)" @dragstart="onDragSealStart($event, seal)"
> >
<img :src="seal.pictureUrl" class="drag-seal-img" /> <img :src="seal.pictureUrl" class="drag-seal-img" :style="{ width: (120 * sealDefaultScale) + 'px' }" />
<span class="drag-seal-name">{{ seal.sealName }}</span> <span class="drag-seal-name">{{ seal.sealName }}</span>
</div> </div>
</div> </div>
@@ -1251,6 +1262,7 @@ const queryEntName = ref("");
const querySealTypes = ref([0, 20, 10, 30, 40, 50, 60]); const querySealTypes = ref([0, 20, 10, 30, 40, 50, 60]);
const fetchingSeals = ref(false); const fetchingSeals = ref(false);
const sealList = ref([]); const sealList = ref([]);
const sealDefaultScale = ref(1.0);
queryName.value = '周小锋'; queryName.value = '周小锋';
@@ -1373,7 +1385,7 @@ function onDropSeal(e, pageNum) {
pageNum, pageNum,
x, x,
y, y,
scale: 1, scale: sealDefaultScale.value,
status: "pending", status: "pending",
}); });
@@ -1387,9 +1399,12 @@ function getPageSealItems(pageNum) {
} }
function getPlacedStyle(seal) { function getPlacedStyle(seal) {
const s = seal.scale || sealDefaultScale.value;
const baseWidth = 170;
return { return {
left: `${seal.x * scaleRatio.value}px`, left: `${seal.x * scaleRatio.value}px`,
top: `${seal.y * scaleRatio.value}px`, top: `${seal.y * scaleRatio.value}px`,
width: `${baseWidth * s}px`,
}; };
} }
@@ -2091,7 +2106,7 @@ watch(visible, (value) => {
} }
.placed-seal .placed-seal-img { .placed-seal .placed-seal-img {
width: 170px; width: 100%;
height: auto; height: auto;
opacity: 0.85; opacity: 0.85;
display: block; display: block;
@@ -2310,6 +2325,22 @@ watch(visible, (value) => {
margin-bottom: 14px; margin-bottom: 14px;
} }
.seal-size-control {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 12px;
color: #64748b;
}
.seal-size-label {
min-width: 38px;
text-align: right;
font-weight: 600;
color: #2c3e50;
}
.section-subtitle { .section-subtitle {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
@@ -2348,7 +2379,7 @@ watch(visible, (value) => {
} }
.seal-drag-item { .seal-drag-item {
width: 70px; min-width: 70px;
cursor: grab; cursor: grab;
text-align: center; text-align: center;
border: 1px solid #e4e7ed; border: 1px solid #e4e7ed;