suzhou-jichuang-lanhai
/
jc-modle-html
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改成响应式布局

Browse Source
yfy
项洋 2 weeks ago
parent 087bae4fcc
commit af99127ca8
1 changed files with 910 additions and 208 deletions
Show Stats Download Patch File Download Diff File

862
jc-website/html/companyweb.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save