修改

dev/static/font/cavan.css

@@ -10,4 +10,8 @@
 @font-face {
     font-family: 'CrimsonTextBold';
     src: url('./CrimsonText-Bold-2.ttf') format('truetype');
+}
+@font-face {
+    font-family: 'DINBOLD';
+    src: url('./din-bold.ttf') format('truetype');
 }

src/pages/HogoodCoffee/App.js

@@ -39,10 +39,45 @@ export default class App {
         //横屏滚动数组值
         this.busGrouds = [];
 
+        document.addEventListener('DOMContentLoaded', function () {
+            const menuItems = document.querySelectorAll('.menuOne');
+            const sections = document.querySelectorAll('div[id="m1"], div[id="m2"], div[id="m3"], div[id="m4"]'); // 获取所有带有 id 的 div
+
+            function updateMenu() {
+                let scrollPosition = window.scrollY; // 获取当前滚动位置
+                let foundActive = false; // 标记是否找到当前活动的菜单项
+                sections.forEach(section => {
+                    const sectionTop = section.offsetTop; // 获取当前 section 的顶部位置
+                    const sectionHeight = section.offsetHeight; // 获取当前 section 的高度
+                    // 检查当前 section 是否在视口内
+                    if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
+                        // 移除所有菜单项的选中状态
+                        menuItems.forEach(item => item.classList.remove('menuClicked'));
+                        // 找到对应的菜单项并添加选中状态
+                        const correspondingMenuItem = Array.from(menuItems).find(item => {
+                            return item.querySelector('a').getAttribute('href') === `./HogoodCoffee.html#${section.id}`;
+                        });
+                        if (correspondingMenuItem) {
+                            correspondingMenuItem.classList.add('menuClicked');
+                        }
+                        foundActive = true; // 找到当前活动的菜单项
+                    }
+                });
+                // 如果没有找到活动的菜单项，默认选中第一个菜单项
+                if (!foundActive) {
+                    menuItems.forEach(item => item.classList.remove('menuClicked')); // 移除所有菜单项的选中状态
+                    menuItems[0].classList.add('menuClicked'); // 默认选中第一个菜单项
+                }
+            }
+            // 监听滚动事件
+            window.addEventListener('scroll', updateMenu);
+            // 初始化菜单状态
+            updateMenu(); // 页面加载时调用一次
+        });
         this.headerMenu();
         this.banner();
         this.init();
-        this.updateMenu()
+        // this.updateMenu()
     }
     banner() {
         // let isMob=this.isMobile;
@@ -169,31 +204,31 @@ export default class App {
 
     // 获取所有菜单项
     // 函数用于更新菜单状态
-    updateMenu() {
-        const menuItems = document.querySelectorAll('.menuOne');
-        // 获取当前锚点
-        const currentHash = window.location.hash;
-        // 遍历所有菜单项
-        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);
-    }
+    // updateMenu() {
+    //     const menuItems = document.querySelectorAll('.menuOne');
+    //     // 获取当前锚点
+    //     const currentHash = window.location.hash;
+    //     // 遍历所有菜单项
+    //     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);
+    // }
 
     headerMenu() {
         let scrollyOld = 0;

src/pages/HogoodCoffee/index.html

@@ -84,11 +84,11 @@
                             powder,</div>
                         <div class="flexBox">
                             <div class="p3">the Company currently has an annual production capacity of</div>
-                            <div class="p4">13,000 tons</div>
+                            <div class="p4"><span>13,000 tons</span> </div>
                         </div>
                         <div class="flexBox">
                             <div class="p3">by 2025 capacity expansion will be completed</div>
-                            <div class="p4">10,000 tons</div>
+                            <div class="p4"><span>10,000 tons</span> </div>
                         </div>
                     </div>
                     <img src="./static/images/hgkf/cont.png" alt="">

src/pages/HogoodCoffee/index.less

@@ -111,13 +111,13 @@
                 width: 380px;
             }
             .p4{
-                font-size: 46px;
+                font-size: 50px;
                 font-weight: bold;
                 text-align: center;
                 font-family: "思源";
                 padding-right: 25px;
                 span{
-                    font-family: DIN, DIN;
+                    font-family: "DINBOLD";
                 }
             }
             .p5{
@@ -493,20 +493,56 @@ p{
 
 
 @media screen and (min-width: 1300px) and (max-width: 1600px) {
-    .banner {
-        // .slideCon {
-        //     padding: 180px 10px 0px;
-        //     box-sizing: border-box;
-        // }
+    .hg-header{
+        .headerPC{
+            padding: 0 50px;
+        }
+        .logo{
+            transform: scale(0.5);
+        }
+        .menu {
+            &>div {
+                &>a {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+    .main{
+        .chart{
+            background-size: 100% auto;
+            .tbGif{
+                width: 80%;
+                height: auto;
+            }
+        }
     }
 }
 
 @media screen and (min-width: 801px) and (max-width: 1300px) {
-    .banner {
-        // .slideCon {
-        //     padding: 120px 10px 0px;
-        //     box-sizing: border-box;
-        // }
+    .hg-header{
+        .headerPC{
+            padding: 0 50px;
+        }
+        .logo{
+            transform: scale(0.5);
+        }
+        .menu {
+            &>div {
+                &>a {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+    .main{
+        .chart{
+            background-size: 100% auto;
+            .tbGif{
+                width: 80%;
+                height: auto;
+            }
+        }
     }
 
 }