uiapp+vue3纵向轮播公告

uni-icons:需要下载，地址如下：https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html

<template>
		<!-- 公告页面 -->
			<view class="notice">
				<view class="left">
					<uni-icons type="sound-filled" size="28" color="#29B28C"></uni-icons>
					<text class="text">公告</text>
				</view>
				<view class="center">
					<swiper vertical autoplay duration="500">
						<swiper-item>欢迎关注按时的绝对可靠333及就将计就计就将计就计</swiper-item>
						<swiper-item>虾米公众端口的流量才能看科罗拉多</swiper-item>
						<swiper-item>哈啊哈从尽快处理大量的方法烦烦烦烦烦烦vvvf</swiper-item>
					</swiper>
				</view>
				<view class="right">
					<uni-icons type="right" size="20" color="#29B28C"></uni-icons>
				</view>
			</view>	
</template>

<script>
	
	
</script>

<style lang="scss" scoped>
.notice{
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 0 auto;
			background-color: #F9F9F9;
			border-radius: 20rpx;
			display: flex;
			
			.left{
				width: 150rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.text{
					color:#29B28C;
					font-size: 30rpx;
				}
			}
			.center{
				flex:1;
				swiper{
					height: 80rpx;
					&-item{
						height: 100%;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						color: #848484;
						font-size: 35rpx;
					}
					
				}
				
			}
			
			.right{
				width: 75rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
		}


</style>