answer/addons/yexam/uniapp/components/an-notice-bar/an-notice-bar.vue

<template>
	<view>
		<view class="an-notice-box">
			<view class="an-notice-l">
				<view class="iconfont icon-gonggao"></view>
			</view>
			<scroll-view class="an-notice-content">
				<swiper v-if="show" class="swiper" :autoplay="true" :interval="switchTime*1000" :duration="1500" :circular="true" :vertical="true">
					<swiper-item v-for="(item, index) in list" :key="index" class="an-notice-content-item">
						<view class="swiper-item">
							<view class="an-notice-content-item-text" :style="'color: '+color+';'">
<!--								<text v-if="list.length > 1 || showSerial">{{index+1+'. '}}</text>-->
								<!-- 【{{item.author}}】 -->
								<view style="width: 85%;" @tap="$openrul('/src/pages/mine/notice/noticeDetail/index?id=' + item.id)">{{item.notice_title}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</scroll-view>
			<!-- <view class="an-notice-content">
				<view v-for="(text, index) in list" :key="index" v-if="number == index" class="an-notice-content-item" :style="'animation: anotice '+switchTime+'s linear;'">
					<text class="an-notice-content-item-text" :style="'color: '+color+';'">
						<text v-if="showSerial">{{index+1+'. '}}</text>
						{{text}}
					</text>
				</view>
			</view> -->
			<view class="an-notice-more" @tap="$openrul('/src/pages/mine/notice/index')">
				<text class="an-notice-more-l">全部</text><view>></view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '../uni-icon/uni-icon.vue'
	export default {
		components: {
			uniIcons
		},
		props:{
			message_list:{},
			color: {
				type: String,
				default: '#000'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			switchTime: {
				type: Number,
				default: 3
			},
			showSerial: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				number: 0,
				list: this.message_list,
				copyText: '',
				show: '',
			};
		},
		mounted() {
			this.show = true;
		},
		watch: {
			message_list(){
				this.list=this.message_list
			}
		},
		methods: {
			more(){
				this.show = false;
				this.$emit('more')
			}
		}
	}
</script>

<style>
	.swiper{
		height: 60upx!important;
	}
	.an-notice-box{
		width: 94%;
		padding: 6px 12px;
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
	}
	.an-notice-box .an-notice-l{
		display: flex;
		align-items: center;
	}
	.an-notice-box .iconfont{
		color: #3c7bfc;
		font-size: 21px;
		margin-top: -1px;
		margin-right: 2px;
	}
	.an-notice-box .an-notice-l-title {
		font-size: 17px;
		color: #fdd100;
		font-weight: bold;
		font-style: italic;
		margin-bottom: 2px;
	}
	.an-notice-icon{
		width: 60upx;
		height: 60upx;
		line-height: 50upx;
		text-align: center;
		position: relative;
	}
	.an-notice-content{
		width: calc(100% - 220upx);
		position: relative;
		font-size: 14px;
		padding-left: 6px;
		flex: 1;
	}
	.an-notice-content-item{
		width: 100%;
		height: 60upx;
		text-align: left;
		line-height: 60upx;
	}
	.an-notice-content-item-text{
		width: 96%;
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.an-notice-more {
		font-size: 13px;
		color: #b7b7b7;
		text-align: center;
		display: flex;
		align-items: center;
	}
	.an-notice-more-l{
		text-decoration: underline;
		margin-right: 3px;
	}
	@keyframes anotice {
		 0%  {transform: translateY(100%);}
	    30%  {transform: translateY(0);}
	    70%  {transform: translateY(0);}
	   100%  {transform: translateY(-100%);}
	}
</style>