diff --git a/backend/internal/handler/templates/public_product.html b/backend/internal/handler/templates/public_product.html index e7cba11..7e425b0 100644 --- a/backend/internal/handler/templates/public_product.html +++ b/backend/internal/handler/templates/public_product.html @@ -39,8 +39,23 @@ position:relative;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden; } .frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(154,107,47,.28);border-radius:3px;pointer-events:none;z-index:2;} - .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;} - .gallery img{width:100%;flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;object-fit:contain;background:var(--card);display:block;} + .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;} + .gallery::-webkit-scrollbar{display:none;} + .gallery img{width:100%;flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;object-fit:contain;background:var(--card);display:block;cursor:zoom-in;} + .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:3;} + .dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:all .25s;} + .dots i.on{background:var(--wine);width:16px;border-radius:3px;} + + /* 全屏灯箱:点图进入,滑动切换,点背景或 ✕ 退出 */ + .lb{position:fixed;inset:0;z-index:99;background:rgba(24,18,14,.96);} + .lb[hidden]{display:none;} + .lb-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;height:100%;scrollbar-width:none;} + .lb-track::-webkit-scrollbar{display:none;} + .lb-track img{width:100vw;height:100%;flex:0 0 100vw;scroll-snap-align:center;object-fit:contain;} + .lb-x{position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;border-radius:50%; + border:1px solid rgba(246,241,231,.4);background:rgba(24,18,14,.5);color:#F6F1E7;font-size:16px;cursor:pointer;} + .lb-n{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(246,241,231,.85); + font-size:12px;letter-spacing:.2em;font-family:ui-monospace,Menlo,monospace;} .placeholder{ aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;color:var(--muted);font-size:12px;letter-spacing:.25em; @@ -113,9 +128,10 @@
{{if .Images}} -