style(ui): 图片预览改为直角样式并调整关闭按钮

This commit is contained in:
2026-08-21 02:45:34 +08:00
parent 64aa3a4f07
commit b0759becbb
+5 -11
View File
@@ -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>