单页面响应式

jc-website/css/pc.css

@@ -0,0 +1,173 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Arial", sans-serif;
+}
+
+html,
+body {
+  overflow: hidden;
+  height: 100%;
+}
+/* 仅手机 */
+.only-phone {
+  display: none;
+}
+/* 仅pc */
+.only-pc {
+  display: block;
+}
+
+/* 导航栏 */
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #2c3e50;
+  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 {
+  color: white;
+  font-weight: bold;
+  font-size: 1.2rem;
+  text-decoration: none;
+}
+
+.nav-menu {
+  display: flex;
+  list-style: none;
+  transition: all 0.3s ease;
+}
+
+.nav-item {
+  margin: 0 10px;
+}
+
+.nav-link {
+  color: #ecf0f1;
+  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: white;
+  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;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE 和 Edge */
+}
+/* 隐藏Webkit浏览器滚动条 */
+.section-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* 各个模块的div */
+.section {
+  height: 100vh;
+  scroll-snap-align: start;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.section:nth-child(odd) {
+  background-color: #f9f9f9;
+}
+
+.section:nth-child(even) {
+  background-color: #e9e9e9;
+}
+
+/* 背景图的操作 */
+/* 模块一1背景 */
+#section1 {
+  background-image: url(../images/website/banner1.png);
+  background-size: cover;
+  background-position: center;
+}
+/* 模块5背景 */
+#section5 {
+  background-image: url(../images/website/行业案例@2x.png);
+  background-size: cover;
+  background-position: center;
+}
+
+/* 模块二的内容 */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  /* 默认 4 列 */
+  grid-auto-rows: minmax(100px, auto);
+  /* 行高自适应，最小 100px */
+  gap: 10px;
+  /* 间距 */
+  padding: 10px;
+  width: 100%;
+}
+
+.grid-item {
+  aspect-ratio: 3/2;
+  /* 宽高比（接近 300x200） */
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  text-align: center;
+  position: relative;
+  width: 100%;
+}
+
+.grid-item h2,
+.grid-item p {
+  transition: opacity 0.3s ease;
+  position: relative;
+  z-index: 1;
+}

jc-website/css/phone.css

@@ -0,0 +1,125 @@
+/* 移动端适配 */
+@media (max-width: 768px) {
+  /* 仅手机端显示 */
+  .only-phone {
+    display: block;
+  }
+  /* 仅pc显示 */
+  .only-pc {
+    display: none;
+  }
+
+  /* ----模块二的内容---- */
+  .grid-item {
+    width: 150px;
+    height: 100px;
+    /* 调整移动端高度 */
+    margin: 5px 0;
+    background-image: url(../images/website/数据建库m.png) !important;
+    background-size: 100% 100%;
+    background-position: center;
+  }
+
+  .grid-item:nth-child(2) {
+    background-image: url(../images/website/人工智能m.png) !important;
+    background-size: 100% 100%;
+    background-position: center;
+  }
+
+  /* 在移动端隐藏文字 */
+  .grid-item h2,
+  .grid-item p {
+    display: none;
+  }
+  /* -------------------- */
+
+  /* 背景图操作 */
+  #section1 {
+    background-image: url(../images/website/深色banner@2x.png);
+    background-size: cover;
+    background-position: center;
+  }
+  #section5 {
+    background-image: url(../images/website/行业案例m.png);
+    background-size: cover;
+    background-position: center;
+  }
+  /* -------------------- */
+
+  /* 菜单栏 */
+  .nav-menu {
+    position: fixed;
+    top: 60px;
+    left: -100%;
+    width: 30%;
+    height: calc(100vh - 60px);
+    background-color: #2c3e50;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 20px;
+  }
+
+  .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);
+  }
+
+  .section h2 {
+    font-size: 2rem;
+  }
+  /* -------------------- */
+}
+
+/* 暂时不考虑↓ */
+@media (max-width: 480px) {
+  .nav-container {
+    height: 50px;
+  }
+
+  #section5 {
+    /* 为手机端准备的图片 */
+    background-image: url(../images/website/行业案例m.png);
+    background-size: cover;
+    background-position: center;
+  }
+
+  .section-container {
+    padding-top: 50px;
+  }
+
+  .nav-menu {
+    top: 50px;
+    height: calc(100vh - 50px);
+  }
+
+  .nav-logo {
+    font-size: 1rem;
+  }
+
+  .section {
+    padding: 15px;
+  }
+
+  .section h2 {
+    font-size: 1.8rem;
+  }
+}

