You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
790 lines
15 KiB
790 lines
15 KiB
* {
|
|
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;
|
|
} |