Browse Source

后谷问题修改

master
suomingxiang 1 day ago
parent
commit
75f0876d16

+ 18
- 11
src/pages/HogoodCoffee/App.js View File

174
         // 获取当前锚点
174
         // 获取当前锚点
175
         const currentHash = window.location.hash;
175
         const currentHash = window.location.hash;
176
         // 遍历所有菜单项
176
         // 遍历所有菜单项
177
-        menuItems.forEach(item => {
178
-            // 移除所有菜单项的 menuClicked 类
179
-            item.classList.remove('menuClicked');
180
-            // 如果当前菜单项的 href 与当前锚点匹配,则添加 menuClicked 类
181
-            const link = item.querySelector('a').getAttribute('href');
182
-            // 如果当前菜单项的 href 与当前锚点匹配,则添加 menuClicked 类
183
-            if (link === `./HogoodCoffee.html${currentHash}`) {
184
-                item.classList.add('menuClicked');
185
-            }
186
-        });
177
+        if (!currentHash) {
178
+            // 移除所有菜单项的选中状态
179
+            menuItems.forEach(item => item.classList.remove('menuClicked'));
180
+            // 给第一个菜单项添加选中状态
181
+            menuItems[0].classList.add('menuClicked');
182
+        } else {
183
+            // 遍历所有菜单项
184
+            menuItems.forEach(item => {
185
+                item.classList.remove('menuClicked');
186
+                // 获取当前菜单项的 href
187
+                const link = item.querySelector('a').getAttribute('href');
188
+                // 如果当前菜单项的 href 与当前锚点匹配,则添加 menuClicked 类
189
+                if (link === `./HogoodCoffee.html${currentHash}`) {
190
+                    item.classList.add('menuClicked');
191
+                }
192
+            });
193
+        }
187
         // 监听 hashchange 事件,当锚点变化时更新菜单状态
194
         // 监听 hashchange 事件,当锚点变化时更新菜单状态
188
         window.addEventListener('hashchange', this.updateMenu);
195
         window.addEventListener('hashchange', this.updateMenu);
189
     }
196
     }
211
             } catch (error) { }
218
             } catch (error) { }
212
         }
219
         }
213
         // 添加滚动事件监听器
220
         // 添加滚动事件监听器
214
-        window.addEventListener('scroll', updateScrollChange);
221
+        // window.addEventListener('scroll', updateScrollChange);
215
     }
222
     }
216
 
223
 
217
 
224
 

+ 3
- 3
src/pages/HogoodCoffee/index.html View File

105
                     Shenzhen,
105
                     Shenzhen,
106
                     with e-commerce channels covering Tmall、Taobao、JD、Pinduoduo、Alibaba and Douyin online
106
                     with e-commerce channels covering Tmall、Taobao、JD、Pinduoduo、Alibaba and Douyin online
107
                     marketplaces.</p>
107
                     marketplaces.</p>
108
-                <div class="flexBox">
108
+                <div class="flexBox" style="margin-bottom: 0;">
109
                     <div class="p5">Internationally, the products are exported to more than 20 countries and
109
                     <div class="p5">Internationally, the products are exported to more than 20 countries and
110
                         regions including the UK, USA, Russia, South Korea, Singapore, and Japan.
110
                         regions including the UK, USA, Russia, South Korea, Singapore, and Japan.
111
                     </div>
111
                     </div>
112
                     <div style="padding-right: 40px;">
112
                     <div style="padding-right: 40px;">
113
-                        <div class="p4">>20</div>
113
+                        <div class="p4">><span>20</span></div>
114
                         <div class="p6">countries and regions</div>
114
                         <div class="p6">countries and regions</div>
115
                     </div>
115
                     </div>
116
                 </div>
116
                 </div>
156
         </div>
156
         </div>
157
         <div class="wow domInUp banner" id="m3">
157
         <div class="wow domInUp banner" id="m3">
158
             <div class="gradientBg"></div>
158
             <div class="gradientBg"></div>
159
-            <div class="wow fadeInUp title">Product Series</div>
159
+            <div class="wow fadeInUp title">Development History</div>
160
 
160
 
161
             <div class="swiper bannerSwiper">
161
             <div class="swiper bannerSwiper">
162
                 <div class="swiper-wrapper">
