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

最终页面

Browse Source
main
严飞永 3 weeks ago
parent e7f72529e8
commit 087bae4fcc
12 changed files with 62 additions and 250 deletions
Show Stats Download Patch File Download Diff File

76
jc-website/css/mobile.css
Unescape View File

@ -7,40 +7,6 @@ body {
overflow-x: hidden;
}
/* 默认样式 */
body {
font-size: 16px;
}
/* 小屏幕设备 */
@media (max-width: 320px) {
body {
font-size: 14px;
}
}
/* 中等屏幕设备 */
@media (min-width: 321px) and (max-width: 375px) {
body {
font-size: 15px;
}
}
/* 较大屏幕设备 */
@media (min-width: 376px) and (max-width: 414px) {
body {
font-size: 16px;
}
}
/* 更大屏幕设备 */
@media (min-width: 415px) {
body {
font-size: 18px;
}
}
:focus {
outline: none;
}
@ -274,7 +240,7 @@ body {
.section2 {
width: 100%;
height: 100%;
background-image: url(../images/website/服务内容BG.png);
background-image: url(../images/website/服务内容BG@2x.png);
;
}
@ -340,7 +306,7 @@ body {
}
.introduce-content {
width: 25.17rem;
width: 22.17rem;
height: 12.83rem;
font-family: Source Han Sans SC;
font-size: 1rem;
@ -356,12 +322,13 @@ body {
}
.introduce-content2 {
width: 25.17rem;
width: 22.17rem;
height: 5.94rem;
font-family: Source Han Sans SC;
font-size: 1rem;
color: #333333;
line-height: 1.22rem;
text-align: left;
}
.introduce-content2 span {
@ -371,15 +338,11 @@ body {
.introduce-grid {
margin-top: 1.88rem;
width: 100%;
/* 调整宽度以适应父容器 */
width: 92%;
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 三列布局 */
gap: 1.82%;
/* 列间距 */
justify-items: center;
/* 每个项目的水平居中 */
}
.introduce-grid2 {
@ -391,9 +354,9 @@ body {
}
.introduce-grid-item {
width: 7.94rem;
width: 7.4rem;
height: 3.83rem;
background-image: url(../images/website/产品BG.png);
background-image: url(../images/website/产品BG@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
@ -405,11 +368,11 @@ body {
color: #FFFFFF;
line-height: 30px;
margin-top: 10px;
margin-left: -10px;
margin-left: -5px;
}
.introduce-content3 {
width: 25.11rem;
width: 22.11rem;
height: 5.94rem;
font-family: Source Han Sans SC;
font-weight: 400;
@ -417,6 +380,7 @@ body {
color: #333333;
line-height: 1.22rem;
margin-top: 2rem;
text-align: center;
}
.introduce-content3 span {
@ -430,6 +394,8 @@ body {
align-items: center;
justify-content: space-between;
margin-top: 0.3rem;
position: absolute;
bottom: 0;
}
.introduce-content4img {
@ -442,13 +408,13 @@ body {
}
.introduce-contentword {
width: auto;
width: 100%;
height: auto;
display: flex;
align-items: center;
position: absolute;
left: 10%;
bottom: 7.5%;
left: 8%;
bottom: 34%;
}
.wordone {
@ -458,7 +424,6 @@ body {
font-weight: bold;
font-size: 1.2rem;
color: #333333;
line-height: 1.88rem;
word-wrap: nowrap;
}
@ -477,7 +442,6 @@ body {
background-image: url(../images/website/橄榄叶右m.png);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-right: 1rem;
}
.wordthree {
@ -522,7 +486,7 @@ body {
font-family: Source Han Sans SC;
/* font-weight: bold; */
color: #FFFFFF;
width: 25.44rem;
width: 22.44rem;
height: 17.06rem;
font-family: Source Han Sans SC;
font-size: 1.13rem;
@ -572,7 +536,7 @@ body {
height: auto;
margin-top: 4.81rem;
display: grid;
grid-template-columns: repeat(2, 13rem);
grid-template-columns: repeat(2, 11.5rem);
/* 4列，每列19rem */
grid-template-rows: repeat(4, 6rem);
/* 2行，每行21rem */
@ -611,8 +575,8 @@ body {
}
.grid-item {
width: 12rem;
height: 5rem;
width: 8rem;
height: 2rem;
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
@ -814,7 +778,7 @@ body {
}
.section-center-city {
background-image: url(../images/website/公司介绍BG.png);
background-image: url(../images/website/公司介绍BG@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: bottom center;

121
jc-website/css/website.css
Unescape View File

@ -5,79 +5,17 @@ body {
user-select: none;
overflow-y: hidden;
}
@media (max-width: 575.98px) {
html {
font-size: 14px;
}
.navbar-brand {
font-size: 14px;
}
.nav-link {
font-size: 14px;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
html {
font-size: 15px;
}
.navbar-brand {
font-size: 16px;
}
.nav-link {
font-size: 15px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
html {
font-size: 16px;
}
.navbar-brand {
font-size: 18px;
}
.nav-link {
font-size: 16px;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
html {
font-size: 16px;
}
.navbar-brand {
font-size: 20px;
}
.nav-link {
font-size: 17px;
}
}
@media (min-width: 1200px) {
html {
font-size: 16px;
}
.navbar-brand {
font-size: 22px;
}
.nav-link {
font-size: 18px;
}
.container-fluid{
position: fixed;
top: 0;
width: 100%;
z-index: 100;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
}
:focus {
outline: none;
}
@ -241,19 +179,11 @@ body {
}
.menus1 {
width: 48rem;
float: right;
color: #333333;
font-size: 18px;
line-height: 70px;
margin-right: 5%;
}
.menus2 {
float: right;
color: #282b4a;
font-size: 18px;
line-height: 70px;
margin-right: 5%;
line-height: 50px;
}
.menu {
@ -307,7 +237,7 @@ body {
.section1 {
width: 100%;
height: 100%;
background-image: url(../images/website/公司介绍BG.png);
background-image: url(../images/website/公司介绍BG@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
@ -319,14 +249,14 @@ body {
.section2 {
width: 100%;
height: 100%;
background-image: url(../images/website/服务内容BG.png);
background-image: url(../images/website/服务内容BG@2x.png);
;
}
.section3 {
width: 100%;
height: 100%;
background-image: url(../images/website/行业案例.png);
background-image: url(../images/website/行业案例@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
@ -335,7 +265,7 @@ body {
.section4 {
width: 100%;
height: 100%;
background-image: url(.././images/website/公司资质BG.png);
background-image: url(../images/website/公司资质BG@2x.png);
background-size: 100% 100%;
display: flex;
flex-direction: column;
@ -345,7 +275,7 @@ body {
.section5 {
width: 100%;
height: 100%;
background-image: url(../images/website/联系我们BG.png);
background-image: url(../images/website/联系我们BG@2x.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
@ -433,7 +363,7 @@ body {
.introduce-grid-item {
width: 197px;
height: 69px;
background-image: url(../images/website/产品BG.png);
background-image: url(../images/website/产品BG@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
@ -473,7 +403,7 @@ body {
.introduce-content4img {
width: 3.13rem;
height: 8rem;
background-image: url(../images/website/图片2.png);
background-image: url(../images/website/图片2@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
@ -511,7 +441,7 @@ body {
.introduce-content4img2 {
width: 3.13rem;
height: 8rem;
background-image: url(../images/website/图片2\ 拷贝.png);
background-image: url(../images/website/图片2拷贝@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
@ -610,10 +540,8 @@ body {
height: auto;
margin-top: 1.81rem;
display: grid;
grid-template-columns: repeat(4, 18rem);
/* 4列，每列19rem */
grid-template-rows: repeat(2, 20rem);
/* 2行，每行21rem */
grid-template-columns: repeat(4, 17.5rem);
grid-template-rows: repeat(2, 19.5rem);
}
.section-contentsgird .grid-item:first-child {
@ -845,7 +773,7 @@ body {
}
.section-center-city {
background-image: url(../images/website/公司介绍BG.png);
background-image: url(../images/website/公司介绍BG@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: bottom center;
@ -1069,8 +997,3 @@ body {
width: 8rem;
height: 10rem;
}
.kongbai {
width: 65rem;
height: auto;
}

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

@ -14,9 +14,6 @@
content="极创澜海作为智慧城市行业应用与地理信息服务提供商，以科技创新为本，致力于地理信息、物联网、互联网和大数据技术应用的创新研究，主要从事智慧城市应用、跨部门信息共享和交换应用的研究、设计和建设工作，应用信息技术提升城市管理与服务水平，让城市运营管理更加高效。在城市综合管理、生态环境保护、工业企业、智慧城管、智慧环卫、农林水利、园林绿化等众多行业领域形成了成熟的细分产品与专业的行业解决方案。公司秉承“极致创造，智慧未来”的发展理念，致力于成为客户最信赖的合作伙伴，竭诚提供一流品质、一流技术的产品和优质服务。" />
<!--小图标 -->
<link rel="icon" href="../public/favicon.ico" type="image/x-icon" />
<!-- 引入bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
<!-- Demo styles -->
@ -37,7 +34,6 @@
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light header1" id="main-navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<div class="logo1"></div>
@ -46,43 +42,15 @@
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="kongbai"></div>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<div class="menus1">
<div class="menu menu0 menu-active" onclick="jump(0,true)">首页</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="menu menu1" onclick="jump(1,true)">公司介绍</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="menu menu2" onclick="jump(2,true)">公司资质</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="menu menu3" onclick="jump(3,true)">服务内容</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="menu menu4" onclick="jump(4,true)">行业案例</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="menu menu5" onclick="jump(5,true)">联系我们</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Swiper首页 -->
<div class="swiper-container">
<div class="swiper-wrapper">
@ -155,7 +123,7 @@
<span>极创科技</span>已获得相关知识产权证书50余项，包括高新技术企业认定、江苏省民营科技企业、国家级科技型中小企业、江苏省星级上云企业、1S09001质量管理体系认证证书、S014001环境管理体系认证证书、IS027001信息安全管理体系认证证书、AAA企业信用等级证书7项、软件企业认证证书、软件产品认证证书、发明专利2项、软件著作权证书24项、注册商标2项等
</div>
<div class="aptitude-image">
<img src="../../images/website/企业资质.png" alt="">
<img src="../images/website/企业资质.png" alt="">
</div>
</div>
</div>
@ -260,9 +228,6 @@
<!-- <div class="swiper-button-next swiper-button-white"></div> -->
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="../js/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
@ -294,20 +259,6 @@
on: {
slideChangeTransitionStart: function () {
jump(this.activeIndex, false);
if (this.activeIndex === 0 || this.activeIndex === 2) {
document.querySelector('.header1').style.display = "block";
document.querySelector('.swiper-button-next').style.color = "#ffffff";
} else if (
this.activeIndex === 1 ||
this.activeIndex === 3 ||
this.activeIndex === 4
) {
document.querySelector('.header1').style.display = "block";
document.querySelector('.swiper-button-next').style.color = "#000000";
} else if (this.activeIndex === 5) {
document.querySelector('.header1').style.display = "block";
// document.querySelector('.swiper-button-next').style.color = "transparent";
}
},
},
});

28
jc-website/html/mobile.html
Unescape View File

@ -13,9 +13,6 @@
<meta data-n-head="true" data-hid="description" name="description"
content="极创澜海作为智慧城市行业应用与地理信息服务提供商，以科技创新为本，致力于地理信息、物联网、互联网和大数据技术应用的创新研究，主要从事智慧城市应用、跨部门信息共享和交换应用的研究、设计和建设工作，应用信息技术提升城市管理与服务水平，让城市运营管理更加高效。在城市综合管理、生态环境保护、工业企业、智慧城管、智慧环卫、农林水利、园林绿化等众多行业领域形成了成熟的细分产品与专业的行业解决方案。公司秉承“极致创造，智慧未来”的发展理念，致力于成为客户最信赖的合作伙伴，竭诚提供一流品质、一流技术的产品和优质服务。" />
<link rel="icon" href="../public/favicon.ico" type="image/png" />
<!-- 引入bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
<!-- Demo styles -->
@ -23,7 +20,6 @@
</head>
<body>
<!-- Swiper首页 -->
<div class="swiper-container">
<div class="swiper-wrapper">
@ -31,7 +27,6 @@
<div class="banner">
<div class="bannerone"></div>
<div class="text-content"><span>极致创造</span><span>智慧未来</span></div>
</div>
</div>
<!-- 公司介绍 -->
@ -185,9 +180,6 @@
<!-- <div class="swiper-button-next swiper-button-white"></div> -->
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="../js/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
@ -216,25 +208,7 @@
navigation: {
nextEl: ".swiper-button-next",
},
on: {
slideChangeTransitionStart: function () {
jump(this.activeIndex, false);
if (this.activeIndex === 0 || this.activeIndex === 2) {
document.querySelector('.header1').style.display = "block";
document.querySelector('.swiper-button-next').style.color = "#ffffff";
} else if (
this.activeIndex === 1 ||
this.activeIndex === 3 ||
this.activeIndex === 4
) {
document.querySelector('.header1').style.display = "block";
document.querySelector('.swiper-button-next').style.color = "#000000";
} else if (this.activeIndex === 5) {
document.querySelector('.header1').style.display = "block";
// document.querySelector('.swiper-button-next').style.color = "transparent";
}
},
},
on: {},
});
</script>
</body>

BIN
jc-website/images/website/产品BG.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.7 KiB

BIN
jc-website/images/website/公司介绍BG.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 655 KiB

BIN
jc-website/images/website/公司介绍m.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 331 KiB

BIN
jc-website/images/website/图片2 拷贝.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

BIN
jc-website/images/website/图片2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

0
jc-website/images/website/图片2 拷贝@2x.png → jc-website/images/website/图片2拷贝@2x.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
jc-website/images/website/服务内容BG.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 531 KiB

BIN
jc-website/images/website/行业案例.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB

Write Preview
Loading…
Cancel
Save