vue点击盒子一步一步滚动
HTML
<div class="course_detail">
<div class="arrow" v-if="index == 0" @click="step"></div>
<div class="lightArrow" v-else @click="step"></div>
<div class="courseBox">
<div class="newBox" ref="courseBox">
<div class="top">
<div class="topOut">
<div>
<h3>首次事件</h3>
<p>首次实现直升机上舰</p>
</div>
<div>1986年</div>
</div>
<div class="topOut">
<div>
<h3>首次事件</h3>
<p>首次实现直升机上舰</p>
</div>
<div>1986年</div>
</div>
<div class="topOut">
<div>
<h3>首次事件</h3>
<p>首次实现直升机上舰</p>
</div>
<div>1986年</div>
</div>
<div class="topOut">
<div>
<h3>首次事件</h3>
<p>首次实现直升机上舰</p>
</div>
<div>1986年</div>
</div>
<div class="topOut">
<div>
<h3>首次事件</h3>
<p>首次实现直升机上舰</p>
</div>
<div>1986年</div>
</div>
</div>
<div class="middle">
<p class="el-icon-arrow-right"></p>
<p class="el-icon-arrow-right"></p>
<p class="el-icon-arrow-right"></p>
<p class="el-icon-arrow-right"></p>
<p class="el-icon-arrow-right"></p>
<p class="el-icon-arrow-right"></p>
<p class="el-icon-arrow-right"></p>
<p class="el-icon-arrow-right"></p>
<p class="el-icon-arrow-right"></p>
</div>
<div class="bottom">
<div class="topOut">
<div>
<h3>首次事件</h3>
<p>首次实现直升机上舰</p>
</div>
<div>1986年</div>
</div>
<div class="topOut">
<div>
<h3>首次事件</h3>
<p>首次实现直升机上舰</p>
</div>
<div>1986年</div>
</div>
<div class="topOut">
<div>
<h3>首次事件</h3>
<p>首次实现直升机上舰</p>
</div>
<div>1986年</div>
</div>
<div class="topOut">
<div>
<h3>首次事件</h3>
<p>首次实现直升机上舰</p>
</div>
<div>1986年</div>
</div>
</div>
</div>
</div>
<div class="arrow" v-if="index == 4" @click="next"></div>
<div class="lightArrow" v-else @click="next"></div>
</div>
样式
.course_detail {
width: 100%;
height: 422px;
display: flex;
align-items: center;
.lightArrow{
width: 40px;
height: 40px;
background: url("../assets/images/向右箭头-2.png");
&:first-child {
transform: rotate(180deg);
}
}
.arrow {
width: 40px;
height: 40px;
background: url("../assets/images/向右箭头-1.png");
&:first-child {
transform: rotate(180deg);
}
// &:hover {
// background: url("../assets/images/向右箭头-2.png") !important;
// }
}
.courseBox {
position: relative;
flex: 1;
height: 100%;
margin: 0 10px;
overflow: hidden;
.newBox{
position: relative;
flex: 1;
height: 100%;
width: 3000px;
margin: 0 10px;
.top {
box-sizing: border-box;
// padding: 0 15px;
padding: 0 6px;
display: flex;
width: 100%;
height: 50%;
border-bottom: 1px dashed #ced3d9;
.topOut {
position: relative;
display: flex;
align-items: center;
// width: 33.3%;
// width: 375px;
width: 400px;
height: 100%;
div {
width: 50%;
height: 100%;
border-radius: 15px 15px 0 0;
&:first-child {
box-shadow: 7px 7px 12px rgb(0, 63, 133,.2),-1px -1px 12px rgb(0, 63, 133,.2);
// background: url("../assets/images/荣誉-1.png");
background: url("../assets/images/荣誉-1.png") center center;
h3 {
text-align: right;
margin-top: 44px;
font-size: 22px;
color: #003f85;
font-family: Bold;
width: 60%;
}
p {
text-align: right;
width: 60%;
font-size: 16px;
color: #1b3646;
font-family: Normal;
padding-left: 20px;
}
}
&:last-child {
position: absolute;
top: 39%;
left: 47%;
width: 96px;
height: 45px;
line-height: 45px;
text-align: center;
background: url("../assets/images/半圆框.png") center center;
font-size: 18px;
color: #003f85;
font-family: Year;
z-index: 1;
}
}
}
}
.middle {
display: flex;
width: 100%;
position: absolute;
top: 201px;
p {
width: 17px;
height: 17px;
line-height: 17px;
font-weight: 600;
text-align: center;
margin-left: 182px;
border: 2px solid #053d7d;
border-radius: 50%;
font-size: 12px;
color: #053d7d;
z-index: 2;
&:first-child {
margin-left: 90px;
}
}
}
.bottom {
display: flex;
width: 100%;
margin: 0 auto;
height: 50%;
.topOut {
position: relative;
display: flex;
align-items: center;
// width: 375px;
width: 400px;
height: 100%;
&:first-child{
margin-left: 215px;
}
div {
width: 50%;
height: 100%;
border-radius: 0 0 15px 15px;
&:first-child {
box-shadow: -1px -1px 8px rgb(0, 63, 133,.2),7px 7px 15px rgb(0, 63, 133,.2);
background: url("../assets/images/首次事件-2.png") center center;
h3 {
text-align: right;
margin-top: 44px;
font-size: 22px;
color: #003f85;
font-family: Bold;
width: 60%;
}
p {
text-align: right;
width: 60%;
font-size: 16px;
color: #1b3646;
font-family: Normal;
padding-left: 20px;
}
}
&:last-child {
position: absolute;
top: 39%;
left:48%;
width: 96px;
height: 45px;
line-height: 45px;
text-align: center;
background: url("../assets/images/半圆框.png") no-repeat;
background-size: contain;
font-size: 18px;
color: #003f85;
font-family: Year;
z-index: 1;
}
}
}
}
}
}
}
data
index:0,
paddingLeft:25,
itemWidth:200,
distance:0,
方法
next() {
if (this.index >= 4) {
return;
}
this.index++;
console.log(this.index,'index');
this.moveBox();
},
step(){
if(this.index <= 0) {
return;
}
this.index--;
this.moveBox();
},
moveBox() {
if(this.index == 0) {
this.distance = 0;
} else {
this.distance = -(this.paddingLeft + this.index * this.itemWidth);
}
let dot = this.$refs.courseBox;
console.log(dot, 'dot');
dot.style.transform = `translate(${this.distance}px,0)`;
}
