zhywpt-sp/components/notice-bar/notice-bar.vue

<template>
	<!-- 通告栏 -->
	<view class="noticeBar">
		<swiper class="list" circular="true" vertical="true" autoplay="true" interval="3000" duration="1000">
			<swiper-item v-for="item in noticeList" :key="item.id">
				<view class="content" @click="emits('noticeClick', item)">
					<view class="icon-notice">●</view>
					<view class="notice-txt">
						{{ item.title }}
					</view>
					<view class="right">
						<view class="label">去办理</view>
						<image class="arror" :src="`${$imgUrl}common/arror-right.png`" mode="aspectFill" />
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	const emits = defineEmits(["noticeClick"]);

	defineProps({
		//公告栏列表
		noticeList: {
			type: Array,
			default: () => {
				return [];
			},
		},
	});
</script>

<style lang="scss" scoped>
	.noticeBar {
		padding-left: 30rpx;
		padding-right: 20rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #ffffff;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		color: #172843;
		font-size: 26rpx;
		display: flex;

		.list {
			width: 100%;
			height: 100%;

			.content {
				display: flex;
				align-items: center;

				.icon-notice {
					font-size: 18rpx;
					color: #172843;
				}

				.notice-txt {
					flex: 1;
					font-size: 26rpx;
					color: #172843;
					padding-left: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 10rpx;
				}

				.right {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;

					.arror {
						width: 30rpx;
						height: 30rpx;
					}

					.label {
						font-size: 24rpx;
						color: #00b38b;
						line-height: 36rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>