初步布局今日页面,优化成绩页面

components/area-mini-chart/area-mini-chart.vue

@@ -1,29 +1,25 @@
-<template>
+<template>
 	<view class="chart-container">
 		<view class="chart-name">
 			<view class="t-icon t-icon-xtubiao-4"></view>
 			<text class="chart-name-text">单科成绩</text>
 		</view>
-		
+
 		<view class="charts-box">
-		  <qiun-data-charts
-		    type="mini-area"
-		    :chartData="chartData"
-		    :loadingType="4"
-		    background="none"
-		    :tapLegend="false"
-				:canvas2d='true' canvasId='canvans1'
-		  />
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name:"area-mini-chart",
-		data() {
-			return {
-				chartData: {
+			<qiun-data-charts type="mini-area" :chartData="chartData" :loadingType="4" background="none"
+				:tapLegend="false" :canvas2d='true' canvasId='canvans1' />
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "area-mini-chart",
+		//定义props属性,用来接收外界传递到当前组件的数据
+		props: {
+			miniChartData: {
+				type: Object,
+				default: {
 					categories: [
 						"测验1",
 						"测验2",
@@ -40,7 +36,7 @@
 								92,
 								100,
 								88,
-								85
+								99
 							]
 						},
 						{
@@ -66,46 +62,56 @@
 							]
 						}
 					],
-				},
-				
-				
-			};
-		}
-	}
-</script>
-
-<style lang="scss">
-.chart-container {
+				}
+
+			}
+		},
+		data() {
+			return {
+				chartData: this.miniChartData
+
+			};
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.chart-container {
 		border-radius: 20rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
 		background-color: #FFFFFF;
-		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
+		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
 		width: 340rpx;
-	
+
 		.chart-name {
 			display: flex;
 			align-items: center;
 			justify-content: flex-start;
 			width: 100%;
 			margin: 20rpx 0 20rpx 40rpx;
-			
+
 			.chart-name-text {
 				margin-left: 20rpx;
 				font-size: 30rpx;
 				font-weight: bold;
 				color: #3B4144;
 			}
-		}
-	.charts-box{
-		width: 100%;
-		height: 240rpx;
+		}
+
+		.charts-box {
+			width: 100%;
+			height: 240rpx;
+		}
 	}
-}
-.t-icon{
+
+	.t-icon {
 		width: 40rpx;
 		height: 40rpx;
-	}
+	}
 </style>

components/bar-mini-chart/bar-mini-chart.vue

@@ -1,28 +1,24 @@
-<template>
+<template>
 	<view class="chart-container">
 		<view class="chart-name">
 			<view class="t-icon t-icon-xtubiao-12"></view>
 			<text class="chart-name-text">目标成绩</text>
 		</view>
-		
+
 		<view class="charts-box">
-		  <qiun-data-charts
-		    type="mini-bar"
-		    :chartData="chartData"
-		    :loadingType="4"
-		    background="none"
-				:canvas2d='true' canvasId='canvans999'
-		  />
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name:"bar-mini-chart",
-		data() {
-			return {
-				chartData: {
+			<qiun-data-charts type="mini-bar" :chartData="chartData" :loadingType="4" background="none" :canvas2d='true'
+				canvasId='canvans999' />
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "bar-mini-chart",
+		props: {
+			miniChartData: {
+				type: Object,
+				default: {
 					categories: [
 						"数学",
 						"语文",
@@ -54,48 +50,55 @@
 							]
 						}
 					],
-				},
-				
-				
-			};
-		}
-	}
-</script>
-
-<style lang="scss">
-.chart-container {
+
+				}
+			}
+		},
+		data() {
+			return {
+				chartData: this.miniChartData
+
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.chart-container {
 		border-radius: 20rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
 		background-color: #FFFFFF;
-		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
+		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
 		width: 340rpx;
 
-	
+
 		.chart-name {
 			display: flex;
 			align-items: center;
 			justify-content: flex-start;
 			width: 100%;
 			margin: 20rpx 0 20rpx 40rpx;
-			
+
 			.chart-name-text {
 				margin-left: 20rpx;
 				font-size: 30rpx;
 				font-weight: bold;
 				color: #3B4144;
 			}
-		}
-	.charts-box{
-		margin: 10rpx 10rpx 0 30rpx;
-		width: 100%;
-		height: 320rpx;
+		}
+
+		.charts-box {
+			margin: 10rpx 10rpx 0 30rpx;
+			width: 100%;
+			height: 320rpx;
+		}
 	}
-}
-.t-icon{
+
+	.t-icon {
 		width: 40rpx;
 		height: 40rpx;
-	}
+	}
 </style>

components/column-mini-chart/column-mini-chart.vue

@@ -20,10 +20,11 @@
 
 <script>
 	export default {
-		name:"column-mini-chart",
-		data() {
-			return {
-				chartData: {
+		name:"column-mini-chart",
+		props:{
+			miniChartData: {
+				type: Object,
+				default: {
 					categories: [
 						"数学",
 						"语文",
@@ -55,9 +56,13 @@
 							]
 						}
 					],
-				},
-				
-				
+					
+				}
+			}
+		},
+		data() {
+			return {
+				chartData: this.miniChartData	
 			};
 		}
 	}

components/line-mini-chart/line-mini-chart.vue

@@ -20,10 +20,11 @@
 
 <script>
 	export default {
-		name:"line-mini-chart",
-		data() {
-			return {
-				chartData: {
+		name:"line-mini-chart",
+		props:{
+			miniChartData: {
+				type: Object,
+				default: {
 					categories: [
 						"测验1",
 						"测验2",
@@ -62,8 +63,13 @@
 							]
 						}
 					],
-				},
-				
+					
+				}
+			}
+		},
+		data() {
+			return {
+				chartData: this.miniChartData
 				
 			};
 		}

components/mainline-mini-chart/mainline-mini-chart.vue

@@ -13,11 +13,11 @@
 
 <script>
 	export default {
-		name:"mainline-mini-chart",
-		data() {
-			return {
-				
-				chartData: {
+		name:"mainline-mini-chart",
+		props: {
+			miniChartData: {
+				type: Object,
+				default: {
 					categories: [
 						"开学考试",
 						"第一月考",
@@ -36,10 +36,15 @@
 							563,
 							594
 						]
-					}]
-				},
-				
-				
+					}],
+					
+				}
+			}
+		},
+		data() {
+			return {		
+				chartData: this.miniChartData
+
 			};
 		}
 	}

