src/components/cloud/ImageDetailModal.vue

@@ -49,10 +49,10 @@ const layout = computed(() => {
     ? naturalWidth.value / naturalHeight.value
     : 4 / 3
   const maxModalWidth = viewportWidth.value > 0
-    ? Math.max(Math.min(viewportWidth.value * 0.92, viewportWidth.value - 32), 280)
+    ? Math.max(Math.min(viewportWidth.value * 0.95, viewportWidth.value - 32), 280)
     : 320
   const maxImageHeight = viewportHeight.value > 0
-    ? Math.max(viewportHeight.value * 0.86, 240)
+    ? Math.max(viewportHeight.value * 0.9, 240)
     : 360
   const imageWidth = Math.min(maxModalWidth, maxImageHeight * aspectRatio)
 
@@ -187,11 +187,11 @@ onBeforeUnmount(() => {
           <button
             type="button"
             @click="close"
-            class="image-detail-close-button oc-overlay-button absolute right-4 top-4 z-30 h-10 w-10 [&_svg]:stroke-[2.5]"
+            class="oc-overlay-button absolute right-3 top-3 z-30 h-9 w-9 opacity-0 drop-shadow-[0_2px_8px_rgba(15,23,42,0.9)] transition-opacity duration-200 hover:opacity-100 focus-visible:opacity-100"
             aria-label="关闭大图"
             title="关闭大图"
           >
-            <NIcon size="22">
+            <NIcon size="20">
               <X />
             </NIcon>
           </button>
@@ -301,13 +301,7 @@ onBeforeUnmount(() => {
   transform: translateY(10px) scale(0.97);
 }
 
-.image-detail-shell.image-detail-shell {
-  border-radius: 30px !important;
-}
-
-.image-detail-close-button.image-detail-close-button,
-.image-detail-info-button.image-detail-info-button,
-.image-detail-panel-close.image-detail-panel-close {
+.image-detail-info-button.image-detail-info-button {
   border-radius: 9999px !important;
 }
 </style>