<template>
<div class="home">
<el-row :gutter="20" type="flex" justify="center">
<el-col :span="20">
<div id="father" class="grid-content bg-purple">
<div id="swiper-box" class="swiper-box" :style="{transform:'translateX('+currentOffset+'px)'}">
<div class="card-item" :style="{minWidth:width}" v-for="i in 10">
<el-card :body-style="{ padding: '0px' }">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg" class="image">
<div style="padding: 14px;">
<span>青蛙呱呱</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">操作按钮</el-button>
</div>
</div>
</el-card>
</div>
</div>
<i class="el-icon-arrow-left" @click="left"></i>
<i class="el-icon-arrow-right" @click="right"></i>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
currentOffset:0,
width:"20%",
fatherWith:0,
box:'', // dom
currentDate: new Date()
}
},
mounted () {
this.setCardWidth()
this.box = document.querySelector('#swiper-box')
window.addEventListener('resize',()=>{
this.currentOffset = 0
this.setCardWidth()
})
},
methods:{
setCardWidth() {
const father = document.querySelector('#father');
this.fatherWith = father.clientWidth
console.log("fatherWidth",this.fatherWith);
this.width = ((this.fatherWith-20) / 5)+'px'
},
right() {
console.log(this.currentOffset);
if(this.currentOffset <= (-(this.fatherWith-20) / 5)*(10-5)) return
this.currentOffset-=((this.fatherWith-20) / 5)
},
left() {
console.log(this.currentOffset);
if(this.currentOffset >= -2) return
this.currentOffset+=((this.fatherWith-20) / 5)
}
}
}
</script>
<style lang="less" scoped>
.bg-purple {
overflow: hidden;
position:relative;
padding-left: 10px;
}
.home {
margin-top: 50px;
.swiper-box {
display: flex;
width: auto;
transition: all .2s;
}
}
[class ^="el-icon-arrow-"] {
position:absolute;
top:50%;
transform: translateY(-50%);
font-size: 30px;
padding: 10px 0;
background-color: #999;
cursor: pointer;
}
.el-icon-arrow-left {
left:-7px;
}
.el-icon-arrow-right {
right:-7px;
}
.card-item {
padding:10px;
box-sizing: border-box;
}
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
图文切换类似轮播
最新推荐文章于 2023-12-14 19:35:29 发布