css提取公共部分

App.vue

@@ -27,7 +27,7 @@
 	}
 	// 设置整个项目的背景色
 	page {
-		background-color: #f1f3f5;
+		background-color: $page-background-color;
 	}
 	//第二种
 	::-webkit-scrollbar{

common/style.scss

@@ -0,0 +1,13 @@
+// 拟态阴影
+$box-shadow-stereo-white: 10rpx 10rpx 40rpx #e0e0e0, -10rpx -10rpx 40rpx #ffffff;
+//卡片背景
+$box-background-card: linear-gradient(150deg, #f0f0f0, #ffffff);
+//页面背景
+$page-background-color: #F5F5F5;
+//主题色
+$color-blue: #5b7cff;
+$color-green: #00cca3;
+$color-pink: #ff9db2;
+$color-yellow: #f9c752;
+//字体色
+$color-subtitle: #b0b0b1;

components/analysis-box/analysis-box.vue

@@ -114,7 +114,7 @@
 			align-items: center;
 			border-radius: 16rpx;
 			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: 100%;
 			height: 100rpx;
 
@@ -141,7 +141,7 @@
 		border-radius: 16rpx;
 		background: $card-back-base64;
 		background-size: cover; //背景图片自适应
-		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+		// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
 		width: 347rpx;
 		height: 345rpx;
 

components/todaydata-box/todaydata-box.vue

@@ -3,7 +3,7 @@
 	<view class="module-container">
 		<u-tabs :list="list" :current="current" @change="change"
 			:activeStyle="{color: '#5b7cff',fontWeight: 'bold',transform: 'scale(1.04)',}"
-			:inactiveStyle="{color: '#b0b0b1',fontWeight: 'bold',transform: 'scale(1)'}" lineColor="#5b7cff"
+			:inactiveStyle="{fontWeight: 'bold',transform: 'scale(1)'}" lineColor="#5b7cff"
 			lineWidth="60"></u-tabs>
 
 		<!-- 记录模块 -->
@@ -15,7 +15,7 @@
 						<text class="module-item-num">5.5</text>
 						<text class="unit">小时</text>
 					</view>
-					<view class="t-icon t-icon-shizhong-copy2-copy"></view>
+					<view class="t-icon t-icon-bianjibi"></view>
 				</view>
 			</view>
 
@@ -26,7 +26,7 @@
 						<text class="module-item-num">5</text>
 						<text class="unit">小时</text>
 					</view>
-					<view class="t-icon t-icon-shizhong-copy3-copy"></view>
+					<view class="t-icon t-icon-leimucuyule"></view>
 				</view>
 			</view>
 
@@ -37,7 +37,7 @@
 						<text class="module-item-num">5</text>
 						<text class="unit">分钟</text>
 					</view>
-					<view class="t-icon t-icon-shizhong-copy4-copy"></view>
+					<view class="t-icon t-icon-yundong"></view>
 				</view>
 			</view>
 
@@ -48,7 +48,7 @@
 						<text class="module-item-num">8</text>
 						<text class="unit">小时</text>
 					</view>
-					<view class="t-icon t-icon-shizhong-copy1-copy"></view>
+					<view class="t-icon t-icon-a-icon_wananyueliangshuimian"></view>
 				</view>
 			</view>
 		</view>
@@ -129,6 +129,7 @@
 </script>
 
 <style lang="scss">
+	@import '@/pages/common/mainpage.scss';
 	.module-container {
 		display: flex;
 		flex-direction: column;
@@ -146,7 +147,6 @@
 			flex-direction: column;
 			justify-content: space-between;
 			background-color: #FFFFFF;
-			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
 			border-radius: 16rpx;
 			width: 48%;
 			height: 230rpx;
@@ -169,42 +169,6 @@
 		}
 	}
 
-	.card-item {
-		margin: 10rpx 0;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		background-color: #FFFFFF;
-		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
-		border-radius: 16rpx;
-		width: 347rpx;
-		height: auto;
-
-		.card-info {
-			display: flex;
-			align-items: center;
-			padding: 15rpx;
-
-			.info-text {
-				font-size: 30rpx;
-				font-weight: bold;
-				color: #3B4144;
-				margin-left: 10rpx;
-			}
-
-			.t-icon {
-				width: 40rpx;
-				height: 40rpx;
-			}
-		}
-
-		.card-content {
-			font-size: 35rpx;
-			margin: 10rpx 0 10rpx 25rpx;
-			color: #3B4144;
-			font-weight: bold;
-		}
-	}
 
 	.module-item-text {
 		color: #FFFFFF;

components/top-box/top-box.vue

@@ -108,7 +108,7 @@
 <style lang="scss">
 	.home-topinfo {
 		height: 600rpx;
-		background: linear-gradient(#0080ff, #f1f3f5);
+		background: linear-gradient(#0080ff, $page-background-color);
 	}
 
 	.children-avatar {

gradepkg/arcbar-chart/arcbar-chart.vue

@@ -65,7 +65,7 @@
 				<text class="chart-name-text">近期排行占比分析</text>
 			</view>
 			<view class="charts-box">
-				<qiun-data-charts type="arcbar" :chartData="gradeData.rankArcbarChart.recentAnalyse" :loadingType="4" />
+				<qiun-data-charts type="arcbar" :chartData="gradeData.rankArcbarChart.recentAnalyse" :loadingType="4" :canvas2d='true' canvasId='canvans8939' />
 			</view>
 		</view>
 		<!-- 走势 -->
@@ -109,109 +109,46 @@
 </script>
 
 <style lang="scss">
-	.page-box {
-		height: 600rpx;
-		background: linear-gradient(#ffd071, #f1f3f5);
-
-		.children-box {
-			display: flex;
-			align-items: center;
-
-			.children-avatar {
-				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);
-			}
+	@import '@/gradepkg/common/chartpage.scss';
 
-			.children-msg {
-				margin-left: 30rpx;
-
-				.children-name {
-					color: #3B4144;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-bottom: 10rpx;
-				}
+	.page-box {
+		background: linear-gradient(#ffd071, $page-background-color);
+	}
 
-				.children-class {
-					color: #696969;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-top: 10rpx;
-				}
-			}
-		}
+	.data-box {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		margin: 40rpx 20rpx 20rpx 20rpx;
 
-		.chart-container {
-			margin: 20rpx;
-			border-radius: 15rpx;
+		.data-box-item {
 			display: flex;
-			align-items: center;
-			justify-content: center;
 			flex-direction: column;
 			background-color: #FFFFFF;
+			border-radius: 15rpx;
+			width: 340rpx;
+			height: 290rpx;
 			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
 
-			.chart-name {
-				width: 100%;
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				margin-left: 40rpx;
-				margin-top: 20rpx;
-
-				.chart-name-text {
-					font-size: 30rpx;
-					font-weight: bold;
-					color: #3B4144;
-					margin-left: 10rpx;
-				}
+			.item-text {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #FFFFFF;
+				margin: 30rpx 0 0 30rpx;
 			}
 
-			.charts-box {
-				width: 100%;
-				height: 500rpx;
+			.t-icon {
+				width: 100rpx;
+				height: 100rpx;
 			}
-		}
-
-		.data-box {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			flex-wrap: wrap;
-			justify-content: space-between;
-			margin: 40rpx 20rpx 0 20rpx;
-
-			.data-box-item {
-				display: flex;
-				flex-direction: column;
-				background-color: #FFFFFF;
-				border-radius: 15rpx;
-				width: 340rpx;
-				height: 290rpx;
-				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;
-				}
+			.item-number {
+				font-size: 60rpx;
+				margin: 20rpx 0 10rpx 30rpx;
+				color: #FFFFFF;
+				font-weight: bold;
 			}
 		}
 	}

gradepkg/area-chart/area-chart.vue

@@ -106,82 +106,7 @@
 </script>
 
 <style lang="scss">
-	.page-box {
-		height: 600rpx;
-		background: linear-gradient(#ff8caf, #f1f3f5);
-
-		.children-box {
-			display: flex;
-			align-items: center;
-			margin-bottom: 40rpx;
-
-			.children-avatar {
-				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);
-			}
-
-			.children-msg {
-				margin-left: 30rpx;
-
-				.children-name {
-					color: #3B4144;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-bottom: 10rpx;
-				}
-
-				.children-class {
-					color: #696969;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-top: 10rpx;
-				}
-			}
-		}
-
-		.chart-container {
-			margin: 20rpx;
-			border-radius: 15rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-			background-color: #FFFFFF;
-			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
-
-			.chart-name {
-				width: 100%;
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				margin-left: 40rpx;
-				margin-top: 20rpx;
-
-				.chart-name-text {
-					font-size: 30rpx;
-					font-weight: bold;
-					color: #3B4144;
-					margin-left: 10rpx;
-				}
-
-				.search-box {
-					display: flex;
-					align-items: center;
-					margin-left: auto;
-					margin-right: 40rpx;
-				}
-			}
-
-			.charts-box {
-				width: 100%;
-				height: 550rpx;
-			}
-		}
-	}
+	@import '@/gradepkg/common/chartpage.scss';
 	.subject-btn{
 		margin-left: 2rpx;
 		line-height: 65rpx;

gradepkg/column-chart/column-chart.vue

@@ -62,68 +62,8 @@
 </script>
 
 <style lang="scss">
+	@import '@/gradepkg/common/chartpage.scss';
 	.page-box {
-		height: 600rpx;
-		background: linear-gradient(#ffd071, #f1f3f5);
-		
-		.children-box{
-			display: flex;
-			align-items: center;
-			margin-bottom: 40rpx;
-			.children-avatar{
-				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);
-			}
-			.children-msg{
-				margin-left: 30rpx;
-				
-				.children-name{
-					color: #3B4144;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-bottom: 10rpx;
-				}
-				.children-class{
-					color: #696969;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-top: 10rpx;
-				}
-			}
-		}
-		.chart-container {
-			margin: 20rpx;
-			border-radius: 15rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-			background-color: #FFFFFF;
-			box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
-		
-			.chart-name {
-				width: 100%;
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				margin-left: 40rpx;
-				margin-top: 20rpx;
-		
-				.chart-name-text {
-					font-size: 30rpx;
-					font-weight: bold;
-					color: #3B4144;
-					margin-left: 10rpx;
-				}
-			}
-			.charts-box {
-				width: 100%;
-				height: 550rpx;
-			}
-		}
+		background: linear-gradient(#ffd071, $page-background-color);
 	}
 </style>

gradepkg/common/chartpage.scss

@@ -0,0 +1,75 @@
+.page-box {
+		height: 600rpx;
+		background: linear-gradient(#ff8caf, $page-background-color);
+
+		.children-box {
+			display: flex;
+			align-items: center;
+			margin-bottom: 40rpx;
+
+			.children-avatar {
+				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);
+			}
+
+			.children-msg {
+				margin-left: 30rpx;
+
+				.children-name {
+					color: #3B4144;
+					font-size: 32rpx;
+					font-weight: bold;
+					margin-bottom: 10rpx;
+				}
+
+				.children-class {
+					color: #696969;
+					font-size: 32rpx;
+					font-weight: bold;
+					margin-top: 10rpx;
+				}
+			}
+		}
+
+		.chart-container {
+			margin: 20rpx;
+			border-radius: 15rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			background-color: #FFFFFF;
+
+			.chart-name {
+				width: 100%;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				margin-left: 40rpx;
+				margin-top: 20rpx;
+
+				.chart-name-text {
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #3B4144;
+					margin-left: 10rpx;
+				}
+
+				.search-box {
+					display: flex;
+					align-items: center;
+					margin-left: auto;
+					margin-right: 40rpx;
+				}
+			}
+
+			.charts-box {
+				width: 100%;
+				height: 550rpx;
+			}
+		}
+	}

gradepkg/line-chart/line-chart.vue

@@ -18,7 +18,7 @@
 				<text class="chart-name-text">{{semester}} 总成绩对比</text>
 			</view>
 			<view class="charts-box">
-				<qiun-data-charts type="line" :chartData="gradeData.semesterLineChart.lineComparison" :loadingType="4"/>
+				<qiun-data-charts type="line" :chartData="gradeData.semesterLineChart.lineComparison" :loadingType="4" :canvas2d='true' canvasId='canvans8931239'/>
 			</view>
 		</view>
 		<!-- 主科总成绩图表 -->
@@ -28,7 +28,7 @@
 				<text class="chart-name-text">{{semester}} 主科总成绩对比</text>
 			</view>
 			<view class="charts-box">
-				<qiun-data-charts type="line" :chartData="gradeData.semesterLineChart.majorComparison" :loadingType="4"/>
+				<qiun-data-charts type="line" :chartData="gradeData.semesterLineChart.majorComparison" :loadingType="4" :canvas2d='true' canvasId='canvans85656939'/>
 			</view>
 		</view>
 		<!-- 副科总成绩图表 -->
@@ -75,69 +75,8 @@
 </script>
 
 <style lang="scss">
+	@import '@/gradepkg/common/chartpage.scss';
 	.page-box {
-		height: 600rpx;
-		background: linear-gradient(#a5c6ff, #f1f3f5);
-		
-		.children-box{
-			display: flex;
-			align-items: center;
-			margin-bottom: 40rpx;
-			.children-avatar{
-				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);
-			}
-			.children-msg{
-				margin-left: 30rpx;
-				
-				.children-name{
-					color: #3B4144;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-bottom: 10rpx;
-				}
-				.children-class{
-					color: #696969;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-top: 10rpx;
-				}
-			}
-		}
-		
-		.chart-container {
-			margin: 20rpx;
-			border-radius: 15rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-			background-color: #FFFFFF;
-			box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
-		
-			.chart-name {
-				width: 100%;
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				margin-left: 40rpx;
-				margin-top: 20rpx;
-		
-				.chart-name-text {
-					font-size: 30rpx;
-					font-weight: bold;
-					color: #3B4144;
-					margin-left: 10rpx;
-				}
-			}
-			.charts-box {
-				width: 100%;
-				height: 500rpx;
-			}
-		}
+		background: linear-gradient(#a5c6ff, $page-background-color);
 	}
 </style>

gradepkg/radar-chart/radar-chart.vue

@@ -9,7 +9,7 @@
 				<view class="children-class">{{childreninfo.class}}</view>
 			</view>
 		</view>
-		
+
 		<!-- 数据分析模块 -->
 		<view class="data-box">
 			<view class="data-box-item">
@@ -22,7 +22,7 @@
 					<view v-if="mainExamUndulate<quizExamUndulate" class="icon-text-item">普通考试也不能掉以轻心</view>
 				</view>
 			</view>
-		
+
 			<view class="data-box-item2">
 				<view class="item-text">考试得分能力对比:</view>
 				<view class="item-number">{{avgMain>=avgquiz?'大考能力强':'小考能力强'}}</view>
@@ -43,7 +43,8 @@
 			</view>
 			<!-- 图表 -->
 			<view class="charts-box">
-				<qiun-data-charts type="radar" :chartData="gradeData.abilityRadarChart.importantAnalyse" :loadingType="4" />
+				<qiun-data-charts type="radar" :chartData="gradeData.abilityRadarChart.importantAnalyse"
+					:loadingType="4" :canvas2d='true' canvasId='canvans8312399'/>
 			</view>
 		</view>
 
@@ -54,7 +55,8 @@
 			</view>
 			<!-- 图表 -->
 			<view class="charts-box">
-				<qiun-data-charts type="radar" :chartData="gradeData.abilityRadarChart.commonAnalyse" :loadingType="4" />
+				<qiun-data-charts type="radar" :chartData="gradeData.abilityRadarChart.commonAnalyse"
+					:loadingType="4" :canvas2d='true' canvasId='canvans89139'/>
 			</view>
 		</view>
 
@@ -116,9 +118,9 @@
 					quizArr.push(arrSum(item.data))
 				}
 				//大小考试平均成绩
-				this.avgMain = arrSum(mainArr)/mainArr.length
-				this.avgquiz = arrSum(quizArr)/quizArr.length
-				console.log(this.avgMain,this.avgquiz);
+				this.avgMain = arrSum(mainArr) / mainArr.length
+				this.avgquiz = arrSum(quizArr) / quizArr.length
+				console.log(this.avgMain, this.avgquiz);
 				//标准差函数
 				function standardDeviation(arr) {
 					let length = arr.length;
@@ -131,8 +133,8 @@
 
 						temp[i] = Math.pow(dev, 2); //计算差的平方
 					}
-					let powSum = arrSum(temp);//差的平方和
-					let standardDeviation = parseFloat(Math.sqrt(powSum / length).toFixed(2));//标准差
+					let powSum = arrSum(temp); //差的平方和
+					let standardDeviation = parseFloat(Math.sqrt(powSum / length).toFixed(2)); //标准差
 					return standardDeviation
 				}
 				this.mainExamUndulate = standardDeviation(mainArr)
@@ -149,138 +151,74 @@
 </script>
 
 <style lang="scss">
+	@import '@/gradepkg/common/chartpage.scss';
 	.page-box {
-		height: 600rpx;
-		background: linear-gradient(#ff8caf, #f1f3f5);
-
-		.children-box {
-			display: flex;
-			align-items: center;
-
-			.children-avatar {
-				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);
-			}
-
-			.children-msg {
-				margin-left: 30rpx;
-
-				.children-name {
-					color: #3B4144;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-bottom: 10rpx;
-				}
+		background: linear-gradient(#ff8caf, $page-background-color);
+	}
 
-				.children-class {
-					color: #696969;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-top: 10rpx;
-				}
-			}
-		}
+	.data-box {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		margin: 40rpx 20rpx 20rpx 20rpx;
 
-		.chart-container {
-			margin: 20rpx;
-			border-radius: 15rpx;
+		.data-box-item2 {
 			display: flex;
-			align-items: center;
-			justify-content: center;
 			flex-direction: column;
-			background-color: #FFFFFF;
+			background-color: #ff5959;
+			border-radius: 15rpx;
+			width: 340rpx;
+			height: 290rpx;
 			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
 
-			.chart-name {
-				width: 100%;
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				margin-left: 40rpx;
-				margin-top: 20rpx;
+			.item-text {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #FFFFFF;
+				margin: 30rpx 0 0 30rpx;
+			}
 
-				.chart-name-text {
-					font-size: 30rpx;
-					font-weight: bold;
-					color: #3B4144;
-					margin-left: 10rpx;
-				}
+			.t-icon {
+				width: 180rpx;
+				height: 100rpx;
 			}
 
-			.charts-box {
-				width: 100%;
-				height: 600rpx;
+			.item-number {
+				font-size: 60rpx;
+				margin: 10rpx 0 10rpx 25rpx;
+				color: #FFFFFF;
+				font-weight: bold;
 			}
 		}
 
-		.data-box {
+		.data-box-item {
 			display: flex;
-			flex-direction: row;
-			align-items: center;
-			flex-wrap: wrap;
-			justify-content: space-between;
-			margin: 40rpx 20rpx 0 20rpx;
-
-			.data-box-item2 {
-				display: flex;
-				flex-direction: column;
-				background-color: #ff5959;
-				border-radius: 15rpx;
-				width: 340rpx;
-				height: 290rpx;
-				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+			flex-direction: column;
+			background-color: #0052d4;
+			border-radius: 15rpx;
+			width: 340rpx;
+			height: 290rpx;
+			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: 180rpx;
-					height: 100rpx;
-				}
-				
-				.item-number {
-					font-size: 60rpx;
-					margin: 10rpx 0 10rpx 25rpx;
-					color: #FFFFFF;
-					font-weight: bold;
-				}
+			.item-text {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #FFFFFF;
+				margin: 30rpx 0 0 30rpx;
 			}
 
-			.data-box-item {
-				display: flex;
-				flex-direction: column;
-				background-color: #0052d4;
-				border-radius: 15rpx;
-				width: 340rpx;
-				height: 290rpx;
-				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: 180rpx;
-					height: 100rpx;
-				}
+			.t-icon {
+				width: 180rpx;
+				height: 100rpx;
+			}
 
-				.item-number {
-					font-size: 60rpx;
-					margin: 10rpx 0 10rpx 25rpx;
-					color: #FFFFFF;
-					font-weight: bold;
-				}
+			.item-number {
+				font-size: 60rpx;
+				margin: 10rpx 0 10rpx 25rpx;
+				color: #FFFFFF;
+				font-weight: bold;
 			}
 		}
 	}

gradepkg/rose-chart/rose-chart.vue

@@ -48,7 +48,8 @@
 				<text class="chart-name-text">{{semester}} 科目得分平均值分析</text>
 			</view>
 			<view class="charts-box">
-				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.semesterAnalyse" :loadingType="4" :tapLegend="true" />
+				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.semesterAnalyse" :loadingType="4"
+					:tapLegend="true" :canvas2d='true' canvasId='canvans83179'/>
 			</view>
 		</view>
 		<!-- 单次考试 -->
@@ -58,10 +59,11 @@
 				<text class="chart-name-text">最近考试科目得分分析</text>
 			</view>
 			<view class="charts-box">
-				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.recentAnalyse" :loadingType="4" :tapLegend="true" />
+				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.recentAnalyse" :loadingType="4"
+					:tapLegend="true" :canvas2d='true' canvasId='canvans831459'/>
 			</view>
 		</view>
-		
+
 
 
 
@@ -101,10 +103,12 @@
 			//通过map方法返回成绩的数组
 			getGradeDetail() {
 				//获取成绩最好科目
-				this.bestSubject = this.gradeData.advantageRoseChart.semesterAnalyse.series[0].data.reduce((pre, cur) => pre.value > cur.value ? pre :
+				this.bestSubject = this.gradeData.advantageRoseChart.semesterAnalyse.series[0].data.reduce((pre, cur) =>
+					pre.value > cur.value ? pre :
 					cur)
 				//劣势科目
-				this.worstSubject = this.gradeData.advantageRoseChart.semesterAnalyse.series[0].data.reduce((pre, cur) => pre.value < cur.value ? pre :
+				this.worstSubject = this.gradeData.advantageRoseChart.semesterAnalyse.series[0].data.reduce((pre, cur) =>
+					pre.value < cur.value ? pre :
 					cur)
 				console.log(this.bestSubject)
 				console.log(this.worstSubject)
@@ -115,138 +119,74 @@
 </script>
 
 <style lang="scss">
+	@import '@/gradepkg/common/chartpage.scss';
 	.page-box {
-		height: 600rpx;
-		background: linear-gradient(#a5c6ff, #f1f3f5);
-		
-		.children-box {
-			display: flex;
-			align-items: center;
-
-			.children-avatar {
-				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);
-			}
-
-			.children-msg {
-				margin-left: 30rpx;
-
-				.children-name {
-					color: #3B4144;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-bottom: 10rpx;
-				}
+		background: linear-gradient(#a5c6ff, $page-background-color);
+	}
 
-				.children-class {
-					color: #696969;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-top: 10rpx;
-				}
-			}
-		}
+	.data-box {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		margin: 40rpx 20rpx 20rpx 20rpx;
 
-		.chart-container {
-			margin: 20rpx;
-			border-radius: 15rpx;
+		.data-box-item2 {
 			display: flex;
-			align-items: center;
-			justify-content: center;
 			flex-direction: column;
-			background-color: #FFFFFF;
+			background-color: #ff5959;
+			border-radius: 15rpx;
+			width: 340rpx;
+			height: 290rpx;
 			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
 
-			.chart-name {
-				width: 100%;
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				margin-left: 40rpx;
-				margin-top: 20rpx;
+			.item-text {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #FFFFFF;
+				margin: 30rpx 0 0 30rpx;
+			}
 
-				.chart-name-text {
-					font-size: 30rpx;
-					font-weight: bold;
-					color: #3B4144;
-					margin-left: 10rpx;
-				}
+			.t-icon {
+				width: 100rpx;
+				height: 100rpx;
 			}
 
-			.charts-box {
-				width: 100%;
-				height: 600rpx;
+			.item-number {
+				font-size: 60rpx;
+				margin: 20rpx 0 10rpx 30rpx;
+				color: #FFFFFF;
+				font-weight: bold;
 			}
 		}
 
-		.data-box {
+		.data-box-item {
 			display: flex;
-			flex-direction: row;
-			align-items: center;
-			flex-wrap: wrap;
-			justify-content: space-between;
-			margin: 40rpx 20rpx 0 20rpx;
-
-			.data-box-item2 {
-				display: flex;
-				flex-direction: column;
-				background-color: #ff5959;
-				border-radius: 15rpx;
-				width: 340rpx;
-				height: 290rpx;
-				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;
-				}
+			flex-direction: column;
+			background-color: #0052d4;
+			border-radius: 15rpx;
+			width: 340rpx;
+			height: 290rpx;
+			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
 
-				.item-number {
-					font-size: 60rpx;
-					margin: 20rpx 0 10rpx 30rpx;
-					color: #FFFFFF;
-					font-weight: bold;
-				}
+			.item-text {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #FFFFFF;
+				margin: 30rpx 0 0 30rpx;
 			}
 
-			.data-box-item {
-				display: flex;
-				flex-direction: column;
-				background-color: #0052d4;
-				border-radius: 15rpx;
-				width: 340rpx;
-				height: 290rpx;
-				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;
-				}
+			.t-icon {
+				width: 100rpx;
+				height: 100rpx;
+			}
 
-				.item-number {
-					font-size: 60rpx;
-					margin: 20rpx 0 10rpx 30rpx;
-					color: #FFFFFF;
-					font-weight: bold;
-				}
+			.item-number {
+				font-size: 60rpx;
+				margin: 20rpx 0 10rpx 30rpx;
+				color: #FFFFFF;
+				font-weight: bold;
 			}
 		}
 	}

pages.json

@@ -173,11 +173,11 @@
 
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarBackgroundColor": "#f1f3f5",
-		"backgroundColor": "#f1f3f5"
+		"navigationBarBackgroundColor": "#f5f5f5",
+		"backgroundColor": "#f5f5f5"
 	},
 	"tabBar": {
-		"backgroundColor": "#f1f3f5",
+		"backgroundColor": "#f5f5f5",
 		"borderStyle": "white",
 		"color": "#b0b0b1",
 		"selectedColor": "#303133",

pages/common/mainpage.scss

@@ -0,0 +1,60 @@
+.home-container {
+		width: 100%;
+		height: 100%;
+		overflow-x: hidden; //隐藏多余的页面
+
+		.notice {
+			margin: -50rpx 20rpx 20rpx 20rpx;
+		}
+
+		.card-box {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			margin: 0 20rpx 0 20rpx;
+			justify-content: space-between;
+
+			.card-item {
+				margin: 2% 0;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				background-color: #FFFFFF;
+				// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+				border-radius: 16rpx;
+				width: 48%;
+				height: auto;
+
+				.card-info {
+					display: flex;
+					align-items: center;
+					padding: 15rpx;
+
+					.info-text {
+						font-size: 30rpx;
+						font-weight: bold;
+						color: #3B4144;
+						margin-left: 10rpx;
+					}
+				}
+
+				.card-content {
+					font-size: 35rpx;
+					margin: 10rpx 0 10rpx 25rpx;
+					color: #3B4144;
+					font-weight: bold;
+				}
+			}
+		}
+	}
+
+	.charts-box {
+		width: 100%;
+		height: 300rpx;
+		padding-bottom: 20rpx;
+	}
+
+	.t-icon {
+		width: 40rpx;
+		height: 40rpx;
+	}

pages/grade/grade.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="chart-list-container">
+	<view class="home-container">
 		<!-- 头部区域 -->
 		<top-box v-bind:timeStamp="timeStamp"></top-box>
 
@@ -148,13 +148,13 @@
 </script>
 
 <style lang="scss">
-	.chart-list-container {
+	.home-container {
 		width: 100%;
 		height: 100%;
 		overflow-x: hidden; //隐藏多余的页面
 
 		.home-topinfo {
-			background: linear-gradient(#ff8caf, #f1f3f5);
+			background: linear-gradient(#ff8caf, $page-background-color);
 		}
 
 		//缩略图列表
@@ -181,7 +181,7 @@
 		align-items: 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: 100%;
 
 		.mainchart-name {
@@ -212,7 +212,7 @@
 		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: 100%;
 		height: 345rpx;
 

pages/home/home.vue

@@ -209,67 +209,7 @@
 </script>
 
 <style lang="scss">
-	.home-container {
-		width: 100%;
-		height: 100%;
-		overflow-x: hidden; //隐藏多余的页面
-
-		.notice {
-			margin: -50rpx 20rpx 20rpx 20rpx;
-		}
-
-		.card-box {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-			margin: 0 20rpx 0 20rpx;
-			justify-content: space-between;
-
-			.card-item {
-				margin: 2% 0;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-				background-color: #FFFFFF;
-				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
-				border-radius: 16rpx;
-				width: 48%;
-				height: auto;
-
-				.card-info {
-					display: flex;
-					align-items: center;
-					padding: 15rpx;
-
-					.info-text {
-						font-size: 30rpx;
-						font-weight: bold;
-						color: #3B4144;
-						margin-left: 10rpx;
-					}
-				}
-
-				.card-content {
-					font-size: 35rpx;
-					margin: 10rpx 0 10rpx 25rpx;
-					color: #3B4144;
-					font-weight: bold;
-				}
-			}
-		}
-	}
-
-	.charts-box {
-		width: 100%;
-		height: 300rpx;
-		padding-bottom: 20rpx;
-	}
-
-	.t-icon {
-		width: 40rpx;
-		height: 40rpx;
-	}
-
+	@import '@/pages/common/mainpage.scss';
 	//日历
 	.calendar_container {
 		background-color: #FFFFFF;

pages/subscribe/subscribe.vue

@@ -57,7 +57,7 @@
 		overflow-x: hidden; //隐藏多余的页面
 		
 		.home-topinfo {
-			background: linear-gradient(#ffd200, #f1f3f5);
+			background: linear-gradient(#ffd200, $page-background-color);
 		}
 		.card-box {
 			display: flex;

subpkg/childrenInfo/childrenInfo.vue

@@ -4,10 +4,10 @@
 		<back @click="returnMy"></back>
 		<!-- 孩子头部信息 -->
 		<view class="top-info">
-			<image class="children-avatar" :src="childreninfo.avatar" size="100"></image>
-			<view class="children-name">
+			<image class="top-avatar" :src="childreninfo.avatar" size="100"></image>
+			<view class="top-name">
 				<text class="name">{{childreninfo.name}}</text>
-				<text class="school-name">{{childreninfo.schoolname}}</text>
+				<text class="detail">{{childreninfo.schoolname}}</text>
 			</view>
 		</view>
 
@@ -68,89 +68,5 @@
 </script>
 
 <style lang="scss">
-	.container {
-		height: 600rpx;
-		background: linear-gradient(#ff8caf, #f1f3f5);
-
-		.top-info {
-			display: flex;
-			align-items: center;
-			margin-top: 10rpx;
-
-			.children-avatar {
-				margin-left: 50rpx;
-				width: 140rpx;
-				height: 140rpx;
-				border-radius: 100%;
-				border: 6rpx solid #FFFFFF;
-				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
-			}
-
-			.children-name {
-				margin-left: 50rpx;
-				display: flex;
-				flex-direction: column;
-				font-weight: bold;
-
-				.name {
-					color: #3B4144;
-					font-size: 45rpx;
-					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: 80rpx;
-			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: #FFFFFF;
-			border-radius: 16rpx;
-			width: 280rpx;
-			height: 280rpx;
-			box-shadow: 0 8rpx 16rpx rgba(153, 153, 153, 0.5);
-
-			.item-text {
-				font-size: 30rpx;
-				font-weight: bold;
-				color: #353535;
-				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;
-			}
-		}
-	}
+	@import '@/subpkg/common/infopage.scss';
 </style>

subpkg/common/infopage.scss

@@ -0,0 +1,85 @@
+.container {
+		height: 600rpx;
+		background: linear-gradient(#ff8caf, $page-background-color);
+
+		.top-info {
+			display: flex;
+			align-items: center;
+			margin-top: 10rpx;
+
+			.top-avatar {
+				margin-left: 50rpx;
+				width: 140rpx;
+				height: 140rpx;
+				border-radius: 100%;
+				border: 6rpx solid #FFFFFF;
+				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
+			}
+
+			.top-name {
+				margin-left: 50rpx;
+				display: flex;
+				flex-direction: column;
+				font-weight: bold;
+
+				.name {
+					color: #3B4144;
+					font-size: 45rpx;
+					font-weight: bold;
+				}
+
+				.detail {
+					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: 80rpx;
+			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: #FFFFFF;
+			border-radius: 16rpx;
+			width: 280rpx;
+			height: 280rpx;
+			box-shadow: $box-shadow-stereo-white;
+
+			.item-text {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #353535;
+				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;
+			}
+		}
+	}

subpkg/common/ocean.scss

@@ -0,0 +1,53 @@
+.ocean {
+		display: flex;
+		margin-top: -600rpx;
+		width: 1800rpx;
+		height: 1800rpx;
+		background-color: #4169E1;
+		border-radius: 50%;
+
+		&::before,
+		&::after {
+			content: "";
+			position: absolute;
+			margin-top: 870rpx;
+			width: 1600rpx;
+			height: 1600rpx;
+			top: 0;
+			left: 50%;
+			border-radius: 43%;
+			background-color: #FFFFFF;
+			transform: translate(-50%, -70%) rotate(0);
+			animation: rotate 6s linear infinite;
+			z-index: 2;
+		}
+
+		&::after {
+			border-radius: 46%;
+			background-color: #FFFFFF;
+			opacity: 0.7;
+			transform: translate(-50%, -70%) rotate(0);
+			animation: rotate 10s linear -5s infinite;
+			z-index: 3;
+		}
+
+		&::after {
+			border-radius: 40%;
+			background-color: #FFFFFF;
+			opacity: 0.5;
+			transform: translate(-50%, -70%) rotate(0);
+			animation: rotate 10s linear -5s infinite;
+			z-index: 3;
+		}
+
+	}
+
+	@keyframes rotate {
+		50% {
+			transform: translate(-50%, -73%) rotate(180deg);
+		}
+
+		100% {
+			transform: translate(-50%, -70%) rotate(360deg);
+		}
+	}

subpkg/guide/guide.vue

@@ -115,6 +115,8 @@
 </script>
 
 <style lang="scss">
+	@import '@/subpkg/common/ocean.scss';
+
 	.children-container {
 		display: flex;
 		flex-direction: column;
@@ -179,7 +181,7 @@
 					flex-direction: column;
 					justify-content: center;
 					align-items: center;
-					box-shadow: 14px 14px 20px #cbced1, -14px -14px 20rpx #fafafa;
+					box-shadow: $box-shadow-stereo-white;
 					background-color: #FFFFFF;
 					border-radius: 20rpx;
 					width: 280rpx;
@@ -206,58 +208,4 @@
 			}
 		}
 	}
-
-	.ocean {
-		display: flex;
-		margin-top: -600rpx;
-		width: 1800rpx;
-		height: 1800rpx;
-		background-color: #4169E1;
-		border-radius: 50%;
-
-		&::before,
-		&::after {
-			content: "";
-			position: absolute;
-			margin-top: 870rpx;
-			width: 1600rpx;
-			height: 1600rpx;
-			top: 0;
-			left: 50%;
-			border-radius: 43%;
-			background-color: #FFFFFF;
-			transform: translate(-50%, -70%) rotate(0);
-			animation: rotate 6s linear infinite;
-			z-index: 2;
-		}
-
-		&::after {
-			border-radius: 46%;
-			background-color: #FFFFFF;
-			opacity: 0.7;
-			transform: translate(-50%, -70%) rotate(0);
-			animation: rotate 10s linear -5s infinite;
-			z-index: 3;
-		}
-
-		&::after {
-			border-radius: 40%;
-			background-color: #FFFFFF;
-			opacity: 0.5;
-			transform: translate(-50%, -70%) rotate(0);
-			animation: rotate 10s linear -5s infinite;
-			z-index: 3;
-		}
-
-	}
-
-	@keyframes rotate {
-		50% {
-			transform: translate(-50%, -73%) rotate(180deg);
-		}
-
-		100% {
-			transform: translate(-50%, -70%) rotate(360deg);
-		}
-	}
 </style>

subpkg/login/login.vue

@@ -105,7 +105,7 @@
 	.content {
 		width: 100vw;
 		height: 100vh;
-		background-color: #fafafa;
+		background-color: #FFFFFF;
 
 		.tips {
 			padding-top: 200rpx;
@@ -125,7 +125,7 @@
 				line-height: 70rpx;
 				font-size: 35rpx;
 				font-weight: bold;
-				color: #b0b0b1;
+				color: $color-subtitle;
 				z-index: 99;
 			}
 

subpkg/parentInfo/parentInfo.vue

@@ -4,19 +4,20 @@
 		<back @click="returnMy"></back>
 		<!-- 头部信息 -->
 		<view class="top-info">
-			<image class="parent-avatar" :src="parentinfo.avatarUrl" size="100"></image>
-			<view class="parent-name">
+			<image class="top-avatar" :src="parentinfo.avatarUrl" size="100"></image>
+			<view class="top-name">
 				<text class="name">{{parentinfo.nickName}}</text>
-				<text class="phone">{{parentdetail.phoneNumber}}</text>
+				<text class="detail">{{parentdetail.phoneNumber}}</text>
 			</view>
 		</view>
-	
+
 		<!-- 内容列表 -->
 		<view class="card-box">
 			<u-cell-group :border="false">
 				<view class="i-item">
 					<view class="t-icon t-icon-canyon-nature-svgrepo-com"></view>
-					<u-cell class="cell-box" size="large" title="我的订阅" :label="parentdetail.phoneNumber" :border="false"></u-cell>
+					<u-cell class="cell-box" size="large" title="我的订阅" :label="parentdetail.phoneNumber"
+						:border="false"></u-cell>
 				</view>
 				<view class="i-item">
 					<view class="t-icon t-icon-hassan-mosque-morocco-svgrepo-com"></view>
@@ -24,7 +25,8 @@
 				</view>
 				<view class="i-item">
 					<view class="t-icon t-icon-leaning-tower-of-pisa-europe-svgrepo-com"></view>
-					<u-cell class="cell-box" size="large" title="订阅时间" label="2022.2.15-2025.2.15" :border="false"></u-cell>
+					<u-cell class="cell-box" size="large" title="订阅时间" label="2022.2.15-2025.2.15" :border="false">
+					</u-cell>
 				</view>
 			</u-cell-group>
 			<!-- 横向内容列表 -->
@@ -38,7 +40,7 @@
 				</view>
 			</view>
 		</view>
-	
+
 	</view>
 </template>
 
@@ -48,15 +50,15 @@
 		mapMutations
 	} from 'vuex'
 	export default {
-		computed:{
-			...mapState('m_parent',['parentinfo','parentdetail'])
+		computed: {
+			...mapState('m_parent', ['parentinfo', 'parentdetail'])
 		},
 		data() {
 			return {
-				
+
 			};
 		},
-		methods:{
+		methods: {
 			//返回成绩页面
 			returnMy() {
 				uni.switchTab({
@@ -68,85 +70,20 @@
 </script>
 
 <style lang="scss">
-.container {
-		height: 600rpx;
-		background: linear-gradient(#0080ff, #f1f3f5);
-
-		.top-info {
-			display: flex;
-			align-items: center;
-			margin-top: 10rpx;
-
-			.parent-avatar {
-				margin-left: 50rpx;
-				width: 140rpx;
-				height: 140rpx;
-				border-radius: 100%;
-				border: 6rpx solid #FFFFFF;
-				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
-			}
+	@import '@/subpkg/common/infopage.scss';
 
-			.parent-name {
-				margin-left: 50rpx;
-				display: flex;
-				flex-direction: column;
-				font-weight: bold;
-
-				.name {
-					color: #3B4144;
-					font-size: 45rpx;
-					font-weight: bold;
-				}
-				.phone{
-					color: #596166;
-					font-size: 35rpx;
-					font-weight: bold;
-				}
-			}
-		}
-
-		.card-box {
-			position: relative;
-			background-color: #FFFFFF;
-			box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.2);
-			top: 80rpx;
-			left: 50rpx;
-			border-radius: 100rpx;
-			width: 750rpx;
-			height: 100vh;
+	.container {
+		background: linear-gradient(#0080ff, $page-background-color);
+	}
 
-			.i-item {
-				display: flex;
-				align-items: center;
-				margin-left: 35rpx;
-			}
-		}
+	.avatar-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 
-		.data-box-item {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			margin: 20rpx;
-			background-color: #FFFFFF;
-			border-radius: 16rpx;
-			width: 280rpx;
-			height: 280rpx;
-			box-shadow:0 15px 35px rgba(0,0,0,0.1);
-			
-			.item-text {
-				width: 100%;
-				justify-content: flex-start;
-				font-size: 35rpx;
-				font-weight: bold;
-				color: #353535;
-				margin: 15rpx 0 0 30rpx;
-			}
-			.avatar-box{
-				.item-avatar{
-					width: 220rpx;
-					height: 220rpx;
-				}
-			}
+		.item-avatar {
+			width: 220rpx;
+			height: 220rpx;
 		}
 	}
 </style>

uni.scss

@@ -3,3 +3,5 @@
 @import '@/uni_modules/uview-ui/theme.scss';
 //会员卡背景
 @import '@/common/base64.scss';
+//自定义全局css
+@import  '@/common/style.scss';