zhxy-desk/components/CourseList.vue

<template>
	<view class="course-select">
		<view class="course-select-title">
			<view class="course-select-title-item">
				一
			</view>
			<view class="course-select-title-item">
				二
			</view>
			<view class="course-select-title-item">
				三
			</view>
			<view class="course-select-title-item">
				四
			</view>
			<view class="course-select-title-item">
				五
			</view>
		</view>

		<view class="course-select-content">
			<view v-for="(item,index) in list" :key="index" class="course-select-content-item">
				<view @click="selectItem(item1)" :class="color(item1.type)" v-for="(item1,index1) in item.arr"
					:key="index1" class="course-select-content-item-text">
					{{item1.class}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			color(item) {
				if (item == 0) {
					return 'type0'
				} else if (item == 2) {
					return 'type2'
				}
			},
			selectItem(item) {
				this.$emit('itemClick', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.course-select {}

	.course-select-title {
		display: flex;

		.course-select-title-item {
			flex: 1;
			text-align: center;
		}
	}

	.course-select-content-item {
		display: flex;

		.course-select-content-item-text {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.type0 {
		color: #999;
	}

	.type2 {
		background-color: #05CCA1;
		border-radius: 5px;
		color: #fff;
	}
</style>