Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 严飞永
|
159543a0e5 | 1 week ago |
@ -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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
@ -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'));
|
||||
});
|
||||
Loading…
Reference in new issue