<template>
	<view class="notice" :style="{ 'background-color': data.background_color }">
		<view class="notice-icons"><uni-icons color="#999" type="search" size="17" /></view>
		<swiper :circular="true" :autoplay="true" :vertical="true" style="height: 70rpx; line-height: 70rpx;">
			<swiper-item class="notice-item" v-for="(item, index) in data.list" :key="index" @click="jump(item.link)">
				<view class="notice-text">
					{{ item.title }}
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const props = defineProps({
		data: {
			type: Object,
			default: function() {
				return {};
			}
		}
	});
	
	const jump = (value)=>{
		navigateTo(value.path);
	}
</script>

<style lang="scss">
	.notice {
		height: 70rpx;
		line-height: 70rpx;
		position: relative;
		overflow: hidden;
		.notice-icons {
			position: absolute;
			left: 10rpx;
			top: 50%;
			transform: translateY(-50%);
		}
		.notice-item {
			.notice-text {
				padding-left: 55rpx;
				font-size: 28rpx;
				color: #333;
				padding-right: 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				display: -webkit-box;
				overflow: hidden; 
				word-break:break-all;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>