138 lines
2.9 KiB
Vue
138 lines
2.9 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<div id="img-box" class="f-row">
|
|
<template v-for="(list,index) in lists">
|
|
<div class="img-box" :key="index">
|
|
<img src="../../static/img/img3.png" alt />
|
|
<p>中国政府网站</p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<img
|
|
v-if="leftPos != 0"
|
|
@click="scrollFeeds('left')"
|
|
class="mv-btn left-side"
|
|
src="../../static/img/left.png"
|
|
alt
|
|
/>
|
|
<img
|
|
@click="scrollFeeds('right')"
|
|
class="mv-btn right-side"
|
|
src="../../static/img/right.png"
|
|
alt
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
props: {},
|
|
data () {
|
|
return {
|
|
lists: [1, 2, 3, 4, 5, 6, 7],
|
|
leftPos: 0
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
methods: {
|
|
scrollFeeds: function (btn) {
|
|
let feeds = document.querySelector('.f-row')
|
|
if (btn === 'left') {
|
|
this.leftPos += 460
|
|
let scrollAmount = 0
|
|
var slideTimer = setInterval(function () {
|
|
feeds.scrollLeft -= 10
|
|
scrollAmount += 10
|
|
if (scrollAmount >= 460) {
|
|
window.clearInterval(slideTimer)
|
|
}
|
|
}, 25)
|
|
} else {
|
|
this.leftPos -= 460
|
|
let scrollAmount = 0
|
|
// eslint-disable-next-line no-redeclare
|
|
var slideTimer = setInterval(function () {
|
|
feeds.scrollLeft += 10
|
|
scrollAmount += 10
|
|
if (scrollAmount >= 460) {
|
|
window.clearInterval(slideTimer)
|
|
}
|
|
}, 25)
|
|
}
|
|
}
|
|
},
|
|
created () {},
|
|
mounted () {}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.wrapper {
|
|
width: 100%;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
|
|
#img-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow-y: scroll;
|
|
position: relative;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.img-box {
|
|
width: 239px;
|
|
height: 196px;
|
|
background-color: #ffffff;
|
|
box-shadow: 0px 10px 9px 1px rgba(206, 204, 204, 0.5);
|
|
border-radius: 5px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
margin-right: 20px;
|
|
|
|
img {
|
|
width: 239px;
|
|
height: 130px;
|
|
border-radius: 5px 5px 0px 0px;
|
|
}
|
|
|
|
p {
|
|
font-family: "MicrosoftYaHei";
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
font-stretch: normal;
|
|
line-height: 60px;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mv-btn {
|
|
cursor: pointer;
|
|
height: 60px;
|
|
width: 60px;
|
|
border-radius: 18px;
|
|
z-index: 20;
|
|
position: absolute;
|
|
&.left-side {
|
|
left: -18px;
|
|
top: 115px;
|
|
}
|
|
&.right-side {
|
|
right: -18px;
|
|
top: 115px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|