MiniPrograms/pages/home/home.vue

<template>
	<view class="home-container">
		<view class="bg1"></view>
		<!-- 头部区域 -->
		<top-box></top-box>
		<!-- 滚动条 -->
		<view class="notice">
			<u-notice-bar :text="notification" mode="closable" bgColor="#6495ED" color="#FFFFFF"></u-notice-bar>
		</view>
		<!-- 孩子全方位展示 -->
		<view class="title">德</view>
		<view class="card">
			<view class="t-icon t-icon-a-aixinxihuan"></view>
			<view class="card-title">今日表现</view>
		</view>
		<view class="title">智</view>
		<view class="card">
			<view class="t-icon t-icon-a-dengpaodengzhuyichuangzao"></view>
			<view class="card-title">今日表现</view>
		</view>
		<view class="title">体</view>
		<view class="card">
			<view class="t-icon t-icon-a-jiangbeiyingjiashenglizhechengjiu"></view>
			<view class="card-title">今日表现</view>
		</view>
		<view class="title">美</view>
		<view class="card">
			<view class="t-icon t-icon-a-sebansetiaosekayanse"></view>
			<view class="card-title">今日表现</view>
		</view>
		<view class="title">劳</view>
		<view class="card">
			<view class="t-icon t-icon-a-guangpanguangdie"></view>
			<view class="card-title">今日表现</view>
		</view>
		
		
		
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	
	export default {
		data() {
			return {
				notification: '这里是滚动条的内容，显示重要通知等等消息',
				
				
				
				
				
			}
		},
		
		computed:{
			...mapState('m_children',['childreninfo'])
		},

	
		onShow() {
			
		},
		
		methods: {
			
			
		},
	}
</script>

<style lang="scss">
	.home-container {
		height: 100%;
		.notice{
			margin: -80rpx 20rpx 20rpx 20rpx;
		}
		.title{
			margin: 20rpx;
			padding: 8rpx 16rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			background: -webkit-linear-gradient(right,#f1f3f5,#6495ed);
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
		}
		.card{
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 15rpx;
			background-color: #FFFFFF;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
			display: flex;
			align-items: center;
			
			.card-title{
				margin-left: 20rpx;
				font-size: 26rpx;
			}
		}
	}
	.t-icon{
		width:  40rpx;
		height: 40rpx;
	}
</style>