diff --git a/jc-website/html/companyweb.html b/jc-website/html/companyweb.html index 5815a60..8bc7eab 100644 --- a/jc-website/html/companyweb.html +++ b/jc-website/html/companyweb.html @@ -1,5 +1,5 @@ - + 极创科技 @@ -11,258 +11,960 @@ + content="极创澜海作为智慧城市行业应用与地理信息服务提供商，以科技创新为本，致力于地理信息、物联网、互联网和大数据技术应用的创新研究，主要从事智慧城市应用、跨部门信息共享和交换应用的研究、设计和建设工作，应用信息技术提升城市管理与服务水平，让城市运营管理更加高效。在城市综合管理、生态环境保护、工业企业、智慧城管、智慧环卫、农林水利、园林绿化等众多行业领域形成了成熟的细分产品与专业的行业解决方案。公司秉承"极致创造，智慧未来"的发展理念，致力于成为客户最信赖的合作伙伴，竭诚提供一流品质、一流技术的产品和优质服务。" /> - + - - + + 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; + } + } + - -
- -
- - -
-
首页
-
公司介绍
-
公司资质
-
服务内容
-
行业案例
-
联系我们
-
-
- -
-
-
-