洛天依佑我成功秒掉Medium-Zoom 实例

Signed-off-by: 本新同学 <yuanbenxin@outlook.com>

Author: yuanbenxin

docs/.vitepress/theme/components/Donate.vue

@@ -5,11 +5,11 @@
 
     <div class="qrcode-container">
       <div class="qrcode-wrapper">
-        <img class="qrcode" src="/wechat.png" alt="微信捐赠">
+        <img class="qrcode zoomable" src="/wechat.png" alt="微信捐赠">
         <div class="tip">微信扫码捐赠</div>
       </div>
       <div class="qrcode-wrapper">
-        <img class="qrcode" src="/alipay.png" alt="支付宝捐赠">
+        <img class="qrcode zoomable" src="/alipay.png" alt="支付宝捐赠">
         <div class="tip">支付宝扫码捐赠</div>
       </div>
     </div>
@@ -22,11 +22,11 @@
 import { onMounted } from 'vue'
 
 onMounted(() => {
-  // ===== 1. 在 DOM 加载后把所有图片的点击事件解绑 =====
-  document.querySelectorAll('img').forEach(img => {
-    const clone = img.cloneNode(true)
-    img.replaceWith(clone)
-  })
+  // ===== 1. 卸载 Medium-Zoom =====
+  if (window.mediumZoom) {
+    window.mediumZoom.detach()
+    window.mediumZoom = null
+  }
 
   // ===== 2. 自定义二维码点击放大 =====
   const imgs = document.querySelectorAll('.qrcode-wrapper img.zoomable')
@@ -39,12 +39,11 @@ onMounted(() => {
       const modal = document.createElement('div')
       modal.className = 'modal-card'
 
-      // ==== 统一放大尺寸，保证两张图视觉一致 ====
-      const fixedWidth = 320
-      const fixedHeight = 320
+      // 统一放大尺寸
+      const fixedSize = 320
 
       modal.innerHTML = `
-        <img src="${img.src}" style="width: ${fixedWidth}px; height: ${fixedHeight}px; object-fit: contain;">
+        <img src="${img.src}" style="width: ${fixedSize}px; height: ${fixedSize}px; object-fit: contain;">
         <div class="modal-title">SecRandom团队再次感谢您的支持</div>
         <div class="modal-subtitle">点击周围空白关闭</div>
       `
@@ -62,14 +61,6 @@ onMounted(() => {
 })
 </script>
 
-<template>
-  <div>
-    <img src="/img1.png" class="zoomable" style="width: 300px;" />
-    <img src="/img2.png" class="zoomable" style="width: 200px;" />
-  </div>
-</template>
-
-
 <style scoped>
 .donate-container {
   display: flex;
@@ -85,110 +76,49 @@ onMounted(() => {
   margin: 40px 0;
 }
 
-h1 {
-  font-size: 2.8rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin: 0 0 20px 0;
-  text-align: center;
-}
-
-p {
-  font-size: 1.4rem;
-  color: var(--vp-c-text-1);
-  text-align: center;
-  margin: 0 0 30px 0;
-}
-
-.thanks {
-  margin-top: 25px;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-1);
-}
-
-.qrcode-container {
-  display: flex;
-  gap: 30px;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.qrcode-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: var(--vp-c-bg-alt);
-  backdrop-filter: blur(15px);
-  border-radius: 20px;
-  padding: 15px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.qrcode-wrapper:hover {
-  transform: scale(1.05);
-  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
-}
+h1 { font-size: 2.8rem; font-weight: 600; color: var(--vp-c-text-1); margin:0 0 20px 0; text-align:center; }
+p { font-size: 1.4rem; color: var(--vp-c-text-1); text-align:center; margin:0 0 30px 0; }
+.thanks { margin-top:25px; font-size:0.9rem; color: var(--vp-c-text-1); }
 
-.qrcode {
-  width: 140px;
-  height: 140px;
-  border-radius: 16px;
-  margin-bottom: 10px;
-  object-fit: cover;
-}
+.qrcode-container { display:flex; gap:30px; flex-wrap:wrap; justify-content:center; }
+.qrcode-wrapper { display:flex; flex-direction:column; align-items:center; background: var(--vp-c-bg-alt); backdrop-filter: blur(15px); border-radius:20px; padding:15px; box-shadow:0 4px 20px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
+.qrcode-wrapper:hover { transform: scale(1.05); box-shadow: 0 8px 28px rgba(0,0,0,0.15); }
 
-.tip {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-1);
-}
+.qrcode { width:140px; height:140px; border-radius:16px; margin-bottom:10px; object-fit:cover; }
+.tip { font-size:0.9rem; color: var(--vp-c-text-1); }
 
 @media (max-width: 768px) {
-  .donate-container { padding: 30px 20px; }
-  .qrcode-container { gap: 20px; }
-  .qrcode { width: 110px; height: 110px; }
-} 
+  .donate-container { padding:30px 20px; }
+  .qrcode-container { gap:20px; }
+  .qrcode { width:110px; height:110px; }
+}
 </style>
 
-<!-- 弹窗全局样式 -->
 <style>
+/* 弹窗全局样式 */
 .modal-overlay {
   position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.45);
-  z-index: 9999;
+  inset:0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background: rgba(0,0,0,0.45);
+  z-index:9999;
 }
 
 .modal-card {
-  background: var(--vp-c-bg, #fff);
-  border-radius: 20px;
-  padding: 16px;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
-  max-width: 90vw;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.modal-card img {
-  display: block;
-  border-radius: 12px;
-}
-
-.modal-title {
-  margin-top: 12px;
-  font-weight: 600;
-  text-align: center;
+  background: var(--vp-c-bg,#fff);
+  border-radius:20px;
+  padding:16px;
+  box-shadow:0 20px 60px rgba(0,0,0,0.25);
+  max-width:90vw;
+  max-height:90vh;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
 }
 
-.modal-subtitle {
-  margin-top: 6px;
-  font-size: 12px;
-  opacity: .7;
-  text-align: center;
-}
+.modal-card img { display:block; border-radius:12px; }
+.modal-title { margin-top:12px; font-weight:600; text-align:center; }
+.modal-subtitle { margin-top:6px; font-size:12px; opacity:.7; text-align:center; }
 </style>