edu-mini/edu-plus/pages/index/home-class/home-class.vue

<template>
	<view class="tab-class">
		<view class="class" @click="onTap(classStatusEnum.RUNNING)">
			<u--image src="/static/ic_current_class.png" width="296rpx" height="168rpx" />
			<view class="current-text">
				<text class="current-tip">正在开班</text>
				<text class="current-txt">开班中：{{current}}</text>
			</view>
		</view>
		<view class="other-class">
			<view class="class" @click="onTap(classStatusEnum.NO_START)">
				<u--image src="/static/ic_future_class.png" width="367rpx" height="80rpx" />
				<text class="class-text">即将开班：{{future}}</text>
			</view>
			<view class="class" @click="onTap(classStatusEnum.HISTORY)">
				<u--image src="/static/ic_history_class.png" width="367rpx" height="80rpx" />
				<text class="class-text">历史开班：{{history}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		classStatus
	} from '@/utils/enum.js'
	export default {
		name: "home-class",
		props: {
			current: Number,
			future: Number,
			history: Number
		},
		data() {
			return {
				classStatusEnum: classStatus,
			};
		},
		methods: {
			onTap(type) {},
		}
	}
</script>

<style scoped>
	/* 正在开班 历史，即将 */
	.tab-class {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: row;
		height: 170rpx;
	}

	.class {
		flex: 1;
		width: 100%;
		position: relative;
	}

	.other-class {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.current-text {
		position: absolute;
		right: 70rpx;
		top: 40rpx;
		display: flex;
		flex-direction: column;
	}

	.current-tip {
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.current-txt {
		margin-top: 10rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #FFE1DD;
	}

	.class-text {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 26rpx;
		font-weight: 500;
		color: #FFFFFF;
		position: absolute;
		right: 0;
		top: 20rpx;
	}
</style>