双行滚动 不能添加
This commit is contained in:
熊丽君
@ -434,66 +434,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p0-100">
|
<div class="p0-100" style="padding-bottom:40px">
|
||||||
<div class="cooperation">
|
<div class="cooperation">
|
||||||
<img src="@/assets/image/icon8.png" alt="" />
|
<img src="@/assets/image/icon8.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="city_list partner">
|
<vue-seamless-scroll
|
||||||
<div>
|
:data="listData"
|
||||||
<img src="@/assets/cooperation/1.png" alt="" />
|
:class-option="classOption"
|
||||||
|
class="warp"
|
||||||
|
>
|
||||||
|
<div style="width:1200px">
|
||||||
|
<ul class="ul-item">
|
||||||
|
<li class="li-item" v-for="(item, index) in listData" :key="index">
|
||||||
|
<img :src="item" alt="" />
|
||||||
|
<!-- {{ item }} -->
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</vue-seamless-scroll>
|
||||||
<img src="@/assets/cooperation/2.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/3.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/4.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/5.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/6.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/7.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/8.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/9.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/10.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/11.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/12.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/13.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/14.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/15.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/cooperation/16.png" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div ref="myBox" style="height:345px;overflow:hidden">
|
|
||||||
<div class="row" style="display:flex">
|
|
||||||
<div v-for="item in 100" :key="item">{{ item }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -505,9 +463,52 @@ import {
|
|||||||
getInformation,
|
getInformation,
|
||||||
getAboutUs
|
getAboutUs
|
||||||
} from '@/api/home/home';
|
} from '@/api/home/home';
|
||||||
|
import vueSeamlessScroll from 'vue-seamless-scroll';
|
||||||
|
import img1 from '@/assets/cooperation/1.png';
|
||||||
|
import img2 from '@/assets/cooperation/2.png';
|
||||||
|
import img3 from '@/assets/cooperation/3.png';
|
||||||
|
import img4 from '@/assets/cooperation/4.png';
|
||||||
|
import img5 from '@/assets/cooperation/5.png';
|
||||||
|
import img6 from '@/assets/cooperation/6.png';
|
||||||
|
import img7 from '@/assets/cooperation/7.png';
|
||||||
|
import img8 from '@/assets/cooperation/8.png';
|
||||||
|
import img9 from '@/assets/cooperation/9.png';
|
||||||
|
import img10 from '@/assets/cooperation/10.png';
|
||||||
|
import img11 from '@/assets/cooperation/11.png';
|
||||||
|
import img12 from '@/assets/cooperation/12.png';
|
||||||
|
import img13 from '@/assets/cooperation/13.png';
|
||||||
|
import img14 from '@/assets/cooperation/14.png';
|
||||||
|
import img15 from '@/assets/cooperation/15.png';
|
||||||
|
import img16 from '@/assets/cooperation/16.png';
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
vueSeamlessScroll
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
listData: [
|
||||||
|
img1,
|
||||||
|
img2,
|
||||||
|
img3,
|
||||||
|
img4,
|
||||||
|
img5,
|
||||||
|
img6,
|
||||||
|
img7,
|
||||||
|
img8,
|
||||||
|
img9,
|
||||||
|
img10,
|
||||||
|
img11,
|
||||||
|
img12,
|
||||||
|
img13,
|
||||||
|
img14,
|
||||||
|
img15,
|
||||||
|
img16
|
||||||
|
],
|
||||||
|
classOption: {
|
||||||
|
step: 0.2,
|
||||||
|
limitMoveNum: 10,
|
||||||
|
direction: 2
|
||||||
|
},
|
||||||
bannerList: [],
|
bannerList: [],
|
||||||
queryParams: {
|
queryParams: {
|
||||||
labelId: '1415156808053559296',
|
labelId: '1415156808053559296',
|
||||||
@ -528,6 +529,20 @@ export default {
|
|||||||
aboutInfo: {}
|
aboutInfo: {}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
defaultOption() {
|
||||||
|
return {
|
||||||
|
step: 2, // 数值越大速度滚动越快
|
||||||
|
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
||||||
|
hoverStop: true, // 是否开启鼠标悬停stop
|
||||||
|
direction: 2, // 0向下 1向上 2向左 3向右
|
||||||
|
openWatch: true, // 开启数据实时监控刷新dom
|
||||||
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||||
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||||
|
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 政策列表
|
// 政策列表
|
||||||
handleClick(tab, event) {
|
handleClick(tab, event) {
|
||||||
@ -557,29 +572,40 @@ export default {
|
|||||||
getAboutUs().then(res => {
|
getAboutUs().then(res => {
|
||||||
this.aboutInfo = res.data;
|
this.aboutInfo = res.data;
|
||||||
});
|
});
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log(this.$refs.myBox);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
|
||||||
.row {
|
|
||||||
position: relative;
|
|
||||||
animation: 20s mymove infinite linear;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
/* animation-timing-function: linear; */
|
|
||||||
}
|
|
||||||
@keyframes mymove {
|
|
||||||
from {
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
left: -100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.warp {
|
||||||
|
// width: 144px * 8;
|
||||||
|
width: 100%;
|
||||||
|
height: 140px;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
&.ul-item {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 10px 0;
|
||||||
|
.li-item {
|
||||||
|
// width: 144px;
|
||||||
|
width: 12%;
|
||||||
|
height: 70px;
|
||||||
|
// line-height: 120px;
|
||||||
|
// background-color: #999;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
// /deep/.el-carousel__button {
|
// /deep/.el-carousel__button {
|
||||||
// width: 8px;
|
// width: 8px;
|
||||||
// height: 8px;
|
// height: 8px;
|
||||||
|
|||||||
Reference in New Issue
Block a user