yicangzongtai_app_240321/pages/home/module/roll-message.vue

<template>
	<view class="noticeBar">
		<image class="notice-icon" :src="noticeIcon" mode="aspectFit"></image>
		<template v-if="!skeletonLoading">
			<swiper class="notice-list" circular="true" vertical="true" autoplay interval="3000" duration="1000">
				<swiper-item class="notice-item-box" v-for="item in noticeEven.length" :key="item.id"
					@click="handleInfo(item.id)">
					<view class="notice-item">
						<text class="zw-one-row" v-if="noticeEven && noticeEven[item - 1]"
							@click.stop="openNewsDetail(noticeEven[item - 1])">
							{{ noticeEven[item - 1].title }}
						</text>
						<text class="zw-one-row" v-if="noticeOdd && noticeOdd[item - 1]"
							@click.stop="openNewsDetail(noticeOdd[item - 1])">
							{{ noticeOdd[item - 1].title }}
						</text>
					</view>
					<text class="theme-look iconfont_yige">&#xe65f;</text>
				</swiper-item>
			</swiper>
		</template>
		<template v-else>
			<view class="notice-item notice-skeleton skeleton-box">
				<text class="skeleton-fillet"></text>

			</view>
		</template>
	</view>
</template>

<script>
	import {
		getYiChangNews,
		openYiChangNews
	} from "../../government/conmon.js"
	export default {
		data() {
			return {
				skeletonLoading: true,
				noticeIcon: require('./roll-message.png'),
				noticeList: [],
				noticeEven: [],
				noticeOdd: [],
				noticeNum: 0
			}
		},
		created() {
			// this.init()
		},
		methods: {
			
			init() {
				getYiChangNews(4).then(res => {
					setTimeout(() => {
						const list = res || []
						this.noticeEven = [];
						this.noticeOdd = [];
						list.forEach((el, index) => {
							if (index % 2 === 0) {
								this.noticeEven.push(el)
							} else {
								this.noticeOdd.push(el)
							}
						})
						this.skeletonLoading = false
					}, 200)
				})

			},
			openNewsDetail(row) {
				openYiChangNews(row)
			}
		}
	}
</script>

<style lang='scss' scoped>
	// 公告栏样式
	.noticeBar {
		width: 100%;
		height: 122rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);

		.notice-icon {
			width: 67rpx;
			height: 67rpx;
		}

		.notice-list {
			width: calc(100% - 50rpx);
			height: 74rpx;
			padding-left: 20rpx;

			.notice-item-box {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;



				.theme-look {
					text-align: right;
					width: 50rpx;
					height: 100%;
					font-size: 35rpx;
					line-height: 74rpx;
				}
			}
		}
	}

	.notice-item {
		width: calc(100% - 74rpx);
		display: flex;
		flex-direction: column;

		/* 	justify-content: space-between;
					align-items: center; */
		text {
			display: inline-block;
			width: 100%;
			height: 37rpx;
			font-size: 26rpx;
			font-weight: 300;
			text-align: left;
			color: #333333;
			line-height: 37rpx;
		}
	}

	.notice-skeleton {
		flex: 1;
		padding-left: 20rpx;

		text {
			height: 74rpx;
		}
	}
</style>