优化样式,设计孩子信息页面

components/top-box/top-box.vue

@@ -1,24 +1,28 @@
 <template>
 	<view>
 		<!-- 头部信息 -->
-		<view class="home-topinfo">
+		<view class="home-topinfo"></view>
+		<view style="display: flex;align-items: center; margin-top: -450rpx;
+    margin-bottom: 120rpx;">
 			<image class="children-avatar" :src="childreninfo.avatar" @click="showChildrenList"></image>
 			<view class="children-name">
 				<text class="name">{{childreninfo.name}}</text>
 				<view class="detail-box">
 					<text class="detail" @click="select = true">{{semester}}</text>
 					<!-- 选择学期 -->
-					<view class="select-box">
-						<u-picker class="picker" :show="select" :closeOnClickOverlay="true" :columns="semesterList"
-							ref="uPicker" @confirm="selectSemester" @cancel="selectCancel"></u-picker>
+					<view class="select-icon">
 						<view class="t-icon t-icon-youjiantou" @click="select = true"></view>
 					</view>
 				</view>
 			</view>
 		</view>
+		
+		<u-picker class="picker" :show="select" :closeOnClickOverlay="true"
+			:columns="semesterList" ref="uPicker" @confirm="selectSemester"
+			@cancel="selectCancel"></u-picker>
 		<!-- 更新时间戳 -->
 		<view class="refresh-time">
-			<text class="time-text">更新时间:{{timeStamp}}</text>
+			<text class="time-text">更新于:{{timeStamp}}</text>
 		</view>
 		<!-- 切换孩子 -->
 		<view class="list-box" v-show="show">
@@ -47,24 +51,22 @@
 				type: String,
 				default: false
 			}
