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; } }