后谷问题修改

src/pages/HogoodCoffee/App.js

@@ -174,16 +174,23 @@ export default class App {
         // 获取当前锚点
         const currentHash = window.location.hash;
         // 遍历所有菜单项
-        menuItems.forEach(item => {
-            // 移除所有菜单项的 menuClicked 类
-            item.classList.remove('menuClicked');
-            // 如果当前菜单项的 href 与当前锚点匹配，则添加 menuClicked 类
-            const link = item.querySelector('a').getAttribute('href');
-            // 如果当前菜单项的 href 与当前锚点匹配，则添加 menuClicked 类
-            if (link === `./HogoodCoffee.html${currentHash}`) {
-                item.classList.add('menuClicked');
-            }
-        });
+        if (!currentHash) {
+            // 移除所有菜单项的选中状态
+            menuItems.forEach(item => item.classList.remove('menuClicked'));
+            // 给第一个菜单项添加选中状态
+            menuItems[0].classList.add('menuClicked');
+        } else {
+            // 遍历所有菜单项
+            menuItems.forEach(item => {
+                item.classList.remove('menuClicked');
+                // 获取当前菜单项的 href
+                const link = item.querySelector('a').getAttribute('href');
+                // 如果当前菜单项的 href 与当前锚点匹配，则添加 menuClicked 类
+                if (link === `./HogoodCoffee.html${currentHash}`) {
+                    item.classList.add('menuClicked');
+                }
+            });
+        }
         // 监听 hashchange 事件，当锚点变化时更新菜单状态
         window.addEventListener('hashchange', this.updateMenu);
     }
@@ -211,7 +218,7 @@ export default class App {
             } catch (error) { }
         }
         // 添加滚动事件监听器
-        window.addEventListener('scroll', updateScrollChange);
+        // window.addEventListener('scroll', updateScrollChange);
     }
 
 

src/pages/HogoodCoffee/index.html

@@ -105,12 +105,12 @@
                     Shenzhen,
                     with e-commerce channels covering Tmall、Taobao、JD、Pinduoduo、Alibaba and Douyin online
                     marketplaces.</p>
-                <div class="flexBox">
+                <div class="flexBox" style="margin-bottom: 0;">
                     <div class="p5">Internationally, the products are exported to more than 20 countries and
                         regions including the UK, USA, Russia, South Korea, Singapore, and Japan.
                     </div>
                     <div style="padding-right: 40px;">
-                        <div class="p4">>20</div>
+                        <div class="p4">><span>20</span></div>
                         <div class="p6">countries and regions</div>
                     </div>
                 </div>
@@ -156,7 +156,7 @@
         </div>
         <div class="wow domInUp banner" id="m3">
             <div class="gradientBg"></div>
-            <div class="wow fadeInUp title">Product Series</div>
+            <div class="wow fadeInUp title">Development History</div>
 
             <div class="swiper bannerSwiper">
                 <div class="swiper-wrapper">

src/pages/HogoodCoffee/index.less

@@ -8,7 +8,7 @@
     background-color: #fff;
     .headerPC {
         height: 120px;
-        box-shadow: 0px 1px 1px 0px #00000040;
+        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.15);
         padding: 0 114px;
     }
 
@@ -111,13 +111,18 @@
                 width: 380px;
             }
             .p4{
-                font-size: 51px;
+                font-size: 46px;
                 font-weight: bold;
                 text-align: center;
-                font-family: DIN, DIN;
+                font-family: "思源";
+                padding-right: 25px;
+                span{
+                    font-family: DIN, DIN;
+                }
             }
             .p5{
                 width: 898px;
+                line-height: 50px;
             }
 
             .p6{
@@ -133,7 +138,7 @@
             color: #000000;
             text-align: center;
             font-family: 'CrimsonTextBold';
-            padding: 90px 0 50px 0;
+            padding: 140px 0 50px 0;
         }
 
         .atlasCon {
@@ -332,6 +337,7 @@ p{
         &:hover {
             color: #fff;
             background: #4D048C;
+            border-color: #4D048C;
         }
     }
 
@@ -397,6 +403,7 @@ p{
         // align-items: center;
         // justify-content: center;
         cursor: pointer;
+
         .swiper-title {
             width: 80px;
             height: 80px;
@@ -407,6 +414,8 @@ p{
             align-items: center;
             justify-content: center;
             position: relative;
+            font-family: DIN, DIN;
+
             .pop{
                 // display: none;
                 width: 725px;
@@ -414,7 +423,7 @@ p{
                 background-color: #4D048C;
                 color: #fff;
                 line-height: 1.5;
-                padding: 20px 10px;
+                padding: 20px 20px;
                 border-radius: 15px;
                 position: absolute;
                 left: -328.5px;
@@ -424,6 +433,8 @@ p{
                 opacity: 0;
                 visibility: hidden; /* 使元素不可见 */
                 transition: opacity .2s linear, visibility .2s linear; /* 添加过渡效果 */
+                font-family: "微软雅黑";
+                
                 &::after{
                     content: '';
                     position: absolute;
@@ -436,6 +447,7 @@ p{
                 }
                 span{
                     font-weight: 700;
+                    font-family: DIN, DIN;
                 }
             }
         }
@@ -471,7 +483,6 @@ p{
         position: absolute;
         bottom: 0;
         left: 0;
-        font-weight: bold;
         font-size: 24px;
         color: #FFFFFF;
         text-align: center;