cbz/page_index/pages/index/noticeList.vue

<template>
	<view class="content">
		<view class="list">
			<block v-for="(item,index) in pageList" :key="index">
				<view class="item vflex">
					<view class="hflex acenter">
						<view class="read" v-if="item.is_read"></view>
						<view class="name">{{item.title}}</view>
					</view>
					<view class="container">{{item.content}}</view>
					<view class="hflex acenter jbetween">
						<view class="text_style1">{{item.create_time}}</view>
						<view class="hflex acenter" @click="toDetail(item.id)">
							<view class="text_style2">查看详情</view>
							<image src="/static/images/comment/right.png" mode="widthFix" style="width: 28rpx;"></image>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				pageList: [
					{
						id: 0,
						is_read: false,
						title: '您有新的积分待领取',
						content: '一周悄悄过去留下小秘密，来瞧瞧上周的消费了多少吧，你的钱都花在哪里了呢',
						create_time: '2022-10-28 16:58',
					},
					{
						id: 1,
						is_read: true,
						title: '您有新的积分待领取',
						content: '一周悄悄过去留下小秘密，来瞧瞧上周的消费了多少吧，你的钱都花在哪里了呢',
						create_time: '2022-10-28 16:58',
					}
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			// 打开详情
			toDetail(id) {
				$api.jump('/page_index/pages/index/noticeDetail?id=' + id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f4f4f4;
		padding: 20rpx 30rpx 0;
		
		.list {
			
			.item {
				margin-bottom: 20rpx;
				width: 100%;
				background: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 32rpx 20rpx 26rpx;
				
				.read {
					width: 12rpx;
					height: 12rpx;
					background-color: #ff4040;
					border-radius: 50%;
					margin-right: 16rpx;
				}
				.name {
					font-size: 32rpx;
					color: #222;
				}
				.container {
					width: 100%;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #f4f4f4;
					font-size: 28rpx;
					color: #878787;
					line-height: 40rpx;
					margin-bottom: 30rpx;
				}
				.text_style1 {
					font-size: 28rpx;
					color: #888;
				}
				.text_style2 {
					font-size: 28rpx;
					color: #222;
					margin-right: 5rpx;
				}
			}
		}
	}
</style>