162
                 <div class="swiper-wrapper">

+ 17
- 6
src/pages/HogoodCoffee/index.less View File

8
     background-color: #fff;
8
     background-color: #fff;
9
     .headerPC {
9
     .headerPC {
10
         height: 120px;
10
         height: 120px;
11
-        box-shadow: 0px 1px 1px 0px #00000040;
11
+        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.15);
12
         padding: 0 114px;
12
         padding: 0 114px;
13
     }
13
     }
14
 
14
 
111
                 width: 380px;
111
                 width: 380px;
112
             }
112
             }
113
             .p4{
113
             .p4{
114
-                font-size: 51px;
114
+                font-size: 46px;
115
                 font-weight: bold;
115
                 font-weight: bold;
116
                 text-align: center;
116
                 text-align: center;
117
-                font-family: DIN, DIN;
117
+                font-family: "思源";
118
+                padding-right: 25px;
119
+                span{
120
+                    font-family: DIN, DIN;
121
+                }
118
             }
122
             }
119
             .p5{
123
             .p5{
120
                 width: 898px;
124
                 width: 898px;
125
+                line-height: 50px;
121
             }
126
             }
122
 
127
 
123
             .p6{
128
             .p6{
133
             color: #000000;
138
             color: #000000;
134
             text-align: center;
139
             text-align: center;
135
             font-family: 'CrimsonTextBold';
140
             font-family: 'CrimsonTextBold';
136
-            padding: 90px 0 50px 0;
141
+            padding: 140px 0 50px 0;
137
         }
142
         }
138
 
143
 
139
         .atlasCon {
144
         .atlasCon {
332
         &:hover {
337
         &:hover {
333
             color: #fff;
338
             color: #fff;
334
             background: #4D048C;
339
             background: #4D048C;
340
+            border-color: #4D048C;
335
         }
341
         }
336
     }
342
     }
337
 
343
 
397
         // align-items: center;
403
         // align-items: center;
398
         // justify-content: center;
404
         // justify-content: center;
399
         cursor: pointer;
405
         cursor: pointer;
406
+
400
         .swiper-title {
407
         .swiper-title {
401
             width: 80px;
408
             width: 80px;
402
             height: 80px;
409
             height: 80px;
407
             align-items: center;
414
             align-items: center;
408
             justify-content: center;
415
             justify-content: center;
409
             position: relative;
416
             position: relative;
417
+            font-family: DIN, DIN;
418
+
410
             .pop{
419
             .pop{
411
                 // display: none;
420
                 // display: none;
412
                 width: 725px;
421
                 width: 725px;
414
                 background-color: #4D048C;
423
                 background-color: #4D048C;
415
                 color: #fff;
424
                 color: #fff;
416
                 line-height: 1.5;
425
                 line-height: 1.5;
417
-                padding: 20px 10px;
426
+                padding: 20px 20px;
418
                 border-radius: 15px;
427
                 border-radius: 15px;
419
                 position: absolute;
428
                 position: absolute;
420
                 left: -328.5px;
429
                 left: -328.5px;
424
                 opacity: 0;
433
                 opacity: 0;
425
                 visibility: hidden; /* 使元素不可见 */
434
                 visibility: hidden; /* 使元素不可见 */
426
                 transition: opacity .2s linear, visibility .2s linear; /* 添加过渡效果 */
435
                 transition: opacity .2s linear, visibility .2s linear; /* 添加过渡效果 */
436
+                font-family: "微软雅黑";
437
+                
427
                 &::after{
438
                 &::after{
428
                     content: '';
439
                     content: '';
429
                     position: absolute;
440
                     position: absolute;
436
                 }
447
                 }
437
                 span{
448
                 span{
438
                     font-weight: 700;
449
                     font-weight: 700;
450
+                    font-family: DIN, DIN;
439
                 }
451
                 }
440
             }
452
             }
441
         }
453
         }
471
         position: absolute;
483
         position: absolute;
472
         bottom: 0;
484
         bottom: 0;
473
         left: 0;
485
         left: 0;
474
-        font-weight: bold;
475
         font-size: 24px;
486
         font-size: 24px;
476
         color: #FFFFFF;
487
         color: #FFFFFF;
477
         text-align: center;
488
         text-align: center;

Loading…
Cancel
Save