骑缝章的占位遮挡

This commit is contained in:
2026-07-01 09:13:51 +08:00
parent 83f5b5fcce
commit cce252851d
@@ -265,30 +265,19 @@
</div> </div>
<div <div
v-if="pagingSeal.sealId"
class="paging-seal-wrapper" class="paging-seal-wrapper"
:class="{ :class="{ 'paging-signed': pagingSigned }"
'paging-empty': !pagingSeal.sealId,
'paging-signed': pagingSigned,
}"
@click.stop="handlePagingSealClick"
> >
<template v-if="!pagingSeal.sealId"> <div class="paging-seal-badge">
<div class="paging-empty-box"> <check-circle-outlined v-if="pagingSigned" style="color: #67c23a; font-size: 14px;" />
<div class="paging-empty-text">添加骑缝章</div> <span>添加骑缝章</span>
</div> <img
</template> v-if="pagingSeal.pictureUrl"
<template v-else> :src="pagingSeal.pictureUrl"
<div class="paging-seal-real"> class="paging-seal-thumb-inline"
<img />
v-if="pagingSeal.pictureUrl" </div>
:src="pagingSeal.pictureUrl"
class="paging-seal-img"
/>
<div class="paging-seal-real-text">
{{ pagingSeal.sealName || "骑缝章" }}
</div>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>
@@ -1493,16 +1482,6 @@ function removePlacedSeal(id) {
sealItems.value = sealItems.value.filter((item) => item.id !== id); sealItems.value = sealItems.value.filter((item) => item.id !== id);
} }
function handlePagingSealClick() {
if (pagingSigned.value) {
message.warning("骑缝章已签署");
return;
}
if (!pagingSeal.sealId) {
message.info("请从右侧印章列表拖拽一个印章到骑缝章区域");
}
}
function onDropPaging() { function onDropPaging() {
if (!dragSealData || dragSealData._type !== "seal") return; if (!dragSealData || dragSealData._type !== "seal") return;
pagingSigned.value = false; pagingSigned.value = false;
@@ -2265,82 +2244,32 @@ watch(visible, (value) => {
right: -18px; right: -18px;
transform: translateY(-50%); transform: translateY(-50%);
width: 52px; width: 52px;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
z-index: 50; z-index: 50;
cursor: pointer;
transition: all 0.25s ease; transition: all 0.25s ease;
} }
.paging-seal-wrapper:hover { .paging-seal-badge {
transform: translateY(-50%) scale(1.03);
}
.paging-empty-box {
width: 100%;
border: 2px dashed #cbd5e1;
border-radius: 12px;
background: rgba(248, 250, 252, 0.95);
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
transition: all 0.2s ease;
padding: 10px;
}
.paging-empty-text {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 16px;
letter-spacing: 4px;
font-weight: 600;
line-height: 1.4;
}
.paging-empty-box:hover {
border-color: #3b82f6;
color: #3b82f6;
background: #eff6ff;
}
.paging-seal-real {
width: 100%;
border: 2px solid rgba(210, 50, 50, 0.65);
background: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.04),
rgba(255, 0, 0, 0.03)
);
border-radius: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; gap: 6px;
opacity: 0.9; padding: 10px 4px;
padding: 8px 4px; background: rgba(255, 255, 255, 0.95);
box-shadow: border: 1px solid #e5e7eb;
0 0 12px rgba(210, 50, 50, 0.2), border-radius: 10px;
inset 0 0 8px rgba(210, 50, 50, 0.1); font-size: 11px;
color: #2c3e50;
font-weight: 500;
text-align: center;
line-height: 1.3;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
} }
.paging-seal-img { .paging-seal-thumb-inline {
width: 32px; width: 36px;
height: 32px; height: 36px;
object-fit: contain; object-fit: contain;
margin-bottom: 4px; border-radius: 4px;
}
.paging-seal-real-text {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 14px;
letter-spacing: 2px;
color: rgba(210, 50, 50, 0.72);
font-family: "STFangsong", "FangSong", "SimSun", serif;
user-select: none;
} }
.operation-sidebar { .operation-sidebar {