MiniPrograms/pages/homework/homework.vue

<template>
	<view class="homework-container">
		<!-- 头部区域 -->
		<top-box :timeStamp="timeStamp"></top-box>
		<text class="card-title">孩子今日任务</text>
		<view class="card-box">

			<view class="box-list">
				<view class="box-card" v-for="(item,index) in card" :key="index" :style="item.color">
					<view>
						<view class="card-name">{{item.title}}</view>
					</view>
					<view class="radio">
						<view class=""></view>
					</view>
				</view>
			</view>
			<view class="box-detail">

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//时间戳
				timeStamp: '',
				//卡片内容
				card: [{
					title: '评测',
					color: 'background-color: #0080ff;',
					icon: ''
				}, {
					title: '作业',
					color: 'background-color: #ff8caf;'
				}, {
					title: '活动',
					color: 'background-color: #f9c752;'
				}]
			};
		},
		onLoad() {
			this.$getTimeStamp()
		},
		//刷新页面
		onPullDownRefresh() {
			this.$getTimeStamp()
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.homework-container {
		display: flex;
		flex-direction: column;

		.home-topinfo {
			background: linear-gradient($color-green, $page-background-color) !important;
		}

		.card-title {
			font-size: 45rpx;
			font-weight: bold;
			color: #FFF;
			padding: 0 0 30rpx 50rpx;
			margin-top: -90rpx;
		}

		.card-box {
			position: relative;
			box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.1);
			background-color: #FFF;
			border-radius: 50rpx;
			width: 100%;
			height: 100vh;

			.box-list {
				margin: 40rpx auto;
				width: 96%;
				height: auto;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				background-color: #000000;

				.box-card {
					width: 30%;
					height: 300rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: $card-border-radius;

					.card-name {
						color: #FFF;
						margin: 15rpx 0 15rpx 0;
						font-size: 35rpx;
						font-weight: bold;
					}

					.radio {
						width: 140rpx;
						height: 140rpx;
						border-radius: 100%;
						background: #FFF;
					}
				}
			}
		}
	}

	.box-detail {
		position: relative;
		background-color: #666;
		border-radius: $card-border-radius;
		margin: 40rpx auto;
		width: 96%;
		height: 500rpx;
	}

	.box-detail::before {
		content: " ";
		position: absolute;
		right: 13%;
		top: -35rpx;
		border-bottom: 50px solid #666;
		border-right-color: #666;
	}
</style>