jc-website/html/companyweb.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html>
 
 <head>
     <title>极创科技</title>
@@ -11,662 +11,58 @@
     <meta data-n-head="true" data-hid="keywords" name="keywords"
         content="极创 澜海 极创科技 苏州极创科技 极创澜海 苏州极创 苏州澜海 苏州极创澜海 极创澜海官网 极创澜海官方网站 苏州极创澜海科技有限公司 智慧城市 政府软件 智慧园林 智慧农业 智慧工业 智慧园区 智慧城管 智慧安监 智慧公安 智慧地税 智慧环保 智慧市政 智慧医疗 智慧环卫 智慧社保" />
     <meta data-n-head="true" data-hid="description" name="description"
-        content="极创澜海作为智慧城市行业应用与地理信息服务提供商，以科技创新为本，致力于地理信息、物联网、互联网和大数据技术应用的创新研究，主要从事智慧城市应用、跨部门信息共享和交换应用的研究、设计和建设工作，应用信息技术提升城市管理与服务水平，让城市运营管理更加高效。在城市综合管理、生态环境保护、工业企业、智慧城管、智慧环卫、农林水利、园林绿化等众多行业领域形成了成熟的细分产品与专业的行业解决方案。公司秉承"极致创造，智慧未来"的发展理念，致力于成为客户最信赖的合作伙伴，竭诚提供一流品质、一流技术的产品和优质服务。" />
+        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">
-    <!-- 主样式 -->
+    <!-- Demo styles -->
     <link rel="stylesheet" href="../css/website.css">
