1

pages.json

@@ -4,77 +4,72 @@
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "首页"
-				
+
 			}
 		},
-	    {
-            "path" : "pages/login/login",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "登录",
-                "enablePullDownRefresh": false
-            }
-            
-        },
-		
 		{
-            "path" : "pages/login_two/login_two",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "手机号登录",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/login_three/login_three",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "找回密码",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/resource/resource",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "资源库",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/activityPage/activityPage",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "活动页",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/message/message",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "消息",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/mine/mine",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "我的",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": "登录",
+				"enablePullDownRefresh": false
+			}
+
+		},
+
+		{
+			"path": "pages/login_two/login_two",
+			"style": {
+				"navigationBarTitleText": "手机号登录",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/login_three/login_three",
+			"style": {
+				"navigationBarTitleText": "找回密码",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/resource/resource",
+			"style": {
+				"navigationBarTitleText": "资源库",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/activityPage/activityPage",
+			"style": {
+				"navigationBarTitleText": "活动页",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/message/message",
+			"style": {
+				"navigationBarTitleText": "消息",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/message/messageDetail",
+			"style": {
+				"navigationBarTitleText": "活动消息",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/mine/mine",
+			"style": {
+				"navigationBarTitleText": "我的",
+				"enablePullDownRefresh": false
+			}
+
+		}
+	],
 	"tabBar": {
 		"list": [
-			
+
 			{
 				"pagePath": "pages/index/index",
 				"text": "首页",
@@ -115,4 +110,4 @@
 		"navigationBarTitleCentered": true
 	},
 	"uniIdRouter": {}
-}
+}

pages/message/message.vue

@@ -1,6 +1,44 @@
 <template>
-	<view>
-		消息
+	<view class="messBox">
+		<view class="mesItem" @click="goToMesDetail(1)">
+			<view class="leftBox">
+				<view class="mesImg">
+					<image src="../../static/message/notice.svg" mode=""></image>
+				</view>
+				<view class="mesBrief">
+					<view>活动通知</view>
+					<view>活动报名成功</view>
+				</view>
+			</view>
+			<view class="mesTime">07-12</view>
+			<view class="newMessage"></view>
+		</view>
+		<view class="mesItem" @click="goToMesDetail(2)">
+			<view class="leftBox">
+				<view class="mesImg">
+					<image src="../../static/message/system.svg" mode=""></image>
+				</view>
+				<view class="mesBrief">
+					<view>系统通知</view>
+					<view>已加入xxxxxx教研室</view>
+				</view>
+			</view>
+			<view class="mesTime">07-12</view>
+			<view class="newMessage"></view>
+		</view>
+		<view class="mesItem" @click="goToMesDetail(3)">
+			<view class="leftBox">
+				<view class="mesImg">
+					<image src="../../static/message/subscribe.svg" mode=""></image>
+				</view>
+				<view class="mesBrief">
+					<view>订阅消息</view>
+					<view>xxx教研室更新了课程</view>
+				</view>
+			</view>
+			<view class="mesTime">07-12</view>
+			<view class="newMessage"></view>
+		</view>
 	</view>
 </template>
 
@@ -10,10 +48,86 @@
 			return {
 				
 			};
-		}
+		},
+		methods: {
+			goToMesDetail(i) {
+				uni.navigateTo({
+					url: '/pages/message/messageDetail?mesType=' + i
+				});
+			},
+		},
 	}
 </script>
 
 <style lang="scss">
+	.messBox {
+		background: #fff;
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		align-items: center;
+
+		.mesItem {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: nowrap;
+			align-items: flex-end;
+			justify-content: space-between;
+			width: 100%;
+			padding: 20rpx;
+			position: relative;
+
+			.leftBox {
+				display: flex;
+				flex-direction: row;
+				flex-wrap: nowrap;
+				align-items: center;
+
+				.mesImg {
+					width: 180rpx;
+					height: 180rpx;
+					padding: 10rpx 5rpx;
+
+					>uni-image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+
+				.mesBrief {
+					display: flex;
+					flex-direction: column;
+					flex-wrap: nowrap;
+					align-items: flex-start;
+					padding: 0 0 0 20rpx;
 
-</style>
+					>:first-child {
+						font-size: 36rpx;
+					}
+
+					>:last-child {
+						color: #999;
+						padding: 10rpx 0 0 0;
+					}
+				}
+			}
+
+			.mesTime {
+				color: #999;
+				position: absolute;
+				bottom: 30px;
+				right: 25px;
+			}
+
+			.newMessage {
+				position: absolute;
+				top: 80rpx;
+				right: 80rpx;
+				width: 20rpx;
+				height: 20rpx;
+				background: red;
+				border-radius: 10rpx;
+			}
+		}
+	}
+</style>

pages/message/messageDetail.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		11111
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

static/message/notice.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="public/eg">
+<rect id="Rectangle 1" width="96" height="96" rx="48" fill="#FFA338" fill-opacity="0.1"/>
+<path id="Vector" d="M51.9851 68.0684C53.2018 68.0684 54.1881 69.0412 54.1881 70.2412V70.8271C54.1881 72.0272 53.2018 73 51.9851 73H44.0644C42.8477 73 41.8614 72.0272 41.8614 70.8271V70.2412C41.8614 69.0412 42.8477 68.0684 44.0644 68.0684H51.9851ZM48.1485 23C49.3515 23 50.3267 23.9619 50.3267 25.1484L50.3269 27.7971C59.0203 28.9535 65.7228 36.3009 65.7228 45.1924V59.1816H70.797C72.0137 59.1816 73 60.1544 73 61.3545V61.9404C73 63.1405 72.0137 64.1133 70.797 64.1133H65.7228V64.2109H30.1287V64.1133H25.203C23.9863 64.1133 23 63.1405 23 61.9404V61.3545C23 60.1544 23.9863 59.1816 25.203 59.1816H30.1287V45.1924C30.1287 36.3347 36.7803 29.0093 45.4256 27.8105L45.4257 25.1484C45.4257 23.9619 46.401 23 47.604 23H48.1485Z" fill="#FFA338"/>
+</g>
+</svg>

static/message/subscribe.svg

@@ -0,0 +1,7 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="public/eg">
+<rect id="Rectangle 1" width="96" height="96" rx="48" fill="#00B2B6" fill-opacity="0.1"/>
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M31.961 25C29.6109 25 27.7058 26.7614 27.7058 28.9342V69.1842C27.7058 69.8179 28.0631 70.4057 28.6486 70.7352C29.234 71.0647 29.9629 71.0882 30.5718 70.7972L47.9999 62.4658L65.4281 70.7972C66.0369 71.0882 66.7658 71.0647 67.3513 70.7352C67.9367 70.4057 68.294 69.8179 68.294 69.1842V28.9342C68.294 26.7614 66.389 25 64.0388 25H31.961Z" fill="#00B2B6"/>
+<path id="Vector (Stroke)" d="M48 36C49.1046 36 50 36.7959 50 37.7778V42.2222H55C56.1046 42.2222 57 43.0182 57 44C57 44.9818 56.1046 45.7778 55 45.7778H50V50.2222C50 51.2041 49.1046 52 48 52C46.8954 52 46 51.2041 46 50.2222V45.7778H41C39.8954 45.7778 39 44.9818 39 44C39 43.0182 39.8954 42.2222 41 42.2222H46V37.7778C46 36.7959 46.8954 36 48 36Z" fill="white"/>
+</g>
+</svg>

static/message/system.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="public/eg">
+<rect id="Rectangle 1" width="96" height="96" rx="48" fill="#3081E8" fill-opacity="0.1"/>
+<path id="Vector" d="M50.0882 26.2081C49.2943 25.8447 48.3571 25.9647 47.6827 26.5097L34.68 37.0401L24.3076 36.9995C23.7112 36.9995 23.1366 37.2288 22.7142 37.6398C22.2882 38.0508 22.0471 38.6099 22.0471 39.1956L22 56.7938C22 57.3794 22.2356 57.9404 22.6599 58.3531C23.0822 58.7694 23.6587 59.0004 24.2605 59.0004H34.7472L47.6846 69.492C48.0979 69.8271 48.6146 70 49.1312 70C49.4575 70 49.7838 69.9312 50.0901 69.7919C50.8841 69.4303 51.3917 68.6541 51.3917 67.8004V28.1995C51.3917 27.3475 50.8842 26.5714 50.0883 26.208L50.0882 26.2081ZM58.8546 37.2076C57.7398 36.6943 56.4147 37.1618 55.8727 38.2413C55.3325 39.3243 55.8002 40.6348 56.906 41.1764C57.0492 41.2487 60.4354 42.9614 60.4354 47.8386C60.4354 53.0491 57.2685 54.7759 57.1634 54.8324C56.0467 55.3757 55.5936 56.6986 56.1519 57.7851C56.5507 58.5577 57.3465 59.0022 58.1785 59.0022C58.5175 59.0022 58.8637 58.9281 59.1864 58.7712C59.422 58.6547 64.9563 55.8678 64.9563 47.8386C64.9563 40.0916 59.103 37.3223 58.8546 37.2076ZM65.8935 30.7465C64.8511 30.0957 63.4681 30.392 62.7864 31.4045C62.1085 32.417 62.4058 33.7786 63.4426 34.4454C63.6873 34.6024 69.479 38.4424 69.479 48.0009C69.479 57.5805 63.923 61.4241 63.7018 61.5705C62.6613 62.246 62.3822 63.6095 63.0746 64.622C63.5097 65.257 64.2276 65.601 64.9581 65.601C65.3877 65.601 65.8246 65.4793 66.2107 65.2305C66.5279 65.026 74 60.0412 74 47.9991C74 35.9342 66.2252 30.9529 65.8935 30.7466V30.7465Z" fill="#3081E8"/>
+</g>
+</svg>

unpackage/dist/dev/.sourcemap/mp-weixin/pages/components/messageDetail/messageDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["uni-app:///main.js"],"names":["wx","__webpack_require_UNI_MP_PLUGIN__","__webpack_require__","createPage","Page"],"mappings":";;;;;;;;;;;;;AAAA;AAGA;AACA;AAHA;AACAA,EAAE,CAACC,iCAAiC,GAAGC,mBAAmB;AAG1DC,UAAU,CAACC,sBAAI,CAAC,C","file":"pages/components/messageDetail/messageDetail.js","sourcesContent":["import 'uni-pages';\n// @ts-ignore\nwx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;\nimport Vue from 'vue'\nimport Page from './pages/components/messageDetail/messageDetail.vue'\ncreatePage(Page)"],"sourceRoot":""}

unpackage/dist/dev/mp-weixin/app.json

@@ -7,6 +7,7 @@
     "pages/resource/resource",
     "pages/activityPage/activityPage",
     "pages/message/message",
+    "pages/message/messageDetail",
     "pages/mine/mine"
   ],
   "subPackages": [],

unpackage/dist/dev/mp-weixin/pages/components/messageDetail/messageDetail.js

@@ -0,0 +1 @@
+Component({})

unpackage/dist/dev/mp-weixin/pages/components/messageDetail/messageDetail.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "",
+  "enablePullDownRefresh": false,
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/pages/components/messageDetail/messageDetail.wxml

@@ -0,0 +1 @@
+<view>11111</view>

unpackage/dist/dev/mp-weixin/pages/message/message.wxml

@@ -1 +1 @@
-<view>消息</view>
+<view class="messBox"><view data-event-opts="{{[['tap',[['goToMesDetail',[1]]]]]}}" class="mesItem" bindtap="__e"><view class="leftBox"><view class="mesImg"><image src="../../static/message/notice.svg" mode></image></view><view class="mesBrief"><view>活动通知</view><view>活动报名成功</view></view></view><view class="mesTime">07-12</view><view class="newMessage"></view></view><view data-event-opts="{{[['tap',[['goToMesDetail',[2]]]]]}}" class="mesItem" bindtap="__e"><view class="leftBox"><view class="mesImg"><image src="../../static/message/system.svg" mode></image></view><view class="mesBrief"><view>系统通知</view><view>已加入xxxxxx教研室</view></view></view><view class="mesTime">07-12</view><view class="newMessage"></view></view><view data-event-opts="{{[['tap',[['goToMesDetail',[3]]]]]}}" class="mesItem" bindtap="__e"><view class="leftBox"><view class="mesImg"><image src="../../static/message/subscribe.svg" mode></image></view><view class="mesBrief"><view>订阅消息</view><view>xxx教研室更新了课程</view></view></view><view class="mesTime">07-12</view><view class="newMessage"></view></view></view>

unpackage/dist/dev/mp-weixin/pages/message/message.wxss

@@ -0,0 +1,88 @@
+@charset "UTF-8";
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.messBox {
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.messBox .mesItem {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  width: 100%;
+  padding: 20rpx;
+  position: relative;
+}
+.messBox .mesItem .leftBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.messBox .mesItem .leftBox .mesImg {
+  width: 180rpx;
+  height: 180rpx;
+  padding: 10rpx 5rpx;
+}
+.messBox .mesItem .leftBox .mesImg > uni-image {
+  width: 100%;
+  height: 100%;
+}
+.messBox .mesItem .leftBox .mesBrief {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  padding: 0 0 0 20rpx;
+}
+.messBox .mesItem .leftBox .mesBrief > :first-child {
+  font-size: 36rpx;
+}
+.messBox .mesItem .leftBox .mesBrief > :last-child {
+  color: #999;
+  padding: 10rpx 0 0 0;
+}
+.messBox .mesItem .mesTime {
+  color: #999;
+  position: absolute;
+  bottom: 30px;
+  right: 25px;
+}
+.messBox .mesItem .newMessage {
+  position: absolute;
+  top: 80rpx;
+  right: 80rpx;
+  width: 20rpx;
+  height: 20rpx;
+  background: red;
+  border-radius: 10rpx;
+}
+

unpackage/dist/dev/mp-weixin/pages/message/messageDetail.js

@@ -0,0 +1 @@
+Component({})

unpackage/dist/dev/mp-weixin/pages/message/messageDetail.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "活动消息",
+  "enablePullDownRefresh": false,
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/pages/message/messageDetail.wxml

@@ -0,0 +1 @@
+<view>11111</view>

unpackage/dist/dev/mp-weixin/static/message/notice.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="public/eg">
+<rect id="Rectangle 1" width="96" height="96" rx="48" fill="#FFA338" fill-opacity="0.1"/>
+<path id="Vector" d="M51.9851 68.0684C53.2018 68.0684 54.1881 69.0412 54.1881 70.2412V70.8271C54.1881 72.0272 53.2018 73 51.9851 73H44.0644C42.8477 73 41.8614 72.0272 41.8614 70.8271V70.2412C41.8614 69.0412 42.8477 68.0684 44.0644 68.0684H51.9851ZM48.1485 23C49.3515 23 50.3267 23.9619 50.3267 25.1484L50.3269 27.7971C59.0203 28.9535 65.7228 36.3009 65.7228 45.1924V59.1816H70.797C72.0137 59.1816 73 60.1544 73 61.3545V61.9404C73 63.1405 72.0137 64.1133 70.797 64.1133H65.7228V64.2109H30.1287V64.1133H25.203C23.9863 64.1133 23 63.1405 23 61.9404V61.3545C23 60.1544 23.9863 59.1816 25.203 59.1816H30.1287V45.1924C30.1287 36.3347 36.7803 29.0093 45.4256 27.8105L45.4257 25.1484C45.4257 23.9619 46.401 23 47.604 23H48.1485Z" fill="#FFA338"/>
+</g>
+</svg>

unpackage/dist/dev/mp-weixin/static/message/subscribe.svg

@@ -0,0 +1,7 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="public/eg">
+<rect id="Rectangle 1" width="96" height="96" rx="48" fill="#00B2B6" fill-opacity="0.1"/>
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M31.961 25C29.6109 25 27.7058 26.7614 27.7058 28.9342V69.1842C27.7058 69.8179 28.0631 70.4057 28.6486 70.7352C29.234 71.0647 29.9629 71.0882 30.5718 70.7972L47.9999 62.4658L65.4281 70.7972C66.0369 71.0882 66.7658 71.0647 67.3513 70.7352C67.9367 70.4057 68.294 69.8179 68.294 69.1842V28.9342C68.294 26.7614 66.389 25 64.0388 25H31.961Z" fill="#00B2B6"/>
+<path id="Vector (Stroke)" d="M48 36C49.1046 36 50 36.7959 50 37.7778V42.2222H55C56.1046 42.2222 57 43.0182 57 44C57 44.9818 56.1046 45.7778 55 45.7778H50V50.2222C50 51.2041 49.1046 52 48 52C46.8954 52 46 51.2041 46 50.2222V45.7778H41C39.8954 45.7778 39 44.9818 39 44C39 43.0182 39.8954 42.2222 41 42.2222H46V37.7778C46 36.7959 46.8954 36 48 36Z" fill="white"/>
+</g>
+</svg>

unpackage/dist/dev/mp-weixin/static/message/system.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="public/eg">
+<rect id="Rectangle 1" width="96" height="96" rx="48" fill="#3081E8" fill-opacity="0.1"/>
+<path id="Vector" d="M50.0882 26.2081C49.2943 25.8447 48.3571 25.9647 47.6827 26.5097L34.68 37.0401L24.3076 36.9995C23.7112 36.9995 23.1366 37.2288 22.7142 37.6398C22.2882 38.0508 22.0471 38.6099 22.0471 39.1956L22 56.7938C22 57.3794 22.2356 57.9404 22.6599 58.3531C23.0822 58.7694 23.6587 59.0004 24.2605 59.0004H34.7472L47.6846 69.492C48.0979 69.8271 48.6146 70 49.1312 70C49.4575 70 49.7838 69.9312 50.0901 69.7919C50.8841 69.4303 51.3917 68.6541 51.3917 67.8004V28.1995C51.3917 27.3475 50.8842 26.5714 50.0883 26.208L50.0882 26.2081ZM58.8546 37.2076C57.7398 36.6943 56.4147 37.1618 55.8727 38.2413C55.3325 39.3243 55.8002 40.6348 56.906 41.1764C57.0492 41.2487 60.4354 42.9614 60.4354 47.8386C60.4354 53.0491 57.2685 54.7759 57.1634 54.8324C56.0467 55.3757 55.5936 56.6986 56.1519 57.7851C56.5507 58.5577 57.3465 59.0022 58.1785 59.0022C58.5175 59.0022 58.8637 58.9281 59.1864 58.7712C59.422 58.6547 64.9563 55.8678 64.9563 47.8386C64.9563 40.0916 59.103 37.3223 58.8546 37.2076ZM65.8935 30.7465C64.8511 30.0957 63.4681 30.392 62.7864 31.4045C62.1085 32.417 62.4058 33.7786 63.4426 34.4454C63.6873 34.6024 69.479 38.4424 69.479 48.0009C69.479 57.5805 63.923 61.4241 63.7018 61.5705C62.6613 62.246 62.3822 63.6095 63.0746 64.622C63.5097 65.257 64.2276 65.601 64.9581 65.601C65.3877 65.601 65.8246 65.4793 66.2107 65.2305C66.5279 65.026 74 60.0412 74 47.9991C74 35.9342 66.2252 30.9529 65.8935 30.7466V30.7465Z" fill="#3081E8"/>
+</g>
+</svg>