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 text-bold"
						style="width: 120rpx;padding-left: 20rpx;">
						<view :style="{color:title1.color}"
							style="font-family:Arial, Helvetica, sans-serif;font-size: 32rpx;">
							{{title1.text}}
						</view>
						<view :style="{color:title2.color}"
							style="font-family:Arial, Helvetica, sans-serif;font-size: 32rpx;">
							{{title2.text}}
						</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 :style="{color:title1.color}"
										class="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 []
				}
			},
			title1: {
				type: Object,
				default: () => {
					return {
						text: '园区',
						color: '#5064eb'
					}
				}
			},
			title2: {
				type: Object,
				default: () => {
					return {
						text: '公告',
						color: ''
					}
				}
			},

		},
		filters: {
			formatHtml(str) {
				str = decodeURIComponent(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>