MiniPrograms/pages/interactive/interactive.vue

<template>
	<view class="container">
		<!-- 头部区域 -->
		<top-box :timeStamp="timeStamp"></top-box>
		<!-- 记录模块 -->
		<interactive-box></interactive-box>
		<!-- 列表区域 -->
		<view class="card-box">
			<view class="card-item" v-for="(item,index) in subArr" :style="{backgroundImage:`url(${item.image})`}"></view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_parent', ['parentinfo'])
		},
		data() {
			return {
				//时间戳
				timeStamp: '',
				subArr:[
					{
						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_1.jpg',
						title:'学情分析报告',
						summary:'提供本学期孩子的全面考试成绩分析报告'
					},
					{
						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_2.jpg',
						title:'大考诊断分析报告',
						summary:'提供本学期孩子大考分析报告'
					},
					{
						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_3.jpg',
						title:'德育分析报告',
						summary:'提供本学期孩子德育发展全方位分析'
					}
				]
			}
		},
		onLoad() {
			this.timeStamp = (new Date()).format("hh:mm")
		},
		//刷新页面
		onPullDownRefresh() {
			this.timeStamp = (new Date()).format("hh:mm")
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
	
		},
	}
</script>

<style lang="scss">
	@import '@/pages/common/mainpage.scss';
	.home-topinfo {
		background: linear-gradient($color-green, $page-background-color) !important;
	}
	.container {
		width: 100%;
		height: 100%;
		overflow-x: hidden; //隐藏多余的页面
		.card-box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: 0 20rpx 20rpx 20rpx;
			justify-content: space-between;

			.card-item {
				margin: 10rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-size: cover;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.06);
				border-radius: $card-border-radius;
				width: 100%;
				height: 300rpx;
			}
		}
	}
</style>