From 2d078033fad4561e16402d6191f6ce1146799544 Mon Sep 17 00:00:00 2001
From: jsasg <735273025@qq.com>
Date: Mon, 13 Apr 2026 15:15:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=82=AC=E6=B5=AE=E5=9B=BE=E5=88=A4=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/index/view/pc/public/header.html  | 33 ++++++++++++++++++++++++++-
 public/static/index/pc/css/header.css |  4 ++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/app/index/view/pc/public/header.html b/app/index/view/pc/public/header.html
index d0135d02..b26c35e5 100644
--- a/app/index/view/pc/public/header.html
+++ b/app/index/view/pc/public/header.html
@@ -174,7 +174,9 @@
                 <a class="header-buy-product-card" target="_self" href="{$ma.link}">
                     <div class="header-buy-product-img">
                         <img class="header-default-img" src="{$ma.image}" alt="{$ma.name}">
+                        {if condition="!empty($ma.hover_image)"}
                         <img class="header-hover-img" src="{$ma.hover_image}" alt="{$ma.name}">
+                        {/if}
                     </div>
                     <div class="header-buy-product-title">{$ma.name}</div>
                 </a>
@@ -187,7 +189,37 @@
 <div style="width: 100vw;height: 64px;"></div>
 <script>
 
+    // 获取所有包含商品卡片的元素
+    const productCards = document.querySelectorAll('.header-buy-product-card');
 
+    productCards.forEach(card => {
+            // 获取卡片内的图片容器和两张图片
+            const imgContainer = card.querySelector('.header-buy-product-img');
+            const defaultImg = imgContainer?.querySelector('.header-default-img');
+            const hoverImg = imgContainer?.querySelector('.header-hover-img');
+            
+            // 检查悬浮图是否存在（因为HTML中用了if判断，所以可能有也可能没有这个元素）
+            const hasHoverImg = hoverImg !== null;
+            
+            // 如果没有悬浮图，不需要任何交互，直接返回
+            if (!hasHoverImg) return;
+            
+            // 初始状态确保普通图显示，悬浮图隐藏
+            defaultImg.style.opacity = '1';
+            hoverImg.style.opacity = '0';
+            
+            // 鼠标移入事件：显示悬浮图，隐藏普通图
+            card.addEventListener('mouseenter', () => {
+                defaultImg.style.opacity = '0';
+                hoverImg.style.opacity = '1';
+            });
+            
+            // 鼠标移出事件：恢复普通图，隐藏悬浮图
+            card.addEventListener('mouseleave', () => {
+                defaultImg.style.opacity = '1';
+                hoverImg.style.opacity = '0';
+            });
+    });
     //产品列表在hover复位tabs选择
     const productNavContainer = document.querySelector('.header-nav-item:first-child');
 
@@ -402,7 +434,6 @@
     if (buyWrapper && buyDropdown) {
         buyWrapper.addEventListener('click', () =>
         {
-            console.log('123232323')
             buyDropdown.classList.add('show');
         });
     }
diff --git a/public/static/index/pc/css/header.css b/public/static/index/pc/css/header.css
index b75f054e..712406ad 100644
--- a/public/static/index/pc/css/header.css
+++ b/public/static/index/pc/css/header.css
@@ -900,13 +900,13 @@ a {
 }
 
 /* 鼠标悬停时：显示悬浮图，隐藏普通图 */
-.header-buy-product-card:hover .header-buy-product-img .header-default-img {
+/* .header-buy-product-card:hover .header-buy-product-img .header-default-img {
     opacity: 0;
 }
 
 .header-buy-product-card:hover .header-buy-product-img .header-hover-img {
     opacity: 1;
-}
+} */
 
 /* 产品标题样式：不加粗，字体大小16px，超出一行显示省略号 */
 .header-buy-product-title {