|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<title>极创科技</title>
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
|
|
|
|
<meta name="baidu-site-verification" content="j9hBfxIB2o" />
|
|
|
|
|
|
<meta name="google-site-verification" content="pfnCitaoMtrGXTD8vN_yDukeSr5wnBpKVt6St8gIy7A" />
|
|
|
|
|
|
<meta name="shenma-site-verification" content="9d028d05a262eabc29e2e1568c29bc04_1584694031" />
|
|
|
|
|
|
<meta data-n-head="true" data-hid="keywords" name="keywords"
|
|
|
|
|
|
content="极创 澜海 极创科技 苏州极创科技 极创澜海 苏州极创 苏州澜海 苏州极创澜海 极创澜海官网 极创澜海官方网站 苏州极创澜海科技有限公司 智慧城市 政府软件 智慧园林 智慧农业 智慧工业 智慧园区 智慧城管 智慧安监 智慧公安 智慧地税 智慧环保 智慧市政 智慧医疗 智慧环卫 智慧社保" />
|
|
|
|
|
|
<meta data-n-head="true" data-hid="description" name="description"
|
|
|
|
|
|
content="极创澜海作为智慧城市行业应用与地理信息服务提供商，以科技创新为本，致力于地理信息、物联网、互联网和大数据技术应用的创新研究，主要从事智慧城市应用、跨部门信息共享和交换应用的研究、设计和建设工作，应用信息技术提升城市管理与服务水平，让城市运营管理更加高效。在城市综合管理、生态环境保护、工业企业、智慧城管、智慧环卫、农林水利、园林绿化等众多行业领域形成了成熟的细分产品与专业的行业解决方案。公司秉承"极致创造，智慧未来"的发展理念，致力于成为客户最信赖的合作伙伴，竭诚提供一流品质、一流技术的产品和优质服务。" />
|
|
|
|
|
|
<!--小图标 -->
|
|
|
|
|
|
<link rel="icon" href="../public/favicon.ico" type="image/x-icon" />
|
|
|
|
|
|
<!-- Link Swiper's CSS -->
|
|
|
|
|
|
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
|
|
|
|
|
|
<!-- 主样式 -->
|
|
|
|
|
|
<link rel="stylesheet" href="../css/website.css">
|
|
|
|
|
|
<style>
|
|
|
|
|
|
* {
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
font-family: 'Arial', sans-serif;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
html,
|
|
|
|
|
|
body {
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 导航栏 */
|
|
|
|
|
|
.navbar {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-container {
|
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
padding: 0 15px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
height: 60px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-logo {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.logo1 {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
background-image: url(../images/website/logo@2x.png);
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-menu {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
list-style: none;
|
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-item {
|
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-link {
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
padding: 15px 10px;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
transition: color 0.3s;
|
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-link:hover,
|
|
|
|
|
|
.nav-link.active {
|
|
|
|
|
|
color: #3498db;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 汉堡菜单 */
|
|
|
|
|
|
.menu-toggle {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.menu-toggle span {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
width: 25px;
|
|
|
|
|
|
height: 3px;
|
|
|
|
|
|
background-color: #333;
|
|
|
|
|
|
margin: 5px 0;
|
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 模块样式 */
|
|
|
|
|
|
.section-container {
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
scroll-snap-type: y mandatory;
|
|
|
|
|
|
padding-top: 60px;
|
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
|
-ms-overflow-style: none;
|
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section-container::-webkit-scrollbar {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section {
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
scroll-snap-align: start;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 首页区域 */
|
|
|
|
|
|
#section1 {
|
|
|
|
|
|
background-image: url(../images/website/banner1.png);
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.banner-content {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 40%;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.banner-title {
|
|
|
|
|
|
font-size: 3rem;
|
|
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.banner-title span {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.banner-button {
|
|
|
|
|
|
background-color: #3498db;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
padding: 12px 30px;
|
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
border-radius: 30px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.banner-button:hover {
|
|
|
|
|
|
background-color: #2980b9;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 标题区域通用样式 */
|
|
|
|
|
|
.section-title-en {
|
|
|
|
|
|
font-size: 2.5rem;
|
|
|
|
|
|
color: #ddd;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section-title {
|
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section-title:after {
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
height: 3px;
|
|
|
|
|
|
background-color: #3498db;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: -10px;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 公司介绍部分 */
|
|
|
|
|
|
.about-container {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.about-content {
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.about-content p {
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.highlight {
|
|
|
|
|
|
color: #3498db;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.about-grid {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
|
|
gap: 20px;
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.grid-item {
|
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
height: 120px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.grid-item:hover {
|
|
|
|
|
|
background-color: #3498db;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
transform: translateY(-5px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.item-content {
|
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.about-motto {
|
|
|
|
|
|
margin: 30px 0;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.about-stats {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stats-icon, .stats-icon-2 {
|
|
|
|
|
|
width: 60px;
|
|
|
|
|
|
height: 60px;
|
|
|
|
|
|
background-image: url(../images/website/极创LOGO.png);
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stats-content {
|
|
|
|
|
|
margin: 0 20px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stats-title {
|
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stats-number {
|
|
|
|
|
|
font-size: 2.5rem;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: #3498db;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stats-unit {
|
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 公司资质部分 */
|
|
|
|
|
|
.qualification-content {
|
|
|
|
|
|
max-width: 1000px;
|
|
|
|
|
|
margin: 0 auto 30px;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.qualification-image {
|
|
|
|
|
|
max-width: 80%;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.qualification-image img {
|
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
|
height: auto;
|
|
|
|
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 服务内容部分 */
|
|
|
|
|
|
.services-grid {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
|
|
gap: 20px;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.service-item {
|
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
min-height: 200px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.service-item:hover {
|
|
|
|
|
|
transform: translateY(-5px);
|
|
|
|
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.service-title {
|
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
color: #3498db;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.service-desc {
|
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 行业案例部分 */
|
|
|
|
|
|
.cases-container {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
background-image: url(../images/website/行业案例@2x.png);
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
height: 400px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 联系我们部分 */
|
|
|
|
|
|
.contact-container {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-left, .contact-right {
|
|
|
|
|
|
width: 48%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-map {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 250px;
|
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
background-image: url(../images/website/点击查看地图@2x.png);
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-info {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-icon {
|
|
|
|
|
|
width: 30px;
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-icon-address {
|
|
|
|
|
|
background-image: url(../images/website/地址.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-icon-phone {
|
|
|
|
|
|
background-image: url(../images/website/电话.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-item a {
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
transition: color 0.3s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-item a:hover {
|
|
|
|
|
|
color: #3498db;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-title {
|
|
|
|
|
|
font-size: 1.5rem;
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.qr-container {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.qr-item {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.qr-code {
|
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
height: 150px;
|
|
|
|
|
|
margin: 0 auto 10px;
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.qr-wechat {
|
|
|
|
|
|
background-image: url(../images/website/极创公众号二维码@2x.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.qr-miniapp {
|
|
|
|
|
|
background-image: url(../images/website/极创小程序@2x.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.qr-text {
|
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.footer {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
padding: 20px 0;
|
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.footer-content {
|
|
|
|
|
|
font-size: 0.8rem;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.footer-content a {
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.footer-content a:hover {
|
|
|
|
|
|
color: #3498db;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 移动端适配 */
|
|
|
|
|
|
@media (max-width: 992px) {
|
|
|
|
|
|
.services-grid {
|
|
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.about-grid {
|
|
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-container {
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.contact-left, .contact-right {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
|
.nav-menu {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 60px;
|
|
|
|
|
|
left: -100%;
|
|
|
|
|
|
width: 60%;
|
|
|
|
|
|
height: calc(100vh - 60px);
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
z-index: 999;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-menu.active {
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-item {
|
|
|
|
|
|
margin: 15px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.menu-toggle {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.menu-toggle.active span:nth-child(1) {
|
|
|
|
|
|
transform: rotate(45deg) translate(5px, 5px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.menu-toggle.active span:nth-child(2) {
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.menu-toggle.active span:nth-child(3) {
|
|
|
|
|
|
transform: rotate(-45deg) translate(7px, -6px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.banner-title {
|
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#section1 {
|
|
|
|
|
|
background-image: url(../images/website/深色banner@2x.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
#section2 {
|
|
|
|
|
|
background-image: url(../images/website/服务内容BG@2x.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
#section3 {
|
|
|
|
|
|
background-image: url(../images/website/公司资质BG@2x.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
#section4 {
|
|
|
|
|
|
background-image: url(../images/website/服务内容BG@2x.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
#section5 {
|
|
|
|
|
|
background-image: url(../images/website/行业案例m.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
#section6 {
|
|
|
|
|
|
background-image: url(../images/website/联系我们m.png);
|
|
|
|
|
|
}
|
|
|
|
|
|
.services-grid {
|
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.qr-container {
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.qr-item {
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.about-grid {
|
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
|
|
|
.nav-container {
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section-container {
|
|
|
|
|
|
padding-top: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.nav-menu {
|
|
|
|
|
|
top: 50px;
|
|
|
|
|
|
height: calc(100vh - 50px);
|
|
|
|
|
|
width: 40%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section-title-en {
|
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section-title {
|
|
|
|
|
|
font-size: 1.5rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stats-number {
|
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<!-- 固定导航栏 -->
|
|
|
|
|
|
<nav class="navbar">
|
|
|
|
|
|
<div class="nav-container">
|
|
|
|
|
|
<a href="#" class="nav-logo">
|
|
|
|
|
|
<div class="logo1">
|
|
|
|
|
|
<img src="../images/website/极创科技logoV3-02.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 汉堡菜单按钮 -->
|
|
|
|
|
|
<div class="menu-toggle">
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<ul class="nav-menu">
|
|
|
|
|
|
<li class="nav-item"><a href="#section1" class="nav-link active">首页</a></li>
|
|
|
|
|
|
<li class="nav-item"><a href="#section2" class="nav-link">公司介绍</a></li>
|
|
|
|
|
|
<li class="nav-item"><a href="#section3" class="nav-link">公司资质</a></li>
|
|
|
|
|
|
<li class="nav-item"><a href="#section4" class="nav-link">服务内容</a></li>
|
|
|
|
|
|
<li class="nav-item"><a href="#section5" class="nav-link">行业案例</a></li>
|
|
|
|
|
|
<li class="nav-item"><a href="#section6" class="nav-link">联系我们</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 页面模块容器 -->
|
|
|
|
|
|
<div class="section-container">
|
|
|
|
|
|
<!-- 首页 -->
|
|
|
|
|
|
<section id="section1" class="section">
|
|
|
|
|
|
<div class="banner-content">
|
|
|
|
|
|
<h1 class="banner-title"><span>极致创造</span> <span>智慧未来</span></h1>
|
|
|
|
|
|
<button class="banner-button">了解更多</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<!-- 公司介绍 -->
|
|
|
|
|
|
<section id="section2" class="section">
|
|
|
|
|
|
<div class="section1">
|
|
|
|
|
|
<div class="introduce-title">ABOUT</div>
|
|
|
|
|
|
<div class="introduce-title2">公司介绍</div>
|
|
|
|
|
|
<div class="introduce-content">
|
|
|
|
|
|
<span>极创科技</span>已通过高新技术企业认定，作为智慧城市行业应用与地理信息服务提供商，致力于地理信息、物联网、人工智能和大数据技术应用的创新研究，主要从事智慧城市应用、地理信息服务、三维建模的研究、咨询与建设工作，贴近城市管理与服务的信息化需求，专注于智慧城市建设，致力于创造更安全、便捷、绿色的城市生活。
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-content2">
|
|
|
|
|
|
<span>极创科技</span>专注于智慧城市中的智慧应急、智慧安监、智慧城管、智慧农业等领域，为政府部门及相关行业提供以软件为核心的智慧化整体解决方案。
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-grid">
|
|
|
|
|
|
<div class="introduce-grid-item">
|
|
|
|
|
|
<div class="itemword">智慧应急</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-grid-item">
|
|
|
|
|
|
<div class="itemword">智慧安监</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-grid-item">
|
|
|
|
|
|
<div class="itemword">智慧城管</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-grid-item">
|
|
|
|
|
|
<div class="itemword">智慧农业</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-grid2">
|
|
|
|
|
|
<div class="introduce-grid-item">
|
|
|
|
|
|
<div class="itemword">智慧社区</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-grid-item">
|
|
|
|
|
|
<div class="itemword">智慧招商</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-grid-item">
|
|
|
|
|
|
<div class="itemword">食药监管</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-grid-item">
|
|
|
|
|
|
<div class="itemword">其他产品</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-content3">
|
|
|
|
|
|
公司秉承 "<span>极致创造，智慧未来</span>" 的发展理念，致力于成为客户最信赖的合作伙伴，竭诚提供一流品质、一流技术的产品和优质服务。
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-content4">
|
|
|
|
|
|
<div class="introduce-content4img"></div>
|
|
|
|
|
|
<div class="introduce-contentword">
|
|
|
|
|
|
<div class="wordone">已获得相关知识产权证书</div>
|
|
|
|
|
|
<div class="wordtwo">50</div>
|
|
|
|
|
|
<div class="wordthree">余项</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="introduce-content4img2"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<!-- 公司资质 -->
|
|
|
|
|
|
<section id="section3" class="section">
|
|
|
|
|
|
<div class="section4">
|
|
|
|
|
|
<div class="aptitude-title">QUALIFICATION</div>
|
|
|
|
|
|
<div class="aptitude-title2">公司资质</div>
|
|
|
|
|
|
<div class="aptitude-content">
|
|
|
|
|
|
<span>极创科技</span>已获得相关知识产权证书50余项，包括高新技术企业认定、江苏省民营科技企业、国家级科技型中小企业、江苏省星级上云企业、1S09001质量管理体系认证证书、S014001环境管理体系认证证书、IS027001信息安全管理体系认证证书、AAA企业信用等级证书7项、软件企业认证证书、软件产品认证证书、发明专利2项、软件著作权证书24项、注册商标2项等
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="aptitude-image">
|
|
|
|
|
|
<img src="../images/website/企业资质.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<!-- 服务内容 -->
|
|
|
|
|
|
<section id="section4" class="section">
|
|
|
|
|
|
<div class="section2">
|
|
|
|
|
|
<div class="section-center1">
|
|
|
|
|
|
<div class="sectionfirst-title">CONTENT</div>
|
|
|
|
|
|
<div class="sectionsecond-title">服务内容</div>
|
|
|
|
|
|
<div class="section-contentsgird">
|
|
|
|
|
|
<div class="grid-item">
|
|
|
|
|
|
<div class="girdtitle">人工智能</div>
|
|
|
|
|
|
<div class="girdcontent"> 利用AI小模型和大模型算法，实现图像分析、视频分析、语音分析、语义分析、深度思考等能力，与业务平台相结合</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="grid-item">
|
|
|
|
|
|
<div class="girdtitle">数据建库</div>
|
|
|
|
|
|
<div class="girdcontent">关系型数据与空间数据库的数据库建设、数据梳理、数据加工、数据备份、数据整合、数据导出、数据共享
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="grid-item">
|
|
|
|
|
|
<div class="girdtitle">软件研发</div>
|
|
|
|
|
|
<div class="girdcontent">浏览器平台软件、桌面平台软件、IOS平台APP软件、安卓平台APP软件、手机H5页面、微信公众号、微信小程序软件的研发
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="grid-item">
|
|
|
|
|
|
<div class="girdtitle">方案咨询</div>
|
|
|
|
|
|
<div class="girdcontent">智慧城市、智慧教育、企业服务等领域的解决方案和项目建设方案的编写与咨询</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="grid-item">
|
|
|
|
|
|
<div class="girdtitle">大数据分析</div>
|
|
|
|
|
|
<div class="girdcontent">对海量数据进行二次加工处理，通过大量算法模型，从既有数据中分析出统计数据、对比数据、趋势数据、预测数据</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="grid-item">
|
|
|
|
|
|
<div class="girdtitle">地图服务</div>
|
|
|
|
|
|
<div class="girdcontent">将二维地图数据和三维地图数据，发布为地图服务，从而方便地图应用和数据共享</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="grid-item">
|
|
|
|
|
|
<div class="girdtitle">物联感知</div>
|
|
|
|
|
|
<div class="girdcontent">建设传感器、摄像头、智能仪表等物联设备体系，通过物联网络，实现设备数据实时传输、存储、监测、预警、共享</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="grid-item">
|
|
|
|
|
|
<div class="girdtitle">BIM应用</div>
|
|
|
|
|
|
<div class="girdcontent">使用无人机倾斜摄影、360全景采集等方式进行基础数据采集，通过建立虚拟的建筑工程三维模型，辅助于智慧城市信息化建设</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<!-- 行业案例 -->
|
|
|
|
|
|
<section id="section5" class="section">
|
|
|
|
|
|
<div class="section3">
|
|
|
|
|
|
<div class="section-center2"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<!-- 联系我们 -->
|
|
|
|
|
|
<section id="section6" class="section">
|
|
|
|
|
|
<div class="section5">
|
|
|
|
|
|
<div class="section-centent4-topone"><span>CONTANT</span> <span>US</span></div>
|
|
|
|
|
|
<div class="section-centent4-title">联系我们</div>
|
|
|
|
|
|
<div class="section-centent4-content">
|
|
|
|
|
|
<div class="section-centent4-contentleft">
|
|
|
|
|
|
<div class="section-centent4-image"></div>
|
|
|
|
|
|
<div class="section-content4-text">
|
|
|
|
|
|
<div class="section-content4-icon section-content4-icon1"></div>
|
|
|
|
|
|
<a title="点击查看地图" href="https://www.gaode.com/place/B0H655PK3J"
|
|
|
|
|
|
target="_blank">苏州工业园区腾飞创新园B406</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="section-content4-text" style="margin-left: 0.85rem;">
|
|
|
|
|
|
<div class="section-content4-icon section-content4-icon2"></div>
|
|
|
|
|
|
<div>18013199985</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="section-centent4-contentright">
|
|
|
|
|
|
<div class="sevtionword">扫码关注我们</div>
|
|
|
|
|
|
<div class="section-content4-line2" style="display: flex;">
|
|
|
|
|
|
<div class="section-content4-line2-div">
|
|
|
|
|
|
<div class="wechatimg1"></div>
|
|
|
|
|
|
<div class="section-content4-image-text">微信公众号</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="section-content4-line2-div" style="margin-left: 4rem;">
|
|
|
|
|
|
<div class="wechatimg2"></div>
|
|
|
|
|
|
<div class="section-content4-image-text">微信小程序</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="footer">
|
|
|
|
|
|
<div class="footerone">
|
|
|
|
|
|
Copyright©️2022
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备20012657号</a>
|
|
|
|
|
|
|
|
|
|
|
|
苏州极创澜海科技有限公司 版权所有
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Swiper JS -->
|
|
|
|
|
|
<script src="../js/swiper-bundle.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Initialize Swiper -->
|
|
|
|
|
|
<script>
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
|
|
const sections = document.querySelectorAll('.section');
|
|
|
|
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
|
|
|
|
const menuToggle = document.querySelector('.menu-toggle');
|
|
|
|
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
|
|
|
|
const sectionContainer = document.querySelector('.section-container');
|
|
|
|
|
|
const bannerButton = document.querySelector('.banner-button');
|
|
|
|
|
|
|
|
|
|
|
|
// 了解更多按钮点击跳转到公司介绍
|
|
|
|
|
|
if (bannerButton) {
|
|
|
|
|
|
bannerButton.addEventListener('click', function() {
|
|
|
|
|
|
const section2 = document.querySelector('#section2');
|
|
|
|
|
|
if (section2) {
|
|
|
|
|
|
section2.scrollIntoView({
|
|
|
|
|
|
behavior: 'smooth'
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 更新活动状态
|
|
|
|
|
|
navLinks.forEach(navLink => navLink.classList.remove('active'));
|
|
|
|
|
|
const section2Link = document.querySelector('a[href="#section2"]');
|
|
|
|
|
|
if (section2Link) {
|
|
|
|
|
|
section2Link.classList.add('active');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 汉堡菜单点击事件
|
|
|
|
|
|
if (menuToggle) {
|
|
|
|
|
|
menuToggle.addEventListener('click', function () {
|
|
|
|
|
|
this.classList.toggle('active');
|
|
|
|
|
|
navMenu.classList.toggle('active');
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 导航链接点击事件
|
|
|
|
|
|
navLinks.forEach(link => {
|
|
|
|
|
|
link.addEventListener('click', function (e) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
const targetId = this.getAttribute('href');
|
|
|
|
|
|
const targetSection = document.querySelector(targetId);
|
|
|
|
|
|
|
|
|
|
|
|
if (targetSection) {
|
|
|
|
|
|
// 更新活动状态
|
|
|
|
|
|
navLinks.forEach(navLink => navLink.classList.remove('active'));
|
|
|
|
|
|
this.classList.add('active');
|
|
|
|
|
|
|
|
|
|
|
|
// 关闭移动端菜单
|
|
|
|
|
|
menuToggle.classList.remove('active');
|
|
|
|
|
|
navMenu.classList.remove('active');
|
|
|
|
|
|
|
|
|
|
|
|
// 滚动到对应模块
|
|
|
|
|
|
targetSection.scrollIntoView({
|
|
|
|
|
|
behavior: 'smooth'
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 模块化滚动检测
|
|
|
|
|
|
sectionContainer.addEventListener('scroll', function () {
|
|
|
|
|
|
const currentScroll = this.scrollTop;
|
|
|
|
|
|
const windowHeight = window.innerHeight;
|
|
|
|
|
|
|
|
|
|
|
|
sections.forEach((section, index) => {
|
|
|
|
|
|
const sectionTop = section.offsetTop - 60; // 导航栏高度
|
|
|
|
|
|
const sectionHeight = section.offsetHeight;
|
|
|
|
|
|
|
|
|
|
|
|
if (currentScroll >= sectionTop && currentScroll < sectionTop + sectionHeight) {
|
|
|
|
|
|
const currentId = section.getAttribute('id');
|
|
|
|
|
|
|
|
|
|
|
|
navLinks.forEach(link => {
|
|
|
|
|
|
link.classList.remove('active');
|
|
|
|
|
|
if (link.getAttribute('href') === `#${currentId}`) {
|
|
|
|
|
|
link.classList.add('active');
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 阻止默认滚动行为
|
|
|
|
|
|
window.addEventListener('wheel', function (e) {
|
|
|
|
|
|
if (e.cancelable) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const delta = Math.sign(e.deltaY);
|
|
|
|
|
|
const currentIndex = Math.round(sectionContainer.scrollTop / window.innerHeight);
|
|
|
|
|
|
const maxIndex = sections.length - 1;
|
|
|
|
|
|
|
|
|
|
|
|
let targetIndex = currentIndex + delta;
|
|
|
|
|
|
targetIndex = Math.max(0, Math.min(targetIndex, maxIndex));
|
|
|
|
|
|
|
|
|
|
|
|
sectionContainer.scrollTo({
|
|
|
|
|
|
top: sections[targetIndex].offsetTop - 60, // 导航栏高度
|
|
|
|
|
|
behavior: 'smooth'
|
|
|
|
|
|
});
|
|
|
|
|
|
}, { passive: false });
|
|
|
|
|
|
|
|
|
|
|
|
// 触摸设备支持
|
|
|
|
|
|
let startY;
|
|
|
|
|
|
sectionContainer.addEventListener('touchstart', function (e) {
|
|
|
|
|
|
startY = e.touches[0].clientY;
|
|
|
|
|
|
}, { passive: true });
|
|
|
|
|
|
|
|
|
|
|
|
sectionContainer.addEventListener('touchmove', function (e) {
|
|
|
|
|
|
if (e.cancelable) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const currentY = e.touches[0].clientY;
|
|
|
|
|
|
const deltaY = startY - currentY;
|
|
|
|
|
|
|
|
|
|
|
|
if (Math.abs(deltaY) > 50) { // 滑动阈值
|
|
|
|
|
|
const direction = deltaY > 0 ? 1 : -1;
|
|
|
|
|
|
const currentIndex = Math.round(sectionContainer.scrollTop / window.innerHeight);
|
|
|
|
|
|
const maxIndex = sections.length - 1;
|
|
|
|
|
|
|
|
|
|
|
|
let targetIndex = currentIndex + direction;
|
|
|
|
|
|
targetIndex = Math.max(0, Math.min(targetIndex, maxIndex));
|
|
|
|
|
|
|
|
|
|
|
|
sectionContainer.scrollTo({
|
|
|
|
|
|
top: sections[targetIndex].offsetTop - 60, // 导航栏高度
|
|
|
|
|
|
behavior: 'smooth'
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
startY = currentY;
|
|
|
|
|
|
}
|
|
|
|
|
|
}, { passive: false });
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化高亮
|
|
|
|
|
|
sectionContainer.dispatchEvent(new Event('scroll'));
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
