/* ============================================ Image Viewer 独立组件样式 使用方式：在 中引入本文件 ============================================ */ .img-viewer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 9000; opacity: 0; pointer-events: none; transition: opacity 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); } .img-viewer-overlay.show { opacity: 1; pointer-events: auto; } .img-viewer-modal { background: var(--md-sys-color-surface-container-high, #FFF0C3); border-radius: 28px; padding: 30px; max-width: 85vw; max-height: 85vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 18px; box-shadow: 0 8px 32px rgba(128, 128, 128, 0.3); transform: none; opacity: 1; overflow: hidden; transform-origin: top left; will-change: transform, opacity; transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); } .img-viewer-modal.is-hidden { opacity: 0 !important; } .img-viewer-title { color: var(--md-sys-color-on-surface, #19160F); font-size: 20px; font-weight: 600; line-height: 1.3; text-align: left; width: 100%; margin: 0; } /* 图片容器 */ .img-viewer-image-wrap { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; min-width: 0; min-height: 0; max-height: 100%; } /* 加载中：展示足够的空间给转圈动画 */ .img-viewer-image-wrap.loading { min-height: 140px; } /* 图片本体 */ .img-viewer-img { max-width: 100%; max-height: 100%; border-radius: 12px; display: block; object-fit: contain; opacity: 0; transform: translate(0px, 0px) scale(1); transform-origin: center center; user-select: none; -webkit-user-drag: none; touch-action: none; transition: opacity 0.3s ease, transform 0.18s ease; } .img-viewer-img.loaded { opacity: 1; } /* 转圈动画 */ .img-viewer-spinner { position: absolute; width: 48px; height: 48px; border: 4px solid rgba(122, 91, 0, 0.22); border-top-color: var(--md-sys-color-primary, #7A5B00); border-radius: 50%; animation: img-viewer-spin 0.75s linear infinite; pointer-events: none; } .img-viewer-spinner.hidden { display: none; } .img-viewer-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; } .img-viewer-zoom-group { display: inline-flex; align-items: center; gap: 8px; } .img-viewer-tool-btn { min-width: 48px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--md-sys-color-outline, #75695C) 60%, transparent); background: color-mix(in srgb, var(--md-sys-color-surface, #F7F1E2) 72%, transparent); color: var(--md-sys-color-on-surface, #19160F); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .img-viewer-tool-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--md-sys-color-primary-container, #F2DC96) 60%, transparent); } .img-viewer-tool-btn:disabled { opacity: 0.42; cursor: not-allowed; } .img-viewer-image-wrap.is-pan-enabled { cursor: grab; touch-action: none; } .img-viewer-image-wrap.is-panning { cursor: grabbing; } @keyframes img-viewer-spin { to { transform: rotate(360deg); } } /* 关闭按钮 — 与 modal-btn-a 相同样式 */ .img-viewer-close-btn { background: var(--md-sys-color-primary, #7A5B00); color: var(--md-sys-color-on-primary, #312700); border: 2px solid var(--md-sys-color-primary, #7A5B00); padding: 12px 24px; border-radius: 100px; font-weight: 500; font-size: 14px; cursor: pointer; position: relative; overflow: hidden; justify-self: end; align-self: end; width: auto; min-width: 96px; margin: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .img-viewer-close-btn:hover { box-shadow: 0 4px 8px rgba(88, 74, 20, 0.3); opacity: 0.9; } /* 为可点击图片添加放大光标 */ img.img-zoomable { cursor: zoom-in; } .img-viewer-fly { position: fixed; z-index: 9100; object-fit: cover; pointer-events: none; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); transition: top 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease; }