components/radar-mini-chart/radar-mini-chart.vue

@@ -19,10 +19,11 @@
 
 <script>
 	export default {
-		name:"radar-mini-chart",
-		data() {
-			return {
-				chartData: {
+		name:"radar-mini-chart",
+		props:{
+			miniChartData:{
+				type: Object,
+				default: {
 					categories: ["语文",
 						"数学",
 						"英语",
@@ -64,8 +65,14 @@
 							]
 						}
 					],
-				},
-				
+					
+					
+				}
+			}
+		},
+		data() {
+			return {
+				chartData: this.miniChartData
 				
 			};
 		}
@@ -99,9 +106,9 @@
 			}
 		}
 	.charts-box{
-		margin: 10rpx 0 0 0;
+		margin: -20rpx 0 0 0;
 		width: 100%;
-		height: 320rpx;
+		height: 350rpx;
 	}
 }
 .t-icon{

components/top-box/top-box.vue

@@ -43,7 +43,7 @@
 				
 				select: false,
 				semesterList:[
-					['19学年上学期','19学年下学期','20学年上学期','20学年下学期']
+					['19学年','20学年','21学年','22学年']
 				],
 				
 			};

gradepkg/arcbar-chart/arcbar-chart.vue

@@ -3,7 +3,12 @@
 		<view class="icon-box">
 			<view class="t-icon t-icon-xuexirenwu"></view>
 			<view class="t-icon t-icon-ceshi"></view>
-			<view class="t-icon t-icon-silu"></view>
+			
+			<view style="display: flex; flex-direction: column; align-items: center;" @click="returnList">
+				<view class="t-icon t-icon-mulu"></view>
+				<view class="icon-text">返回</view>
+			</view>
+			
 		</view>
 
 
@@ -17,6 +22,25 @@
 		 	<qiun-data-charts type="arcbar" :chartData="chartData" :loadingType="4" :opts.title="this.chartData.series.name" />
 			</view>
 		</view>
+		<!-- 数据分析模块 -->
+		<view class="data-box">
+			<view class="data-box-item" v-bind:style="{background: chartData.series[0].color}">
+				<view class="item-text">{{chartData.series[0].name}}</view>
+				<view class="item-number">{{chartData.series[0].data/0.01}}%</view>
+				<view style="display: flex;align-items: center;">
+					<view class="t-icon t-icon-jiangbei-6"></view>
+					<view class="icon-text-item">继续加油!</view>
+				</view>
+			</view>
+			<view class="data-box-item" v-bind:style="{background: chartData.series[1].color}">
+				<view class="item-text">{{chartData.series[1].name}}</view>
+				<view class="item-number">{{chartData.series[1].data/0.01}}%</view>
+				<view style="display: flex;align-items: center;">
+					<view class="t-icon t-icon-jiangbei-6"></view>
+					<view class="icon-text-item">继续加油!</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -26,36 +50,44 @@
 			return {
 				chartData: {
 					series: [{
-							"name": "您的孩子超过",
-							"data": 0.8,
+							"name": "超过年级中:",
+							"data": 0.84,
 							"color": "#0052d4"
 						},
 						{
-							"name": "班级平均分",
-							"data": 0.9,
+							"name": "超过班级中:",
+							"data": 0.92,
 							"color": "#ff5959"
-						},
-						{
-							"name": "年纪平均分",
-							"data": 1,
-							"color": "#f9b248"
 						}
 					],
 				},
 			};
