/* 移动端适配 */ /* */ @media (max-width: 480px) { .nav-container { height: 54px; } .section-container { padding-top: 54px; } .nav-menu { top: 54px; height: calc(100vh - 54px); } .nav-logo { font-size: 1rem; } .section { padding: 10px 20px; } .section h2 { font-size: 1.8rem; } } @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: 54px; left: -100%; width: 30%; height: calc(100vh - 54px); background-color: #ffffff; flex-direction: column; align-items: center; padding-top: 20px; } .nav-menu.active { left: 0; } .nav-item { margin: 15px 0; } .menu-toggle { display: block; } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } .section h2 { font-size: 2rem; } /* -------------------- */ /* 在移动端隐藏文字 */ .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: 100% 100%; background-position: center; } #section6 { background-image: url(../images/website/联系我们m.png); background-size: 100% 100%; background-position: center; } /* -------------------- */ /* 首页模块 */ /* 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; } .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; } .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; } .wordtwo { width: auto; height: auto; font-family: Arial; font-weight: bold; font-size: 2rem; color: #2136ff; } .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; } }