MiniPrograms/subpkg/MyMsg/MyMsg.vue

<template>
	<view class="notice-container">
		<!-- 返回按钮 -->
		<back text="通知"></back>
		<!-- <p class="notice-title">通知</p> -->
		<view class="notice-wrap">
			<view class="notice-item">
				<view class="notice-item-title">
					<view class="left">
						<view class="t-icon t-icon-shuju" ></view>成绩通知
					</view>
					<text>12分钟前</text>
				</view>
				<view class="notice-item-content">您的孩子【张梅】在 【青城山学校】的【2020年语文期末测试】成绩已经生成，请点击查看详情 > </view>
				<image class="notice-item-poster" src="https://image.meiye.art/pic_9ikZaVYnJE38Ao6AZlVIx?imageMogr2/thumbnail/450x/interlace/1" mode="widthFix"></image>
			</view>
			<view class="notice-item">
				<view class="notice-item-title">
					<view class="left">
						<view class="t-icon t-icon-tishi" ></view>系统通知
					</view>
					<text>12分钟前</text>
				</view>
				<view class="notice-item-content">您以成功绑定【青城山学校】【五年级8班】【张梅】学生。</view>
				<image class="notice-item-poster" src="https://image.meiye.art/pic_ucQUd7WwkuW1vKvjbgUlv?imageMogr2/thumbnail/450x/interlace/1" mode="widthFix"></image>
			</view>
			<view class="notice-item">
				<view class="notice-item-title">
					<view class="left">
						<view class="t-icon t-icon-bianji" ></view>任务通知
					</view>
					<text>12分钟前</text>
				</view>
				<view class="notice-item-content">您的孩子【张梅】班主任李老师给您发布一个新的问卷活动【周末孩子表现问卷调查】，快去填写吧 ></view>
				<image class="notice-item-poster" src="https://image.meiye.art/pic_1628927180566LfOmH3IV5i24Mmc65BGE0?imageMogr2/thumbnail/450x/interlace/1" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		computed: {
			...mapState('m_parent', ['myData'])
		},
		data() {
			return {};
		},
		methods: {
			...mapMutations('m_parent', ['updateMyMsg']),
			//删除信息
			deleteMsg(index) {
				let msgList = this.myData.msgList
				let after = msgList.splice(index, 1)
				this.updateMyMsg(after)
			}
		}
	}
</script>

<style lang="scss">
	.u-alert-item {
		margin: 20rpx;
	}
	
	.notice-container{
		.notice-title{
			font-size: 48rpx;
			padding-left: 20px;
		}
		
		.notice-wrap{
			padding: 20px;
			
			.notice-item{
				// width: 100%;
				// height: 400rpx;
				border-radius: 10px;
				margin-bottom: 40rpx;
				background-color: #fff;
				padding: 30rpx;
				&-title{
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.t-icon{
						display: inline-block;
						margin-right: 10rpx;
						width: 20px;
						height: 20px;
					}
					
					.left{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					
					text{
						font-size: 24rpx;
						color: #848587;
					}
				}
				
				&-content{
					font-size: 24rpx;
					margin: 16rpx 0;
					color: #6c6c6c;
					display: -webkit-box!important;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical!important;
				}
				
				&-poster{
					width: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>