-    <style>
+    <!-- 检测用户设备 -->
-        * {
+    <script type="text/javascript">
-            margin: 0;
+        var ua = navigator.userAgent;
-            padding: 0;
+        var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
-            box-sizing: border-box;
+            isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
-            font-family: 'Arial', sans-serif;
+            isAndroid = ua.match(/(Android)\s+([\d.]+)/),
+            isMobile = isIphone || isAndroid;
+        // 判断
+        if (isMobile) {
+            window.location.href = "mobile.html";
         }
-
+    </script>
-        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="container-fluid">
-        <div class="nav-container">
+        <a class="navbar-brand" href="#">
-            <a href="#" class="nav-logo">
+            <div class="logo1"></div>
-                <div class="logo1">
-                    <img src="../images/website/极创科技logoV3-02.png" alt="">
-                </div>
         </a>
-
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
-            <!-- 汉堡菜单按钮 -->
+            aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-            <div class="menu-toggle">
+            <span class="navbar-toggler-icon"></span>
-                <span></span>
+        </button>
-                <span></span>
+        <div class="menus1">
-                <span></span>
+            <div class="menu menu0 menu-active" onclick="jump(0,true)">首页</div>
-            </div>
+            <div class="menu menu1" onclick="jump(1,true)">公司介绍</div>
-            <ul class="nav-menu">
+            <div class="menu menu2" onclick="jump(2,true)">公司资质</div>
-                <li class="nav-item"><a href="#section1" class="nav-link active">首页</a></li>
+            <div class="menu menu3" onclick="jump(3,true)">服务内容</div>
-                <li class="nav-item"><a href="#section2" class="nav-link">公司介绍</a></li>
+            <div class="menu menu4" onclick="jump(4,true)">行业案例</div>
-                <li class="nav-item"><a href="#section3" class="nav-link">公司资质</a></li>
+            <div class="menu menu5" onclick="jump(5,true)">联系我们</div>
-                <li class="nav-item"><a href="#section4" class="nav-link">服务内容</a></li>
+        </div>
-                <li class="nav-item"><a href="#section5" class="nav-link">行业案例</a></li>
+    </div>
-                <li class="nav-item"><a href="#section6" class="nav-link">联系我们</a></li>
+    <!-- Swiper首页 -->
-            </ul>
+    <div class="swiper-container">
-        </div>
+        <div class="swiper-wrapper">
-    </nav>
+            <div class="swiper-slide" data-hash="slide1">
-
+                <div class="banner">
-    <!-- 页面模块容器 -->
+                    <div class="bannerone"></div>
-    <div class="section-container">
+                    <div class="text-content"><span>极致创造</span><span>智慧未来</span></div>
-        <!-- 首页 -->
+                    <button class="text-button">了解更多</button>
-        <section id="section1" class="section">
+                </div>
-            <div class="banner-content">
+            </div>
-                <h1 class="banner-title"><span>极致创造</span> <span>智慧未来</span></h1>
-                <button class="banner-button">了解更多</button>
-            </div>
-        </section>
             <!-- 公司介绍 -->
-        <section id="section2" class="section">
+            <div class="swiper-slide">
                 <div class="section1">
                     <div class="introduce-title">ABOUT</div>
                     <div class="introduce-title2">公司介绍</div>
@@ -705,7 +101,7 @@
                         </div>
                     </div>
                     <div class="introduce-content3">
-                    公司秉承 "<span>极致创造，智慧未来</span>" 的发展理念，致力于成为客户最信赖的合作伙伴，竭诚提供一流品质、一流技术的产品和优质服务。
+                        公司秉承 “<span>极致创造，智慧未来</span>”的发展理念，致力于成为客户最信赖的合作伙伴，竭诚提供一流品质、一流技术的产品和优质服务。
                     </div>
                     <div class="introduce-content4">
                         <div class="introduce-content4img"></div>
@@ -717,9 +113,9 @@
                         <div class="introduce-content4img2"></div>
                     </div>
                 </div>
-        </section>
+            </div>
             <!-- 公司资质 -->
-        <section id="section3" class="section">
+            <div class="swiper-slide">
                 <div class="section4">
                     <div class="aptitude-title">QUALIFICATION</div>
                     <div class="aptitude-title2">公司资质</div>
@@ -730,9 +126,9 @@
                         <img src="../images/website/企业资质.png" alt="">
                     </div>
                 </div>
-        </section>
+            </div>
             <!-- 服务内容 -->
-        <section id="section4" class="section">
+            <div class="swiper-slide">
                 <div class="section2">
                     <div class="section-center1">
                         <div class="sectionfirst-title">CONTENT</div>
@@ -775,15 +171,15 @@
                         </div>
                     </div>
                 </div>
-        </section>
+            </div>
             <!-- 行业案例 -->
-        <section id="section5" class="section">
+            <div class="swiper-slide">
                 <div class="section3">
                     <div class="section-center2"></div>
                 </div>
-        </section>
+            </div>
             <!-- 联系我们 -->
-        <section id="section6" class="section">
+            <div class="swiper-slide" style="flex-direction: column;">
                 <div class="section5">
                     <div class="section-centent4-topone"><span>CONTANT</span> <span>US</span></div>
                     <div class="section-centent4-title">联系我们</div>
@@ -814,6 +210,7 @@
                             </div>
                         </div>
                     </div>
+
                 </div>
                 <div class="footer">
                     <div class="footerone">
@@ -824,147 +221,48 @@
                         苏州极创澜海科技有限公司 版权所有
                     </div>
                 </div>
-        </section>
+
+            </div>
+        </div>
+        <!-- Swiper按钮 -->
+        <!-- <div class="swiper-button-next swiper-button-white"></div> -->
     </div>
     <!-- Swiper JS -->
     <script src="../js/swiper-bundle.min.js"></script>
 
     <!-- Initialize Swiper -->
     <script>
-        document.addEventListener('DOMContentLoaded', function () {
+        function jump(id, state) {
-            const sections = document.querySelectorAll('.section');
+            // 移除所有菜单的 .menu-active 类
-            const navLinks = document.querySelectorAll('.nav-link');
+            const menus = document.querySelectorAll('.menu');
-            const menuToggle = document.querySelector('.menu-toggle');
+            menus.forEach(menu => {
-            const navMenu = document.querySelector('.nav-menu');
+                menu.classList.remove('menu-active');
-            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');
-                            }
-                        });
-                    }
-                });
             });
 
