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>