export default {
data () {
return {
inditorIndex: 0
}
},
props: {
imgsrc: String,
dataList: Array
},
methods: {
handelEnter (item) {
this.dataList.forEach(o => {
o.isActive = false
})
item.isActive = true
this.inditorIndex = item.colorIndex
}
}
}
.before_after {
position: relative;
& > img {
width: 100%;
display: block;
}
& > div {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
& > .el-row {
height: 100%;
&> .el-col {
width: 33.33%;
height: 100%;
position: relative;
transition: all .3s;
overflow: hidden;
& > .text {
padding: 50px;
text-align: center;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
top: 0;
color: #fff;
z-index: 12;
transition: left .3s;
& > h4 {
font-size: 18px;
font-weight: normal;
position: relative;
margin-bottom: 60px;
&:after {
content: '';
position: absolute;
height: 3px;
width: 40px;
background: #fff;
left: 50%;
top: 40px;
margin-left: -20px;
}
}
h5 {
font-size: 18px;
font-weight: normal;
position: relative;
margin-bottom: 20px;
&:before {
content: '';
position: absolute;
height: 1px;
width: 30px;
background: #fff;
left: 50%;
top: 50%;
margin-left: -70px;
z-index: -10;
}
&:after {
content: '';
position: absolute;
height: 1px;
width: 30px;
background: #fff;
left: 50%;
top: 50%;
/*transform: translateX(40px);*/
margin-left: 40px;
z-index: -10;
}
}
p {
font-size: 14px;
line-height: 24px;
padding: 0 25px;
text-align: left;
}
}
&:not(.active) {
& > .text {
left: 200%;
&.after {
left: 0;
}
}
}
&.active {
width: 66.66%;
& > .text {
left: -200%;
&.after {
left: 0;
}
}
}
& > .layer {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.6;
background: #389CFF;
z-index: 2;
}
}
}
}
}
