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

websitie最终页面

Browse Source
main
严飞永 1 week ago
parent 6b9dbf6fba
commit dcf86f664d
5 changed files with 1603 additions and 111 deletions
Show Stats Download Patch File Download Diff File

689
jc-website/css/pc.css
Unescape View File

@ -10,6 +10,30 @@ body {
overflow: hidden;
height: 100%;
}
/* 字体包 */
@font-face {
font-family: "YouSheBiaoTiHei";
src: url("../fonts/优设标题黑.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/* 思源黑体 - 常规体 */
@font-face {
font-family: "normal Source Han Sans SC";
src: url("../fonts/SourceHanSansSC-Regular.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
/* 思源黑体 - 粗体 */
@font-face {
font-family: "bold Source Han Sans SC";
src: url("../fonts/SourceHanSansSC-Bold.otf") format("opentype");
font-weight: bold;
font-style: normal;
}
/* 仅手机 */
.only-phone {
display: none;
@ -17,6 +41,8 @@ body {
/* 仅pc */
.only-pc {
display: block;
width: 100%;
height: 100%;
}
/* 导航栏 */
@ -25,19 +51,17 @@ body {
top: 0;
left: 0;
width: 100%;
background-color: #2c3e50;
background-color: #ffffff;
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;
padding: 0 3%;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
height: 54px;
}
.nav-logo {
@ -58,7 +82,8 @@ body {
}
.nav-link {
color: #ecf0f1;
font-family: "normal Source Han Sans SC", sans-serif;
color: #333333;
text-decoration: none;
padding: 15px 10px;
display: block;
@ -68,7 +93,8 @@ body {
.nav-link:hover,
.nav-link.active {
color: #3498db;
color: #2136ff;
border-bottom: 2px solid #2136ff;
}
/* 汉堡菜单 */
@ -82,18 +108,18 @@ body {
display: block;
width: 25px;
height: 3px;
background-color: white;
background-color: #333;
margin: 5px 0;
transition: all 0.3s ease;
}
/* 最外部模块样式 */
.section-container {
height: 100vh;
height: calc(100vh - 54px);
width: 100%;
overflow-y: scroll;
scroll-snap-type: y mandatory;
padding-top: 60px;
margin-top: 54px;
/* 隐藏滚动条 */
scrollbar-width: none;
/* Firefox */
@ -109,7 +135,7 @@ body {
.section {
height: 100vh;
scroll-snap-align: start;
padding: 20px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
@ -124,50 +150,641 @@ body {
background-color: #e9e9e9;
}
/* 背景图的操作 */
/* 模块一1背景 */
/* 背景图 */
#section1 {
background-image: url(../images/website/banner1.png);
background-size: cover;
background-position: center;
}
/* 模块5背景 */
#section2 {
background-image: url(../images/website/公司介绍BG@2x.png);
background-size: cover;
background-position: center;
}
#section3 {
background-image: url(../images/website/公司资质BG@2x.png);
background-size: cover;
background-position: center;
}
#section4 {
background-image: url(../images/website/服务内容BG@2x.png);
background-size: cover;
background-position: center;
}
#section5 {
background-image: url(../images/website/行业案例@2x.png);
background-size: cover;
background-position: center;
}
#section6 {
background-image: url(../images/website/联系我们BG@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;
/* 首页pc */
.sypc {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* 首页的内容 */
.bannerpc {
width: 90%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
.banneronepc {
width: 40%;
height: 14%;
background-image: url(../images/website/banner标题.png);
background-size: 100% 100%;
}
.text-contentpc {
height: auto;
font-family: "bold Source Han Sans SC", sans-serif;
font-weight: bold;
font-style: italic;
font-size: 3.5vw;
text-wrap: nowrap;
color: #333333;
display: flex;
justify-content: space-between;
width: 34%;
color: #ffffff;
}
.text-buttonpc {
width: 20%;
height: 6%;
background: linear-gradient(90deg, #4c7fff, #1329ff);
border-radius: 0.63rem;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 1rem;
}
}
/* ============== */
.grid-item {
aspect-ratio: 3/2;
/* 宽高比（接近 300x200） */
background-size: cover;
background-position: center;
/* 公司介绍的内容 */
.jspc {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.introduce-title {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial;
font-weight: bold;
font-size: 1.5rem;
color: #333333;
}
.introduce-title2 {
width: 100%;
height: auto;
display: flex;
justify-content: center;
font-family: "normal Source Han Sans SC", sans-serif;
font-weight: bold;
font-size: 2.88rem;
color: #333333;
margin-top: 1%;
}
.introduce-content {
width: 68%;
height: auto;
font-family: "normal Source Han Sans SC", sans-serif;
font-size: 1.13rem;
text-align: left;
margin-top: 2%;
}
.introduce-content span {
color: #2136ff;
}
.introduce-content2 {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: auto;
font-family: "normal Source Han Sans SC", sans-serif;
font-size: 1.13rem;
margin-top: 2%;
text-align: left;
color: #666666;
.introduce-content2word {
width: 65%;
}
span {
color: #2136ff;
}
}
.introduce-grid {
margin-top: 2%;
width: 46%;
height: 6.3%;
display: flex;
align-items: center;
justify-content: center;
gap: 1.82%;
}
.introduce-grid2 {
margin-top: 1%;
width: 46%;
height: 6.3%;
display: flex;
align-items: center;
justify-content: center;
gap: 1.82%;
}
.introduce-grid-item {
width: 20%;
height: 3.5rem;
background-image: url(../images/website/产品BG@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.itemword {
font-family: "normal Source Han Sans SC", sans-serif;
font-size: 1rem;
height: auto;
color: #ffffff;
margin-top: -8%;
text-align: center;
}
.introduce-content3 {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: auto;
margin-top: 2%;
font-family: "normal Source Han Sans SC", sans-serif;
font-size: 1.13rem;
color: #666666;
.introduce-content3word {
width: 58%;
}
span {
color: #2136ff;
}
}
.introduce-content4 {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2.5%;
.introduce-content4img {
width: 3.13rem;
height: 8rem;
background-image: url(../images/website/图片2@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.introduce-contentword {
width: auto;
height: auto;
display: flex;
align-items: center;
}
.wordone {
width: 100%;
display: flex;
height: 100%;
align-items: center;
font-family: "bold Source Han Sans SC", sans-serif;
font-size: 2vw;
color: #333333;
word-wrap: nowrap;
}
.wordtwo {
width: 4.5rem;
height: 3.19rem;
font-family: Arial;
font-weight: bold;
font-size: 4vw;
color: #2136ff;
padding: 0 0.7rem;
margin-top: -1rem;
}
.introduce-content4img2 {
width: 3.13rem;
margin-left: 1rem;
height: 8rem;
background-image: url(../images/website/图片2拷贝@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
}
/* ============ */
/* 公司资质模块 */
.zzpc {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: space-around; */
.aptitude-title {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-weight: bold;
font-size: 1.5rem;
color: #ffffff;
margin-top: 1%;
}
.aptitude-title2 {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
font-family: "bold Source Han Sans SC", sans-serif;
font-size: 2.88rem;
color: #ffffff;
margin-top: 1%;
}
.aptitude-content {
font-family: "normal Source Han Sans SC", sans-serif;
color: #ffffff;
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.13rem;
margin-top: 1%;
}
.aptitude-contentword {
width: 70%;
height: auto;
text-align: center;
}
.aptitude-content span {
color: #fff000;
}
.aptitude-image {
width: 100%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 2%;
}
.aptitude-image img {
width: 75%;
height: 100%;
}
}
/* ================ */
/* 服务内容模块 */
.fwpc {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
/* justify-content: center; */
padding-top: 1%;
align-items: center;
.section-center1 {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.sectionfirst-title {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-weight: bold;
font-size: 1.5rem;
color: #333333;
}
.flexdiv {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.sectionsecond-title {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-family: "normal Source Han Sans SC", sans-serif;
font-weight: bold;
font-size: 2.88rem;
color: #333333;
text-wrap: nowrap;
}
.section-contentsgird {
width: 65%;
height: 70%;
margin-top: 2%;
display: grid;
grid-template-columns: repeat(4, 24%);
grid-template-rows: repeat(2, 60%);
}
.section-contentsgird .grid-item:first-child {
background-image: url(../images/website/智慧教育BG@2x.png);
}
.section-contentsgird .grid-item.grid-item:nth-child(2) {
background-image: url(../images/website/数据建库BG@2x.png);
}
.section-contentsgird .grid-item.grid-item:nth-child(3) {
background-image: url(../images/website/软件研发BG@2x.png);
}
.section-contentsgird .grid-item.grid-item:nth-child(4) {
background-image: url(../images/website/方案咨询BG@2x.png);
}
.section-contentsgird .grid-item.grid-item:nth-child(5) {
background-image: url(../images/website/大数据分析BG@2x.png);
}
.section-contentsgird .grid-item.grid-item:nth-child(6) {
background-image: url(../images/website/地图服务BG@2x.png);
}
.section-contentsgird .grid-item.grid-item:nth-child(7) {
background-image: url(../images/website/物联感知BG@2x.png);
}
.section-contentsgird .grid-item.grid-item:nth-child(8) {
background-image: url(../images/website/BIM应用BG@2x.png);
}
.section-contentsgird .grid-item {
width: 103%;
height: 103%;
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 10%;
}
.girdtitle {
width: 100%;
height: 30%;
font-family: "bold Source Han Sans SC", sans-serif;
font-weight: bold;
font-size: 1.5rem;
color: #e1edfb;
text-wrap: nowrap;
display: flex;
align-items: center;
justify-content: left;
}
.girdcontent {
width: 100%;
height: 60%;
padding-top: 10%;
font-family: "nomal Source Han Sans SC", sans-serif;
font-weight: 400;
font-size: 0.88vw;
color: #666666;
text-align: left;
}
}
/* 联系我们模块 */
.lxpc {
width: 100%;
margin-top: -54px;
height: calc(100 - 54px);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
.lxtitleone {
width: 100%;
height: auto;
display: flex;
justify-content: center;
color: white;
align-items: center;
color: #ffffff;
font-size: 1.5rem;
}
.lxtitletwo {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 2.88rem;
}
.wechatimg1 {
width: 8rem;
height: 8rem;
background-image: url(../images/website/公众号@2x.png);
background-size: 100% 100%;
}
.wechatimg2 {
width: 8rem;
height: 8rem;
background-image: url(../images/website/小程序@2x.png);
background-size: 100% 100%;
}
.dituicon1 {
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
}
.coleft-text {
width: 100%;
height: 4rem;
color: #ffffff;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 0.5rem;
.item {
width: auto;
margin-left: 18%;
font-size: 1vw;
}
a {
font-size: 1vw;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ccc;
display: inline-block;
padding-bottom: 2px;
}
}
.coright-text{
width: 100%;
display: flex;
flex-direction: column;
}
.sevtionword {
width: 100%;
height: auto;
font-family: "bold Source Han Sans SC", sans-serif;
font-weight: bold;
font-size: 1.4rem;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
text-wrap: nowrap;
margin-top: 20%;
}
.section-content4-image-text {
margin-top: 2%;
color: #ffffff;
font-size: 1.13rem;
width: 8rem;
text-align: center;
position: relative;
}
.section-content4-icon {
float: left;
width: 24px;
height: 24px;
background-size: 100% 100%;
margin-right: 19px;
}
.lxcontainer {
width: 90%;
height: 50%;
margin-top: 5%;
display: flex;
justify-content: center;
}
.coleft {
width: 35%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.coright {
width: 30%;
height: 99%;
margin-left: 1%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.coimage {
width: 100%;
height: 100%;
background-image: url(../images/website/地图.png);
box-shadow: 0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.45);
border-radius: 0.63rem;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.grid-item h2,
.grid-item p {
transition: opacity 0.3s ease;
position: relative;
z-index: 1;
.rightimg {
margin-top: 12%;
width:100%;
display: flex;
gap: 5%;
justify-content: center;
}
.rightimg img {
width: 8rem;
height: 10rem;
}
.coright-textbottom{
width: 100%;
height: 4rem;
display: flex;
justify-content: center;
align-content: center;
gap: 5%;
}
.footer {
width: 100%;
height: 4rem;
background: #000728;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
}
.footerone {
width: 29.5rem;
height: 1rem;
font-family: "nomal Source Han Sans SC", sans-serif;
font-weight: 400;
font-size: 0.88rem;
color: #FFFFFF;
text-wrap: nowrap;
}
.footer a {
color: #FFFFFF;
}

657
jc-website/css/phone.css
Unescape View File

@ -1,59 +1,74 @@
/* 移动端适配 */
@media (max-width: 768px) {
/* 仅手机端显示 */
.only-phone {
display: block;
/* */
@media (max-width: 480px) {
.nav-container {
height: 54px;
}
/* 仅pc显示 */
.only-pc {
display: none;
.section-container {
padding-top: 54px;
}
/* ----模块二的内容---- */
.grid-item {
width: 150px;
height: 100px;
/* 调整移动端高度 */
margin: 5px 0;
background-image: url(../images/website/数据建库m.png) !important;
background-size: 100% 100%;
background-position: center;
.nav-menu {
top: 54px;
height: calc(100vh - 54px);
}
.grid-item:nth-child(2) {
background-image: url(../images/website/人工智能m.png) !important;
background-size: 100% 100%;
background-position: center;
.nav-logo {
font-size: 1rem;
}
/* 在移动端隐藏文字 */
.grid-item h2,
.grid-item p {
display: none;
.section {
padding: 10px 20px;
}
/* -------------------- */
/* 背景图操作 */
#section1 {
background-image: url(../images/website/深色banner@2x.png);
background-size: cover;
background-position: center;
.section h2 {
font-size: 1.8rem;
}
#section5 {
background-image: url(../images/website/行业案例m.png);
background-size: cover;
background-position: center;
}
@media (max-width: 768px) {
/* 字体包 */
/* 优设标题黑 - 通常用于标题 */
@font-face {
font-family: "YouSheBiaoTiHei";
src: url("../fonts/优设标题黑.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/* 思源黑体 - 常规体 */
@font-face {
font-family: "normal Source Han Sans SC";
src: url("../fonts/SourceHanSansSC-Regular.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
/* -------------------- */
/* 菜单栏 */
/* 思源黑体 - 粗体 */
@font-face {
font-family: "bold Source Han Sans SC";
src: url("../fonts/SourceHanSansSC-Bold.otf") format("opentype");
font-weight: bold;
font-style: normal;
}
/* 仅手机端显示 */
.only-phone {
display: block;
width: 100%;
height: 100%;
}
/* 仅pc显示 */
.only-pc {
display: none;
}
/* 菜单栏(汉堡侧边栏) */
.nav-menu {
position: fixed;
top: 60px;
top: 54px;
left: -100%;
width: 30%;
height: calc(100vh - 60px);
background-color: #2c3e50;
height: calc(100vh - 54px);
background-color: #ffffff;
flex-direction: column;
align-items: center;
padding-top: 20px;
@ -87,39 +102,569 @@
font-size: 2rem;
}
/* -------------------- */
}
/* 暂时不考虑↓ */
@media (max-width: 480px) {
.nav-container {
height: 50px;
/* 在移动端隐藏文字 */
.grid-item h2,
.grid-item p {
display: none;
}
/* -------------------- */
/* 背景图操作 */
#section1 {
background-image: url(../images/website/深色banner@2x.png);
background-size: 100% 100%;
background-position: center;
}
#section2 {
background-image: url(../images/website/公司介绍m.png);
background-size: 100% 100%;
background-position: center;
}
#section3 {
background-image: url(.././images/website/公司资质BG.png);
background-size: 100% 100%;
background-position: center;
}
#section4 {
background-image: url(../images/website/服务内容m.png);
background-size: 100% 100%;
background-position: center;
}
#section5 {
/* 为手机端准备的图片 */
background-image: url(../images/website/行业案例m.png);
background-size: cover;
background-size: 100% 100%;
background-position: center;
}
#section6 {
background-image: url(../images/website/联系我们m.png);
background-size: 100% 100%;
background-position: center;
}
/* -------------------- */
.section-container {
padding-top: 50px;
/* 首页模块 */
/* phone */
.banner {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
.bannerone {
width: 15.85rem;
height: 3.56rem;
background-image: url(../images/website/banner标题.png);
background-size: 100% 100%;
}
.text-content {
width: 12.25rem;
height: 2.19rem;
font-family: "bold Source Han Sans SC";
font-weight: bold;
font-size: 1.45rem;
text-wrap: nowrap;
color: #ffffff;
display: flex;
justify-content: space-between;
}
}
/* 公司介绍模块 */
.jsmobile {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3%;
}
.mobileintro-title {
font-family: Arial;
font-weight: bold;
color: #333333;
width: 100%;
height: auto;
display: flex;
justify-content: center;
font-weight: bold;
font-size: 3.5vw;
color: #333333;
}
.nav-menu {
top: 50px;
height: calc(100vh - 50px);
.mobileintro-title2 {
width: 100%;
height: auto;
display: flex;
justify-content: center;
font-family: "bold Source Han Sans SC", sans-serif;
font-weight: bold;
font-size: 7vw;
color: #333333;
}
.nav-logo {
.mobileintro-content {
width: 100%;
height: auto;
font-family: "normal Source Han Sans SC", sans-serif;
font-weight: normal;
font-size: 4vw;
color: #333333;
text-align: left;
}
.mobileintro-content span {
color: #2136ff;
font-weight: bold;
}
.mobileintro-content2 {
width: 100%;
height: auto;
font-family: "normal Source Han Sans SC", sans-serif;
font-size: 4vw;
color: #333333;
text-align: left;
}
.mobileintro-content2 span {
color: #2136ff;
font-weight: bold;
}
.mobileintro-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.82%;
justify-items: center;
}
.mobileintro-grid-item {
width: 100%;
height: 120%;
background-image: url(../images/website/产品BG@2x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
/* align-items: center; */
}
.itemword {
font-family: "normal Source Han Sans SC", sans-serif;
font-size: 3vw;
color: #ffffff;
line-height: 30px;
}
.mobileintro-content3 {
width: 100%;
height: auto;
font-family: "normal Source Han Sans SC", sans-serif;
font-weight: normal;
font-size: 4vw;
color: #333333;
text-align: left;
}
.mobileintro-content3 span {
color: #2136ff;
}
.mobileintro-content4 {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.mobileintro-content4img {
width: 14vw;
height: 12vw;
background-image: url(../images/website/橄榄叶左m.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.mobileintro-contentword {
width: 115%;
height: auto;
display: flex;
align-items: center;
}
.mobileintrowordone {
width: 100%;
/* margin-left: -50px; */
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-family: "bold normal Source Han Sans SC", sans-serif;
font-weight: bold;
font-size: 1rem;
color: #333333;
}
.section {
padding: 15px;
.wordtwo {
width: auto;
height: auto;
font-family: Arial;
font-weight: bold;
font-size: 2rem;
color: #2136ff;
}
.section h2 {
font-size: 1.8rem;
.introduce-content4img2 {
width: 14vw;
height: 12vw;
background-image: url(../images/website/橄榄叶右m.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* =========== */
/* 公司资质 */
.zzphone {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10%;
.mobileaptitude-title {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-weight: bold;
font-size: 3.5vw;
color: #ffffff;
margin-top: 1%;
}
.mobileaptitude-title2 {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
font-family: "bold Source Han Sans SC", sans-serif;
font-size: 7vw;
color: #ffffff;
margin-top: 1%;
}
.mobileaptitude-content {
font-family: "normal Source Han Sans SC", sans-serif;
color: #ffffff;
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 4vw;
margin-top: 1%;
}
.mobileaptitude-contentword {
width: 100%;
height: auto;
}
.mobileaptitude-content span {
color: #fff000;
}
.mobileaptitude-image {
width: 100%;
height: 30%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 2%;
}
.mobileaptitude-image img {
width: 100%;
height: 100%;
}
}
/* ----服务内容模块---- */
.fwphone {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4%;
}
.mobilesectionfirst-title {
width: 100%;
height: auto;
font-family: Arial;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
font-size: 3.5vw;
color: #333333;
}
.mobilesectionsecond-title {
width: 100%;
height: auto;
font-family: "bold Source Han Sans SC", sans-serif;
font-weight: bold;
font-size: 7vw;
color: #333333;
text-wrap: nowrap;
}
.mobilesection-contentsgird {
width: 100%;
height: 40%;
display: grid;
grid-template-columns: repeat(2, 49%);
grid-template-rows: repeat(4, 20%);
gap: 3%;
}
.mobilesection-contentsgird .grid-item:first-child {
background-image: url(../images/website/人工智能m.png);
}
.mobilesection-contentsgird .grid-item.grid-item:nth-child(2) {
background-image: url(../images/website/数据建库m.png);
}
.mobilesection-contentsgird .grid-item.grid-item:nth-child(3) {
background-image: url(../images/website/软件研发m.png);
}
.mobilesection-contentsgird .grid-item.grid-item:nth-child(4) {
background-image: url(../images/website/方案咨询m.png);
}
.mobilesection-contentsgird .grid-item.grid-item:nth-child(5) {
background-image: url(../images/website/大数据分析m.png);
}
.mobilesection-contentsgird .grid-item.grid-item:nth-child(6) {
background-image: url(../images/website/地图服务m.png);
}
.mobilesection-contentsgird .grid-item.grid-item:nth-child(7) {
background-image: url(../images/website/物联网感知m.png);
}
.mobilesection-contentsgird .grid-item.grid-item:nth-child(8) {
background-image: url(../images/website/BIM应用m.png);
}
.mobilesection-contentsgird .grid-item {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
align-items: center;
padding-left: 9%;
font-family: "bold Source Han Sans SC", sans-serif;
font-weight: bold;
font-size: 1.26rem;
color: #e1edfb;
}
.section-center1 {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* =============== */
/* ==行业案例== */
.anli {
height: 70%;
width: 100%;
display: flex;
text-align: center;
flex-direction: column;
color: #ffffff;
gap: 16px;
.anlien {
font-family: Arial;
color: #ffffff;
font-weight: bold;
}
.anliword {
font-family: "bold Source Han Sans SC", sans-serif;
font-weight: bold;
font-size: 1.7rem;
}
}
/* ============ */
/* 联系我们 */
.m-phone {
display: flex;
flex-direction: column;
width: 100%;
height: calc(100vh - 54px);
}
.m-header {
margin-top: 1%;
color: #FFFFFF;
width: 100%;
height: 20%;
display: flex;
justify-content: center;
flex-direction: column;
.m-title-en{
width: 100%;
display: flex;
font-size: 3.5vw;
justify-content: center;
}
.m-title-cn{
width: 100%;
display: flex;
font-size: 7vw;
justify-content: center;
}
}
.m-content {
height: 80%;
width: 100%;
display: flex;
padding: 0% 10% 0 10%;
flex-direction: column;
}
.m-left,
.m-right {
height: 50%;
width: 100%;
}
.m-right{
margin-top: 15%;
}
.m-map {
width: 100%;
height: 80%;
background-image: url(../images/website/地图.png);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.m-info {
display: flex;
align-items: center;
margin: 0.8rem 0;
font-size: 0.95rem;
color: #ffffff;
a{
color: #ffffff;
border: none;
}
}
.m-icon {
width: 1.2rem;
height: 1.2rem;
margin-right: 0.6rem;
background-size: contain;
background-repeat: no-repeat;
}
.m-icon-loc {
background-image: url(../images/website/定位.png);
}
.m-icon-phone {
background-image: url(../images/website/电话.png);
}
.m-scan-text {
font-size: 1rem;
margin-bottom: 1rem;
color: #333;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
}
.m-scan-group {
display: flex;
justify-content: space-around;
margin-top: 1rem;
}
.m-scan-item {
text-align: center;
flex: 1;
max-width: 45%;
}
.m-wechat,
.m-miniprogram {
width: 100%;
aspect-ratio: 1/1;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin: 0 auto;
}
.m-wechat {
background-image: url(../images/website/公众号@2x.png);
}
.m-miniprogram {
background-image: url(../images/website/小程序@2x.png);
}
.m-scan-label {
font-size: 0.85rem;
margin-top: 0.5rem;
color: #ffffff;
}
/* Footer */
.m-footer {
width: 100%;
text-align: center;
background-color: #000728;
color: white;
padding: 1%;
}
.m-copyright {
font-size: 0.75rem;
line-height: 1.4;
background-color: #000728;
}
.m-copyright a {
text-decoration: none;
color: #ffffff;
}
}

368
jc-website/html/website.html
Unescape View File

@ -3,7 +3,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="baidu-site-verification" content="j9hBfxIB2o" />
<meta name="google-site-verification" content="pfnCitaoMtrGXTD8vN_yDukeSr5wnBpKVt6St8gIy7A" />
<meta name="shenma-site-verification" content="9d028d05a262eabc29e2e1568c29bc04_1584694031" />
<meta data-n-head="true" data-hid="keywords" name="keywords"
content="极创 澜海 极创科技 苏州极创科技 极创澜海 苏州极创 苏州澜海 苏州极创澜海 极创澜海官网 极创澜海官方网站 苏州极创澜海科技有限公司 智慧城市 政府软件 智慧园林 智慧农业 智慧工业 智慧园区 智慧城管 智慧安监 智慧公安 智慧地税 智慧环保 智慧市政 智慧医疗 智慧环卫 智慧社保" />
<meta data-n-head="true" data-hid="description" name="description"
content="极创澜海作为智慧城市行业应用与地理信息服务提供商，以科技创新为本，致力于地理信息、物联网、互联网和大数据技术应用的创新研究，主要从事智慧城市应用、跨部门信息共享和交换应用的研究、设计和建设工作，应用信息技术提升城市管理与服务水平，让城市运营管理更加高效。在城市综合管理、生态环境保护、工业企业、智慧城管、智慧环卫、农林水利、园林绿化等众多行业领域形成了成熟的细分产品与专业的行业解决方案。公司秉承“极致创造，智慧未来”的发展理念，致力于成为客户最信赖的合作伙伴，竭诚提供一流品质、一流技术的产品和优质服务。" />
<!--小图标 -->
<link rel="icon" href="../public/favicon.ico" type="image/x-icon" />
<title>极创科技</title>
@ -16,7 +23,9 @@
<!-- 固定导航栏 -->
<nav class="navbar">
<div class="nav-container">
<a href="#" class="nav-logo">LOGO</a>
<a href="#" class="nav-logo">
<img src="../images/website/极创科技logoV3-02.png" alt="">
</a>
<!-- 汉堡菜单按钮 -->
<div class="menu-toggle">
@ -25,6 +34,7 @@
<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>
@ -40,42 +50,362 @@
<div class="section-container">
<!-- 首页模块 -->
<section id="section1" class="section">
<div class="only-phone syphone">
<div class="banner">
<div class="bannerone"></div>
<div class="text-content"><span>极致创造</span><span>智慧未来</span></div>
</div>
</div>
<div class="only-pc sypc">
<div class="bannerpc">
<div class="banneronepc"></div>
<div class="text-contentpc"><span>极致创造</span><span>智慧未来</span></div>
<button class="text-buttonpc">了解更多</button>
</div>
</div>
</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>
<!-- pc显示 -->
<div class="only-pc jspc">
<div class="introduce-title">ABOUT</div>
<div class="introduce-title2">公司介绍</div>
<div class="introduce-content">
<span
style="white-space: nowrap;">极创科技</span>已通过高新技术企业认定，作为智慧城市行业应用与地理信息服务提供商，致力于地理信息、物联网、人工智能和大数据技术应用的创新研究，主要从事智慧城市应用、地理信息服务、三维建模的研究、咨询与建设工作，贴近城市管理与服务的信息化需求，专注于智慧城市建设，致力于创造更安全、便捷、绿色的城市生活。
</div>
<div class="introduce-content2">
<div class="introduce-content2word">
<span
style="white-space: nowrap;">极创科技</span>专注于智慧城市中的智慧应急、智慧安监、智慧城管、智慧农业等领域，为政府部门及相关行业提供以软件为核心的智慧化整体解决方案。
</div>
</div>
<div class="grid-item" style="background-image: url(../images/website/数据建库BG@2x.png);">
<h2>模块二 - 项目二</h2>
<p>这里是模块二项目二的内容区域。</p>
<div class="introduce-grid">
<div class="introduce-grid-item">
<div class="itemword">智慧应急</div>
</div>
<div class="introduce-grid-item">
<div class="itemword">智慧安监</div>
</div>
<div class="introduce-grid-item">
<div class="itemword">智慧城管</div>
</div>
<div class="introduce-grid-item">
<div class="itemword">智慧农业</div>
</div>
</div>
<div class="introduce-grid2">
<div class="introduce-grid-item">
<div class="itemword">智慧社区</div>
</div>
<div class="introduce-grid-item">
<div class="itemword">智慧招商</div>
</div>
<div class="introduce-grid-item">
<div class="itemword">食药监管</div>
</div>
<div class="introduce-grid-item">
<div class="itemword">其他产品</div>
</div>
</div>
<div class="introduce-content3">
<div class="introduce-content3word">
公司秉承 “<span
style="white-space: nowrap;">极致创造，智慧未来</span>”的发展理念，致力于成为客户最信赖的合作伙伴，竭诚提供一流品质、一流技术的产品和优质服务。
</div>
</div>
<div class="introduce-content4">
<div class="introduce-content4img"></div>
<div class="introduce-contentword">
<div class="wordone">
<span>已获得相关知识产权证书<span class="wordtwo">50</span>余项</span>
</div>
</div>
<div class="introduce-content4img2"></div>
</div>
</div>
<!-- 移动端显示 -->
<div class="only-phone">
<div class="jsmobile">
<div style="margin-bottom: 2%;">
<div class="mobileintro-title">ABOUT</div>
<div class="mobileintro-title2">公司介绍</div>
</div>
<div class="mobileintro-content">
<span>极创科技</span>已通过高新技术企业认定，作为智慧城市行业应用与地理信息服务提供商，致力于地理信息、物联网、人工智能和大数据技术应用的创新研究，主要从事智慧城市应用、地理信息服务、三维建模的研究、咨询与建设工作，贴近城市管理与服务的信息化需求，专注于智慧城市建设，致力于创造更安全、便捷、绿色的城市生活。
</div>
<div class="mobileintro-content2">
<span>极创科技</span>专注于智慧城市中的智慧应急、智慧安监、智慧城管、智慧农业等领域，为政府部门及相关行业提供以软件为核心的智慧化整体解决方案。
</div>
<div class="mobileintro-grid">
<div class="mobileintro-grid-item">
<div class="itemword">智慧应急</div>
</div>
<div class="mobileintro-grid-item">
<div class="itemword">智慧安监</div>
</div>
<div class="mobileintro-grid-item">
<div class="itemword">智慧城管</div>
</div>
<div class="mobileintro-grid-item">
<div class="itemword">智慧农业</div>
</div>
<div class="mobileintro-grid-item">
<div class="itemword">智慧社区</div>
</div>
<div class="mobileintro-grid-item">
<div class="itemword">智慧招商</div>
</div>
<div class="mobileintro-grid-item">
<div class="itemword">食药监管</div>
</div>
<div class="mobileintro-grid-item">
<div class="itemword">其他产品</div>
</div>
</div>
<div class="mobileintro-content3">
公司秉承 “<span>极致创造，智慧未来</span>”的发展理念，致力于成为客户最信赖的合作伙伴，竭诚提供一流品质、一流技术的产品和优质服务。
</div>
<div class="mobileintro-content4">
<div class="mobileintro-content4img"></div>
<div class="mobileintro-contentword">
<div class="mobileintrowordone">
<span>已获得相关知识产权证书<span class="wordtwo">50</span>余项</span>
</div>
</div>
<div class="introduce-content4img2"></div>
</div>
</div>
<!-- 其他项目 -->
</div>
</section>
<!-- 公司资质模块 -->
<section id="section3" class="section">
<h2></h2>
<p></p>
<!-- pc端显示 -->
<div class="only-pc">
<div class="zzpc">
<div class="aptitude-title">QUALIFICATION</div>
<div class="aptitude-title2">公司资质</div>
<div class="aptitude-content">
<div class="aptitude-contentword">
<span>极创科技</span>已获得相关知识产权证书50余项，包括高新技术企业认定、江苏省民营科技企业、国家级科技型中小企业、江苏省星级上云企业、1S09001质量管理体系认证证书、S014001环境管理体系认证证书、IS027001信息安全管理体系认证证书、AAA企业信用等级证书7项、软件企业认证证书、软件产品认证证书、发明专利2项、软件著作权证书24项、注册商标2项等
</div>
</div>
<div class="aptitude-image">
<img src="../images/website/企业资质.png" alt="">
</div>
</div>
</div>
<!-- 手机端 -->
<div class="only-phone">
<div class="zzphone">
<div>
<div class="mobileaptitude-title">QUALIFICATION</div>
<div class="mobileaptitude-title2">公司资质</div>
</div>
<div class="mobileaptitude-content">
<div class="mobileaptitude-contentword">
<span>极创科技</span>已获得相关知识产权证书50余项，包括高新技术企业认定、江苏省民营科技企业、国家级科技型中小企业、江苏省星级上云企业、1S09001质量管理体系认证证书、S014001环境管理体系认证证书、IS027001信息安全管理体系认证证书、AAA企业信用等级证书7项、软件企业认证证书、软件产品认证证书、发明专利2项、软件著作权证书24项、注册商标2项等
</div>
</div>
<div class="mobileaptitude-image">
<img src="../images/website/企业资质.png" alt="">
</div>
</div>
</div>
</section>
<!-- 服务内容模块 -->
<section id="section4" class="section">
<h2></h2>
<p></p>
<!-- pc端显示 -->
<div class="only-pc">
<div class="fwpc">
<div class="sectionfirst-title">CONTENT</div>
<div class="sectionsecond-title">服务内容</div>
<div class="flexdiv">
<div class="section-contentsgird">
<div class="grid-item">
<div class="girdtitle">人工智能</div>
<div class="girdcontent"> 利用AI小模型和大模型算法，实现图像分析、视频分析、语音分析、语义分析、深度思考等能力，与业务平台相结合</div>
</div>
<div class="grid-item">
<div class="girdtitle">数据建库</div>
<div class="girdcontent">关系型数据与空间数据库的数据库建设、数据梳理、数据加工、数据备份、数据整合、数据导出、数据共享
</div>
</div>
<div class="grid-item">
<div class="girdtitle">软件研发</div>
<div class="girdcontent">浏览器平台软件、桌面平台软件、IOS平台APP软件、安卓平台APP软件、手机H5页面、微信公众号、微信小程序软件的研发
</div>
</div>
<div class="grid-item">
<div class="girdtitle">方案咨询</div>
<div class="girdcontent">智慧城市、智慧教育、企业服务等领域的解决方案和项目建设方案的编写与咨询</div>
</div>
<div class="grid-item">
<div class="girdtitle">大数据分析</div>
<div class="girdcontent">对海量数据进行二次加工处理，通过大量算法模型，从既有数据中分析出统计数据、对比数据、趋势数据、预测数据</div>
</div>
<div class="grid-item">
<div class="girdtitle">地图服务</div>
<div class="girdcontent">将二维地图数据和三维地图数据，发布为地图服务，从而方便地图应用和数据共享</div>
</div>
<div class="grid-item">
<div class="girdtitle">物联感知</div>
<div class="girdcontent">建设传感器、摄像头、智能仪表等物联设备体系，通过物联网络，实现设备数据实时传输、存储、监测、预警、共享</div>
</div>
<div class="grid-item">
<div class="girdtitle">BIM应用</div>
<div class="girdcontent">使用无人机倾斜摄影、360全景采集等方式进行基础数据采集，通过建立虚拟的建筑工程三维模型，辅助于智慧城市信息化建设</div>
</div>
</div>
</div>
</div>
</div>
<!-- 手机端显示 -->
<div class="only-phone">
<div class="fwphone">
<div>
<div class="mobilesectionfirst-title">CONTENT</div>
<div class="mobilesectionsecond-title">服务内容</div>
</div>
<div class="mobilesection-contentsgird">
<div class="grid-item">
<div>人工智能</div>
</div>
<div class="grid-item">
<div>数据建库</div>
</div>
<div class="grid-item">
<div>软件研发</div>
</div>
<div class="grid-item">
<div>方案咨询</div>
</div>
<div class="grid-item">
<div>大数据分析</div>
</div>
<div class="grid-item">
<div>地图服务</div>
</div>
<div class="grid-item">
<div>物联感知</div>
</div>
<div class="grid-item">
<div>BIM应用</div>
</div>
</div>
</div>
</div>
</section>
<!-- 行业案例模块 -->
<section id="section5" class="section">
<section id="section5" class="section" style="height: 97vh;">
<!-- 只在手机端显示的文字 -->
<div class="only-phone anli">
123
<div class="anlien">INDUSTRY CASE</div>
<div class="anliword">行业案例</div>
</div>
</section>
<!-- 联系我们模块 -->
<section id="section6" class="section">
<h2></h2>
<p></p>
<section id="section6" class="section" style="padding: 0;">
<!-- pc端 -->
<div class="lxpc only-pc">
<div>
<div class="lxtitleone"><span>CONTANT</span> &nbsp;<span>US</span></div>
<div class="lxtitletwo">联系我们</div>
</div>
<div class="lxcontainer">
<div class="coleft">
<div class="coimage"></div>
<div class="coleft-text">
<div class="item">
<img class="dituicon1" src="../images/website/定位.png" alt="">
<a title="点击查看地图" href="https://www.gaode.com/place/B0H655PK3J"
target="_blank">苏州工业园区腾飞苏州创新园 B406</a>
</div>
<div class="item">
<img class="dituicon1" src="../images/website/电话.png" alt="">
<span>18013199985</span>
</div>
</div>
</div>
<div class="coright">
<div class="sevtionword">扫码关注我们</div>
<div class="coright-text">
<div class="rightimg">
<div class="wechatimg1"></div>
<div class="wechatimg2"></div>
</div>
<div class="coright-textbottom">
<div class="section-content4-image-text">微信公众号</div>
<div class="section-content4-image-text">微信小程序</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footerone">
Copyright©️2022
&nbsp;
<a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备20012657号</a>
&nbsp;
苏州极创澜海科技有限公司 版权所有
</div>
</div>
</div>
<!-- 手机端 -->
<div class="only-phone lxphone">
<div class="m-phone">
<div class="m-header">
<div class="m-title-en"><span>CONTACT</span> <span>US</span></div>
<div class="m-title-cn">联系我们</div>
</div>
<div class="m-content">
<div class="m-left">
<div class="m-map"></div>
<div class="m-info">
<div class="m-icon m-icon-loc"></div>
<a href="https://www.gaode.com/place/B0H655PK3J" target="_blank">苏州工业园区腾飞创新园B406</a>
</div>
<div class="m-info">
<div class="m-icon m-icon-phone"></div>
<div>18013199985</div>
</div>
</div>
<div class="m-right">
<div class="m-scan-text">扫码关注我们</div>
<div class="m-scan-group">
<div class="m-scan-item">
<div class="m-wechat"></div>
<div class="m-scan-label">微信公众号</div>
</div>
<div class="m-scan-item">
<div class="m-miniprogram"></div>
<div class="m-scan-label">微信小程序</div>
</div>
</div>
</div>
</div>
<div class="m-footer">
<div class="m-copyright">
Copyright©️2022
&nbsp;
<a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备20012657号</a>
<br>
苏州极创澜海科技有限公司 版权所有
</div>
</div>
</div>
</div>
</section>
</div>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 949 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 565 KiB

Write Preview
Loading…
Cancel
Save