骑缝章的占位遮挡

src/views/contract/launch/components/mixedSignModal.vue

@@ -265,31 +265,20 @@
             </div>
 
             <div
+              v-if="pagingSeal.sealId"
               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>
-              </template>
-              <template v-else>
-                <div class="paging-seal-real">
                 <img
                   v-if="pagingSeal.pictureUrl"
                   :src="pagingSeal.pictureUrl"
-                    class="paging-seal-img"
+                  class="paging-seal-thumb-inline"
                 />
-                  <div class="paging-seal-real-text">
-                    {{ pagingSeal.sealName || "骑缝章" }}
               </div>
             </div>
-              </template>
-            </div>
           </div>
         </div>
 
@@ -1493,16 +1482,6 @@ function removePlacedSeal(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() {
   if (!dragSealData || dragSealData._type !== "seal") return;
   pagingSigned.value = false;
@@ -2265,82 +2244,32 @@ watch(visible, (value) => {
   right: -18px;
   transform: translateY(-50%);
   width: 52px;
-  height: fit-content;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   z-index: 50;
-  cursor: pointer;
   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;
   flex-direction: column;
   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;
-  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 {