jp-charge/pages/job/newsIndex/newsList/newsList.vue

<template>
	<view>
		<u-navbar title="消息"></u-navbar>
		<view class="newsList">

			<template v-for="(item,i) in result">

				<view class="newsList-time" :key="i">
					<span>{{item.createTime}}</span>
				</view>
				<view class="newsList-item" @click="item.isRead=true,gotoUrl('pages/job/newsIndex/newsEntry/newsEntry?id='+item.id)">
					<view class="newsList-head">
						<h3 class="u-line-1">{{item.title}}</h3>
						<span :style="item.isRead?'color:#0ebd5f':''">[{{item.isRead?'已读':'未读'}}]</span>
					</view>
					<view class="newsList-main" v-html="item.content">

					</view>
					<view class="newsList-foot">
						<span>查看详情</span>
						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
					</view>
				</view>
			</template>
			<u-loadmore @loadmore="myLoadmore" :status="result.length<recordsTotal?'loadmore':'nomore'"></u-loadmore>

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

<script>
	import api from './index.js'
	export default api;
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style scoped lang="scss">
	.newsList-time {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;

		span {
			background-color: #c8c8c8;
			padding: 6rpx 16rpx;
			color: #fff;
			border-radius: 10rpx;
		}
	}

	.newsList-item {
		padding: 20rpx;
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.newsList-head {
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;

			span {
				color: #FF6D58;
				min-width: 80rpx;
				text-align: right;
			}
		}

		.newsList-main {
			padding-bottom: 20rpx;
			color: #999;
			height: 70px;
			overflow: hidden;
		}

		.newsList-foot {
			padding-top: 20rpx;
			border-top: 1px solid #f7f7f7;
			display: flex;
			justify-content: space-between;
		}
	}
</style>