Compare commits
2 Commits
| Author | SHA1 | Date |
|---|---|---|
 严飞永
|
dcf86f664d | 1 week ago |
|
严飞永
|
6b9dbf6fba | 2 weeks ago |
@ -0,0 +1,790 @@
|
||||
* {
|
||||
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;
|
||||
}
|
||||
@ -0,0 +1,670 @@
|
||||
/* 移动端适配 */
|
||||
/* */
|
||||
@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;
|
||||
}
|
||||
|
||||
}
|
||||
|
After Width: | Height: | Size: 949 KiB |
|
After Width: | Height: | Size: 565 KiB |
@ -0,0 +1,106 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const sections = document.querySelectorAll('.section');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
const sectionContainer = document.querySelector('.section-container');
|
||||
|
||||
// 汉堡菜单点击事件
|
||||
menuToggle.addEventListener('click', function () {
|
||||
this.classList.toggle('active');
|
||||
navMenu.classList.toggle('active');
|
||||
});
|
||||
|
||||
// 导航链接点击事件
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href');
|
||||
const targetSection = document.querySelector(targetId);
|
||||
|
||||
// 关闭移动端菜单
|
||||
menuToggle.classList.remove('active');
|
||||
navMenu.classList.remove('active');
|
||||
|
||||
// 滚动到对应模块
|
||||
targetSection.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 模块化滚动检测
|
||||
sectionContainer.addEventListener('scroll', function () {
|
||||
const currentScroll = this.scrollTop;
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
sections.forEach((section, index) => {
|
||||
const sectionTop = index * windowHeight;
|
||||
const sectionBottom = (index + 1) * windowHeight;
|
||||
|
||||
if (currentScroll >= sectionTop && currentScroll < sectionBottom) {
|
||||
const currentId = section.getAttribute('id');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === `#${currentId}`) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 阻止默认滚动行为
|
||||
window.addEventListener('wheel', function (e) {
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
const delta = Math.sign(e.deltaY);
|
||||
const currentIndex = Math.round(sectionContainer.scrollTop / window.innerHeight);
|
||||
const maxIndex = sections.length - 1;
|
||||
|
||||
let targetIndex = currentIndex + delta;
|
||||
targetIndex = Math.max(0, Math.min(targetIndex, maxIndex));
|
||||
|
||||
sectionContainer.scrollTo({
|
||||
top: targetIndex * window.innerHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}, { passive: false });
|
||||
|
||||
// 触摸设备支持
|
||||
let startY;
|
||||
sectionContainer.addEventListener('touchstart', function (e) {
|
||||
startY = e.touches[0].clientY;
|
||||
}, { passive: true });
|
||||
|
||||
sectionContainer.addEventListener('touchmove', function (e) {
|
||||
if (e.cancelable) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
const currentY = e.touches[0].clientY;
|
||||
const deltaY = startY - currentY;
|
||||
|
||||
if (Math.abs(deltaY) > 50) { // 滑动阈值
|
||||
const direction = deltaY > 0 ? 1 : -1;
|
||||
const currentIndex = Math.round(sectionContainer.scrollTop / window.innerHeight);
|
||||
const maxIndex = sections.length - 1;
|
||||
|
||||
let targetIndex = currentIndex + direction;
|
||||
targetIndex = Math.max(0, Math.min(targetIndex, maxIndex));
|
||||
|
||||
sectionContainer.scrollTo({
|
||||
top: targetIndex * window.innerHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
startY = currentY;
|
||||
}
|
||||
}, { passive: false });
|
||||
|
||||
// 初始化高亮
|
||||
sectionContainer.dispatchEvent(new Event('scroll'));
|
||||
});
|
||||
Loading…
Reference in new issue