cbz/page_mine/pages/message/message.vue

<template>
	<view class="content">
		<view class="list">
			<block v-for="(item,index) in pageList" :key="index">
				<view class="list_item hflex acenter" @click="toDetail(item.id)">
					<image class="item_img" :src="item.img"></image>
					<view class="number" v-if="item.read_num > 0">{{item.read_num}}</view>
					<view class="item_right">
						<view class="hflex acenter jbetween">
							<view class="hflex acenter">
								<view class="name">{{item.name}}</view>
								<view class="text_style2" v-if="item.is_guanfang">官方</view>
							</view>
							<view class="text_style1">{{item.date}}</view>
						</view>
						<view class="text_style1">{{item.content}}</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageList: [
					{
						id: 1,
						img: '/static/images/mine/avatar1.jpg',
						name: '系统通知',
						date: '11-01',
						content: '【有奖调研】程序员求职意向度调查',
						read_num: 6,
						is_guanfang: 0
					},
					{
						id: 2,
						img: '/static/images/mine/avatar2.jpg',
						name: '系统通知',
						date: '11-01',
						content: '【有奖调研】程序员求职意向度调查',
						is_guanfang: 1
					}
				]
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			// 查看详情
			toDetail(id) {
				$api.jump('/page_mine/pages/message/detail?id=' + id)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx;
		background-color: #fff;
		.list {
			width: 100%;
			.list_item {
				width: 100%;
				margin: 48rpx 0 36rpx;
				position: relative;
				.item_img {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					
				}
				.number {
					position: absolute;
					top: 5rpx;
					left: 70rpx;
					width: 32rpx;
					height: 32rpx;
					background-color: #ff4b4b;
					border: 1rpx solid #fff;
					border-radius: 50%;
					font-size: 24rpx;
					color: #fff;
					text-align: center;
					line-height: 32rpx;
				}
				.item_right {
					width: calc(100% - 108rpx);
					padding-left: 20rpx;
					.name {
						font-size: 28rpx;
						color: #222;
					}
					.text_style1 {
						font-size: 24rpx;
						color: #999;
					}
					.text_style2 {
						margin-left: 10rpx;
						width: 56rpx;
						height: 28rpx;
						border-radius: 8rpx;
						border: 1rpx solid #506dff;
						font-size: 20rpx;
						color: #506dff;
						text-align: center;
						line-height: 28rpx;
					}
				}
			}
		}
	}
</style>