xinyouhe/hesu-JT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整

Browse Source
This commit is contained in:
浅念
2026-09-02 18:35:45 +08:00
parent 9d9e57d7f4
commit ac58ebb32c
36 changed files with 253 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
about-us-v3.html
+4 -4
View File
@@ -44,19 +44,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>
about-us.html
+4 -4
View File
@@ -43,19 +43,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>
after-sales.html
+4 -4
View File
@@ -43,19 +43,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>
auto-export.html
+6 -6
View File
@@ -43,19 +43,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>
@@ -99,7 +99,7 @@
<div class="bp-hero__veil" aria-hidden="true"></div>
<div class="bp-hero__copy container">
<h1 class="bp-hero__title" data-reveal>HESU AUTO</h1>
<h1 class="bp-hero__titles" data-reveal><img src="image/home/hesu.png" alt="HESU" /> AUTO</h1>
<p class="bp-hero__sub" data-reveal>Serving Global Market Demand</p>
<a class="btn btn-explore" target="_blank" href="https://www.hesucar.com/" data-reveal>Explore More</a>
</div>
@@ -136,7 +136,7 @@
</div>
<div class="bp-intro__media" data-reveal>
<img width="504" height="565" loading="lazy" class="bp-intro__img" src="image/carexport/Rectangle 124.jpg" alt="HESU vehicle inventory" />
<img width="504" height="565" loading="lazy" class="bp-intro__img" src="image/carexport/Business-i.jpg" alt="HESU vehicle inventory" />
</div>
</div>
</section>
building-materials.html
+4 -4
View File
@@ -43,19 +43,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>
contact.html
+4 -4
View File
@@ -42,19 +42,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>
css/business.css
+16
View File
@@ -87,6 +87,22 @@ body.is-bp { background: #ffffff; color: var(--text-dark); font-family: var(--fo
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.bp-hero__titles {
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: 0.96;
letter-spacing: 0.1em;
background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.bp-hero__titles img {
width: 350px;
margin-right: 20px;
}
.bp-hero__sub {
margin-top: 22px;
font-family: var(--font-display);
css/style.css
+54 -8
View File
@@ -337,6 +337,9 @@ img { max-width: 100%; display: block; }
background-size: cover;
background-position: center;
}
.hero-logo{
width: 40%;
}
.hero-bg::before { display: none; } /* star field placeholder removed */
.hero-content {
@@ -465,13 +468,19 @@ img { max-width: 100%; display: block; }
============================================================ */
.presence { padding: 96px 0; }
/* bg image + SVG overlay share one box and the 1219 × 661 map coordinate space */
/* bg image + SVG overlay share one box and the 1219 × 660 map coordinate space.
isolation + the JS-painted backdrop (an exact copy of .page-content's bg,
aligned pixel-for-pixel) give the blended img a LOCAL backdrop — Chrome
captures cross-element blend backdrops as the element enters the viewport,
and that capture lags a frame or two (the map flashes its intrinsic colors).
With the backdrop inside the group there is nothing to capture late. */
.map-wrap {
position: relative;
width: 100%;
aspect-ratio: 1219 / 661;
aspect-ratio: 1219 / 660;
overflow: hidden;
margin: 8px auto 24px;
isolation: isolate;
}
.map-bg {
position: absolute;
@@ -480,7 +489,25 @@ img { max-width: 100%; display: block; }
width: 100%;
height: 100%;
object-fit: contain;
/* the SVG's internal color-dodge/multiply blends can't reach past the <img>
boundary — blend the whole map against the section background instead so
the dots tint with it (Figma behaviour). Dark backgrounds only: on light
surfaces color-dodge washes the map out to white. */
mix-blend-mode: color-dodge;
/* hidden until the blend backdrop (page bg image) has loaded — color-dodge
over an unloaded near-white backdrop washes the map out. Fading the img
itself keeps the blend correct (an ancestor opacity<1 would isolate the
group and pop the color in at animation end). main.js adds .ready. */
opacity: 0;
transition: opacity .7s var(--ease);
}
/* !important so it also overrides the inline no-FOUC guard (style="opacity:0")
and the JS fade's final inline value — the fade itself is JS-driven
(main.js) because CSS animations/transitions lose to !important in the
cascade and would snap instead of fading. */
.map-bg.ready { opacity: 1 !important; }
/* keep the slide-up entrance but drop the fade — see .map-bg note above */
.map-wrap.reveal { opacity: 1; transform: translateY(28px); }
.map-overlay {
position: absolute;
inset: 0;
@@ -550,6 +577,21 @@ img { max-width: 100%; display: block; }
.map-wrap .location.active .halo { animation: pulse .9s .62s ease-out infinite; }
.map-wrap .location.active .halo2 { animation-delay: 1.07s; }
/* minor markers (China domestic network) — same choreography, yellow & smaller */
.map-wrap .location--minor .label { font-size: 11px; letter-spacing: .5px; }
.map-wrap .location--minor .line { stroke: #FFD100; stroke-width: 1.2; }
.map-wrap .location--minor .dot { fill: #FFD100; }
.map-wrap .location--minor .halo { stroke: #FFD100; stroke-width: 1; }
.map-wrap .location--minor.active .dot {
/* re-declared to swap the breathe keyframe for the smaller radius */
animation: dotIn .32s .5s cubic-bezier(.2,1.5,.35,1) both,
breatheRy 3.4s 1s ease-in-out infinite;
}
@keyframes breatheRy {
0%, 100% { r: 5px; }
50% { r: 5.7px; }
}
@keyframes labelIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
@@ -665,7 +707,7 @@ img { max-width: 100%; display: block; }
.partner-dots {
position: absolute;
right: 18px; bottom: 18px;
left: 18px; bottom: 18px;
display: flex; align-items: center; gap: 8px;
z-index: 3;
}
@@ -841,19 +883,23 @@ img { max-width: 100%; display: block; }
.ph-warehouse2 { background: url(../image/home/Partner2.jpg) center/cover no-repeat; }
.ph-warehouse3 { background: url(../image/home/Partner3.jpg) center/cover no-repeat; }
.ph-logistics2 { background: url(../image/home/Global-Logistics.jpg) center/cover no-repeat; }
.ph-exportcars { background: url(../image/home/Auto-Export.jpg) center/cover no-repeat; }
.ph-aboutlb1 { background: url(../image/about-us/lb1.jpg) center/cover no-repeat; }
.ph-aboutlb2 { background: url(../image/about-us/lb2.jpg) center/cover no-repeat; }
.ph-aboutlb3 { background: url(../image/about-us/lb3.jpg) center/cover no-repeat; }
.ph-aboutlb4 { background: url(../image/about-us/lb4.jpg) center/cover no-repeat; }
.ph-fair { background: url(../image/home/new1.png) center/cover no-repeat; }
.ph-dubai { background: url(../image/home/new2.png) center/cover no-repeat; }
.ph-factory { background: url(../image/home/new3.png) center/cover no-repeat; }
.ph-visit { background: url(../image/home/new4.png) center/cover no-repeat; }
.ph-fair { background: url(../image/home/new1.jpg) center/cover no-repeat; }
.ph-dubai { background: url(../image/home/new2.jpg) center/cover no-repeat; }
.ph-factory { background: url(../image/home/new3.jpg) center/cover no-repeat; }
.ph-visit { background: url(../image/home/new4.jpg) center/cover no-repeat; }
.ph-service1 { background: url(../image/home/Service1.jpg) center/cover no-repeat; }
.ph-service2 { background: url(../image/home/Service2.jpg) center/cover no-repeat; }
.ph-service3 { background: url(../image/home/Service3.jpg) center/cover no-repeat; }
.ph-service4 { background: url(../image/home/Service4.jpg) center/cover no-repeat; }
.ph-select1{ background: url(../image/Select1.jpg) center/cover no-repeat; }
.ph-select2{ background: url(../image/Select2.jpg) center/cover no-repeat; }
.ph-select3{ background: url(../image/Select3.jpg) center/cover no-repeat; }
.ph-select4{ background: url(../image/Select4.jpg) center/cover no-repeat; }
/* ============================================================
SCROLL REVEAL
============================================================ */
development-history.html
+4 -4
View File
@@ -43,19 +43,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>
global-logistics.html
+4 -4
View File
@@ -43,19 +43,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>
global-presence.html
+4 -4
View File
@@ -43,19 +43,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>
image/Auto-Export.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

image/about-us/hscomp.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 420 KiB

After

Width:  |  Height:  |  Size: 969 KiB

image/carexport/Rectangle 124.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 324 KiB

image/carexport/export-bg.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 816 KiB

After

Width:  |  Height:  |  Size: 932 KiB

image/home/Businesses1.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 310 KiB

After

Width:  |  Height:  |  Size: 941 KiB

image/home/Businesses2.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 165 KiB

After

Width:  |  Height:  |  Size: 626 KiB

image/home/Businesses3.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 244 KiB

After

Width:  |  Height:  |  Size: 956 KiB

image/home/Businesses4.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 296 KiB

After

Width:  |  Height:  |  Size: 856 KiB

image/home/Partner.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 247 KiB

After

Width:  |  Height:  |  Size: 496 KiB

image/home/Partner1.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 323 KiB

After

Width:  |  Height:  |  Size: 727 KiB

image/home/Partner2.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 402 KiB

After

Width:  |  Height:  |  Size: 746 KiB

image/home/Partner3.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 315 KiB

After

Width:  |  Height:  |  Size: 931 KiB

image/home/Service1.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 888 KiB

image/home/Service2.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 166 KiB

After

Width:  |  Height:  |  Size: 967 KiB

image/home/Service3.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 154 KiB

After

Width:  |  Height:  |  Size: 906 KiB

image/home/Service4.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 873 KiB

image/home/banner.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 887 KiB

After

Width:  |  Height:  |  Size: 913 KiB

image/home/new1.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 160 KiB

image/home/new2.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 176 KiB

image/home/new3.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 197 KiB

image/home/new4.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 145 KiB

index.html
+78 -32
View File
@@ -14,8 +14,8 @@
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="css/style.css?v=20260823b" />
<link rel="stylesheet" href="css/mobile.css?v=20260823b" />
<link rel="stylesheet" href="css/style.css?v=20260902d" />
<link rel="stylesheet" href="css/mobile.css?v=20260902d" />
</head>
<body>
@@ -46,19 +46,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>
@@ -102,7 +102,8 @@
<div class="hero-bg" aria-hidden="true">
</div>
<div class="hero-content container">
<h1 class="hero-title">HESU</h1>
<!-- <h1 class="hero-title">HESU</h1> -->
<img class="hero-logo" src="image/home/hesu.png" alt="HESU" />
<p class="hero-sub">GLOBAL ONE-STOP TRADE PARTNER</p>
<p class="hero-tag">Cross-border Supply Chain &amp; Worldwide Distribution</p>
<a href="#business" class="btn btn-explore">Explore More</a>
@@ -184,49 +185,94 @@
<a href="global-presence.html" class="btn btn-outline">Learn More</a>
</header>
<!-- Animated world map — bg image and SVG overlay share the 1219 × 661 coordinate space -->
<!-- Animated world map — Group173.svg bg and SVG overlay share the 1219 × 660
coordinate space (marker positions taken 1:1 from the design file) -->
<div class="map-wrap reveal" aria-hidden="true">
<img class="map-bg" width="1219" height="661" loading="lazy" src="image/home/Frame 119.png" alt="Global Presence Map">
<svg class="map-overlay" viewBox="0 0 1219 661" preserveAspectRatio="xMidYMid meet">
<img class="map-bg" style="opacity:0" width="1219" height="660" src="image/home/map.svg" alt="Global Presence Map">
<svg class="map-overlay" viewBox="0 0 1219 660" preserveAspectRatio="xMidYMid meet">
<!-- DUBAI -->
<g class="location active" data-name="DUBAI">
<text class="label" x="418" y="107">DUBAI</text>
<path class="line" pathLength="1" d="M418 111 C 580 111, 700 130, 755 169"/>
<circle class="halo" cx="755" cy="169" r="9"/>
<circle class="halo halo2" cx="755" cy="169" r="9"/>
<circle class="dot" cx="755" cy="169" r="7.5"/>
<path class="line" pathLength="1" d="M418 111 C 580 111, 700 130, 754 169"/>
<circle class="halo" cx="754" cy="168.9" r="9"/>
<circle class="halo halo2" cx="754" cy="168.9" r="9"/>
<circle class="dot" cx="754" cy="168.9" r="7.5"/>
</g>
<!-- ABU DHABI -->
<g class="location" data-name="ABU DHABI">
<text class="label" x="414" y="180">ABU DHABI</text>
<path class="line" pathLength="1" d="M414 184 C 590 184, 720 210, 793 263"/>
<circle class="halo" cx="793" cy="263" r="9"/>
<circle class="halo halo2" cx="793" cy="263" r="9"/>
<circle class="dot" cx="793" cy="263" r="7.5"/>
<path class="line" pathLength="1" d="M414 184 C 590 184, 720 210, 792.7 262.9"/>
<circle class="halo" cx="792.7" cy="262.9" r="9"/>
<circle class="halo halo2" cx="792.7" cy="262.9" r="9"/>
<circle class="dot" cx="792.7" cy="262.9" r="7.5"/>
</g>
<!-- ETHIOPIA -->
<g class="location" data-name="ETHIOPIA">
<text class="label" x="418" y="284">ETHIOPIA</text>
<path class="line" pathLength="1" d="M418 288 C 540 288, 640 305, 702 336"/>
<circle class="halo" cx="702" cy="336" r="9"/>
<circle class="halo halo2" cx="702" cy="336" r="9"/>
<circle class="dot" cx="702" cy="336" r="7.5"/>
<path class="line" pathLength="1" d="M418 288 C 540 288, 640 305, 701 336.5"/>
<circle class="halo" cx="701" cy="336.5" r="9"/>
<circle class="halo halo2" cx="701" cy="336.5" r="9"/>
<circle class="dot" cx="701" cy="336.5" r="7.5"/>
</g>
<!-- GHANA -->
<g class="location" data-name="GHANA">
<text class="label" x="420" y="395">GHANA</text>
<path class="line" pathLength="1" d="M420 402 C 485 396, 550 396, 613 401"/>
<circle class="halo" cx="613" cy="401" r="9"/>
<circle class="halo halo2" cx="613" cy="401" r="9"/>
<circle class="dot" cx="613" cy="401" r="7.5"/>
<path class="line" pathLength="1" d="M420 402 C 485 396, 550 396, 611.4 400.9"/>
<circle class="halo" cx="611.4" cy="400.9" r="9"/>
<circle class="halo halo2" cx="611.4" cy="400.9" r="9"/>
<circle class="dot" cx="611.4" cy="400.9" r="7.5"/>
</g>
<!-- RUSSIA -->
<g class="location" data-name="RUSSIA">
<text class="label" x="717" y="20">RUSSIA</text>
<path class="line" pathLength="1" d="M712 26 C 800 26, 880 40, 945 75"/>
<circle class="halo" cx="945" cy="75" r="9"/>
<circle class="halo halo2" cx="945" cy="75" r="9"/>
<circle class="dot" cx="945" cy="75" r="7.5"/>
<text class="label" x="711" y="20">RUSSIA</text>
<path class="line" pathLength="1" d="M711 24 C 800 24, 880 40, 943.7 75.7"/>
<circle class="halo" cx="943.7" cy="75.7" r="9"/>
<circle class="halo halo2" cx="943.7" cy="75.7" r="9"/>
<circle class="dot" cx="943.7" cy="75.7" r="7.5"/>
</g>
<!-- BELARUS -->
<g class="location" data-name="BELARUS">
<text class="label" x="618" y="52">BELARUS</text>
<path class="line" pathLength="1" d="M618 57 C 680 57, 770 85, 833.6 132.1"/>
<circle class="halo" cx="833.6" cy="132.1" r="9"/>
<circle class="halo halo2" cx="833.6" cy="132.1" r="9"/>
<circle class="dot" cx="833.6" cy="132.1" r="7.5"/>
</g>
<!-- China domestic network — minor yellow markers -->
<g class="location location--minor" data-name="BEIJING">
<text class="label" x="1035" y="114">BEIJING</text>
<path class="line" pathLength="1" d="M1019.1 163.4 L1031.7 120.4 H1177"/>
<circle class="halo" cx="1019.1" cy="163.4" r="6"/>
<circle class="halo halo2" cx="1019.1" cy="163.4" r="6"/>
<circle class="dot" cx="1019.1" cy="163.4" r="5"/>
</g>
<g class="location location--minor" data-name="TIANJIN">
<text class="label" x="1050" y="142">TIANJIN</text>
<path class="line" pathLength="1" d="M1026.1 181.5 L1046 147.4 H1201"/>
<circle class="halo" cx="1026.1" cy="181.5" r="6"/>
<circle class="halo halo2" cx="1026.1" cy="181.5" r="6"/>
<circle class="dot" cx="1026.1" cy="181.5" r="5"/>
</g>
<g class="location location--minor" data-name="ZHENGZHOU">
<text class="label" x="1046" y="181">ZHENGZHOU</text>
<path class="line" pathLength="1" d="M1030.4 205.8 L1042.7 186.4 H1201"/>
<circle class="halo" cx="1030.4" cy="205.8" r="6"/>
<circle class="halo halo2" cx="1030.4" cy="205.8" r="6"/>
<circle class="dot" cx="1030.4" cy="205.8" r="5"/>
</g>
<g class="location location--minor" data-name="SHENZHEN">
<text class="label" x="1054" y="236">SHENZHEN</text>
<path class="line" pathLength="1" d="M1025.1 276.5 L1050 241.4 H1166"/>
<circle class="halo" cx="1025.1" cy="276.5" r="6"/>
<circle class="halo halo2" cx="1025.1" cy="276.5" r="6"/>
<circle class="dot" cx="1025.1" cy="276.5" r="5"/>
</g>
<g class="location location--minor" data-name="HONGKONG">
<text class="label" x="1051" y="270">HONGKONG</text>
<path class="line" pathLength="1" d="M1034.1 298.5 L1047.8 275.8 H1156"/>
<circle class="halo" cx="1034.1" cy="298.5" r="6"/>
<circle class="halo halo2" cx="1034.1" cy="298.5" r="6"/>
<circle class="dot" cx="1034.1" cy="298.5" r="5"/>
</g>
</svg>
</div>
@@ -385,6 +431,6 @@
</div>
</footer>
<script src="js/main.js?v=20260821-12"></script>
<script src="js/main.js?v=20260902d"></script>
</body>
</html>
js/main.js
+59
View File
@@ -366,6 +366,65 @@
}
var wrap = document.querySelector('.map-wrap');
// Paint the page's exact background onto the wrap: same image, stretched
// to .page-content's full size, offset by the wrap's position inside it —
// a pixel-perfect local copy. With .map-wrap { isolation: isolate } the
// blended img mixes against THIS instead of the page backdrop, so Chrome
// never has to capture a cross-element backdrop when the map scrolls into
// view (that capture lags a frame and flashes the map's intrinsic colors).
var pc = document.querySelector('.page-content');
if (wrap && pc) {
var syncBackdrop = function () {
var wr = wrap.getBoundingClientRect();
var pr = pc.getBoundingClientRect();
wrap.style.backgroundImage = 'url(image/home-bgs.png)';
wrap.style.backgroundSize = pr.width + 'px ' + pc.offsetHeight + 'px';
wrap.style.backgroundPosition = (pr.left - wr.left) + 'px ' + (pr.top - wr.top) + 'px';
wrap.style.backgroundRepeat = 'no-repeat';
};
syncBackdrop();
var rT2 = null;
window.addEventListener('resize', function () {
clearTimeout(rT2); rT2 = setTimeout(syncBackdrop, 150);
});
}
// Fade the map image in only after the page has fully loaded: the image
// color-dodges against the (locally copied) page background image, and
// over an unloaded near-white backdrop the map washes out — showing it
// early would flash a colorless map before the glow pops in.
var mapImg = wrap ? wrap.querySelector('.map-bg') : null;
if (mapImg) {
// Reveal needs BOTH: the lazy image decoded (it paints a frame or two
// before its mix-blend-mode composite kicks in) AND the page fully
// loaded (color-dodge over an unloaded white backdrop washes out).
// The fade is JS-driven because CSS animations/transitions lose to the
// !important reveal rule in the cascade — this way the un-blended
// first frames stay at near-zero opacity no matter what.
var imgLoaded = mapImg.complete && mapImg.naturalWidth > 0;
var pageLoaded = document.readyState === 'complete';
var tryReveal = function () {
if (!imgLoaded || !pageLoaded) return;
requestAnimationFrame(function () {
requestAnimationFrame(function () {
var t0 = null;
var step = function (t) {
if (t0 === null) t0 = t;
var p = Math.min((t - t0) / 700, 1);
mapImg.style.opacity = p.toFixed(3);
if (p < 1) requestAnimationFrame(step);
else mapImg.classList.add('ready'); // !important locks the final state
};
requestAnimationFrame(step);
});
});
};
if (!imgLoaded) mapImg.addEventListener('load', function () { imgLoaded = true; tryReveal(); }, { once: true });
if (!pageLoaded) window.addEventListener('load', function () { pageLoaded = true; tryReveal(); }, { once: true });
tryReveal();
}
if ('IntersectionObserver' in window && wrap) {
var mo = new IntersectionObserver(function (entries) {
entries[0].isIntersecting ? start() : stop();
news-detail.html
+4 -4
View File
@@ -43,19 +43,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>
news.html
+4 -4
View File
@@ -42,19 +42,19 @@
</div>
<div class="mega-right">
<a class="mega-card" href="auto-export.html">
<div class="mega-card-img ph-auto"></div>
<div class="mega-card-img ph-select1"></div>
<div class="mega-card-text"><h4>Auto Export</h4></div>
</a>
<a class="mega-card" href="building-materials.html">
<div class="mega-card-img ph-materials"></div>
<div class="mega-card-img ph-select2"></div>
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
</a>
<a class="mega-card" href="global-logistics.html">
<div class="mega-card-img ph-logistics"></div>
<div class="mega-card-img ph-select3"></div>
<div class="mega-card-text"><h4>Global Logistics</h4></div>
</a>
<a class="mega-card" href="after-sales.html">
<div class="mega-card-img ph-aftermarket"></div>
<div class="mega-card-img ph-select4"></div>
<div class="mega-card-text"><h4>After-sales</h4></div>
</a>
</div>