zhxy-desk/components/Schedule.vue

<template>
	<view class="schedule">
		<view class="schedule-title">
			<view class="schedule-title-item">
				周一
			</view>
			<view class="schedule-title-item">
				周二
			</view>
			<view class="schedule-title-item">
				周三
			</view>
			<view class="schedule-title-item">
				周四
			</view>
			<view class="schedule-title-item">
				周五
			</view>
		</view>
		<view v-for="(item,index) in list" :key="index" class="schedule-content">
			<view v-for="(item1,index1) in item.arr" :key="index1" class="schedule-content-item">
				<view class="schedule-content-item-name">
					{{item1.name}}
				</view>
				<view style="line-height: 0;margin: 14rpx 0;" class="schedule-content-item-name">
					{{item1.date}}
				</view>
				<view class="schedule-content-item-name">
					{{item1.teacher}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Schedule",
		data() {
			return {
				list: [{
						arr: [{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
						]
					},
					{
						arr: [{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
						]
					},
					{
						arr: [{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
						]
					},
					{
						arr: [{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
							{
								name: '语文',
								date: '8:00-8:45',
								teacher: '王老师'
							},
						]
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.schedule {
		width: 100%;
		box-sizing: border-box;

		.schedule-title {
			height: 70rpx;
			width: 100%;
			background: #05cca1;
			border-radius: 10rpx;
			display: flex;
             margin-bottom: 16rpx;
			.schedule-title-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}

		.schedule-content {
			width: 100%;
			display: flex;
			justify-content: space-between;
            font-size: 20rpx;
		margin-bottom: 16rpx;
			.schedule-content-item {
				width: 126rpx;
				height: 140rpx;
				background: #cef1e9;
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
			}
		}
	}
</style>