订阅页面及通知页面

components/back/back.vue

@@ -1,12 +1,22 @@
 <template>
 	<view class="back" :style="'height:'+capsuleHeight+ 'px;top:'+capsuleHighly+'px;'">
-		<view class="t-icon t-icon-fanhui2-copy" @click="backIconHandler"></view>
+		<!-- <view class="t-icon t-icon-fanhui2-copy" @click="backIconHandler"></view> -->
+		<u-icon name="arrow-left" color="#000000" size="18" @click="backIconHandler"></u-icon>
+		<view class="back-text">
+			{{ text }}
+		</view>
 	</view>
 </template>
 
 <script>
 	export default {
 		name: "back",
+		props:{
+			text:{
+				type:String,
+				default:''
+			}
+		},
 		data() {
 			return {
 				//胶囊高度
@@ -21,7 +31,8 @@
 		methods:{
 			backIconHandler(){
 				//调用自定义事件
-				this.$emit('click')
+				// this.$emit('click')
+				uni.navigateBack()
 			},
 			//获取胶囊位置信息
 			getCapsuleSite(){
@@ -45,5 +56,10 @@
 			width: 45rpx;
 			height: 45rpx;
 		}
+		
+		.back-text{
+			font-size: 48rpx;
+			margin-left: 20rpx;
+		}
 	}
 </style>

pages.json

@@ -68,8 +68,8 @@
 			}, {
 				"path": "mymsg/mymsg",
 				"style": {
-					"navigationBarTitleText": "",
-					"enablePullDownRefresh": false
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": true
 				}
 
 			}, {

pages/subscribe/subscribe.vue

@@ -4,10 +4,7 @@
 		<top-box v-bind:timeStamp="timeStamp"></top-box>
 		<!-- 列表区域 -->
 		<view class="card-box">
-			<view class="card-item"></view>
-			<view class="card-item"></view>
-			<view class="card-item"></view>
-			<view class="card-item"></view>
+			<view class="card-item" v-for="(item,index) in subArr" :style="{backgroundImage:`url(${item.image})`}"></view>
 		</view>
 
 	</view>
@@ -25,6 +22,23 @@
 			return {
 				//时间戳
 				timeStamp: '',
+				subArr:[
+					{
+						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_1.jpg',
+						title:'学情分析报告',
+						summary:'提供本学期孩子的全面考试成绩分析报告'
+					},
+					{
+						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_2.jpg',
+						title:'大考诊断分析报告',
+						summary:'提供本学期孩子大考分析报告'
+					},
+					{
+						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_3.jpg',
+						title:'德育分析报告',
+						summary:'提供本学期孩子德育发展全方位分析'
+					}
+				]
 			}
 		},
 		methods:{
@@ -70,11 +84,11 @@
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
-				background-color: #FFFFFF;
+				background-size: cover;
 				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
 				border-radius: 16rpx;
 				width: 100%;
-				height: 250rpx;
+				height: 300rpx;
 			}
 			}
 	}

subpkg/MyMsg/MyMsg.vue

@@ -1,9 +1,38 @@
 <template>
-	<view class="u-demo-block">
-		<view class="u-demo-block-content">
-			<view class="u-alert-item" v-for="(item,index) in myData.msgList" :key="index">
-				<u-alert class="alert" :description="item" type="warning" effect="dark" closable
-					@click="deleteMsg(index)"></u-alert>
+	<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>
@@ -38,4 +67,64 @@
 	.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>