//效果图-文字可上下滚动播放
<template>
<view class="row-me row-center margin-left30 margin-right30 broadcast">
<image src="../../static/home/laba.png" mode="" class="margin-left30 margin-right20 horn"></image>
<swiper circular="true" vertical="true" autoplay="true" interval="3000" duration="1000" class="margin-right30 swiperBox">
<swiper-item v-for="(item,index) in noticeList" :key="index" class="row-me row-center swiperItem">
{
{
item.time}} <view class="margin-left10 txt1">{
{
item.message}}</view>收款成功<view class="txt2">{
{
item.money}}</view>元
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
noticeList:[ //公告栏播报
{
time: '12:30',
message: '支付宝',
money: '100',
},
{
time: '12:30',
message: '微信',
money: '50',
},
{
time: '12:30',
message: '银联',
money: '60',
},
],
}
},
}
</script>
<style lang="scss" scoped>
.broadcast{
margin-top: -40rpx;
height: 80rpx;
background: #FFFFFF;
border-radius: 20rpx;
.horn {
width: 40rpx;
height: 40rpx;
}
.swiperBox{
width: 500rpx;
// background: red;
height: 80rpx;
.horn {
width: 40rpx;
height: 40rpx;
}
.swiperItem{
.txt1 {
color: #4E9D77;
}
.txt2 {
color: #F29A38;
}
}
}
}
</style>