Bladeren bron

fix: add hover zoom to source dish images

KenZ1117 5 dagen geleden
bovenliggende
commit
0875296fae
2 gewijzigde bestanden met toevoegingen van 3 en 0 verwijderingen
  1. 1 0
      public/gen.js
  2. 2 0
      public/style.css

+ 1 - 0
public/gen.js

@@ -510,6 +510,7 @@ function buildDishPanel(shop, dish, shopNameInput, context) {
   const frames = el('div', 'dish-work-frames');
   const original = el('figure', 'dish-frame');
   const originalImage = el('img'); originalImage.src = dish.url; originalImage.alt = `${dish.name} 原图`; originalImage.loading = 'lazy';
+  attachHoverZoom(originalImage, dish.url, false);
   original.append(originalImage, el('figcaption', '', '原图'));
   const resultFrame = el('figure', 'dish-frame result');
   const resultArea = el('div', 'dish-result-area');

+ 2 - 0
public/style.css

@@ -589,6 +589,8 @@ main.content { padding: var(--page-padding-y) var(--page-padding-x) var(--page-p
 .dish-work-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
 .dish-frame { margin: 0; min-width: 0; }
 .dish-frame img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; border: 1px solid var(--border-light); display: block; }
+.dish-frame > img { cursor: zoom-in; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
+.dish-frame > img:hover { transform: scale(1.03); box-shadow: 0 10px 24px rgba(31,27,24,.12); z-index: 1; }
 .dish-frame figcaption { margin-top: 4px; color: var(--text-3); font-size: 10.5px; text-align: center; }
 .dish-frame .dish-result-area { min-height: 104px; margin-top: 0; overflow: hidden; background: transparent; border: 0; border-radius: 0; }
 .dish-frame .result-preview { width: 100%; }