Refactor and enhance various HTML pages with updated links, improved styles, and optimized JavaScript functionality
- Updated badge styles in culture.html for better visual consistency and added backdrop-filter support. - Introduced a fallback panel for the map in index.html with enhanced styles and responsive design. - Changed links in product_ecommerce_freight_booking.html, product_full_logistics_chain_cargo_agent.html, product_full_logistics_chain_platform.html, product_full_logistics_chain_ship_agent.html, product_port_cdi_container.html, product_shipping_boat.html, product_shipping_company.html to point to new URLs with query parameters. - Improved scroll reveal functionality in solution_inland_river_shipping.html, solution_logistics_chain.html, solution_port_supply_chain.html, and solution_supply_chain.html by replacing forEach with a traditional for loop for better performance.
This commit is contained in:
114
index.html
114
index.html
@@ -39,28 +39,102 @@
|
||||
|
||||
<!-- 仅预加载首屏首张轮播背景，避免未使用的预加载告警 -->
|
||||
<link rel="preload" href="assets/images/slider/slide-1.png" as="image">
|
||||
<style>
|
||||
#map {
|
||||
position: relative;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
border-radius: 24px;
|
||||
background: radial-gradient(circle at top, rgba(25, 119, 255, 0.32), rgba(2, 12, 31, 0.92) 58%, rgba(2, 12, 31, 1) 100%);
|
||||
box-shadow: 0 24px 80px rgba(2, 12, 31, 0.24);
|
||||
}
|
||||
|
||||
#map .map-fallback {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 32px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(4, 16, 36, 0.12) 0%, rgba(4, 16, 36, 0.78) 100%),
|
||||
url("assets/images/index/map_bk.webp") center/cover no-repeat;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
#map .map-fallback-panel {
|
||||
max-width: 360px;
|
||||
padding: 24px 26px;
|
||||
border-radius: 18px;
|
||||
color: #f5f8ff;
|
||||
background: rgba(5, 18, 37, 0.82);
|
||||
border: 1px solid rgba(112, 167, 255, 0.24);
|
||||
box-shadow: 0 18px 40px rgba(2, 12, 31, 0.24);
|
||||
}
|
||||
|
||||
#map .map-fallback-panel span {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #9bc6ff;
|
||||
}
|
||||
|
||||
#map .map-fallback-panel strong {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
#map .map-fallback-panel p {
|
||||
margin: 12px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: rgba(245, 248, 255, 0.84);
|
||||
}
|
||||
|
||||
#map.map-enhanced-ready .map-fallback {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
|
||||
#map .map-fallback-panel {
|
||||
background: rgba(5, 18, 37, 0.56);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#map {
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
#map .map-fallback {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#map .map-fallback-panel {
|
||||
max-width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#map .map-fallback-panel strong {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- <link href="assets/css/style2.css" rel="stylesheet"> -->
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="assets/js/html5shiv.min.js"></script>
|
||||
<script src="assets/js/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<!-- d3 延迟加载，仅用于地图 -->
|
||||
<script src="assets/js/d3.min.js" defer></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- importmap 用于解析 Three.js 子模块的依赖 -->
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- start page-wrapper -->
|
||||
<div class="page-wrapper">
|
||||
|
||||
@@ -381,7 +455,15 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col col-md-7">
|
||||
<div id="map" style="height: 600px;"></div>
|
||||
<div id="map">
|
||||
<div class="map-fallback">
|
||||
<div class="map-fallback-panel">
|
||||
<span>行业版图</span>
|
||||
<strong>覆盖全国重点港航与物流节点</strong>
|
||||
<p>旧版浏览器将展示静态版行业覆盖图，升级到较新的浏览器后可查看交互式 3D 地图。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-md-5">
|
||||
<div class="details" style="margin-top: 100px;">
|
||||
@@ -1086,8 +1168,8 @@
|
||||
|
||||
<!-- d3 用于地图，延迟加载 -->
|
||||
<script defer src="assets/js/d3.min.js"></script>
|
||||
<!-- 3D 地图模块 - 延迟加载 -->
|
||||
<script defer src="assets/js/map3d.js" type="module"></script>
|
||||
<!-- 3D 地图模块引导 - 在支持模块与 WebGL 时再加载 -->
|
||||
<script defer src="assets/js/map3d-loader.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user