完成首页模块化设计

App.vue

@@ -20,7 +20,7 @@
 	@import '@/uni_modules/uni-scss/index.scss';
 	// /* #ifndef APP-NVUE */
 	// 引入图标
-	@import './static/iconfont-weapp-icon.css';
+	@import '@/common/iconfont-weapp-icon.css';
 	.t-icon{
 		width: 30px;
 		height: 30px;

components/analysis-box/analysis-box.vue

@@ -1,7 +1,7 @@
 <template>
 <view>
 	
-	<view class="block" v-if="subscribe">
+	<view class="block" v-if="!subscribe">
 		<view class="item-container" @click="navRoseChart">
 			<view class="analysis-name">
 				<view class="t-icon t-icon-xtubiao-"></view>
@@ -25,11 +25,12 @@
 			</view>
 		</view>
 	</view>
-	<view class="nosub-box" v-if="!subscribe">
+	<view class="nosub-box" v-if="subscribe">
 		<view style="display: flex; align-items: center;margin: 30rpx 0 0 15rpx;">
 			<!-- <view class="t-icon t-icon-xtubiao-3" style="width: 50rpx;height: 50rpx;"></view> -->
 			<view class="nosub-text">综合分析模块</view>
 		</view>
+		<view class="nosub-content">对孩子成绩综合全面分析</view>
 		<view class="nosub-content">点击订阅</view>
 	</view>
 	
@@ -112,22 +113,22 @@
 		display: flex;
 		flex-direction: column;
 		border-radius: 16rpx;
-		background: linear-gradient(to right, #ff8caf 0%, #FFCCCC 100%);
+		background: $card-back-base64;
+		background-size: cover;//背景图片自适应
 		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
-		// background-color: #ff8caf;
 		width: 347rpx;
 		height: 345rpx;
 		.nosub-text{
 			font-size: 40rpx;
 			font-weight: bold;
-			color: #FFFFFF;
+			color: #ab725c;
 			margin-left: 10rpx;	
 		}
 		.nosub-content{
-			margin: 50rpx 0 0 25rpx;
-			font-size: 60rpx;
+			margin: 25rpx 25rpx 0 25rpx;
+			font-size: 45rpx;
 			font-weight: bold;
-			color: #FFFFFF;
+			color: #ab725c;
 		}
 	}
 </style>

components/todaydata-box/todaydata-box.vue

@@ -0,0 +1,229 @@
+<template>
+	<!-- 今日记录模块 -->
+	<view class="module-container">
+		<u-tabs :list="list" :current="current" @change="change" 
+		:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)',}"
+		:inactiveStyle="{color: '#6c6e73'}"></u-tabs>
+		<view class="module-box" v-if="current == 0">
+			<view class="module-item">
+				<view class="module-item-box">
+					<text class="module-item-text">自主学习记录</text>
+					<view class="num-box">
+						<text class="module-item-num">5.5</text>
+						<text class="unit">小时</text>
+					</view>
+					<view class="t-icon t-icon-shizhong-copy2-copy"></view>
+				</view>
+			</view>
+
+			<view class="module-item" style="background-color: #00cca3;">
+				<view class="module-item-box">
+					<text class="module-item-text">娱乐放松记录</text>
+					<view class="num-box">
+						<text class="module-item-num">5</text>
+						<text class="unit">小时</text>
+					</view>
+					<view class="t-icon t-icon-shizhong-copy3-copy"></view>
+				</view>
+			</view>
+
+			<view class="module-item" style="background-color: #ff9db2;">
+				<view class="module-item-box">
+					<text class="module-item-text">运动锻炼记录</text>
+					<view class="num-box">
+						<text class="module-item-num">5</text>
+						<text class="unit">分钟</text>
+					</view>
+					<view class="t-icon t-icon-shizhong-copy4-copy"></view>
+				</view>
+			</view>
+
+			<view class="module-item" style="background-color: #f9c752;">
+				<view class="module-item-box">
+					<text class="module-item-text">睡眠记录</text>
+					<view class="num-box">
+						<text class="module-item-num">8</text>
+						<text class="unit">小时</text>
+					</view>
+					<view class="t-icon t-icon-shizhong-copy1-copy"></view>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 记录表 -->
+		<view class="module-box" v-if="current == 1">
+			<view class="card-item" style="width: 710rpx;">
+				<view class="card-info">
+					<view class="t-icon t-icon-jiaoshidaka"></view>
+					<text class="info-text">孩子学习记录</text>
+				</view>
+				<view style="width: 100%; height: 500rpx; margin-top: -30rpx;">
+					<qiun-data-charts type="column" :chartData="todayData.studyColumn" :loadingType="4" :canvas2d='true'
+						canvasId='canvans912' :opts="{dataLabel:false, extra:{column: {barBorderCircle:true}}}" />
+				</view>
+			</view>
+			
+			<view class="card-item">
+				<view class="card-info">
+					<view class="t-icon t-icon-jiankangshangbao"></view>
+					<text class="info-text">运动记录</text>
+				</view>
+				<view style="width: 100%; height: 350rpx; margin-top: -10rpx;">
+					<qiun-data-charts type="pie" :chartData="todayData.exercisePie" :loadingType="4" :canvas2d='true'
+						canvasId='canvans8121' />
+				</view>
+			</view>
+			
+			<view class="card-item">
+				<view class="card-info">
+					<view class="t-icon t-icon-jiankangshangbao"></view>
+					<text class="info-text">睡眠记录</text>
+				</view>
+				<view style="width: 100%; height: 350rpx; margin-top: -10rpx;">
+					<qiun-data-charts type="ring" :chartData="todayData.sleepRing" :loadingType="4" :canvas2d='true'
+						canvasId='canvans9122' :tooltipFormat='yAxisDemo1' />
+				</view>
+			</view>
+		</view>
+		
+
+	</view>
+
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+	export default {
+		name: "todaydata-box",
+		computed:{
+			...mapState('m_chart', ['todayData']),
+		},
+		data() {
+			return {
+				list: [{
+					name: '今日数据记录'
+				}, {
+					name: '历史数据图表'
+				}],
+				current: 0,
+
+
+			};
+		},
+		methods: {
+			change(index) {
+				console.log(index)
+				this.current = index.index
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.module-container {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.module-box {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.module-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: 230rpx;
+			background-color: #5b7cff;
+			overflow: hidden;
+
+			.module-item-box {
+				padding: 30rpx;
+				width: 100%;
+				display: flex;
+				flex-direction: column;
+				.t-icon {
+					width: 250rpx;
+					height: 250rpx;
+					margin: -250rpx 0 0 150rpx;
+				}
+			}
+
+		}
+	}
+	.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;
+		font-size: 35rpx;
+		font-weight: bold;
+		z-index: 1;
+	}
+
+	.num-box {
+		margin: 30rpx 0 0 20rpx;
+		display: flex;
+		align-items: flex-end;
+
+		.module-item-num {
+			color: #FFFFFF;
+			font-size: 70rpx;
+			font-weight: bold;
+			z-index: 1;
+		}
+
+		.unit {
+			margin-bottom: 15rpx;
+			margin-left: 20rpx;
+			color: #FFFFFF;
+			font-size: 35rpx;
+			font-weight: bold;
+			z-index: 1;
+		}
+	}
+
+	
+</style>

main.js

@@ -9,8 +9,8 @@ import store from '@/information/store.js'
 //导入uView组件库
 import uView from '@/uni_modules/uview-ui'
 //配置公共方法
-import Common from './utils/Common.js'
-Vue.prototype.$noMultipleClicks = Common.noMultipleClicks;
+import RepeatClick from './utils/RepeatClick.js'
+Vue.prototype.$noMultipleClicks = RepeatClick.noMultipleClicks;
 
 //挂载到uni.$http上方便调用
 uni.$http = $http

pages/home/home.vue

@@ -96,43 +96,12 @@
 					<u-line-progress :showText="false" :percentage="vote" activeColor="#fd7193" height="15">
 					</u-line-progress>
 				</view>
-
 			</view>
+			<!-- 今日记录模块 -->
+			<todaydata-box></todaydata-box>
 
 
-
-			<view class="card-item" style="width: 100%;">
-				<view class="card-info">
-					<view class="t-icon t-icon-jiaoshidaka"></view>
-					<text class="info-text">孩子学习记录</text>
-				</view>
-				<view style="width: 100%; height: 500rpx; margin-top: -30rpx;">
-					<qiun-data-charts type="column" :chartData="todayData.studyColumn" :loadingType="4" :canvas2d='true'
-						canvasId='canvans912' :opts="{dataLabel:false, extra:{column: {barBorderCircle:true}}}" />
-				</view>
-			</view>
-
-			<view class="card-item">
-				<view class="card-info">
-					<view class="t-icon t-icon-jiankangshangbao"></view>
-					<text class="info-text">运动记录</text>
-				</view>
-				<view style="width: 100%; height: 350rpx; margin-top: -10rpx;">
-					<qiun-data-charts type="pie" :chartData="todayData.exercisePie" :loadingType="4" :canvas2d='true'
-						canvasId='canvans8121' />
-				</view>
-			</view>
-
-			<view class="card-item">
-				<view class="card-info">
-					<view class="t-icon t-icon-jiankangshangbao"></view>
-					<text class="info-text">睡眠记录</text>
-				</view>
-				<view style="width: 100%; height: 350rpx; margin-top: -10rpx;">
-					<qiun-data-charts type="ring" :chartData="todayData.sleepRing" :loadingType="4"
-						:canvas2d='true' canvasId='canvans9122' :tooltipFormat='yAxisDemo1' />
-				</view>
-			</view>
+			
 
 		</view>
 

uni.scss

@@ -1,3 +1,5 @@
 @import '@/uni_modules/uni-scss/variables.scss';
 //uView配置
-@import '@/uni_modules/uview-ui/theme.scss';
+@import '@/uni_modules/uview-ui/theme.scss';
+//会员卡背景
+@import '@/common/base64.scss';