vue-seamless-scroll公告组件的使用

<*template>
<div class=“notice”>
<img :src=“trumpet” alt=“公司公告”>
<div class=“notice-box”>
<vue-seamless-scroll class=“seamless-scroll” :data=“listData” :class-option=“defaultOption” >
<ul class=“ul-scoll”>
<li v-for=“(item, index) in listData” :key=‘index’>
<span class=“title”>{{item.title}}</span>
</li>
</ul>
</vue-seamless-scroll> -->
</div>
<p @click=“handle”>点击进入</p>
</div>
</template>

<*script>
import trumpet from ‘@/assets/home/trumpet.svg’
import vueSeamlessScroll from ‘vue-seamless-scroll’

export default {
name: ‘Notice’,
components: {
vueSeamlessScroll
},
// 监听属性 类似于data概念
computed: {
defaultOption () {
return {
step: 1, // 数值越大速度滚动越快
limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
openTouch: false,
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)
}
}
},
data () {
return {
trumpet,
listData: [{ title:‘尊敬的用户，经营罗盘即将改版升级，点击立即进入，抢先体验内测版。’ }]
}
},
methods: {
handle () {
window.open(‘http://10.126.124.44/tcloms/login’)
}
}
}

<*style lang=‘less’>
.notice {
.seamless-scroll {
div:nth-child(1) {
display: flex;
width: 1200px !important;
div {
width: 500px !important;
}
}
}
}

<*style lang=‘less’ scoped>
.notice {
width: 1344px !important;
height: 42px;
z-index: 1001;
background: rgba(38,109,254,0.40);
border-radius: 6px;
display: flex;
width: 100%;

img {
width: 16px;
height: 16px;
margin: 13px 12px 13px 16px;
}
p {
cursor: pointer;
width: 56px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 14px;
color: #FFCE7F;
height: 14px;
line-height: 10px;
border-bottom: 1px solid #FFCE7F;
margin: 14px 0px 14px 8px;
}
.notice-box {
width: 378px;
overflow: hidden;
.ul-scoll{
display: flex;
flex-wrap: wrap;
li{
height: 42px;
line-height: 42px;
margin-right: 10px;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 14px;
color: #FFFFFF;
}
}
}
@media (min-width: 328px) and (max-width: 1366px) {
.notice {
width: 896px !important;
position: relative;
top: -13px;
}
}

@media (min-width: 1380px) and (max-width: 1680px) {
.notice {
width: 1120px !important;
position: relative;
top: -5px;
}
}