diff --git a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
index f6f4913..1a6a7b8 100755
--- a/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
+++ b/apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx
@@ -17,7 +17,7 @@ import { Skeleton } from "antd";
 
 export const CourseDetailDisplayArea: React.FC = () => {
 	// 创建滚动动画效果
-	const { course, isLoading, lecture, lectureIsLoading } =
+	const { course, isLoading, lecture, lectureIsLoading, selectedLectureId } =
 		useContext(CourseDetailContext);
 	const { scrollY } = useScroll();
 	const videoOpacity = useTransform(scrollY, [0, 200], [1, 0.8]);
@@ -27,6 +27,15 @@ export const CourseDetailDisplayArea: React.FC = () => {
 			{lectureIsLoading && (
 				<Skeleton active paragraph={{ rows: 4 }} title={false} />
 			)}
+			{!selectedLectureId && (
+				<>
+					<div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-4">
+						<div className="w-full  bg-white shadow-md rounded-lg  border border-gray-200  p-6  ">
+							{"123"}
+						</div>
+					</div>
+				</>
+			)}
 			{!lectureIsLoading && lecture?.meta?.type === LectureType.VIDEO && (
 				<div className="flex justify-center flex-col items-center gap-2 w-full mt-2 px-4">
 					<motion.div
@@ -37,7 +46,7 @@ export const CourseDetailDisplayArea: React.FC = () => {
 						<div className=" w-full  ">
 							<VideoPlayer src={lecture?.meta?.videoUrl} />
 						</div>
-					</motion.div>{" "}
+					</motion.div>
 				</div>
 			)}
 			{!lectureIsLoading &&