* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
padding-top:100px;
}
.modulePage > div {
height:800px;
}
.a1 {
background:#826da0;
}
.a2 {
background:#abdaa1;
}
.a3 {
background:#3b3444;
}
.a4 {
background:#374434;
}
.a5 {
background:#3cdc17;
}
.moduleSpan {
position:fixed !important;
right:30px;
top:50%;
transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
width:20px;
z-index:100;
height:auto !important;
overflow:hidden;
}
.moduleSpan span {
display:block;
border:1px solid #f2f0f1;
border-radius:50%;
width:12px;
height:12px;
margin:0 auto;
box-sizing:border-box;
background:#fff;
margin-bottom:1rem;
cursor:pointer;
transition:all .3s;
-webkit-transition:all .3s;
-o-transition:all .3s;
-ms-transition:all .3s;
-moz-transition:all .3s;
}
.moduleSpan span.active {
background:#f18101;
width:18px;
height:18px;
border-color:transparent;
}
.headerWrap {
background:#000;
height:100px;
width:100%;
position:fixed;
top:0;
left:0;
}
1.单页面模块联动 // str1 ----- module上面顶部的class// .modulepage 大盒子// .modulechild 小盒子// .modulespan 分页器// span active 分页器样式类名