OnlineEducation-teacher-front/src/views/courseDetails/components/LessonDetails.vue

<template>
	<div class="section-list">
		<div v-for="section in pagedSections" :key="section.id" class="section-block">
			<div class="section-title">{{ section.title }}</div>
			<div v-for="lesson in section.lessons" :key="lesson.id" class="lesson-row">
				<div class="lesson-cover">
					<a-avatar shape="square" :size="48" icon="play-circle" />
				</div>
				<div class="lesson-info">
					<div class="lesson-title">{{ lesson.title }}</div>
					<div class="lesson-meta">
						<span>时长：{{ lesson.duration }}</span>
						<span>视频大小：{{ lesson.size }}</span>
						<span>发布时间：{{ lesson.publishTime }}</span>
						<span>发布人：{{ lesson.author }}</span>
					</div>
				</div>
				<div class="lesson-actions">
					<EditOutlined class="action-icon" @click="$emit('edit-lesson', lesson)" />
					<DeleteOutlined class="action-icon" @click="$emit('delete-lesson', lesson)" />
				</div>
			</div>
		</div>
		<!-- 分页 -->
		<div class="pagination-box">
			<a-pagination
				:current="currentPage"
				:page-size="pageSize"
				:total="sectionsLength"
				@change="$emit('page-change', $event)"
				show-quick-jumper
				:show-total="(total) => `共${total}章`"
			/>
			<a-select
				v-model:value="localPageSize"
				style="width: 100px; margin-left: 16px"
				@change="emits('page-size-change', $event)"
			>
				<a-select-option :value="5">5/页</a-select-option>
				<a-select-option :value="10">10/页</a-select-option>
			</a-select>
		</div>
	</div>
</template>

<script setup>
	import { defineProps, defineEmits, ref, watch } from 'vue'
	import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
	const props = defineProps({
		pagedSections: Array,
		currentPage: Number,
		pageSize: Number,
		sectionsLength: Number
	})
	const emits = defineEmits(['edit-lesson', 'delete-lesson', 'page-change', 'page-size-change'])

	const localPageSize = ref(props.pageSize)
	watch(
		() => props.pageSize,
		(newVal) => {
			localPageSize.value = newVal
		}
	)
</script>

<style scoped>
	.section-list {
		width: 1200px;
		margin: 0 auto;
		background: #fff;
		border-radius: 0 0 12px 12px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
		padding: 1px 32px 32px 32px;
	}
	.section-block {
		margin-top: 32px;
	}
	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #222;
		margin-bottom: 18px;
	}
	.lesson-row {
		display: flex;
		align-items: center;
		background: #f7f8fa;
		border-radius: 8px;
		margin-bottom: 16px;
		padding: 16px 24px;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.03);
		transition: box-shadow 0.2s;
	}
	.lesson-row:hover {
		box-shadow: 0 4px 16px 0 rgba(52, 122, 255, 0.08);
		background: #f0f6ff;
	}
	.lesson-cover {
		margin-right: 20px;
	}
	.lesson-cover .ant-avatar {
		background: #e6e9ef;
		font-size: 24px;
	}
	.lesson-info {
		flex: 1;
	}
	.lesson-title {
		font-size: 15px;
		font-weight: 500;
		color: #222;
		margin-bottom: 6px;
	}
	.lesson-meta {
		font-size: 13px;
		color: #888;
	}
	.lesson-meta span {
		margin-right: 18px;
	}
	.lesson-actions {
		display: flex;
		align-items: center;
	}
	.action-icon {
		font-size: 18px;
		color: #347aff;
		margin-left: 18px;
		cursor: pointer;
		transition: color 0.2s;
	}
	.action-icon:hover {
		color: #1d5fd6;
	}
	.pagination-box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 32px;
	}
	.pagination-box .ant-pagination {
		margin-right: 16px;
	}
	.pagination-box .ant-select {
		min-width: 90px;
	}
</style>