diff --git a/jc-website/css/pc.css b/jc-website/css/pc.css index 833c5bc..1f954fc 100644 --- a/jc-website/css/pc.css +++ b/jc-website/css/pc.css @@ -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; +} \ No newline at end of file diff --git a/jc-website/css/phone.css b/jc-website/css/phone.css index a3b6dba..cfab0f6 100644 --- a/jc-website/css/phone.css +++ b/jc-website/css/phone.css @@ -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; + } + } diff --git a/jc-website/html/website.html b/jc-website/html/website.html index c280157..b127054 100644 --- a/jc-website/html/website.html +++ b/jc-website/html/website.html @@ -3,7 +3,14 @@
- + + + + + +