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
+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>