MiniPrograms/pages/home/home.vue

<template>
	<view class="home-container">
		<!-- 头部区域 -->
		<top-box></top-box>
		<mainline-chart class="main-chart"></mainline-chart>
		
		
		<!-- 滚动条 -->
		<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>
		
		<mainradar-chart></mainradar-chart>
		<!-- 卡片区域 -->
		<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">
			<mainbar-chart class="home-bar-chart"></mainbar-chart>
		</view>
		
		

		

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

<script>
	import {mapState} from 'vuex'
	
	export default {
		data() {
			return {
				active: 0,
				notification: '这里是滚动条的内容，显示重要通知等等消息',
				inputvalue: '孩子学期计划',				
				
				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',
					},
					{
						'title':'开学',
						'key':'open',
					},
					{
						'title':'期中',
						'key':'mid',
					},
					{
						'title':'期末',
						'key':'final',
					}
				]
				
			}
		},
		
		computed:{
			...mapState('m_children',['childreninfo'])
		},

	
		onShow() {
			
		},
		
		methods: {
			
			//提交计划
			submitInputValue(e){
				
			}
		},
	}
</script>

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

		.main-chart{
			width: 100%;
			margin-top: -30px;
		}
		

		.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;
				width: 90%;
			}
		}

	}
</style>