147 lines
2.9 KiB
Vue
147 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<marquee :scrollamount="scrollamount" class="notice-bar" width="100%" behavior="scroll">
|
|
<div v-html="text"></div>
|
|
</marquee>
|
|
<vue-seamless-scroll :data="listData" :class-option="classOption" class="warp">
|
|
<ul class="ul-item">
|
|
<li class="li-item" v-for="(item, index) in listData" :key="index">
|
|
<div :style="{'background': `url(${item.ornamentLevelImg})`}" class="back">
|
|
<!-- {{ item.ornamentLevelImg }} -->
|
|
<img :src="item.imageUrl|fullPath" class="itemImg"/>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import { getWeapon, getArticle } from "@/api/index";
|
|
|
|
export default {
|
|
name: "Example03Basic",
|
|
|
|
components: {
|
|
vueSeamlessScroll
|
|
},
|
|
data() {
|
|
return {
|
|
timer: null,
|
|
data:{
|
|
page:1,
|
|
size:15,
|
|
orderByFie:0,
|
|
status:[0,2,3,5],
|
|
source:[1,2,3,4],
|
|
// ornamentLevelIds:[1]
|
|
},
|
|
scrollamount: 6,
|
|
listData: [],
|
|
text: null,
|
|
classOption: {
|
|
limitMoveNum:2,
|
|
direction: 3
|
|
}
|
|
};
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timer);
|
|
},
|
|
beforeCreate() {
|
|
clearInterval(this.timer);
|
|
},
|
|
created() {
|
|
this.getList();
|
|
clearInterval(this.timer);
|
|
this.timer = setInterval(() => {
|
|
// getWeapon().then(res => {
|
|
// console.log(res);
|
|
// this.listData = res.data.rows;
|
|
// });
|
|
}, 5000);
|
|
},
|
|
methods: {
|
|
getList() {
|
|
getWeapon(this.data).then(res => {
|
|
this.listData = res.data.data;
|
|
// console.log('this.listData',this.listData);
|
|
});
|
|
getArticle("gg").then(res => {
|
|
this.text = res.data.data.contentList[0].content;
|
|
console.log(res);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.itemImg{
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
@media (max-width: 550px) {
|
|
.warp {
|
|
height: 80px !important;
|
|
}
|
|
.li-item {
|
|
width: 75px !important;
|
|
height: 80px !important;
|
|
font-size: 7px;
|
|
img {
|
|
width: 60px !important;
|
|
height: 60px !important;
|
|
}
|
|
}
|
|
}
|
|
.notice-bar {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
width: 98%;
|
|
height: 32px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow-y: auto;
|
|
div {
|
|
height: 32px;
|
|
}
|
|
}
|
|
.warp {
|
|
width: 100%;
|
|
height: 112px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
ul {
|
|
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
&.ul-item {
|
|
|
|
display: flex;
|
|
.li-item {
|
|
width: 105px;
|
|
height: 112px;
|
|
margin-left: 10px;
|
|
// background-color: #999;
|
|
color: #fff;
|
|
text-align: center;
|
|
.back {
|
|
padding: 4px;
|
|
background-size: 100% 100% !important;
|
|
}
|
|
p {
|
|
text-align: center;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|