MiniPrograms/pages/home/home.vue

<template>
	<view class="home-container">
		<!-- 头部区域 -->
		<view class="home-topinfo">
			<image class="children-avatar" src="../../static/boy.png"></image>
			<view class="children-name">
				<text class="name">张小伟</text>
				<text class="detail">学习近况</text>
			</view>
		</view>
		<!-- 步骤条区域 -->
		<view class="steps-box">
			<uni-steps :options="stepsValue" direction="column" :active="active"></uni-steps>
		</view>
		<!-- 滚动条 -->
		<view class="notice">
			<u-notice-bar :text="notification" mode="closable" bgColor="#6495ED" color="#FFFFFF"></u-notice-bar>
		</view>
		<!-- 成绩表单 -->
		<view class="table-card">
			<view class="table-name">
				<text class="table-name-text">成绩概览</text>
			</view>
			<z-table class="table" :tableData="tableData" :columns="columns" stickSide="true" showBottomSum="true"></z-table>
		</view>
		
		<!-- 卡片区域 -->
		<view class="home-card">
			<view class="card-edit">
				<text class="card-title">学期计划</text>
				<button class="card-button" @click="submitInputValue">修改计划</button>
			</view>		
			<text class="card-content">{{inputvalue}}</text>
			<u--textarea class="card-input" autoHeight v-model="inputvalue"></u--textarea>	
		</view>
		
		<!-- 目标图表 -->
		<view class="chart-card">
			<bar-chart class="home-bar-chart"></bar-chart>
		</view>

		

	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				notification: '这里是滚动条的内容，显示重要通知等等消息',
				inputvalue: '孩子学期计划',

				stepsValue: [{
					title: '开学时间',
					desc: '2011-11-11'
				}, {
					title: '开学考试',
					desc: '2018-11-12'
				}, {
					title: '期中考试',
					desc: '2028-11-13'
				}, {
					title: '期末考试',
					desc: '2023-11-14'
				}],
				
				
				tableData: [
				{
					'name':'数学',
					'open':83,
					'mid':95,
					'final':96
				},
				{
					'name':'语文',
					'open':93,
					'mid':90,
					'final':96
				},
				{
					'name':'英语',
					'open':99,
					'mid':82,
					'final':96
				},
				{
					'name':'体育',
					'open':99,
					'mid':97,
					'final':96
				},
				{
					'name':'科学',
					'open':99,
					'mid':92,
					'final':96
				},
				{
					'name':'思品',
					'open':99,
					'mid':94,
					'final':96
				}
				],
				columns: [
					{
						'title':'科目',
						'key':'name',
						'width':'120',
					},
					{
						'title':'开学',
						'key':'open',
						'width':'140',
					},
					{
						'title':'期中',
						'key':'mid',
						'width':'140',
					},
					{
						'title':'期末',
						'key':'final',
						'width':'140',
					}
				]
				
			}
		},
	
	onLoad() {
			this.updateSteps();
		},
		methods: {
			//更新时间表
			updateSteps() {
				let aData = new Date();
				let Today = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
				for (let i = 0; i < this.stepsValue.length; i++) {
					let timeNow = new Date(Today).getTime();
					let time = new Date(this.stepsValue[this.active].desc).getTime();
					let time2 = new Date(this.stepsValue[this.active + 1].desc).getTime();
					if (timeNow > time && timeNow > time2) {
						this.active += 1;
					}
				}
			},
			//提交计划
			submitInputValue(e){
				
			}
		},
	}
</script>

<style lang="scss">
	.home-container {
		height: 100%;

		.home-topinfo {
			height: 400rpx;
			background: linear-gradient(#0080ff, #fafafa);
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.children-avatar {
				margin-top: 10px;
				margin-left: 20px;
				width: 48px;
				height: 48px;
				border-radius: 25px;
				border: 1px solid #FFFFFF;
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

			}

			.children-name {
				margin-top: 12px;
				margin-left: 10px;
				display: flex;
				flex-direction: column;

				.name {
					color: #808599;
					font-size: 13px;
					margin: 2px 0px 0px 5px;
					font-weight: bold;
				}

				.detail {
					color: #3B4144;
					font-weight: bold;
					margin: 5px 0px 0px 5px;
				}
			}
		}

		.steps-box {
			margin: -55px 17px 10px 17px;
		}
		.notice{
			margin: -5px 17px 10px 17px;
		}

		.home-card {
			margin: 10px 17px 17px 17px;
			background-color: #FFFFFF;
			flex: 1 1 auto;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			border-radius: 10px;
			padding: 3px;


			.card-edit{
				width: 100%;
				display: flex;
				justify-content: space-between;
				
				.card-title {
					font-size: 15px;
					margin: 12px;
					font-weight: bold;
					color: #3B4144;
				}
				.card-button{
					margin: 10px;
					width: 80px;
					height: 30px;
					font-size: 13px;
					background-color: #6495ED;
					color: #FFFFFF;
				}
			}

			.card-content {
				table-layout: fixed;
				font-size: 13px;
				margin: 0px 12px 12px 12px;
				word-wrap: break-word;
				word-break: normal;
				overflow: hidden;
				color: #3B4144;
			}
		}

		.chart-card {
			margin: 0 7px 7px 7px;

			.home-bar-chart {
				margin-top: 45px
			}
		}
		.table-card{
			margin: 20px 17px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-color: #FFFFFF;
			box-shadow: 0 4px 8px rgba(0,0,0,0.1);
			
			.table-name{
				width: 100%;
				text-align: left;
				margin: 10px 0 0 33px;
				font-weight: bold;
				color: #3B4144;
				.table-name-text {
					font-size: 13px;
				}
			}
			.table{
				margin: 10px;
			}
		}

	}
</style>