作业页面初步完成

components/todaydata-box/todaydata-box.vue

@@ -1,231 +1,270 @@
-<template>
-	<!-- 今日记录模块 -->
-	<view class="module-container">
-		<u-tabs :list="list" :current="current" @change="changeModule"
-			:activeStyle="{color: '#5b7cff',fontWeight: 'bold',transform: 'scale(1.04)',}"
-			:inactiveStyle="{fontWeight: 'bold',transform: 'scale(1)'}" lineColor="#5b7cff" lineWidth="60"></u-tabs>
-
-		<!-- 记录模块 -->
-		<view class="module-box" v-if="current == 0">
-			<view class="module-item" v-for="(item,index) in moduleData" :key="index" :style="item.color"
-				@click="setTime(index)">
-				<view class="module-item-box">
-					<text class="module-item-text">{{item.text}}</text>
-					<view class="num-box">
-						<text class="module-item-num">{{item.numData}}</text>
-					</view>
-					<view :class="item.icon"></view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 记录表 -->
-		<view class="module-box" v-if="current == 1">
-			<view class="chart-item" style="width: 100%;">
-				<view class="chart-info">
-					<view class="t-icon t-icon-shuju1"></view>
-					<text class="chart-info-text">近七天学习记录</text>
-				</view>
-				<view style=" width:100%; margin-top: -30rpx;">
-					<qiun-data-charts type="column" :chartData="todayData.studyColumn" :loadingType="4"
-						:opts="{dataLabel:false}" tooltipFormat='tooltipHour' :canvas2d="true"
-						canvasId="canvasId9839618" />
-				</view>
-			</view>
-
-			<view class="chart-item">
-				<view class="chart-info">
-					<view class="t-icon t-icon-tiyu"></view>
-					<text class="chart-info-text">近七天运动</text>
-				</view>
-				<view class="chart-view">
-					<qiun-data-charts type="pie" :chartData="todayData.exercisePie" :loadingType="4"
-						tooltipFormat='pieMinute' :canvas2d="true" canvasId="canvasId91234111" />
-				</view>
-			</view>
-
-			<view class="chart-item">
-				<view class="chart-info">
-					<view class="t-icon t-icon-yejian"></view>
-					<text class="chart-info-text">近七天睡眠</text>
-				</view>
-				<view class="chart-view">
-					<qiun-data-charts type="ring" :chartData="todayData.sleepRing" :loadingType="4"
-						tooltipFormat='tooltipHour' :canvas2d="true" canvasId="canvasId6312231" />
-				</view>
-			</view>
-		</view>
-		<!-- 时间选择器 -->
-		<u-picker :show="setTimePicker" :columns="pickerList" ref="uPicker" @confirm="pickerConfirm"
-			@cancel="pickerCancel" :closeOnClickOverlay="true" :immediateChange="true">
-		</u-picker>
-	</view>
-
-</template>
-
-<script>
-	import {
-		mapState
-	} from 'vuex'
-	export default {
-		name: "todaydata-box",
-		computed: {
-			...mapState('m_chart', ['todayData']),
-		},
-		data() {
-			return {
-				//模块名
-				list: [{
-					name: '家庭记录'
-				}, {
-					name: '历史记录'
-				}],
-				//当前模块
-				current: 0,
-				//记录卡片
-				moduleData: [{
-						text: '自主学习记录',
-						color: 'background-color: #5b7cff;',
-						icon: 't-icon t-icon-bianjibi',
-						numData: '记录一下',
-					},
-					{
-						text: '娱乐放松记录',
-						color: 'background-color: #00cca3;',
-						icon: 't-icon t-icon-leimucuyule',
-						numData: '记录一下',
-					},
-					{
-						text: '运动锻炼记录',
-						color: 'background-color: #ff8caf;',
-						icon: 't-icon t-icon-yundong',
-						numData: '记录一下',
-					},
-					{
-						text: '每日睡眠记录',
-						color: 'background-color: #f9c752;',
-						icon: 't-icon t-icon-a-icon_wananyueliangshuimian',
-						numData: '记录一下',
-					}
-				],
-				//当前记录卡片
-				cardCurrent: 5,
-				//选择器
-				setTimePicker: false,
-				//时间表
-				pickerList: [
-					['0小时', '1小时', '2小时', '3小时', '4小时', '5小时', '6小时', '7小时', '8小时', '9小时', '10小时'],
-					['5分钟', '10分钟', '15分钟', '20分钟', '25分钟', '30分钟', '35分钟', '40分钟', '45分钟', '50分钟', '55分钟']
-				],
-
-			};
-		},
-		onLoad() {},
-		methods: {
-			//更改模块
-			changeModule(index) {
-				this.current = index.index
-			},
-			//点击卡片唤起picker
-			setTime(index) {
-				this.cardCurrent = index
-				this.setTimePicker = true
-			},
-			//确定
-			pickerConfirm(e) {
-				if (e.value[0] === '0小时') {
-					this.moduleData[this.cardCurrent].numData = e.value[1]
-				} else {
-					this.moduleData[this.cardCurrent].numData = e.value[0] + e.value[1]
-				}
-				uni.$showMsg('记录完成', 1000)
-				this.setTimePicker = false
-			},
-			pickerCancel() {
-				uni.$showMsg('取消选择', 1000)
-				this.setTimePicker = false
-			},
-
-		}
-	}
-</script>
-
-<style lang="scss">
-	.module-container{
-		margin: -70rpx 20rpx 0 20rpx;
-	}
-	.module-box {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		justify-content: space-between;
-
-		.module-item {
-			margin: 2% 0;
-			display: flex;
-			flex-direction: column;
-			background-color: #FFFFFF;
-			border-radius: $card-border-radius;
-			width: 48%;
-			height: auto;
-			overflow: hidden;
-
-			.module-item-box {
-				padding: 35rpx;
-				width: 100%;
-				display: flex;
-				flex-direction: column;
-
-				.t-icon {
-					width: 250rpx;
-					height: 250rpx;
-					margin: -250rpx 0 0 150rpx;
-					z-index: 1;
-				}
-			}
-		}
-	}
-
-	.module-item-text {
-		color: #FFF;
-		font-size: 28rpx;
-		font-weight: bold;
-		z-index: 5;
-	}
-
-	.num-box {
-		margin-top: 20rpx;
-		z-index: 5;
-
-		.module-item-num {
-			color: #FFF;
-			font-size: 42rpx;
-			font-weight: bold;
-		}
-	}
-	.chart-item{
-		margin: 2% 0;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		background-color: #FFF;
-		// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
-		border-radius: $card-border-radius;
-		width: 48%;
-		height: auto;
-		.chart-info{
-			display: flex;
-			align-items: center;
-			padding: 20rpx;
-			.chart-info-text{
-				font-size: 30rpx;
-				font-weight: bold;
-				color: #3B4144;
-				margin-left: 10rpx;
-			}
-		}
-		.chart-view{
-			height: 300rpx;
-		}
-	}
+<template>
+	<!-- 今日记录模块 -->
+	<view class="module-container">
+		<u-tabs :list="list" :current="current" @change="changeModule"
+			:activeStyle="{color: '#5b7cff',fontWeight: 'bold',transform: 'scale(1.04)',}"
+			:inactiveStyle="{fontWeight: 'bold',transform: 'scale(1)'}" lineColor="#5b7cff" lineWidth="60"></u-tabs>
+
+		<!-- 记录模块 -->
+		<view class="module-box" v-if="current == 0">
+			<view class="module-item" v-for="(item,index) in moduleData" :key="index" :style="item.color"
+				@click="setTime(index)">
+				<view class="module-item-box">
+					<text class="module-item-text">{{item.text}}</text>
+					<view class="num-box">
+						<text class="module-item-num">{{item.numData}}</text>
+					</view>
+					<view :class="item.icon"></view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 记录表 -->
+		<view class="module-box" v-if="current == 1">
+			<view class="chart-item" style="width: 100%;">
+				<view class="chart-info">
+					<view class="t-icon t-icon-shuju1"></view>
+					<text class="chart-info-text">近七天学习记录</text>
+				</view>
+				<view style=" width:100%; margin-top: -30rpx;">
+					<qiun-data-charts type="column" :chartData="todayData.studyColumn" :loadingType="4"
+						tooltipFormat='tooltipHour' :canvas2d="true" canvasId="canvasId9839618" />
+				</view>
+			</view>
+
+			<view class="chart-item">
+				<view class="chart-info">
+					<view class="t-icon t-icon-tiyu"></view>
+					<text class="chart-info-text">近七天运动</text>
+				</view>
+				<view class="chart-view">
+					<qiun-data-charts type="pie" :chartData="todayData.exercisePie" :loadingType="4"
+						tooltipFormat='pieMinute' :canvas2d="true" canvasId="canvasId91234111" />
+				</view>
+			</view>
+
+			<view class="chart-item">
+				<view class="chart-info">
+					<view class="t-icon t-icon-yejian"></view>
+					<text class="chart-info-text">近七天睡眠</text>
+				</view>
+				<view class="chart-view">
+					<qiun-data-charts type="ring" :chartData="todayData.sleepRing" :loadingType="4"
+						tooltipFormat='tooltipHour' :canvas2d="true" canvasId="canvasId6312231" />
+				</view>
+			</view>
+		</view>
+		<!-- 时间选择器 -->
+		<u-picker :show="setTimePicker" :columns="pickerList" ref="uPicker" @confirm="pickerConfirm"
+			@cancel="pickerCancel" :closeOnClickOverlay="true" :immediateChange="true">
+		</u-picker>
+	</view>
+
+</template>
+
+<script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: "todaydata-box",
+		computed: {
+			...mapState('m_chart', ['todayData']),
+		},
+		data() {
+			return {
+				//模块名
+				list: [{
+					name: '家庭记录'
+				}, {
+					name: '历史记录'
+				}],
+				//当前模块
+				current: 0,
+				//记录卡片
+				moduleData: [{
+						text: '自主学习记录',
+						color: 'background-color: #5b7cff;',
+						icon: 't-icon t-icon-bianjibi',
+						numData: '记录一下',
+					},
+					{
+						text: '娱乐放松记录',
+						color: 'background-color: #00cca3;',
+						icon: 't-icon t-icon-leimucuyule',
+						numData: '记录一下',
+					},
+					{
+						text: '运动锻炼记录',
+						color: 'background-color: #ff8caf;',
+						icon: 't-icon t-icon-yundong',
+						numData: '记录一下',
+					},
+					{
+						text: '每日睡眠记录',
+						color: 'background-color: #f9c752;',
+						icon: 't-icon t-icon-a-icon_wananyueliangshuimian',
+						numData: '记录一下',
+					}
+				],
+				//当前记录卡片
+				cardCurrent: 5,
+				//选择器
+				setTimePicker: false,
+				//时间表
+				pickerList: [
+					['0小时', '1小时', '2小时', '3小时', '4小时', '5小时', '6小时', '7小时', '8小时', '9小时', '10小时'],
+					['5分钟', '10分钟', '15分钟', '20分钟', '25分钟', '30分钟', '35分钟', '40分钟', '45分钟', '50分钟', '55分钟']
+				],
+				//历史数据
+				historyData: {
+					study: [2, 3, 2.5, 3, 2, 1, 3],
+					rest: [1, 2, 0.5, 3, 0.5, 3.5, 2],
+					exercise: [],
+					sleep: []
+				}
+
+			};
+		},
+		created() {
+			this.saveToStudyChart()
+		},
+		methods: {
+			...mapMutations('m_chart', ['updateStudyColumn', 'updateExercisePie', 'updateSleepRing']),
+			//更改模块
+			changeModule(index) {
+				this.current = index.index
+			},
+			//点击卡片唤起picker
+			setTime(index) {
+				this.cardCurrent = index
+				this.setTimePicker = true
+			},
+			//确定
+			pickerConfirm(e) {
+				if (e.value[0] === '0小时') {
+					this.moduleData[this.cardCurrent].numData = e.value[1]
+				} else {
+					this.moduleData[this.cardCurrent].numData = e.value[0] + e.value[1]
+				}
+				uni.$showMsg('记录完成', 1000)
+				this.setTimePicker = false
+			},
+			//取消
+			pickerCancel() {
+				uni.$showMsg('取消选择', 1000)
+				this.setTimePicker = false
+			},
+			stringToNum(){
+				
+			},
+			//记录到图表
+			saveToStudyChart() {
+				let studyColumn = {
+					categories: [],
+					series: [{
+						name: '自主学习',
+						data: []
+					}, {
+						name: '娱乐放松',
+						data: []
+					}]
+				}
+				//时间
+				studyColumn.categories = this.$getRecentDateArray()
+				//数据
+				studyColumn.series[0].data = this.historyData.study
+				studyColumn.series[1].data = this.historyData.rest
+				//存储
+				this.updateStudyColumn(studyColumn)
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.module-container {
+		margin: -70rpx 20rpx 0 20rpx;
+	}
+
+	.module-box {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.module-item {
+			margin: 2% 0;
+			display: flex;
+			flex-direction: column;
+			background-color: #FFFFFF;
+			border-radius: $card-border-radius;
+			width: 48%;
+			height: auto;
+			overflow: hidden;
+
+			.module-item-box {
+				padding: 35rpx;
+				width: 100%;
+				display: flex;
+				flex-direction: column;
+
+				.t-icon {
+					width: 250rpx;
+					height: 250rpx;
+					margin: -250rpx 0 0 150rpx;
+					z-index: 1;
+				}
+			}
+		}
+	}
+
+	.module-item-text {
+		color: #FFF;
+		font-size: 28rpx;
+		font-weight: bold;
+		z-index: 5;
+	}
+
+	.num-box {
+		margin-top: 20rpx;
+		z-index: 5;
+
+		.module-item-num {
+			color: #FFF;
+			font-size: 42rpx;
+			font-weight: bold;
+		}
+	}
+
+	.chart-item {
+		margin: 2% 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		background-color: #FFF;
+		// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+		border-radius: $card-border-radius;
+		width: 48%;
+		height: auto;
+
+		.chart-info {
+			display: flex;
+			align-items: center;
+			padding: 20rpx;
+
+			.chart-info-text {
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #3B4144;
+				margin-left: 10rpx;
+			}
+		}
+
+		.chart-view {
+			height: 300rpx;
+		}
+	}
 </style>

information/chart.js

@@ -63,7 +63,7 @@ export default {
 					'科学': 99,
 				}
 			],
-			
+
 			//学期折线图数据
 			semesterLineChart: {
 				//总成绩
@@ -512,7 +512,7 @@ export default {
 					],
 				},
 			},