-            // 阻止默认滚动行为
+            // 设置当前菜单的 .menu-active 类
-            window.addEventListener('wheel', function (e) {
+            const currentMenu = document.querySelector('.menu' + id);
-                if (e.cancelable) {
+            if (currentMenu) {
-                    e.preventDefault();
+                currentMenu.classList.add('menu-active');
             }
 
-                const delta = Math.sign(e.deltaY);
+            if (state) mySwiper.slideTo(id);
-                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;
+        var mySwiper = new Swiper(".swiper-container", {
-                const deltaY = startY - currentY;
+            direction: "vertical", // 垂直切换选项
-
+            mousewheel: true,
-                if (Math.abs(deltaY) > 50) { // 滑动阈值
+            speed: 1000,
-                    const direction = deltaY > 0 ? 1 : -1;
+            // 如果需要前进后退按钮
-                    const currentIndex = Math.round(sectionContainer.scrollTop / window.innerHeight);
+            navigation: {
-                    const maxIndex = sections.length - 1;
+                nextEl: ".swiper-button-next",
-
+            },
-                    let targetIndex = currentIndex + direction;
+            on: {
-                    targetIndex = Math.max(0, Math.min(targetIndex, maxIndex));
+                slideChangeTransitionStart: function () {
-
+                    jump(this.activeIndex, false);
-                    sectionContainer.scrollTo({
+                },
-                        top: sections[targetIndex].offsetTop - 60, // 导航栏高度
+            },
-                        behavior: 'smooth'
         });
 
-                    startY = currentY;
-                }
-            }, { passive: false });
-
-            // 初始化高亮
-            sectionContainer.dispatchEvent(new Event('scroll'));
-        });
     </script>
 </body>
 

jc-website/html/website.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--小图标 -->
+    <link rel="icon" href="../public/favicon.ico" type="image/x-icon" />
+    <title>极创科技</title>
+    <link rel="stylesheet" href="../css/pc.css">
+    </link>
+    <link rel="stylesheet" href="../css/phone.css">
+</head>
+
+<body>
+    <!-- 固定导航栏 -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <a href="#" class="nav-logo">LOGO</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">首页</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">
+        </section>
+        <!-- 公司介绍模块 -->
+        <section id="section2" class="section">
+            <div class="grid-container">
+                <div class="grid-item" style="background-image: url(../images/website/智慧教育BG@2x.png);">
+                    <h2>模块二 - 项目一</h2>
+                    <p>这里是模块二项目一的内容区域。</p>
+                </div>
+                <div class="grid-item" style="background-image: url(../images/website/数据建库BG@2x.png);">
+                    <h2>模块二 - 项目二</h2>
+                    <p>这里是模块二项目二的内容区域。</p>
+                </div>
+                <!-- 其他项目 -->
+            </div>
+        </section>
+        <!-- 公司资质模块 -->
+        <section id="section3" class="section">
+            <h2></h2>
+            <p></p>
+        </section>
+        <!-- 服务内容模块 -->
+        <section id="section4" class="section">
+            <h2></h2>
+            <p></p>
+        </section>
+        <!-- 行业案例模块 -->
+        <section id="section5" class="section">
+            <!-- 只在手机端显示的文字 -->
+            <div class="only-phone anli">
+                123
+            </div>
+        </section>
+        <!-- 联系我们模块 -->
+        <section id="section6" class="section">
+            <h2></h2>
+            <p></p>
+        </section>
+    </div>
+
+    <script src="../js/pc.js"></script>
+</body>
+
+</html>

jc-website/js/pc.js

@@ -0,0 +1,106 @@
+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');
+
+    // 汉堡菜单点击事件
+    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);
+
+            // 关闭移动端菜单
+            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 = index * windowHeight;
+            const sectionBottom = (index + 1) * windowHeight;
+
+            if (currentScroll >= sectionTop && currentScroll < sectionBottom) {
+                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: targetIndex * window.innerHeight,
+            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: targetIndex * window.innerHeight,
+                behavior: 'smooth'
+            });
+
+            startY = currentY;
+        }
+    }, { passive: false });
+
+    // 初始化高亮
+    sectionContainer.dispatchEvent(new Event('scroll'));
+});