MiniPrograms/pages/homework/homework.vue

<template>
	<view class="homework-container">
		<!-- 头部区域 -->
		<top-box :timeStamp="timeStamp"></top-box>
		<view class="module-container">
			<u-tabs :list="list" :current="current" @change="changeModule"
				:activeStyle="{color: '#5b7cff',fontWeight: 'bold',transform: 'scale(1.04)',}"
				:inactiveStyle="{fontWeight: 'bold',transform: 'scale(1)'}" lineColor="#5b7cff" lineWidth="60"></u-tabs>

			<!-- 详情模块 -->
			<view class="module-box" v-if="current == 0">
				<view class="card">
					<text class="card-title">今日评测数:</text>
					<view class="image"></view>
				</view>
			</view>
			<view class="module-box" v-if="current == 1"></view>
			<view class="module-box" v-if="current == 2"></view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//模块名
				list: [{
					name: '评测详情'
				}, {
					name: '活动详情'
				}, {
					name: '作业详情'
				}],
				//当前模块
				current: 0,
				//时间戳
				timeStamp: '',
				//卡片内容
				card: [{
					title: '评测详情',
					color: 'background-color: #8c8ff6;',
					icon: '$test-base64'
				}, {
					title: '作业详情',
					color: 'background-color: #64d2fd;',
					icon: '$homework-base64'
				}, {
					title: '活动详情',
					color: 'background-color: #ff8caf;',
					icon: '$actility-base64'
				}]
			};
		},
		onLoad() {
			this.$getTimeStamp()
		},
		//刷新页面
		onPullDownRefresh() {
			this.$getTimeStamp()
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//更改模块
			changeModule(index) {
				this.current = index.index
			},
		}
	}
</script>

<style lang="scss">
	.homework-container {

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

	.module-container {
		margin: -70rpx 20rpx 0 20rpx;

		.card {
			display: flex;
			justify-content: space-between;
			margin: 40rpx auto 20rpx auto;
			height: 250rpx;
			width: 96%;
			background: linear-gradient(to right, #fd76007a,#ff8419);
			border-radius: $card-border-radius;
			
			.card-title{
				font-size: 40rpx;
				font-weight: bold;
				color: #FFF;
			}

			.image {
				position: relative;
				top: -40rpx;
				right: -200rpx;
				height: 500rpx;
				width: 500rpx;
				background-image: $test-base64;
				background-size: contain;
				background-repeat: no-repeat;
				z-index: 2;
			}
		}

	}

	.t-icon {
		margin: 20rpx;
		width: 110rpx;
		height: 110rpx;
	}
</style>