-			
+
 		},
 		//今日页面图表数据
 		todayData: {
@@ -542,42 +542,7 @@ export default {
 			},
 			//孩子数据记录
 			//学习休息时长对比
-			studyColumn: {
-				"categories": [
-					"星期一",
-					"星期二",
-					"星期三",
-					"星期四",
-					"星期五",
-					"星期六",
-					"星期天"
-				],
-				"series": [{
-						"name": "自主学习",
-						"data": [
-							2,
-							3,
-							2.5,
-							3,
-							2,
-							1,
-							3
-						]
-					},
-					{
-						"name": "娱乐放松",
-						"data": [
-							1,
-							2,
-							0.5,
-							3,
-							0.5,
-							3.5,
-							2
-						]
-					}
-				]
-			},
+			studyColumn: {},
 			//锻炼时长
 			exercisePie: {
 				"series": [{
@@ -656,6 +621,16 @@ export default {
 		updateSubjectComparison(state, singleAverageComparison) {
 			state.gradeData.semesterLineChart.singleAverageComparison = singleAverageComparison
 		},
+		//更新今日模块数据
+		updateStudyColumn(state, studyColumn) {
+			state.todayData.studyColumn = studyColumn
+		},
+		updateExercisePie(state, exercisePie) {
+			state.todayData.exercisePie = exercisePie
+		},
+		updateSleepRing(state, sleepRing){
+			state.todayData.sleepRing = sleepRing
+		}
 
 	},
 	//模块属性(数据包装)

main.js

@@ -1,74 +1,91 @@
-// #ifndef VUE3
-import Vue from 'vue'
+// #ifndef VUE3
+import Vue from 'vue'
 import App from './App'
-
 //导入网络请求包
 import {$http} from '@escook/request-miniprogram'
 //5.导入store的自定义模块
 import store from '@/information/store.js'
-//导入uView组件库
+//导入uView组件库
 import uView from '@/uni_modules/uview-ui'
-//导入公共方法
+//导入公共方法
 import RepeatClick from './utils/RepeatClick.js'
-import TimeUtils from './utils/TimeUtils.js'
+import TimeUtils from './utils/TimeUtils.js'
 Vue.prototype.$noMultipleClicks = RepeatClick.noMultipleClicks;
 Vue.prototype.$getTimeStamp = TimeUtils.getTimeStamp;
+Vue.prototype.$getRecentDateArray = TimeUtils.getRecentDateArray;
 
 //挂载到uni.$http上方便调用
 uni.$http = $http
-
-//请求根路径
+//请求根路径
 // $http.baseUrl = 'https://www.uinav.com'
 
-//挂载请求拦截器
-$http.beforeRequest = function(options) {
-	uni.showLoading({
-		title: '数据加载中...'
+//挂载请求拦截器
+$http.beforeRequest = function(options) {
+	uni.showLoading({
+		title: '数据加载中...'
 	})
 	//挂载请求头
 	//判断当前请求的是否为有权限的接口
 	// if(options.url.indexOf('/pages/login/login') !== -1){
-		//为header中添加必要信息(权限字段)
-		// options.header = {
-			
-		// }
+	//为header中添加必要信息(权限字段)
+	// options.header = {
+	// }
 	//}
 }
 
-//挂载响应拦截器
-$http.afterRequest = function() {
-	uni.hideLoading()
+//挂载响应拦截器
+$http.afterRequest = function() {
+	uni.hideLoading()
 }
 
 //封装的展示消息提示方法
-uni.$showMsg = function(title = '请求失败', duration = 1500){
+uni.$showMsg = function(title = '请求失败', duration = 1500) {
 	uni.showToast({
 		title,
 		duration,
 		icon: 'none'
 	})
-}
-
-Vue.config.productionTip = false
-
-App.mpType = 'app'
+}
+//封装格式化处理日期时间的方法
+Date.prototype.format = function(fmt) {
+	let o = {
+		"M+": this.getMonth() + 1, //月份
+		"d+": this.getDate(), //日
+		"h+": this.getHours(), //小时
+		"m+": this.getMinutes(), //分
+		"s+": this.getSeconds(), //秒
+		"q+": Math.floor((this.getMonth() + 3) / 3), //季度
+		"S": this.getMilliseconds() //毫秒
+	};
+	if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+	for (let k in o)
+		if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) :
+			(("00" + o[k]).substr(("" + o[k]).length)));
+	return fmt;
+}
 
-//app实例对象
-const app = new Vue({
-    ...App,
-		//6.挂载到app实例对象里
-		store
-})
-app.$mount()
+Vue.config.productionTip = false
+
+App.mpType = 'app'
+
+//app实例对象
+const app = new Vue({
+	...App,
+	//6.挂载到app实例对象里
+	store
+})
+app.$mount()
+// #endif
+
+// #ifdef VUE3
+import {
+	createSSRApp
+} from 'vue'
+import App from './App.vue'
+export function createApp() {
+	const app = createSSRApp(App)
+	return {
+		app
+	}
+}
 // #endif
-
-// #ifdef VUE3
-import { createSSRApp } from 'vue'
-import App from './App.vue'
-export function createApp() {
-  const app = createSSRApp(App)
-  return {
-    app
-  }
-}
-// #endif

pages.json

@@ -39,7 +39,7 @@
 		}, {
 			"path": "pages/homework/homework",
 			"style": {
-				"enablePullDownRefresh": false,
+				"enablePullDownRefresh": true,
 				"navigationStyle": "custom",
 				"disableScroll": true
 			}

pages/homework/homework.vue

@@ -1,122 +1,214 @@
-<template>
-	<view class="homework-container">
-		<!-- 头部区域 -->
-		<top-box :timeStamp="timeStamp"></top-box>
-		<view class="module-container">
-			<u-tabs :list="list" :current="current" @change="changeModule"
-				:activeStyle="{color: '#5b7cff',fontWeight: 'bold',transform: 'scale(1.04)',}"
-				:inactiveStyle="{fontWeight: 'bold',transform: 'scale(1)'}" lineColor="#5b7cff" lineWidth="60"></u-tabs>
-
-			<!-- 详情模块 -->
-			<view class="module-box" v-if="current == 0">
-				<view class="card">
-					<text class="card-title">今日评测数:</text>
-					<view class="image"></view>
-				</view>
-			</view>
-			<view class="module-box" v-if="current == 1"></view>
-			<view class="module-box" v-if="current == 2"></view>
-		</view>
-
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				//模块名
-				list: [{
-					name: '评测详情'
-				}, {
-					name: '活动详情'
-				}, {
-					name: '作业详情'
-				}],
-				//当前模块
-				current: 0,
-				//时间戳
-				timeStamp: '',
-				//卡片内容
-				card: [{
-					title: '评测详情',
-					color: 'background-color: #8c8ff6;',
-					icon: '$test-base64'
-				}, {
-					title: '作业详情',
-					color: 'background-color: #64d2fd;',
-					icon: '$homework-base64'
-				}, {
-					title: '活动详情',
-					color: 'background-color: #ff8caf;',
-					icon: '$actility-base64'
-				}]
-			};
-		},
-		onLoad() {
-			this.$getTimeStamp()
-		},
-		//刷新页面
-		onPullDownRefresh() {
-			this.$getTimeStamp()
-			console.log('refresh');
-			setTimeout(function() {
-				uni.stopPullDownRefresh();
-			}, 1000);
-		},
-		methods: {
-			//更改模块
-			changeModule(index) {
-				this.current = index.index
-			},
-		}
-	}
-</script>
-
-<style lang="scss">
-	.homework-container {
-
-		.home-topinfo {
-			background: linear-gradient(#ff8419, $page-background-color) !important;
-		}
-	}
-
-	.module-container {
-		margin: -70rpx 20rpx 0 20rpx;
-
-		.card {
-			display: flex;
-			justify-content: space-between;
-			margin: 40rpx auto 20rpx auto;
-			height: 250rpx;
-			width: 96%;
-			background: linear-gradient(to right, #fd76007a,#ff8419);
-			border-radius: $card-border-radius;
-			
-			.card-title{
-				font-size: 40rpx;
-				font-weight: bold;
-				color: #FFF;
-			}
-
-			.image {
-				position: relative;
-				top: -40rpx;
-				right: -200rpx;
-				height: 500rpx;
-				width: 500rpx;
-				background-image: $test-base64;
-				background-size: contain;
-				background-repeat: no-repeat;
-				z-index: 2;
-			}
-		}
-
-	}
-
-	.t-icon {
-		margin: 20rpx;
-		width: 110rpx;
-		height: 110rpx;
-	}
+<template>
+	<view class="homework-container">
+		<!-- 头部区域 -->
+		<top-box :timeStamp="timeStamp"></top-box>
+		<view class="module-container">
+			<u-tabs :list="list" :current="current" @change="changeModule"
+				:activeStyle="{color: '#5b7cff',fontWeight: 'bold',transform: 'scale(1.04)',}"
+				:inactiveStyle="{fontWeight: 'bold',transform: 'scale(1)'}" lineColor="#5b7cff" lineWidth="60"></u-tabs>
+
+			<!-- 详情头部卡片 -->
+			<view class="module-box" v-for="(item,index) in card" :key="index" v-if="current == index">
+				<view class="card" :style="{backgroundColor: `${item.color}`}">
+					<view style="display: flex; flex-direction: column;">
+						<text class="card-title">{{item.title}}{{item.num}}</text>
+						<text class="card-subtitle">{{item.subtitle}}{{item.finish}}</text>
+					</view>
+					<view class="image" :style="{backgroundImage:`url(${item.image})`}"></view>
+				</view>
+				<view style="display: flex; align-items: center;">
+					<view class="cut-off">{{item.detail.nav}}</view>
+					<!-- <u-button text="获得报表" :plain="true" :hairline="true" shape="circle" size="small"></u-button> -->
+				</view>
+
+				<view class="detail-box">
+					
+					<view class="detail-box-item">
+						<view class="item-info">
+							<view class="t-icon t-icon-ceping"></view>
+							<view class="item-text">评测完成率</view>
+						</view>
+					</view>
+					
+					<view class="detail-box-item"></view>
+					<view class="detail-box-item" style="height: 100%;"></view>
+				</view>
+			</view>
+
+
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+	export default {
+		computed:{
+			...mapState('m_chart', ['todayData']),
+		},
+		data() {
+			return {
+				//模块名
+				list: [{
+					name: '评测详情'
+				}, {
+					name: '作业详情'
+				}, {
+					name: '活动详情'
+				}],
+				//当前模块
+				current: 0,
+				//时间戳
+				timeStamp: '',
+				//卡片内容
+				card: [{
+					title: '今日评测数:' + '\xa0\xa0\xa0',
+					num: 5,
+					subtitle: '评测已完成:' + '\xa0\xa0\xa0',
+					finish: 3,
+					color: '#0080ff;',
+					image: 'https://ouch-cdn2.icons8.com/T8L5Wxx8kgo2JxDuk2xDweDxuU8WaImv6jndeuNsyVs/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNTI3/LzA5ZWEzOGY3LTFh/NTMtNGEyOC05ZGQ2/LTE0ODQ0YTc0NzM2/MC5wbmc.png',
+					detail: {
+						nav: '评测信息'
+					}
+				}, {
+					title: '今日作业数:' + '\xa0\xa0\xa0',
+					num: 3,
+					subtitle: '作业已完成:' + '\xa0\xa0\xa0',
+					finish: 3,
+					color: '#ff8caf;',
+					image: 'https://ouch-cdn2.icons8.com/BYU619A_iHObQVrS3QMw03-pLb9GS_IiJwZ1w1p5B44/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNzAy/L2M5ZWU1M2JmLWQ5/ZWEtNDc2Yi1hZDc0/LTM0MmViZjcwMzU2/ZC5wbmc.png',
+					detail: {
+						nav: '作业信息'
+					}
+				}, {
+					title: '今日活动数:' + '\xa0\xa0\xa0',
+					num: 6,
+					subtitle: '活动已完成:' + '\xa0\xa0\xa0',
+					finish: 5,
+					color: '#f9c752;',
+					image: 'https://ouch-cdn2.icons8.com/i0qqxE6yUmy-zGPwKqmTGiaxmA2amq9prgLg-LJ75Ow/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvMjIy/L2Y2N2Q4MjRjLTY1/ZWEtNDNkMS1iZmY2/LTY0NDQwMGVmYTI0/My5wbmc.png',
+					detail: {
+						nav: '活动信息'
+					}
+				}]
+			};
+		},
+		onLoad() {
+			this.$getTimeStamp()
+		},
+		//刷新页面
+		onPullDownRefresh() {
+			this.$getTimeStamp()
+			console.log('refresh');
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		methods: {
+			//更改模块
+			changeModule(index) {
+				this.current = index.index
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.homework-container {
+
+		.home-topinfo {
+			background: linear-gradient($color-green, $page-background-color) !important;
+		}
+	}
+
+	.module-container {
+		margin: -70rpx 20rpx 0 20rpx;
+
+		.card {
+			display: flex;
+			justify-content: space-around;
+			margin: 20rpx auto 20rpx auto;
+			height: 260rpx;
+			width: 96%;
+			// background: linear-gradient(to right, #ff95007a,#ff8419);
+			border-radius: $card-border-radius;
+
+			.card-title {
+				margin: 40rpx 0 0 30rpx;
+				font-size: 45rpx;
+				font-weight: bold;
+				color: #FFF;
+			}
+
+			.card-subtitle {
+				margin: 20rpx 30rpx;
+				font-size: 35rpx;
+				font-weight: bold;
+				color: #FFF;
+			}
+
+			.image {
+				position: relative;
+				top: -40rpx;
+				right: -30rpx;
+				height: 300rpx;
+				width: 300rpx;
+				background-size: contain;
+				background-repeat: no-repeat;
+				z-index: 2;
+			}
+		}
+
+		.cut-off {
+			font-size: 35rpx;
+			font-weight: bold;
+			color: #606266;
+			margin-left: 20rpx;
+		}
+
+		.detail-box {
+			display: flex;
+			flex-flow: column wrap;
+			justify-content: space-between;
+			margin: 20rpx auto 20rpx auto;
+			height: 47vh;
+			width: 100%;
+
+			.detail-box-item {
+				margin: 0 2%;
+				height: 48%;
+				width: auto;
+				background-color: #FFF;
+				border-radius: $card-border-radius;
+
+				.item-info {
+					display: flex;
+					align-items: center;
+					padding: 20rpx;
+					.t-icon {
+						width: 40rpx;
+						height: 40rpx;
+					}
+
+					.item-text {
+						font-size: 30rpx;
+						font-weight: bold;
+						color: #3B4144;
+						margin-left: 10rpx;
+					}
+				}
+			}
+		}
+
+	}
+
+	.t-icon {
+		margin: 20rpx;
+		width: 110rpx;
+		height: 110rpx;
+	}
 </style>

subpkg/guide/guide.vue

@@ -5,7 +5,7 @@
 			<view class="title">欢迎您的使用</view>
 			<view style="font-weight: bold;font-size: 36rpx;color: #b0b0b1;margin-left: 40rpx;margin-top: 20rpx;">
 				醍摩豆家长助您孩子成长</view>
-			<view class="detail-image"></view>
+			<view class="detail-image" :style="{backgroundImage:`url(${image})`}"></view>
 			<button class="detail-button" plain="true" open-type="getPhoneNumber"
 				@getphonenumber="getPhoneNumber">获取您的孩子信息</button>
 		</view>
@@ -29,6 +29,7 @@
 		},
 		data() {
 			return {
+				image: '/static/image/guid.png'
 			};
 		},
 		methods: {
@@ -105,7 +106,6 @@
 				margin-bottom: 20rpx;
 				width: 100%;
 				height: 500rpx;
-				background: $guide-back-base64;
 				background-size: cover; //背景图片自适应
 			}
 

uni.scss

@@ -1,7 +1,5 @@
 @import '@/uni_modules/uni-scss/variables.scss';
 //uView配置
 @import '@/uni_modules/uview-ui/theme.scss';
-//图片背景
-@import '@/common/base64.scss';
 //自定义全局css
 @import  '@/common/style.scss';

utils/TimeUtils.js

@@ -1,11 +1,17 @@
-//处理更新时间
-function getTimeStamp(){
-	let date = new Date(),
-		hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
-		minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
-	this.timeStamp = (hour + ':' + minute).toString();
+//处理更新时间
+function getTimeStamp() {
+	this.timeStamp = (new Date()).format("hh:mm")
+}
+//获取近七天时间数组
+function getRecentDateArray() {
+	let recentDate = new Array();
+	for (let i = 6; i >= 0; i--) {
+		let dayTime = new Date();
+		dayTime.setDate(dayTime.getDate() - i);
+		recentDate.push(dayTime.format("MM-dd"));
+	}
+	return recentDate
+}
+export default {
+	getTimeStamp,getRecentDateArray
 }
-
-export default{
-	getTimeStamp,
-}