veterans_H5/h5_web/pages/newsInformation/newsInformation.vue

<!-- 新闻动态 -->
<template>
	<view class="news">
		<z-paging
			ref="paging"
			v-model="newsList"
			@query="queryList"
		>
			<view class="news-list">
				<view class="news-list-item" v-for="(item, index) in newsList" :key="index">
					<view class="news-list-item-left">
						<image :src="item.url"></image>
					</view>
					<view class="news-list-item-right">
						<view class="title">{{ item.title }}</view>
						<view class="date">
							<view>{{ item.from }}</view>
							<view>{{ item.date }}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 新闻列表
				newsList: [],
				
			}
		},
		methods: {
			/**
			 * @param { Number } pageNo
			 * @param { Number } pageSize
			 */
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete([
					{
						url: require('../../static/img/major-党务工作.png'),
						title: '退役军人事务部召开党史学习教育领导小组会议',
						from: '来源：机关党委（人事司）',
						date: '2021.10.20 07:18'
					},
					{
						url: require('../../static/img/major-党务工作.png'),
						title: '退役军人事务部召开党史学习教育领导小组会议',
						from: '来源：机关党委（人事司）',
						date: '2021.10.20 07:18'
					},
					{
						url: require('../../static/img/major-党务工作.png'),
						title: '退役军人事务部召开党史学习教育领导小组会议',
						from: '来源：机关党委（人事司）',
						date: '2021.10.20 07:18'
					},
					{
						url: require('../../static/img/major-党务工作.png'),
						title: '退役军人事务部召开党史学习教育领导小组会议',
						from: '来源：机关党委（人事司）',
						date: '2021.10.20 07:18'
					}
				])
			}
		}
	}
</script>

<style lang="scss" scoped>
.news {
	background-color: #f2f2f2;
	min-height: calc(100vh - 44px);
	&-list {
		padding: 28rpx 30rpx;
		&-item {
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 34rpx 32rpx;
			margin-bottom: 20rpx;
			&-left {
				margin-right: 16rpx;
				image {
					width: 132rpx;
					height: 106rpx;
				}
			}
			&-right {
				.title {
					color: #000;
					font-size: 30rpx;
				}
				.date {
					margin-top: 12rpx;
					color: #6F6F6F;
					font-size: 20rpx;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
}
</style>