签章能够缩放

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">
2拖动签章到文档上{{ sealList.length }}
</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
v-for="seal in sealList"
@@ -377,7 +388,7 @@
draggable="true"
@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>
</div>
</div>
@@ -1251,6 +1262,7 @@ const queryEntName = ref("");
const querySealTypes = ref([0, 20, 10, 30, 40, 50, 60]);
const fetchingSeals = ref(false);
const sealList = ref([]);
const sealDefaultScale = ref(1.0);
queryName.value = '周小锋';
@@ -1373,7 +1385,7 @@ function onDropSeal(e, pageNum) {
pageNum,
x,
y,
scale: 1,
scale: sealDefaultScale.value,
status: "pending",
});
@@ -1387,9 +1399,12 @@ function getPageSealItems(pageNum) {
}
function getPlacedStyle(seal) {
const s = seal.scale || sealDefaultScale.value;
const baseWidth = 170;
return {
left: `${seal.x * 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 {
width: 170px;
width: 100%;
height: auto;
opacity: 0.85;
display: block;
@@ -2310,6 +2325,22 @@ watch(visible, (value) => {
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 {
font-size: 13px;
font-weight: 600;
@@ -2348,7 +2379,7 @@ watch(visible, (value) => {
}
.seal-drag-item {
width: 70px;
min-width: 70px;
cursor: grab;
text-align: center;
border: 1px solid #e4e7ed;