+		},
+		created() {
+			
 		},
 		data() {
 			return {
 				show: false,
 				select: false,
-				semesterList: [
-					['19学年上学期', '19学年下学期', '20学年上学期', '20学年下学期']
-				],
-
 			};
 		},
 		computed: {
-			...mapState('m_children', ['childreninfo', 'semester']),
+			...mapState('m_children', ['childreninfo', 'semester', 'semesterList']),
 			...mapState('m_parent', ['parentdetail'])
 		},
 		methods: {
-			...mapMutations('m_children', ['updateChildrenInfo', 'updateChildrenSemester']),
-
+			...mapMutations('m_children', ['updateChildrenInfo', 'updateChildrenSemester']),			
 			//学期选择
 			selectSemester(e) {
 				console.log('selectSemester', e)
@@ -95,49 +97,42 @@
 
 <style lang="scss">
 	.home-topinfo {
-		height: 400rpx;
+		height: 600rpx;
 		background: linear-gradient(#0080ff, #f1f3f5);
+	}
+	.children-avatar {
+		margin-left: 40rpx;
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 100%;
+		border: 4rpx solid #FFFFFF;
+		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
+	}
+	
+	.children-name {
+		margin-left: 20rpx;
 		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-
-		.children-avatar {
-			margin-top: 22rpx;
-			margin-left: 40rpx;
-			width: 96rpx;
-			height: 96rpx;
-			border-radius: 50rpx;
-			border: 4rpx solid #FFFFFF;
-			box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
-
+		flex-direction: column;
+	
+		.name {
+			color: #3B4144;
+			font-size: 36rpx;
+			font-weight: bold;
+			margin-top: 17rpx;
 		}
-
-		.children-name {
-			margin-top: 44rpx;
-			margin-left: 20rpx;
+	
+		.detail-box {
+			margin-top: 10rpx;
 			display: flex;
-			flex-direction: column;
-
-			.name {
-				color: #3B4144;
-				font-size: 32rpx;
-				margin: 4rpx 0 0 10rpx;
+	
+			.detail {
+				color: #2197ef;
 				font-weight: bold;
+				font-size: 30rpx;
 			}
-
-			.detail-box {
-				display: flex;
-
-				.detail {
-					color: #2197ef;
-					font-weight: bold;
-					font-size: 28rpx;
-					margin: 10rpx 0rpx 0 10rpx;
-				}
-
-				.select-box {
-					margin: 10rpx;
-				}
+	
+			.select-icon {
+				margin-left: 10rpx;
 			}
 		}
 	}
@@ -145,16 +140,16 @@
 	.refresh-time {
 		.time-text {
 			position: relative;
-			left: 560rpx;
+			left: 575rpx;
 			bottom: 230rpx;
 			font-size: 24rpx;
-			color: #2197ef;
+			color: #839096;
 			font-weight: bold;
 		}
 	}
 
 	.list-box {
-		margin: -120rpx 40rpx 120rpx 30rpx;
+		margin: -130rpx 40rpx 120rpx 33rpx;
 		display: flex;
 		flex-wrap: wrap;
 

information/chart.js

@@ -19,7 +19,7 @@ export default {
 				series: [{
 					"name": "总成绩",
 					"data": [
-						555,
+						556,
 						577,
 						540,
 						588,

information/children.js

@@ -10,7 +10,9 @@ export default{
 		
 		childreninfo: JSON.parse(uni.getStorageSync('childreninfo') || '{}'),
 		
-		semester: uni.getStorageSync('semester') || '请选择学期'
+		semester: uni.getStorageSync('semester') || '请选择学期',
+		
+		semesterList: [['21学年下学期', '21学年上学期', '20学年下学期', '20学年上学期']]
 		
 	}),
 	//模块方法(修改数据)
@@ -20,6 +22,10 @@ export default{
 			state.semester = semester
 			this.commit('m_children/saveChildrenSemesterToStorage')
 		},
+		//更新所有学期信息
+		updateChildrenSemesterList(state,semesterList){
+			state.semesterList = semesterList
+		},
 		
 		//更新学生信息
 		updateChildrenInfo(state,childreninfo){

information/parent.js

@@ -18,18 +18,20 @@ export default {
 				name: '张三',
 				classid: '0301',
 				class: '三年级一班',
-				tmdid: 'tmdid01'
+				tmdid: 'tmdid01',
+				schoolname: '研发学校'
 			}, {
 				avatar: '/static/default-icons/girl.png',
 				name: '张梅',
 				classid: '0504',
 				class: '五年级四班',
-				tmdid: 'tmdid03'
+				tmdid: 'tmdid03',
+				schoolname: '研发学校'
 			},
 			]
 		},
 		myData: {
-			msgList: ['通知一','121313123123123','63671254781254871256481256387618723678123681276387126']
+			msgList: ['通知一','121313123123123','bnawuidgawikdasjdhauwk']
 		}
 
 	}),
@@ -65,7 +67,7 @@ export default {
 			uni.setStorageSync('token',state.token)
 		},
 		//删除我的消息
-		deleteMyMsg(state,msgList) {
+		updateMyMsg(state,msgList) {
 			state.msgList = msgList
 		}
 

pages.json

@@ -11,17 +11,15 @@
 			"path": "pages/home/home",
 			"style": {
 				// "navigationBarTitleText": "",
-				"enablePullDownRefresh": false,
-				"navigationStyle": "custom",
-				"enablePullDownRefresh": true
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
 			}
 
 		}, {
 			"path": "pages/grade/grade",
 			"style": {
-				"enablePullDownRefresh": false,
-				"navigationStyle": "custom",
-				"enablePullDownRefresh": true
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
 			}
 
 		}, {
@@ -62,8 +60,9 @@
 			}, {
 				"path": "childrenInfo/childrenInfo",
 				"style": {
-					"navigationBarTitleText": "",
-					"enablePullDownRefresh": false
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": false,
+					"disableScroll": true
 				}
 
 			}, {

pages/home/home.vue

@@ -4,7 +4,7 @@
 		<top-box v-bind:timeStamp="timeStamp"></top-box>
 		<!-- 滚动条 -->
 		<view class="notice">
-			<u-notice-bar :text="notification" mode="closable" bgColor="#6495ED" color="#FFFFFF"></u-notice-bar>
+			<u-notice-bar :text="myData.msgList[0]" mode="closable" bgColor="#6495ED" color="#FFFFFF"></u-notice-bar>
 		</view>
 		<!-- 卡片区域 -->
 		<view class="card-box">
@@ -130,14 +130,14 @@
 		name: 'Calendar',
 		computed: {
 			...mapState('m_chart', ['todayData']),
-			...mapState('m_children', ['childreninfo'])
+			...mapState('m_children', ['childreninfo']),
+			...mapState('m_parent', ['myData'])
 		},
 		components: {
 			zsyCalendar
 		},
 		data() {
 			return {
-				notification: '这里是滚动条的内容，显示重要通知等等消息',
 				//今日课堂数
 				classNum: 5,
 				//今日课程
@@ -152,7 +152,7 @@
 				//时间戳
 				timeStamp: '',
 				//问卷完成率
-				questionnaire: 50,
+				questionnaire: 56,
 				//投票完成率
 				vote: 100,
 			}

pages/my/my.vue

@@ -46,13 +46,13 @@
 							</view>
 							<u-icon name="arrow-right" color="#bababa" size="16"></u-icon>
 						</view>
-						<view class="cell" @click="MyMsg">
+						<view class="cell" @click="myMsg">
 							<view class="cell-left">
 								<view class="t-icon t-icon-a-liaotianpingluntaolunduihua" ></view>
 								<view class="cell-text">我的消息</view>
 							</view>
 							<view class="cell-right">
-								<u-badge type="error" :value="10"></u-badge>
+								<u-badge type="warning" shape="horn" :value="myData.msgList.length"></u-badge>
 								<u-icon name="arrow-right" color="#bababa" size="16"></u-icon>
 							</view>
 						</view>
@@ -100,7 +100,7 @@
 
 	export default {
 		computed: {
-			...mapState('m_parent', ['token', 'parentdetail', 'parentinfo']),
+			...mapState('m_parent', ['token', 'parentdetail', 'parentinfo','myData']),
 			...mapState('m_children', ['childreninfo'])
 		},
 
@@ -147,7 +147,7 @@
 				})
 			},
 			//我的消息
-			MyMsg(){
+			myMsg(){
 				uni.navigateTo({
 					url: '/subpkg/mymsg/mymsg'
 				})
@@ -163,10 +163,10 @@
 		height: 100%;
 		.bg1{
 			position: fixed;
-			top: -250rpx;
-			right: -280rpx;
-			width: 700rpx;
-			height: 700rpx;
+			top: -400rpx;
+			right: -250rpx;
+			width: 1000rpx;
+			height: 1000rpx;
 			margin-right: 500rpx;
 			border-radius: 100%;
 			background-color: #6495ed;
@@ -174,17 +174,17 @@
 		}
 		.bg2{
 			position: fixed;
-			top: -170rpx;
-			right: -250rpx;
-			width: 600rpx;
-			height: 600rpx;
+			top: -300rpx;
+			right: -320rpx;
+			width: 800rpx;
+			height: 800rpx;
 			border-radius: 100%;
 			background-color: #4169E1;
 			z-index: -2;
 		}
 
 		.userinfo-topinfo {
-			height: 300rpx;
+			height: 380rpx;
 			// background: linear-gradient(#ff5959, #f1f3f5);
 			display: flex;
 			justify-content: flex-start;
@@ -195,28 +195,28 @@
 				margin-left: 40rpx;
 				width: 120rpx;
 				height: 120rpx;
-				border-radius: 70rpx;
+				border-radius: 100%;
 				border: 6rpx solid #FFFFFF;
 				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
 			}
 
 			.parent-name {
-				margin-top: 20rpx;
+				margin-top: 40rpx;
 				margin-left: 20rpx;
 				display: flex;
 				flex-direction: column;
 				font-weight: bold;
 
 				.name {
-					color: #000000;
-					font-size: 32rpx;
+					color: #3B4144;
+					font-size: 36rpx;
 					font-weight: bold;
 					margin: 4rpx 0 0 10rpx;
 				}
 				
 				.u-tag{
 					margin-top: 10rpx !important;
-					height: 36rpx;
+					height: 40rpx;
 					line-height: 36rpx;
 					
 					.u-tag__text{
@@ -230,16 +230,6 @@
 					margin: 10rpx 0 0 10rpx;
 				}
 			}
-
-			.parent-avatar {
-				margin-top: 22rpx;
-				margin-left: 40rpx;
-				width: 120rpx;
-				height: 120rpx;
-				border-radius: 70rpx;
-				border: 6rpx solid #FFFFFF;
-				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
-			}
 		}
 		.userinfo-container{
 				height: 100%;

subpkg/MyMsg/MyMsg.vue

@@ -1,9 +1,9 @@
 <template>
 	<view class="u-demo-block">
-		<view>123</view>
 		<view class="u-demo-block-content">
 			<view class="u-alert-item" v-for="(item,index) in myData.msgList" :key="index">
-				<u-alert :description="item" type="success" closable @click="deleteMsg(index)"></u-alert>
+				<u-alert class="alert" :description="item" type="warning" effect="dark" closable
+					@click="deleteMsg(index)"></u-alert>
 			</view>
 		</view>
 	</view>
@@ -20,18 +20,15 @@
 			...mapState('m_parent', ['myData'])
 		},
 		data() {
-			return {
-				msgList: ['通知一', '121313123123123', '63671254781254871256481256387618723678123681276387126']
-			};
+			return {};
 		},
 		methods: {
-			...mapMutations('m_parent', ['deleteMyMsg']),
+			...mapMutations('m_parent', ['updateMyMsg']),
 			//删除信息
 			deleteMsg(index) {
 				let msgList = this.myData.msgList
 				let after = msgList.splice(index, 1)
-				console.log(after)
-				this.deleteMsg(after)
+				this.updateMyMsg(after)
 			}
 		}
 	}

subpkg/childrenInfo/childrenInfo.vue

@@ -1,19 +1,166 @@
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			};
-		}
-	}
-</script>
-
-<style lang="scss">
-
+<template>
+	<view class="container">
+		<!-- 返回按钮 -->
+		<view class="back">
+			<view class="t-icon t-icon-fanhui2-copy" @click="returnMy"></view>
+		</view>
+		<!-- 孩子头部信息 -->
+		<view class="top-info">
+			<image class="children-avatar" :src="childreninfo.avatar" size="100"></image>
+			<view class="children-name">
+				<text class="name">{{childreninfo.name}}</text>
+				<text class="school-name">{{childreninfo.schoolname}}</text>
+			</view>
+		</view>
+
+		<!-- 内容列表 -->
+		<view class="card-box">
+			<u-cell-group :border="false">
+				<view class="i-item">
+					<view class="t-icon t-icon-shangke"></view>
+					<u-cell class="cell-box" size="large" title="班级" label="描述信息" :border="false"></u-cell>
+				</view>
+				<view class="i-item">
+					<view class="t-icon t-icon-yongxinfuwu"></view>
+					<u-cell class="cell-box" size="large" title="年龄" label="描述信息" :border="false"></u-cell>
+				</view>
+				<view class="i-item">
+					<view class="t-icon t-icon-qitaxueke"></view>
+					<u-cell class="cell-box" size="large" title="个人信息" label="描述信息" :border="false"></u-cell>
+				</view>
+			</u-cell-group>
+			<!-- 横向内容列表 -->
+			<view style="display: flex; flex-wrap: wrap; align-items: center;margin: 0 40rpx 0 40rpx;">
+				<view class="data-box-item"></view>
+				<view class="data-box-item"></view>
+				<view class="data-box-item"></view>
+				<view class="data-box-item"></view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
+	export default {
+		computed: {
+			...mapState('m_children', ['childreninfo', 'semester']),
+		},
+		data() {
+			return {
+
+			};
+		},
+		methods: {
+			...mapMutations('m_children', ['updateChildrenInfo']),
+			//返回成绩页面
+			returnMy() {
+				uni.switchTab({
+					url: '/pages/my/my'
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.container {
+		height: 600rpx;
+		background: linear-gradient(#2197ef, #f1f3f5);
+
+		.back {
+			padding: 100rpx 0 30rpx 40rpx;
+
+			.t-icon {
+				width: 50rpx;
+				height: 50rpx;
+			}
+		}
+
+		.top-info {
+			display: flex;
+			align-items: center;
+
+			.children-avatar {
+				margin-left: 50rpx;
+				width: 150rpx;
+				height: 150rpx;
+				border-radius: 100%;
+				border: 6rpx solid #FFFFFF;
+				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
+			}
+
+			.children-name {
+				margin-left: 20rpx;
+				display: flex;
+				flex-direction: column;
+				font-weight: bold;
+
+				.name {
+					color: #3B4144;
+					font-size: 50rpx;
+					font-weight: bold;
+				}
+
+				.school-name {
+					color: #596166;
+					font-size: 40rpx;
+					font-weight: bold;
+				}
+			}
+		}
+
+
+
+		.card-box {
+			position: relative;
+			background-color: #FFFFFF;
+			box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.2);
+			top: 100rpx;
+			left: 50rpx;
+			border-radius: 100rpx;
+			width: 750rpx;
+			height: 100vh;
+
+			.i-item {
+				display: flex;
+				align-items: center;
+				margin-left: 35rpx;
+			}
+		}
+
+		.data-box-item {
+			display: flex;
+			flex-direction: column;
+			margin: 20rpx;
+			background-color: #0052d4;
+			border-radius: 15rpx;
+			width: 280rpx;
+			height: 280rpx;
+			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+
+			.item-text {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #FFFFFF;
+				margin: 30rpx 0 0 30rpx;
+			}
+
+			.t-icon {
+				width: 100rpx;
+				height: 100rpx;
+			}
+
+			.item-number {
+				font-size: 60rpx;
+				margin: 20rpx 0 10rpx 30rpx;
+				color: #FFFFFF;
+				font-weight: bold;
+			}
+		}
+	}
 </style>

uni_modules/uview-ui/components/u-alert/u-alert.vue

@@ -119,8 +119,7 @@
 				// this.$emit('click')
 			},
 			// 点击关闭按钮
-			closeHandler() {
-				this.show = false
+			closeHandler() {
 				this.$emit('click')
 			}
 		}

uni_modules/uview-ui/components/u-cell-group/u-cell-group.vue

@@ -41,7 +41,8 @@
 	$u-cell-group-title-color: $u-main-color !default;
 
     .u-cell-group {
-		flex: 1;
+		flex: 1;
+		padding: 40rpx 25rpx 5rpx 25rpx; 
 		
         &__title {
             padding: $u-cell-group-title-padding;