ParkApp/components/hot-consult/hot-consult.vue

<template>
	<view>
		<view class="container">
			<view class="flex justify-between" >
				<block>
					<view class="flex flex-direction justify-center align-center" style="width: 120rpx;padding-left: 20rpx;">
						<view class="base-color text-bold" style="font-family:Arial, Helvetica, sans-serif;font-size: 32rpx;">
							园区
						</view>
						<view class="text-bold" style="font-family:Arial, Helvetica, sans-serif;font-size: 32rpx;">
							公告
						</view>
					</view>
					<!-- <view class="cu-avatar text-font"  style="background-image:url(http://139.9.103.171:1888/miniofile/app/notice.png);"></view> -->
					<view class="margin-top-xs" style="width: 680rpx">
						<swiper :circular="true" class="swiper" autoplay="true" vertical="true" interval="5000" next-margin="46rpx">
							<swiper-item v-for="(item, index) in swiperTexts" :key="index" @click="detailTap(item)">
								<view class="swiper-item" > 
									<text class="base-color text-bold cuIcon-title padding-right-sm"></text>
									<text>{{item.title}} : {{item.notice | formatHtml}}</text>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</block>
				<view class="flex align-center justify-center" style="width: 100rpx;" @click="onTap">
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			swiperTexts: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		filters: {
			formatHtml (str) {
				return str.replace(/<[^>]+>/g, "");
			}
		},
		methods: {
			onTap() {
				this.$emit('onTap');
			},
			detailTap(item) {
				this.$emit('detailTap',item);
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	background-color: #ffffff;
	height: 110rpx;
}
.swiper {
	height: 90rpx;
}
.swiper-item {
	font-size: 24rpx;
	color: #323232;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	height: 40rpx; 
	margin: 6rpx 0rpx;
}
.text-font {
	width: 100rpx;
	height: 100rpx;
	margin: 10rpx 10rpx 10rpx 20rpx;
}
</style>