+		},
+		methods:{
+			//返回成绩页面
+			returnList(){
+				uni.switchTab({
+					url: '/pages/grade/grade'
+				})
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
 	.page-box{
-		height: 400rpx;
+		height: 600rpx;
 		background: linear-gradient(#419eea, #f1f3f5);
 		.icon-box{
 			display: flex;
 			justify-content: space-between;
-			margin: 0 80rpx 40rpx 80rpx;
-			padding-top: 20rpx;
+			margin: 0 80rpx 20rpx 80rpx;
+			padding-top: 200rpx;
+			.icon-text{
+				font-weight: bold;
+				font-size: 26rpx;
+				color: #3B4144;
+			}
 		}
 		.chart-container {
 			margin: 0 20rpx;
@@ -85,8 +117,48 @@
 			}
 			.charts-box {
 				width: 100%;
-				height: 550rpx;
+				height: 500rpx;
+			}
+		}
+		.data-box{
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			margin: 20rpx;
+			.data-box-item{
+				display: flex;
+				flex-direction: column;
+				background-color: #FFFFFF;
+				border-radius: 15rpx;
+				width: 340rpx;
+				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{
+					margin-bottom: 30rpx;
+					margin-left: 20rpx;
+					width: 100rpx;
+					height: 100rpx;
+				}
+				.item-number{
+					font-size: 80rpx;
+					margin-left: 30rpx;
+					color: #FFFFFF;
+					font-weight: bold;
+				}
 			}
 		}
 	}
+	.icon-text-item{
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #FFFFFF;
+		margin-left: 10rpx;
+	}
 </style>

gradepkg/area-chart/area-chart.vue

@@ -1,9 +1,18 @@
 <template>
 	<view class="page-box">
 		<view class="icon-box">
-			<view class="t-icon t-icon-xuexirenwu"></view>
-			<view class="t-icon t-icon-ceshi"></view>
-			<view class="t-icon t-icon-silu"></view>
+			<view class="t-icon t-icon-chengji1"></view>
+			
+			<view style="display: flex; flex-direction: column; align-items: center;" @click="show = true">
+				<view class="t-icon t-icon-chaquebulou"></view>
+				<view class="icon-text">科目</view>
+			</view>
+			
+			<view style="display: flex; flex-direction: column; align-items: center;" @click="returnList">
+				<view class="t-icon t-icon-mulu"></view>
+				<view class="icon-text">返回</view>
+			</view>
+			
 		</view>
 
 		<view class="chart-container">
@@ -12,14 +21,13 @@
 				<text class="chart-name-text">单科成绩走向图</text>
 				<!-- 选择器 -->
 				<view class="chart-name-btn">
-					<u-picker :show="show" :columns="subject" ref="uPicker" @confirm="confirm" @change="changeHandler">
+					<u-picker :show="show" :columns="subject" ref="uPicker" @confirm="selectSubject" @cancel="selectCancel">
 					</u-picker>
-					<!-- <u-button class="btn" @click="show = true" size="small" shape="circle">科目</u-button> -->
 				</view>
 			</view>
 			<!-- 图表 -->
 			<view class="charts-box">
-				<qiun-data-charts type="area" :chartData="chartData" :loadingType="4" background="none" />
+				<qiun-data-charts type="area" :chartData="chartData" :loadingType="4" background="none" :canvas2d='true' canvasId='canvans999' />
 			</view>
 		</view>
 	</view>
@@ -58,7 +66,7 @@
 								92,
 								100,
 								88,
-								85
+								99
 							]
 						},
 						{
@@ -108,24 +116,42 @@
 			// 	this.chartData = {categories:[...res.test],series[...res.object,...res.class,...res.grade]}
 			// },
 			
-			confirm(e) {
-				console.log('confirm', e)
+			selectSubject(e) {
+				console.log('selectSubject', e)
+				// this.queryObj = e.value[0]
+				// this.getChartData()
 				uni.$showMsg('切换完成')
 				this.show = false
-			}
+			},
+			selectCancel(){
+				uni.$showMsg('取消选择')
+				this.show = false
+			},
+			//返回成绩页面
+			returnList(){
+				uni.switchTab({
+					url: '/pages/grade/grade'
+				})
+			},
+			
 		}
 	}
 </script>
 
 <style lang="scss">
 	.page-box{
-		height: 400rpx;
+		height: 600rpx;
 		background: linear-gradient(#ff6187, #f1f3f5);
 		.icon-box{
 			display: flex;
 			justify-content: space-between;
-			margin: 0 80rpx 40rpx 80rpx;
-			padding-top: 20rpx;
+			margin: 0 80rpx 20rpx 80rpx;
+			padding-top: 200rpx;
+			.icon-text{
+				font-weight: bold;
+				font-size: 26rpx;
+				color: #3B4144;
+			}
 		}
 		.chart-container {
 			margin: 0 20rpx;

gradepkg/bar-chart/bar-chart.vue

@@ -2,10 +2,18 @@
 	<view class="page-box">
 		<view class="icon-box">
 			<view class="t-icon t-icon-xuexirenwu"></view>
-			<view class="t-icon t-icon-ceshi"></view>
-			<view class="t-icon t-icon-silu"></view>
-		</view>
 
+			<view style="display: flex; flex-direction: column; align-items: center;" @click="changeTarget">
+				<view class="t-icon t-icon-ceshi"></view>
+				<view class="icon-text">目标</view>
+			</view>
+
+			<view style="display: flex; flex-direction: column; align-items: center;" @click="returnList">
+				<view class="t-icon t-icon-mulu"></view>
+				<view class="icon-text">返回</view>
+			</view>
+
+		</view>
 
 		<view class="chart-container">
 			<view class="chart-name">
@@ -13,9 +21,15 @@
 				<text class="chart-name-text">成绩目标</text>
 			</view>
 			<view class="charts-box">
-				<qiun-data-charts type="bar" :chartData="chartData" :loadingType="4"/>
+				<qiun-data-charts type="bar" :chartData="chartData" :loadingType="4" />
 			</view>
 		</view>
+
+		
+
+
+
+
 	</view>
 </template>
 
@@ -23,6 +37,8 @@
 	export default {
 		data() {
 			return {
+				target: false,
+
 				chartData: {
 					categories: [
 						"数学",
@@ -59,20 +75,39 @@
 
 
 			};
+		},
+		methods: {
+			changeTarget() {
+				this.target = !this.target
+			},
+			//返回成绩页面
+			returnList() {
+				uni.switchTab({
+					url: '/pages/grade/grade'
+				})
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
-	.page-box{
-		height: 400rpx;
+	.page-box {
+		height: 600rpx;
 		background: linear-gradient(#5fb7ff, #f1f3f5);
-		.icon-box{
+
+		.icon-box {
 			display: flex;
 			justify-content: space-between;
-			margin: 0 80rpx 40rpx 80rpx;
-			padding-top: 20rpx;
+			margin: 0 80rpx 20rpx 80rpx;
+			padding-top: 200rpx;
+
+			.icon-text {
+				font-weight: bold;
+				font-size: 26rpx;
+				color: #3B4144;
+			}
 		}
+
 		.chart-container {
 			margin: 0 20rpx;
 			padding: 0rpx 10rpx 0rpx 0rpx;
@@ -82,8 +117,8 @@
 			justify-content: center;
 			flex-direction: column;
 			background-color: #FFFFFF;
-			box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
-		
+			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+
 			.chart-name {
 				width: 100%;
 				display: flex;
@@ -91,7 +126,7 @@
 				align-items: center;
 				margin-left: 40rpx;
 				margin-top: 20rpx;
-		
+
 				.chart-name-text {
 					font-size: 30rpx;
 					font-weight: bold;
@@ -99,6 +134,7 @@
 					margin-left: 10rpx;
 				}
 			}
+
 			.charts-box {
 				width: 100%;
 				height: 600rpx;

gradepkg/column-chart/column-chart.vue

@@ -3,7 +3,12 @@
 		<view class="icon-box">
 			<view class="t-icon t-icon-xuexirenwu"></view>
 			<view class="t-icon t-icon-ceshi"></view>
-			<view class="t-icon t-icon-silu"></view>
+			
+			<view style="display: flex; flex-direction: column; align-items: center;" @click="returnList">
+				<view class="t-icon t-icon-mulu"></view>
+				<view class="icon-text">返回</view>
+			</view>
+			
 		</view>
 
 
@@ -59,19 +64,32 @@
 
 
 			};
+		},
+		methods:{
+			//返回成绩页面
+			returnList(){
+				uni.switchTab({
+					url: '/pages/grade/grade'
+				})
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
 	.page-box{
-		height: 400rpx;
+		height: 600rpx;
 		background: linear-gradient(#f9cd98, #f1f3f5);
 		.icon-box{
 			display: flex;
 			justify-content: space-between;
-			margin: 0 80rpx 40rpx 80rpx;
-			padding-top: 20rpx;
+			margin: 0 80rpx 20rpx 80rpx;
+			padding-top: 200rpx;
+			.icon-text{
+				font-weight: bold;
+				font-size: 26rpx;
+				color: #3B4144;
+			}
 		}
 		.chart-container {
 			margin: 0 20rpx;

gradepkg/line-chart/line-chart.vue

@@ -3,7 +3,12 @@
 		<view class="icon-box">
 			<view class="t-icon t-icon-xuexirenwu"></view>
 			<view class="t-icon t-icon-ceshi"></view>
-			<view class="t-icon t-icon-silu"></view>
+			
+			<view style="display: flex; flex-direction: column; align-items: center;" @click="returnList">
+				<view class="t-icon t-icon-mulu"></view>
+				<view class="icon-text">返回</view>
+			</view>
+			
 		</view>
 		
 		<view class="chart-container">
@@ -64,19 +69,33 @@
 					],
 				},
 			};
-		}
+		},
+		methods:{
+			//返回成绩页面
+			returnList(){
+				uni.switchTab({
+					url: '/pages/grade/grade'
+				})
+			},
+		},
+		
 	}
 </script>
 
 <style lang="scss">
 	.page-box{
-		height: 400rpx;
+		height: 600rpx;
 		background: linear-gradient(#5fb7ff, #f1f3f5);
 		.icon-box{
 			display: flex;
 			justify-content: space-between;
-			margin: 0 80rpx 40rpx 80rpx;
-			padding-top: 20rpx;
+			margin: 0 80rpx 20rpx 80rpx;
+			padding-top: 200rpx;
+			.icon-text{
+				font-weight: bold;
+				font-size: 26rpx;
+				color: #3B4144;
+			}
 		}
 		.chart-container {
 			margin: 0 20rpx;

gradepkg/mainradar-chart/mainradar-chart.vue

@@ -3,7 +3,12 @@
 		<view class="icon-box">
 			<view class="t-icon t-icon-xuexirenwu"></view>
 			<view class="t-icon t-icon-ceshi"></view>
-			<view class="t-icon t-icon-silu"></view>
+			
+			<view style="display: flex; flex-direction: column; align-items: center;" @click="returnList">
+				<view class="t-icon t-icon-mulu"></view>
+				<view class="icon-text">返回</view>
+			</view>
+			
 		</view>
 
 
@@ -70,19 +75,32 @@
 
 
 			};
+		},
+		methods:{
+			//返回成绩页面
+			returnList(){
+				uni.switchTab({
+					url: '/pages/grade/grade'
+				})
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
 	.page-box{
-		height: 400rpx;
+		height: 600rpx;
 		background: linear-gradient(#ff6187, #f1f3f5);
 		.icon-box{
 			display: flex;
 			justify-content: space-between;
-			margin: 0 80rpx 40rpx 80rpx;
-			padding-top: 20rpx;
+			margin: 0 80rpx 20rpx 80rpx;
+			padding-top: 200rpx;
+			.icon-text{
+				font-weight: bold;
+				font-size: 26rpx;
+				color: #3B4144;
+			}
 		}
 		.chart-container {
 			margin: 0 20rpx;

gradepkg/radar-chart/radar-chart.vue

@@ -3,7 +3,12 @@
 		<view class="icon-box">
 			<view class="t-icon t-icon-xuexirenwu"></view>
 			<view class="t-icon t-icon-ceshi"></view>
-			<view class="t-icon t-icon-silu"></view>
+			
+			<view style="display: flex; flex-direction: column; align-items: center;" @click="returnList">
+				<view class="t-icon t-icon-mulu"></view>
+				<view class="icon-text">返回</view>
+			</view>
+			
 		</view>
 
 
@@ -77,20 +82,31 @@
 				console.log('confirm', e)
 				uni.$showMsg('切换完成')
 				this.show = false
-			}
+			},
+			//返回成绩页面
+			returnList(){
+				uni.switchTab({
+					url: '/pages/grade/grade'
+				})
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
 	.page-box{
-		height: 400rpx;
+		height: 600rpx;
 		background: linear-gradient(#c1cbf7, #f1f3f5);
 		.icon-box{
 			display: flex;
 			justify-content: space-between;
-			margin: 0 80rpx 40rpx 80rpx;
-			padding-top: 20rpx;
+			margin: 0 80rpx 20rpx 80rpx;
+			padding-top: 200rpx;
+			.icon-text{
+				font-weight: bold;
+				font-size: 26rpx;
+				color: #3B4144;
+			}
 		}
 		.chart-container {
 			margin: 0 20rpx;

gradepkg/rose-chart/rose-chart.vue

@@ -3,7 +3,12 @@
 		<view class="icon-box">
 			<view class="t-icon t-icon-xuexirenwu"></view>
 			<view class="t-icon t-icon-ceshi"></view>
-			<view class="t-icon t-icon-silu"></view>
+			
+			<view style="display: flex; flex-direction: column; align-items: center;" @click="returnList">
+				<view class="t-icon t-icon-mulu"></view>
+				<view class="icon-text">返回</view>
+			</view>
+			
 		</view>
 
 
@@ -57,19 +62,32 @@
 
 
 			};
+		},
+		methods:{
+			//返回成绩页面
+			returnList(){
+				uni.switchTab({
+					url: '/pages/grade/grade'
+				})
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
 	.page-box{
-		height: 400rpx;
+		height: 600rpx;
 		background: linear-gradient(#f97f41, #f1f3f5);
 		.icon-box{
 			display: flex;
 			justify-content: space-between;
-			margin: 0 80rpx 40rpx 80rpx;
-			padding-top: 20rpx;
+			margin: 0 80rpx 20rpx 80rpx;
+			padding-top: 200rpx;
+			.icon-text{
+				font-weight: bold;
+				font-size: 26rpx;
+				color: #3B4144;
+			}
 		}
 		.chart-container {
 			margin: 0 20rpx;

information/children.js

@@ -10,7 +10,7 @@ export default{
 		
 		childreninfo: JSON.parse(uni.getStorageSync('childreninfo') || '{}'),
 		
-		semester: uni.getStorageSync('semester') || '请选择学期'
+		semester: uni.getStorageSync('semester') || '请选择学年'
 		
 	}),
 	//模块方法(修改数据)

pages.json

@@ -58,7 +58,16 @@
 					"disableScroll": true
 				}
 			}
-		]
+		    ,{
+                    "path" : "children/children",
+                    "style" :                                                                                    
+                {
+                    "navigationBarTitleText": "",
+                    "enablePullDownRefresh": false
+                }
+                
+                }
+            ]
 	}, {
 		"root": "gradepkg",
 		"pages": [{
@@ -66,14 +75,16 @@
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
-				"navigationBarBackgroundColor":"#f97f41"
+				//"navigationBarBackgroundColor":"#f97f41"
+				"navigationStyle":"custom"
 			}
 		}, {
 			"path": "radar-chart/radar-chart",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
-				"navigationBarBackgroundColor":"#c1cbf7"
+				//"navigationBarBackgroundColor":"#c1cbf7"
+				"navigationStyle":"custom"
 			}
 
 		}, {
@@ -81,7 +92,8 @@
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
-				"navigationBarBackgroundColor":"#5fb7ff"
+				//"navigationBarBackgroundColor":"#5fb7ff"
+				"navigationStyle":"custom"
 			}
 
 		}, {
@@ -89,7 +101,8 @@
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
-				"navigationBarBackgroundColor":"#ff6187"
+				// "navigationBarBackgroundColor":"#ff6187"
+				"navigationStyle":"custom"
 			}
 
 		}, {
@@ -97,7 +110,8 @@
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
-				"navigationBarBackgroundColor":"#f9cd98"
+				//"navigationBarBackgroundColor":"#f9cd98"
+				"navigationStyle":"custom"
 			}
 
 		}, {
@@ -105,7 +119,8 @@
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
-				"navigationBarBackgroundColor":"#419eea"
+				// "navigationBarBackgroundColor":"#419eea"
+				"navigationStyle":"custom"
 			}
 
 		}, {
@@ -113,7 +128,8 @@
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
-				"navigationBarBackgroundColor":"#5fb7ff"
+				// "navigationBarBackgroundColor":"#5fb7ff"
+				"navigationStyle":"custom"
 			}
 
 		}, {
@@ -121,7 +137,8 @@
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
-				"navigationBarBackgroundColor":"#ff6187"
+				//"navigationBarBackgroundColor":"#ff6187"
+				"navigationStyle":"custom"
 			}
 
 		}]
@@ -134,6 +151,34 @@
 		"gradepkg/rose-chart/rose-chart": {
 			"network": "all",
 			"packages": ["subpkg"]
+		},
+		"gradepkg/radar-chart/radar-chart": {
+			"network": "all",
+			"packages": ["subpkg"]
+		},
+		"gradepkg/mainradar-chart/mainradar-chart": {
+			"network": "all",
+			"packages": ["subpkg"]
+		},
+		"gradepkg/line-chart/line-chart": {
+			"network": "all",
+			"packages": ["subpkg"]
+		},
+		"gradepkg/column-chart/column-chart": {
+			"network": "all",
+			"packages": ["subpkg"]
+		},
+		"gradepkg/bar-chart/bar-chart": {
+			"network": "all",
+			"packages": ["subpkg"]
+		},
+		"gradepkg/area-chart/area-chart": {
+			"network": "all",
+			"packages": ["subpkg"]
+		},
+		"gradepkg/arcbar-chart/arcbar-chart": {
+			"network": "all",
+			"packages": ["subpkg"]
 		}
 	},
 

pages/grade/grade.vue

@@ -46,7 +46,7 @@
 					<view class="item-container">
 						<view class="chart-name">
 							<view class="t-icon t-icon-xtubiao-6"></view>
-							<text class="chart-name-text">排名分析</text>
+							<text class="chart-name-text">成绩分析</text>
 						</view>
 					</view>
 				</view>

pages/home/home.vue

@@ -8,14 +8,32 @@
 			<u-notice-bar :text="notification" mode="closable" bgColor="#6495ED" color="#FFFFFF"></u-notice-bar>
 		</view>
 		<!-- 孩子全方位展示 -->
-		<view class="develop-box">
-				<view class="develop-item" v-for="(item, index) in model" :key="index">
-					<view class="desc">{{item}}</view>
-					<view class="icon-item">
-						<view class="t-icon t-icon-jiaoyan"></view>
-					</view>
-				</view>
+		<view class="title">德</view>
+		<view class="card">
+			<view class="t-icon t-icon-a-aixinxihuan"></view>
+			<view class="card-title">今日表现</view>
 		</view>
+		<view class="title">智</view>
+		<view class="card">
+			<view class="t-icon t-icon-a-dengpaodengzhuyichuangzao"></view>
+			<view class="card-title">今日表现</view>
+		</view>
+		<view class="title">体</view>
+		<view class="card">
+			<view class="t-icon t-icon-a-jiangbeiyingjiashenglizhechengjiu"></view>
+			<view class="card-title">今日表现</view>
+		</view>
+		<view class="title">美</view>
+		<view class="card">
+			<view class="t-icon t-icon-a-sebansetiaosekayanse"></view>
+			<view class="card-title">今日表现</view>
+		</view>
+		<view class="title">劳</view>
+		<view class="card">
+			<view class="t-icon t-icon-a-guangpanguangdie"></view>
+			<view class="card-title">今日表现</view>
+		</view>
+		
 		
 		
 		
@@ -29,7 +47,7 @@
 		data() {
 			return {
 				notification: '这里是滚动条的内容，显示重要通知等等消息',
-				model: ['德','智','体','美','劳']
+				
 				
 				
 				
@@ -59,10 +77,32 @@
 		.notice{
 			margin: -80rpx 20rpx 20rpx 20rpx;
 		}
-		.develop-box{
+		.title{
+			margin: 20rpx;
+			padding: 8rpx 16rpx;
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #FFFFFF;
+			background: -webkit-linear-gradient(right,#f1f3f5,#6495ed);
+			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+		}
+		.card{
+			margin: 20rpx;
+			padding: 20rpx;
+			border-radius: 15rpx;
+			background-color: #FFFFFF;
+			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
 			display: flex;
+			align-items: center;
 			
+			.card-title{
+				margin-left: 20rpx;
+				font-size: 26rpx;
+			}
 		}
-		
+	}
+	.t-icon{
+		width:  40rpx;
+		height: 40rpx;
 	}
 </style>

pages/my/my.vue

@@ -25,7 +25,7 @@
 							</view>
 						</view>
 					</view>
-					<view class="box-cart-item right-box">
+					<view class="box-cart-item right-box" @click="getChildrenMsg">
 						<view class="t-icon t-icon-a-jiangpaijiangzhang" ></view>
 						<view class="card-text">
 							孩子名片
@@ -112,7 +112,7 @@
 		onLoad() {},
 		methods: {
 			...mapMutations('m_parent',['updateParentDetail','updateParentInfo','updateToken']),
-			...mapMutations('m_children',['updateChildrenInfo']),
+			...mapMutations('m_children',['updateChildrenInfo','updateChildrenSemester']),
 			//日历事件
 			// confirm(e){
 			// 	console.log('confirm',e)
@@ -128,6 +128,7 @@
 				if(succ && succ.confirm)
 				{
 					this.updateChildrenInfo()
+					this.updateChildrenSemester(请选择学年)
 					// this.updateParentDetail()
 					this.updateParentInfo()
 					this.updateToken()
@@ -145,10 +146,12 @@
 					url: '/subpkg/guide/guide'
 				})
 			},
-			//修改孩子信息
-			updateChildrenInfo(e){
-				console.log(e);
-			},
+			//孩子名片
+			getChildrenMsg(){
+				uni.navigateTo({
+					url: '/subpkg/children/children'
+				})
+			}
 			
 
 

subpkg/children/children.vue

@@ -0,0 +1,19 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -134,9 +134,9 @@ const cfu = {
 		],
 		"padding": [
 			-20,
-			-10,
-			-10,
-			-10
+			  0,
+			  0,
+			  0
 		],
 		"rotate": false,
 		"errorReload": true,
@@ -153,16 +153,7 @@ const cfu = {
 			"show": true,
 			"position": "bottom",
 			"float": "center",
-			"padding": 5,
-			"margin": 5,
-			"backgroundColor": "rgba(0,0,0,0)",
-			"borderColor": "rgba(0,0,0,0)",
-			"borderWidth": 0,
-			"fontSize": 13,
-			"fontColor": "#666666",
-			"lineHeight": 25,
-			"hiddenColor": "#CECECE",
-			"itemGap": 10
+			
 		},
 		"extra": {
 			"rose": {
@@ -208,7 +199,7 @@ const cfu = {
 		"background": "none",
 		"animation": true,
 		"timing": "easeOut",
-		"duration": 3000,
+		"duration": 1000,
 		"color": [
 			"#1890FF",
 			"#91CB74",
@@ -227,12 +218,12 @@ const cfu = {
 		"dataPointShapeType": "solid",
 		"tapLegend": true,
 		"title": {
-			"name": "孩子",
-			"fontSize": 25,
+			"name": "总成绩占比",
+			"fontSize": 20,
 			"color": "#0052d4",
 		},
 		"subtitle": {
-			"name": "排名百分比",
+			"name": "年级与班级",
 			"fontSize": 15,
 			"color": "#666666",
 		},
@@ -244,14 +235,6 @@ const cfu = {
 				"startAngle": 0.75,
 				"endAngle": 0.25,
 				"gap": 2,
-				"centerX": 0,
-				"centerY": 0,
-				"linearType": "custom",
-				"customColor": [
-					"#65c7f7",
-					"#f16529",
-					"#ffcc33"
-				]
 			}
 		}
 	},
@@ -709,7 +692,7 @@ const cfu = {
 		},
 		"extra": {
 			"area": {
-				"type": "straight",
+				"type": "curve",
 				"opacity": 0.5,
 				"addLine": true,
 				"width": 2,
@@ -735,7 +718,7 @@ const cfu = {
 				"yAxisLabel": false,
 				"labelBgColor": "#FFFFFF",
 				"labelBgOpacity": 0.7,
-				"labelFontColor": "#666666"
+				"labelFontColor": "#666666",
 			},
 			"markLine": {
 				"type": "dash",
@@ -1206,7 +1189,7 @@ const cfu = {
 		},
 		"extra": {
 			"area": {
-				"type": "straight",
+				"type": "curve",
 				"opacity": 1,
 				"addLine": true,
 				"width": 2,
@@ -1375,91 +1358,6 @@ const cfu = {
 			}
 		}
 	},
-	"mini-rose": {
-		"type": "rose",
-		"canvasId": "",
-		"canvas2d": false,
-		"background": "none",
-		"animation": true,
-		"timing": "easeOut",
-		"duration": 1000,
-		"color": [
-			"#0052d4",
-			"#ff5959",
-			"#f9b248",
-			"#3CA272",
-			"#73C0DE",
-			"#ff55a3"
-		],
-		"padding": [
-			5,
-			5,
-			5,
-			5
-		],
-		"rotate": false,
-		"errorReload": true,
-		"fontSize": 13,
-		"fontColor": "#666666",
-		"enableScroll": false,
-		"touchMoveLimit": 60,
-		"enableMarkLine": false,
-		"dataLabel": false,
-		"dataPointShape": false,
-		"dataPointShapeType": "hollow",
-		"tapLegend": false,
-		"legend": {
-			"show": false,
-			"position": "bottom",
-			"float": "center",
-			"padding": 5,
-			"margin": 5,
-			"backgroundColor": "rgba(0,0,0,0)",
-			"borderColor": "rgba(0,0,0,0)",
-			"borderWidth": 0,
-			"fontSize": 13,
-			"fontColor": "#666666",
-			"lineHeight": 25,
-			"hiddenColor": "#CECECE",
-			"itemGap": 10
-		},
-		"extra": {
-			"rose": {
-				"type": "radius",
-				"minRadius": 50,
-				"activeOpacity": 0.5,
-				"activeRadius": 10,
-				"offsetAngle": 0,
-				"labelWidth": 15,
-				"border": true,
-				"borderWidth": 2,
-				"borderColor": "#FFFFFF",
-
-			},
-			"tooltip": {
-				"showBox": true,
-				"showArrow": false,
-				"showCategory": false,
-				"borderWidth": 0,
-				"borderRadius": 6,
-				"borderColor": "#000000",
-				"borderOpacity": 0.5,
-				"bgColor": "#000000",
-				"bgOpacity": 0.5,
-				"gridType": "solid",
-				"dashLength": 4,
-				"gridColor": "#CCCCCC",
-				"fontColor": "#FFFFFF",
-				"splitLine": true,
-				"horizentalLine": false,
-				"xAxisLabel": false,
-				"yAxisLabel": false,
-				"labelBgColor": "#FFFFFF",
-				"labelBgOpacity": 0.7,
-				"labelFontColor": "#666666"
-			}
-		}
-	},
 	"mini-bar": {
 		"type": "bar",
 		"canvasId": "",
@@ -1524,18 +1422,6 @@ const cfu = {
 		},
 		"legend": {
 			"show": false,
-			"position": "bottom",
-			"float": "center",
-			"padding": 5,
-			"margin": 5,
-			"backgroundColor": "rgba(0,0,0,0)",
-			"borderColor": "rgba(0,0,0,0)",
-			"borderWidth": 0,
-			"fontSize": 13,
-			"fontColor": "#666666",
-			"lineHeight": 11,
-			"hiddenColor": "#CECECE",
-			"itemGap": 10
 		},
 		"extra": {
 			"bar": {
@@ -1562,23 +1448,7 @@ const cfu = {
 				"showBox": false,
 				"showArrow": false,
 				"showCategory": false,
-				"borderWidth": 0,
-				"borderRadius": 0,
-				"borderColor": "#000000",
-				"borderOpacity": 0.7,
-				"bgColor": "#000000",
-				"bgOpacity": 0.7,
-				"gridType": "solid",
-				"dashLength": 4,
-				"gridColor": "#CCCCCC",
-				"fontColor": "#FFFFFF",
-				"splitLine": true,
-				"horizentalLine": false,
-				"xAxisLabel": false,
-				"yAxisLabel": false,
-				"labelBgColor": "#FFFFFF",
-				"labelBgOpacity": 0.7,
-				"labelFontColor": "#666666"
+				
 			},
 			"markLine": {
 				"type": "solid",
@@ -1619,18 +1489,7 @@ const cfu = {
 	    "tapLegend": true,
 	    "legend": {
 	        "show": false,
-	        "position": "right",
-	        "float": "center",
-	        "padding": 5,
-	        "margin": 5,
-	        "backgroundColor": "rgba(0,0,0,0)",
-	        "borderColor": "rgba(0,0,0,0)",
-	        "borderWidth": 0,
-	        "fontSize": 13,
-	        "fontColor": "#666666",
-	        "lineHeight": 25,
-	        "hiddenColor": "#CECECE",
-	        "itemGap": 10
+	        
 	    },
 	    "extra": {
 	        "radar": {
@@ -1648,22 +1507,7 @@ const cfu = {
 	            "showArrow": false,
 	            "showCategory": false,
 	            "borderWidth": 0,
-	            "borderRadius": 0,
-	            "borderColor": "#000000",
-	            "borderOpacity": 0.7,
-	            "bgColor": "#000000",
-	            "bgOpacity": 0.7,
-	            "gridType": "solid",
-	            "dashLength": 4,
-	            "gridColor": "#CCCCCC",
-	            "fontColor": "#FFFFFF",
-	            "splitLine": false,
-	            "horizentalLine": false,
-	            "xAxisLabel": false,
-	            "yAxisLabel": false,
-	            "labelBgColor": "#FFFFFF",
-	            "labelBgOpacity": 0.7,
-	            "labelFontColor": "#666666"
+	            
 	        }
 	    }
 	},