单页面响应式

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/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'));
+});