签章能够缩放
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user