* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Arial", sans-serif; } html, 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; } /* 仅pc */ .only-pc { display: block; width: 100%; height: 100%; } /* 导航栏 */ .navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #ffffff; z-index: 1000; } .nav-container { margin: 0 auto; padding: 0 3%; display: flex; justify-content: space-between; align-items: center; height: 54px; } .nav-logo { color: white; font-weight: bold; font-size: 1.2rem; text-decoration: none; } .nav-menu { display: flex; list-style: none; transition: all 0.3s ease; } .nav-item { margin: 0 10px; } .nav-link { font-family: "normal Source Han Sans SC", sans-serif; color: #333333; text-decoration: none; padding: 15px 10px; display: block; transition: color 0.3s; font-size: 0.9rem; } .nav-link:hover, .nav-link.active { color: #2136ff; border-bottom: 2px solid #2136ff; } /* 汉堡菜单 */ .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: calc(100vh - 54px); width: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; margin-top: 54px; /* 隐藏滚动条 */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 和 Edge */ } /* 隐藏Webkit浏览器滚动条 */ .section-container::-webkit-scrollbar { display: none; } /* 各个模块的div */ .section { height: 100vh; scroll-snap-align: start; padding: 0 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .section:nth-child(odd) { background-color: #f9f9f9; } .section:nth-child(even) { background-color: #e9e9e9; } /* 背景图 */ #section1 { background-image: url(../images/website/banner1.png); background-size: cover; background-position: center; } #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; } /* 首页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; } } /* ============== */ /* 公司介绍的内容 */ .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; 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; } .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; } .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; }