<template>
	<div>
		<div class="notice flex align-center">
			<el-icon :size="20" color="#00DD9A">
				<BellFilled />
			</el-icon>
			<div class="notice-txt">
				<el-carousel interval="5000" @change="change" :autoplay="true" height="30px" direction="vertical">
					<el-carousel-item v-for="(item,index) in lists" :key="item">
						<div class="notice-txts" :ref="`element${index}`">
							{{item}}
						</div>
					</el-carousel-item>
				</el-carousel>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			lists: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				index: 0, //当前轮播图的索引
				scrollInterval: null,
			}
		},
		methods: {
			//切换轮播图的回调 index:当前的索引
			change(index) {
				this.index = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notice {
		width: 26vw;
		border: 1px solid #00DD9A;
		border-radius: 30px;
		padding: 0 10px;
		background-color: #f2fffb;
		color: #666666;
	}

	.notice-txt {
		width: 100%;
		margin-left: 5px;
	}

	.notice-txts {
		width: 100%;
		height: 30px;
		line-height: 30px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		font-size: 14px;
		color: #666666;

	}
</style>