<template>
	<view class="pn" v-if="list && list.length">
		<view class="pn-icon">RADIO</view>
		<swiper class="pn-swiper" vertical autoplay circular :interval="2800" :duration="500" :display-multiple-items="1">
			<swiper-item v-for="(item, idx) in list" :key="idx" class="pn-item">
				<text class="pn-text">{{item.content}}</text>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pn {
		display: flex;
		align-items: center;
		margin-top: -38rpx;
		padding: 0 18rpx;
		height: 72rpx;
		border-radius: 999rpx;
		background: rgba(255,255,255,0.72);
		border: 1rpx solid rgba(255,255,255,0.92);
		box-shadow: 0 16rpx 34rpx rgba(79,183,255,0.12);
		backdrop-filter: blur(8px);
		/* transform: rotate(1.2deg); */
	}

	.pn-icon {
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 16rpx;
		border-radius: 999rpx;
		background: linear-gradient(135deg, #35D6A6, #4FB7FF);
		color: #FFFFFF;
		font-size: 18rpx;
		font-weight: 900;
		letter-spacing: 1rpx;
		margin-right: 12rpx;
	}

	.pn-swiper {
		flex: 1;
		height: 72rpx;
	}

	.pn-item {
		display: flex;
		align-items: center;
		height: 72rpx;
	}

	.pn-text {
		color: #42635E;
		font-size: 24rpx;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
