通识课新加入新课程类型并同时适配网页端和手机端样式，分别走两套样式、数据逻辑（问题：手机端视频全屏后会与网页端样式冲突）

新课程强制手机横屏使用

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 移动端横屏提示遮罩（全局统一） -->
-  <div class="mobile-landscape-hint mobile-show">
+  <div class="mobile-landscape-hint" :class="{ 'mobile-show': showLandscapeHint }">
     <div class="hint-icon">📱</div>
     <div class="hint-text">请横屏使用</div>
     <div class="hint-desc">为获得更好的体验，请将设备横屏放置</div>
@@ -10,9 +10,110 @@
 </template>
 
 <script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const showLandscapeHint = ref(true)
+
+// 检测是否为移动设备
+const isMobileDevice = () => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+         (window.innerWidth <= 768 && window.innerHeight <= 1024)
+}
+
+// 检测设备是否为横屏
+const isLandscape = () => {
+  // 通过屏幕宽高比判断
+  return window.innerWidth > window.innerHeight
+}
+
+// 检查当前路由是否为新课程页面或AI通用课程页面
+const isNewCoursePage = () => {
+  return route.path.includes('/custom-course') || 
+         route.path.includes('/ai-develop') ||
+         route.path.includes('/ai-general-course')
+}
+
+// 更新横屏提示显示状态
+const updateLandscapeHint = () => {
+  if (isMobileDevice() && !isLandscape() && !isNewCoursePage()) {
+    // 如果是移动设备、竖屏且不是新课程页面，显示横屏提示
+    showLandscapeHint.value = true
+  } else {
+    // 否则不显示横屏提示
+    showLandscapeHint.value = false
+  }
+}
+
+// 监听路由变化
+watch(() => route.path, () => {
+  updateLandscapeHint()
+})
+
+// 监听窗口大小变化
+const handleResize = () => {
+  updateLandscapeHint()
+}
+
+// 组件挂载时更新状态
+onMounted(() => {
+  updateLandscapeHint()
+  window.addEventListener('resize', handleResize)
+  
+  // 监听设备方向变化（如果支持的话）
+  if (window.screen && window.screen.orientation) {
+    window.screen.orientation.addEventListener('change', handleResize)
+  }
+})
+
+// 组件卸载时移除事件监听
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (window.screen && window.screen.orientation) {
+    window.screen.orientation.removeEventListener('change', handleResize)
+  }
+})
 </script>
 
 <style scoped>
+/* 移动端横屏提示遮罩 */
+.mobile-landscape-hint {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.9);
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  color: white;
+  text-align: center;
+}
+
+.mobile-landscape-hint.mobile-show {
+  display: flex;
+}
+
+.hint-icon {
+  font-size: 60px;
+  margin-bottom: 20px;
+}
+
+.hint-text {
+  font-size: 24px;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.hint-desc {
+  font-size: 16px;
+  opacity: 0.8;
+}
+
 /* 移动端样式 - 屏幕宽度小于 768px */
 @media (max-width: 768px) {
   router-view {

src/components/customCourse/CustomCourse.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <!-- 课程分类页面 -->
+    <CustomCourseCategory 
+      v-if="currentView === 'category'" 
+      @navigate-to-detail="handleNavigateToDetail"
+    />
+    
+    <!-- 课程详情页面 -->
+    <CustomCourseDetail 
+      v-else-if="currentView === 'detail'"
+      :course-id="courseId"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import CustomCourseCategory from './CustomCourseCategory.vue'
+import CustomCourseDetail from './CustomCourseDetail.vue'
+
+const route = useRoute()
+
+// 当前视图
+const currentView = ref('category')
+
+// 当前课程ID
+const courseId = ref('')
+
+// 处理导航到详情页
+const handleNavigateToDetail = (id) => {
+  courseId.value = id
+  currentView.value = 'detail'
+}
+
+// 监听路由变化
+const handleRouteChange = () => {
+  if (route.query.courseId) {
+    courseId.value = route.query.courseId
+    currentView.value = 'detail'
+  } else {
+    currentView.value = 'category'
+  }
+}
+
+// 初始化
+onMounted(() => {
+  handleRouteChange()
+})
+
+// 监听路由变化
+watch(() => route.fullPath, () => {
+  handleRouteChange()
+})
+</script>
+
+<style scoped>
+/* 无需额外样式，使用子组件样式 */
+</style>

src/components/customCourse/CustomCourseDetail.vue

@@ -0,0 +1,1121 @@
+<template>
+  <!-- ======================================== -->
+  <!-- 网页端：完整布局 -->
+  <!-- ======================================== -->
+  <div class="home-container" @click="handlePageClick">
+    <!-- 网页端：展开收起侧边栏按钮 -->
+    <div
+      class="icon-expand"
+      :style="{
+        backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
+        left: drawerVisible ? '18%' : '0',
+      }"
+      @click="toggleDrawer"
+    >
+      <span
+        class="vertical-lines"
+        :style="{
+          color: drawerVisible ? '#8a78d0' : 'white'
+        }"
+        >||</span
+      >
+    </div>
+
+    <!-- 网页端：抽屉式侧边栏 -->
+    <el-drawer
+      v-model="drawerVisible"
+      direction="ltr"
+      size="18%"
+      :with-header="false"
+    >
+      <div class="drawer-box">
+        <el-row class="tac">
+          <el-col :span="12">
+            <span class="mb-2">
+              <img :src="classImages" alt="课程小节图标" />
+              课程小节
+            </span>
+            <el-menu
+              :default-active="currentChapterId"
+              @select="handleSelect"
+            >
+              <template v-for="(chapter, index) in chapters" :key="chapter.id">
+                <el-menu-item :index="chapter.id">
+                  {{ String(index + 1).padStart(2, '0') }}. {{ chapter.title }}
+                </el-menu-item>
+              </template>
+            </el-menu>
+          </el-col>
+        </el-row>
+      </div>
+    </el-drawer>
+
+    <!-- 网页端：内容区域 -->
+    <div class="content-box">
+      <div class="box-1">
+        <div class="inner-box left-box">
+          <div class="box-icon" @click="goBack">
+            <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
+            {{ courseInfo.title }}
+          </div>
+        </div>
+        <div class="inner-box right-box">
+          <div class="top-right-box">
+            <el-autocomplete
+              v-model="searchKeyword"
+              :fetch-suggestions="querySearch"
+              placeholder="搜索"
+              @select="handleSearchSelect"
+              class="search-input"
+              value-key="title"
+              :trigger-on-focus="false"
+            >
+              <template #prefix>
+                <el-icon class="el-input__icon"><Search /></el-icon>
+              </template>
+              <template #popper-append-to-body>
+                <el-option
+                  v-for="item in filteredTitles"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item"
+                ></el-option>
+              </template>
+            </el-autocomplete>
+          </div>
+        </div>
+      </div>
+
+      <div class="box-2">
+        <div class="small-title">
+          <span>{{ courseInfo.title }}</span>
+        </div>
+
+        <VideoPlayer
+          v-if="!isMobile && currentCourse && currentCourse.courseContentType === 'video'"
+          :key="'web-' + (currentCourse?.id || currentChapterId)"
+          :contentType="currentCourse.courseContentType"
+          :videoPath="currentCourse.courseVideoPath"
+          :courseId="currentCourse.id || ''"
+          :typeId="typeId"
+          :courseConfigList="currentCourse.courseConfigList || []"
+          :allIndices="chapterIds"
+          :currentIndex="currentChapterId"
+          :isFullscreen="isFullscreen"
+          @switchVideo="handleSelect"
+          @saveProgress="handleSaveProgress"
+          @fullscreenChange="handleFullscreenChange"
+        />
+
+        <div class="video-switch">
+          <div class="caret-left" @click="playPreviousVideo">
+            <el-button type="warning" round :disabled="chapterIds.indexOf(currentChapterId) === 0">
+              <img :src="leftImg" alt="Left" />上一节</el-button
+            >
+          </div>
+          <div class="caret-right" @click="playNextVideo">
+            <el-button type="warning" round :disabled="chapterIds.indexOf(currentChapterId) === chapterIds.length - 1"
+              >下一节<img :src="rightImg" alt="Right" />
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ======================================== -->
+  <!-- 手机端：完整布局 -->
+  <!-- ======================================== -->
+  <div class="mobile-container">
+    <!-- 手机端：顶部导航栏 - 悬浮在视频上方 -->
+    <div class="mobile-header" :class="{ 'header-hidden': headerHidden }">
+      <button class="mobile-back-btn" @click="goBack">
+        <el-icon><ArrowLeftBold /></el-icon>
+      </button>
+      <span class="mobile-header-title">{{ courseInfo.title }}</span>
+      <div class="mobile-header-placeholder"></div>
+    </div>
+
+    <!-- 手机端：视频播放区域 -->
+    <div class="mobile-video-area">
+      <!-- 手机端视频播放器 -->
+      <VideoPlayer
+        v-if="isMobile && currentCourse && currentCourse.courseContentType === 'video'"
+        :key="'mobile-' + (currentCourse?.id || currentChapterId)"
+        :contentType="currentCourse.courseContentType"
+        :videoPath="currentCourse.courseVideoPath"
+        :courseId="currentCourse.id || ''"
+        :typeId="typeId"
+        :courseConfigList="currentCourse.courseConfigList || []"
+        :allIndices="chapterIds"
+        :currentIndex="currentChapterId"
+        :isFullscreen="isFullscreen"
+        @switchVideo="handleSelect"
+        @saveProgress="handleSaveProgress"
+        @videoPlay="onVideoPlay"
+        @videoPause="onVideoPause"
+        @fullscreenChange="handleFullscreenChange"
+      />
+    </div>
+
+    <!-- 手机端：搜索框 -->
+    <div v-if="isMobile" class="mobile-search-container">
+      <el-input
+        v-model="searchKeyword"
+        placeholder="搜索课程内容..."
+        class="mobile-search-input"
+        clearable
+        @keyup.enter="handleSearchSubmit"
+      >
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+    </div>
+
+    <!-- 手机端：章节列表 -->
+    <div class="mobile-chapter-list">
+      <div
+        v-for="(chapter, index) in filteredTitles"
+        :key="chapter.id"
+        class="mobile-chapter-item"
+        :class="{ active: currentChapterId === chapter.id }"
+        @click="playChapter(chapter)"
+      >
+        <div class="mobile-chapter-info">
+          <div class="mobile-chapter-title-row">
+            <span class="mobile-chapter-number">{{ String(index + 1).padStart(2, '0') }}.</span>
+            <span class="mobile-chapter-title">{{ videoPathMap[chapter.id]?.courseName || ''  }}</span>
+          </div>
+          <div class="mobile-chapter-meta">
+            <span class="mobile-chapter-type">视频时长</span>
+            <span class="mobile-chapter-divider">|</span>
+            <span class="mobile-chapter-duration">{{ formatDuration(videoPathMap[chapter.id]?.courseTime || 0) }}</span>
+          </div>
+        </div>
+        <div class="mobile-chapter-play-icon">
+          <el-icon
+            v-if="currentChapterId === chapter.id && isPlaying"
+            class="playing-icon"
+          >
+            <div class="audio-wave">
+              <div class="wave-bar"></div>
+              <div class="wave-bar"></div>
+              <div class="wave-bar"></div>
+            </div>
+          </el-icon>
+          <el-icon
+            v-else
+            class="play-icon"
+          >
+            <CaretRight />
+          </el-icon>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import {
+  Lock,
+  Search,
+  ArrowLeftBold,
+  VideoPlay,
+  CaretRight,
+  Loading
+} from '@element-plus/icons-vue'
+import VideoPlayer from '@/components/videopage/VideoPlayer.vue'
+import leftImg from '@/assets/icon/backward.png'
+import rightImg from '@/assets/icon/f-backward.png'
+import classImages from '@/assets/icon/class.png'
+
+import { ClassType } from '@/api/class.js'
+import { Message } from '@/utils/message/Message.js'
+import { saveRecord } from '@/api/personalized/index.js'
+import { globalState } from '@/utils/globalState.js'
+
+const router = useRouter()
+const route = useRoute()
+
+const searchKeyword = ref('')
+const drawerVisible = ref(true)
+const currentChapterId = ref('')
+const isPlaying = ref(false)
+const isMobile = ref(false)
+const headerHidden = ref(false)
+
+const courseInfo = ref({
+  title: '',
+  subtitle: '',
+  coverImage: '',
+  progress: 0
+})
+
+// 跟踪是否处于全屏状态
+const isFullscreen = ref(false)
+
+const chapters = ref([])
+const videoPathMap = ref({})
+const gradeId = ref('')
+const typeId = ref('')
+const currentCourse = ref({})
+
+const chapterIds = computed(() => {
+  return chapters.value.map(c => c.id)
+})
+
+const filteredTitles = computed(() => {
+  if (!searchKeyword.value) {
+    return chapters.value
+  }
+  return chapters.value.filter(chapter =>
+    chapter.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
+  )
+})
+
+const querySearch = (queryString, cb) => {
+  const results = queryString
+    ? chapters.value.filter(item => item.title.toLowerCase().includes(queryString.toLowerCase()))
+    : chapters.value
+  cb(results)
+}
+
+const handleSaveProgress = async (type, progress) => {
+  if (!progress) return
+  const saveProgressData = {
+    brpNjId: gradeId.value,
+    brpType: type,
+    brpProgress: progress,
+    brpCtId: typeId.value,
+    brpCourseId: currentCourse.value.id
+  }
+  try {
+    await saveRecord(saveProgressData)
+  } catch (error) {
+    console.error('保存视频进度失败:', error)
+  }
+}
+
+const goBack = () => {
+  router.push('/ai-general-course')
+}
+
+const toggleDrawer = () => {
+  drawerVisible.value = !drawerVisible.value
+}
+
+const handleSelect = (index) => {
+  if (videoPathMap.value[index]) {
+    currentCourse.value = videoPathMap.value[index]
+    currentChapterId.value = index
+    drawerVisible.value = false
+  } else {
+    Message().notifyWarning('视频不存在！', true)
+  }
+}
+
+const handleSearchSelect = (item) => {
+  handleSelect(item.id)
+  searchKeyword.value = ''
+}
+
+const handleSearchSubmit = () => {
+  if (searchKeyword.value.trim()) {
+    // 可以在这里实现具体的搜索逻辑
+    console.log('搜索关键词:', searchKeyword.value)
+    // 例如：可以触发课程内容搜索、跳转到搜索结果页等
+    Message().success(`搜索: ${searchKeyword.value}`, true)
+  }
+}
+
+const playPreviousVideo = () => {
+  const currentIndex = chapterIds.value.indexOf(currentChapterId.value)
+  if (currentIndex > 0) {
+    handleSelect(chapterIds.value[currentIndex - 1])
+  }
+}
+
+const playNextVideo = () => {
+  const currentIndex = chapterIds.value.indexOf(currentChapterId.value)
+  if (currentIndex !== -1 && currentIndex < chapterIds.value.length - 1) {
+    handleSelect(chapterIds.value[currentIndex + 1])
+  }
+}
+
+const playChapter = (chapter) => {
+  handleSelect(chapter.id)
+  isPlaying.value = true
+}
+
+const togglePlay = () => {
+  isPlaying.value = !isPlaying.value
+}
+
+const onVideoPlay = () => {
+  isPlaying.value = true
+  // 视频播放时隐藏头部导航栏
+  headerHidden.value = true
+}
+
+const onVideoPause = () => {
+  isPlaying.value = false
+  // 视频暂停时显示头部导航栏
+  headerHidden.value = false
+}
+
+const handlePageClick = () => {}
+
+const formatDuration = (seconds) => {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins.toString().padStart(2, '0')}分${secs.toString().padStart(2, '0')}秒`
+}
+
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+}
+
+// 检测设备方向变化
+const handleOrientationChange = () => {
+  // 延迟执行以确保获取正确的尺寸
+  setTimeout(() => {
+    checkMobile()
+  }, 100)
+}
+
+onMounted(async () => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+  // 监听设备方向变化
+  window.addEventListener('orientationchange', handleOrientationChange)
+
+  const typeIdParam = history.state?.typeId || router.currentRoute.value.query.typeId
+  if (typeIdParam) {
+    typeId.value = typeIdParam
+    try {
+      const res = await ClassType(typeIdParam)
+      const processedData = res.data.map(course => {
+        if (course.courseConfigList && Array.isArray(course.courseConfigList)) {
+          const validConfigList = course.courseConfigList.filter(config =>
+            config.ccTime !== undefined && config.ccTime !== null && config.ccTime > 0
+          )
+          return {
+            ...course,
+            courseConfigList: validConfigList
+          }
+        }
+        return course
+      })
+
+      const videoCourses = processedData.filter(course => course.courseContentType === 'video')
+
+      videoCourses.forEach((course, index) => {
+        const menuIndex = String(index + 1).padStart(2, '0')
+        course.key = menuIndex
+        videoPathMap.value[menuIndex] = course
+
+        const menuItem = {
+          id: menuIndex,
+          key: menuIndex,
+          title: course.courseName
+        }
+        chapters.value.push(menuItem)
+
+        if (index === 0) {
+          currentCourse.value = course
+          currentChapterId.value = menuIndex
+        }
+      })
+    } catch (error) {
+      console.error('获取课程数据失败：', error)
+    }
+  }
+
+  const title = history.state?.typeName || router.currentRoute.value.query.typeName
+  if (title) {
+    courseInfo.value.title = String(title)
+  }
+
+  gradeId.value = globalState.initGradeId()
+})
+</script>
+
+<style scoped lang="scss">
+@use 'sass:math';
+
+@function rpx($px) {
+  @return math.div($px, 750) * 100vw;
+}
+
+/* ======================================== */
+/* 网页端样式 */
+/* ======================================== */
+.video-switch {
+  width: 100%;
+  display: flex;
+  margin-top: rpx(5);
+  margin-bottom: rpx(15);
+  justify-content: center;
+}
+
+.caret-right,
+.caret-left {
+  width: rpx(50);
+  margin: 0 rpx(20);
+  margin: auto;
+  display: flex;
+  justify-content: center;
+}
+
+.caret-left ::v-deep(.el-button.is-round),
+.caret-right ::v-deep(.el-button.is-round) {
+  width: rpx(50);
+  height: rpx(15);
+  color: white;
+  font-size: rpx(7);
+  border-radius: none;
+  border: 1px white solid;
+  background-color: rgba(255, 255, 255, 0.5);
+  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
+}
+
+.caret-right img,
+.caret-left img {
+  width: rpx(12);
+}
+
+.home-container ::v-deep(.el-drawer__body) {
+  width: rpx(135);
+  height: 100%;
+  position: relative;
+  background: linear-gradient(to bottom, #001169, #8a78d0);
+}
+
+.content-box {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(to bottom, #001169, #8a78d0);
+}
+
+.icon-expand {
+  width: rpx(8);
+  height: rpx(35);
+  border-top-right-radius: rpx(5);
+  border-bottom-right-radius: rpx(5);
+  z-index: 9999;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.icon-expand .vertical-lines {
+  color: #8a78d0;
+  font-size: rpx(10);
+}
+
+.home-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, #001169, #b4a8e1);
+  display: flex;
+}
+
+.el-row {
+  margin: auto;
+  margin-top: rpx(20);
+}
+
+.tac ::v-deep(.el-menu) {
+  background-color: transparent;
+  border: none;
+  width: 100%;
+  margin-top: rpx(8);
+}
+
+.tac ::v-deep(.el-menu-item.is-active),
+.tac ::v-deep(.el-sub-menu__title.is-active) {
+  color: white;
+}
+
+.tac ::v-deep(.el-sub-menu__title) {
+  width: rpx(130);
+  height: rpx(20);
+  margin-bottom: rpx(5);
+  border-radius: rpx(6);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.el-menu ::v-deep(.el-sub-menu__title:hover),
+.el-menu ::v-deep(.el-sub-menu__title:focus),
+.el-menu ::v-deep(.el-sub-menu__title:active) {
+  background: linear-gradient(to bottom, #fee78a, #ffce1b);
+  background-color: transparent;
+}
+
+::v-deep(.el-sub-menu__icon-arrow) {
+  color: white;
+  font-size: rpx(10);
+  margin-left: auto;
+  margin-top: rpx(-5);
+  display: block;
+  width: rpx(16);
+}
+
+.el-menu ::v-deep(.el-sub-menu__title:hover .el-sub-menu__icon-arrow) {
+  color: black;
+}
+
+.el-menu ::v-deep(.el-icon svg) {
+  font-size: rpx(9);
+}
+
+.mb-2 {
+  color: white;
+  font-size: rpx(9);
+}
+
+.mb-2 img {
+  width: rpx(10);
+  height: rpx(10);
+  vertical-align: middle;
+  margin-top: rpx(-2);
+}
+
+.el-menu-item {
+  width: rpx(100);
+  height: rpx(20);
+  margin-bottom: rpx(5);
+  border-radius: rpx(6);
+  color: white;
+  font-size: rpx(8);
+}
+
+.el-menu ::v-deep(.el-sub-menu__title) {
+  color: white;
+  width: rpx(100);
+  height: rpx(20);
+  margin-bottom: rpx(5);
+  font-size: rpx(8);
+}
+
+.el-menu ::v-deep(.el-sub-menu__title:hover),
+.el-menu ::v-deep(.el-sub-menu__title:focus),
+.el-menu ::v-deep(.el-sub-menu__title:active) {
+  background: linear-gradient(to bottom, #fee78a, #ffce1b);
+  color: black;
+}
+
+.el-menu ::v-deep(.el-menu-item:hover),
+.el-menu ::v-deep(.el-menu-item:focus),
+.el-menu ::v-deep(.el-menu-item:active) {
+  background: linear-gradient(to bottom, #fee78a, #ffce1b);
+  color: black;
+  font-size: rpx(8);
+  box-shadow: 0 4px 8px rgba(3, 3, 3, 0.3);
+}
+
+.el-menu .el-menu-item.is-active {
+  background: linear-gradient(to bottom, #fee78a, #ffce1b);
+  color: black;
+  font-size: rpx(8);
+  box-shadow: 0 4px 8px rgba(3, 3, 3, 0.3);
+}
+
+.drawer-box {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 80%;
+}
+
+.box-1 {
+  width: 100%;
+  margin-top: rpx(10);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: rpx(15);
+}
+
+.inner-box {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: rpx(16);
+}
+
+.left-box {
+  position: relative;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex: 1;
+  cursor: pointer;
+}
+
+.box-icon {
+  display: flex;
+  align-items: center;
+  gap: rpx(5);
+  padding: rpx(5) rpx(10);
+  background-color: rgba(255, 255, 255, 80%);
+  border-radius: rpx(30);
+  backdrop-filter: blur(10px);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: rpx(8);
+  color: #333;
+  font-weight: 900;
+  width: fit-content;
+  margin-left: rpx(15);
+}
+
+.box-icon:hover {
+  background-color: rgba(255, 255, 255, 90%);
+  transform: translateX(-3px);
+}
+
+.left-icon {
+  font-size: rpx(10);
+}
+
+.right-box {
+  flex: 1;
+  position: relative;
+}
+
+.top-right-box {
+  position: absolute;
+  margin-left: rpx(260);
+  width: rpx(100);
+  margin-right: rpx(20);
+  display: flex;
+  justify-content: flex-end;
+
+  ::v-deep(.el-input__wrapper) {
+    height: rpx(15);
+    font-size: rpx(6);
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: rpx(12);
+    border: white 1px solid;
+    color: white;
+  }
+  ::v-deep(.el-input__icon) {
+    color: white;
+  }
+  ::v-deep(.el-input__inner::placeholder) {
+    color: white;
+  }
+  ::v-deep(.el-input__inner) {
+    color: black;
+  }
+}
+
+.search-input {
+  width: rpx(100);
+  height: rpx(15);
+  font-size: rpx(7);
+}
+
+.box-2 {
+  width: 100%;
+  flex: 1;
+  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  align-content: center;
+  cursor: pointer;
+}
+
+.small-title {
+  width: 100%;
+  height: rpx(20);
+  color: white;
+  font-size: rpx(10);
+  justify-content: center;
+}
+
+/* ======================================== */
+/* 视频播放器显示控制 */
+/* ======================================== */
+.web-video-player {
+  display: block;
+}
+
+.mobile-video-player {
+  display: none;
+}
+
+/* ======================================== */
+/* 手机端全局重置 */
+/* ======================================== */
+@media screen and (max-width: 768px) {
+  :deep(body),
+  :deep(html) {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100vw !important;
+    min-width: 100vw !important;
+    max-width: 100vw !important;
+    overflow-x: hidden !important;
+    box-sizing: border-box !important;
+  }
+
+  :deep(.el-container),
+  :deep(.el-header),
+  :deep(.el-main),
+  :deep(.el-footer) {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100vw !important;
+    min-width: 100vw !important;
+    max-width: 100vw !important;
+    box-sizing: border-box !important;
+  }
+
+  :deep(#app),
+  :deep(.app-container),
+  :deep(.router-view),
+  :deep(.page-container) {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100vw !important;
+    min-width: 100vw !important;
+    max-width: 100vw !important;
+    box-sizing: border-box !important;
+  }
+
+  :deep(.video-container),
+  :deep(.video-wrapper),
+  :deep(.player-container) {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+  }
+}
+
+/* ======================================== */
+/* 手机端样式 */
+/* ======================================== */
+.mobile-container {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+  .web-video-player {
+    display: none;
+  }
+
+  .mobile-video-player {
+    display: block;
+  }
+  .mobile-container {
+    display: flex;
+    flex-direction: column;
+    width: 100% !important;
+    min-width: 100% !important;
+    max-width: 100% !important;
+    min-height: 100vh;
+    background: #f5f5f5;
+    padding: 0 !important;
+    margin: 0 !important;
+    box-sizing: border-box !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    overflow-y: auto !important;
+  }
+
+  .home-container {
+    display: none !important;
+  }
+
+  .mobile-header {
+    width: 100% !important;
+    height: 44px;
+    background: linear-gradient(135deg, #44449c80, #7F70C880); /* 半透明背景 */
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    box-sizing: border-box;
+    position: fixed; /* 固定定位，悬浮在顶部 */
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000; /* 提高层级确保在最顶层 */
+    transition: transform 0.3s ease; /* 添加过渡动画 */
+  }
+
+  .mobile-header.header-hidden {
+    transform: translateY(-100%); /* 向上隐藏 */
+  }
+
+  .mobile-back-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    border: none;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .mobile-header-title {
+    flex: 1;
+    text-align: center;
+    color: white;
+    font-size: 16px;
+    font-weight: 500;
+    padding: 0 40px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .mobile-header-placeholder {
+    width: 32px;
+    flex-shrink: 0;
+  }
+
+  .mobile-video-area {
+    width: 100% !important;
+    min-width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+    background: #000;
+    margin-top: 44px; /* 为固定在顶部的导航栏预留空间 */
+    position: relative;
+    padding: 0 !important;
+    margin: 0 !important;
+    box-sizing: border-box !important;
+    flex-shrink: 0;
+    border-radius: 0 !important;
+    overflow: hidden;
+  }
+
+  /* 手机端搜索框容器 */
+  .mobile-search-container {
+    width: 100%;
+    padding: rpx(16);
+    background: #f5f5f5;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+
+  .mobile-search-input {
+    width: 100%;
+    height: rpx(64);
+  }
+
+  .mobile-search-input :deep(.el-input__wrapper) {
+    border-radius: rpx(32);
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    border: none;
+    box-shadow: none;
+  }
+
+  .mobile-search-input :deep(.el-input__inner) {
+    height: 100%;
+    line-height: rpx(64);
+    font-size: rpx(28);
+    color: #999;
+  }
+
+  /* 手机端视频播放器去圆角 */
+  @media screen and (max-width: 768px) {
+    .mobile-video-area :deep(.d-player-wrap),
+    .mobile-video-area :deep(.full-box-video),
+    .mobile-video-area :deep(.ppt-container) {
+      border-radius: 0 !important;
+    }
+  }
+
+  .mobile-video-area :deep(*) {
+    width: 100% !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    object-fit: cover !important;
+    border-radius: 0 !important;
+  }
+
+  .mobile-chapter-list {
+    flex: 1;
+    padding: 0;
+    background: #fff;
+    margin-top: rpx(10); /* 与视频信息区域分开 */
+  }
+
+  .mobile-chapter-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid #f0f0f0;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    background: #fff;
+  }
+
+  .mobile-chapter-item:last-child {
+    border-bottom: none;
+  }
+
+  .mobile-chapter-item.active {
+    background: #fff;
+  }
+
+  .mobile-chapter-item.locked {
+    opacity: 0.6;
+  }
+
+  .mobile-chapter-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .mobile-chapter-title-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .mobile-chapter-number {
+    font-size: 15px;
+    font-weight: 600;
+    color: #333;
+    flex-shrink: 0;
+  }
+
+  .mobile-chapter-title {
+    font-size: 15px;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.4;
+  }
+
+  .mobile-chapter-meta {
+    font-size: 12px;
+    color: #999;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-left: 28px;
+  }
+
+  .mobile-chapter-type {
+    color: #999;
+  }
+
+  .mobile-chapter-divider {
+    color: #ddd;
+  }
+
+  .mobile-chapter-duration {
+    color: #999;
+  }
+
+  .mobile-chapter-play-icon {
+    flex-shrink: 0;
+    margin-left: 12px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mobile-chapter-play-icon .el-icon {
+    font-size: 20px;
+    color: #409EFF;
+  }
+
+  .mobile-chapter-play-icon .playing-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .audio-wave {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    height: 20px;
+  }
+
+  .wave-bar {
+    width: 2px;
+    height: 8px;
+    background-color: #409EFF;
+    border-radius: 1px;
+    animation: wave-animation 1.2s ease-in-out infinite;
+  }
+
+  .wave-bar:nth-child(1) {
+    animation-delay: 0s;
+  }
+
+  .wave-bar:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .wave-bar:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes wave-animation {
+    0%, 100% {
+      transform: scaleY(1);
+      opacity: 0.7;
+    }
+    50% {
+      transform: scaleY(1.8);
+      opacity: 1;
+    }
+  }
+
+  .mobile-chapter-action {
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mobile-lock-icon {
+    color: #ccc;
+    font-size: 16px;
+  }
+}
+</style>

src/components/videopage/VideoPlayer.vue

@@ -286,11 +286,13 @@ const closeHistoryTip = () => {
 // 处理视频暂停事件
 const handleVideoPause = () => {
   isVideoPaused.value = true
+  emits('videoPause')  // 触发暂停事件
 }
 
 // 处理视频播放事件
 const handleVideoPlay = () => {
   isVideoPaused.value = false
+  emits('videoPlay')  // 触发播放事件
 }
 
 // 处理视频点击事件

src/router/index.js

@@ -105,11 +105,16 @@ const routes = [
     path: '/ai-questions',
     component: () => import('../views/AIPage/AIQuestions.vue')
   },
-  // 发展历程
+  // 通识课
   {
     path: '/ai-develop',
     component: () => import('../views/AIPage/AIDevelop.vue')
   },
+  // 郝哥新课程
+  {
+    path: '/custom-course-detail',
+    component: () => import('../components/customCourse/CustomCourseDetail.vue')
+  },
   // 虚拟实验室
   {
     path: '/virtual-laboratory',
@@ -194,6 +199,7 @@ const homeRoutes = {
     '/smartHome',
     '/smartDeskLamp',
     '/ai-poetry',
+    '/custom-course-detail',
   ]
 }
 

src/styles/customCourse.css

@@ -0,0 +1,475 @@
+/* ============================================ */
+/* 自定义课程组件样式 */
+/* ============================================ */
+
+/* -------------------------- */
+/* 基础重置 */
+/* -------------------------- */
+
+.custom-course-container {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* -------------------------- */
+/* 网页端样式 (桌面端) */
+/* -------------------------- */
+
+@media screen and (min-width: 769px) {
+  .custom-course-container {
+    width: 100%;
+    min-height: 100vh;
+    background-color: #f5f5f5;
+    padding: 20px;
+  }
+
+  /* 视频播放区域 - 网页端隐藏 */
+  .custom-course-video-container {
+    display: none !important;
+  }
+
+  /* 课程详情页 - 网页端头部 */
+  .custom-course-detail-header {
+    background: linear-gradient(135deg, #44449c, #7F70C8);
+    padding: 30px;
+    color: white;
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    border-radius: 12px;
+    margin-bottom: 16px;
+  }
+
+  .custom-course-detail-cover {
+    width: 180px;
+    height: 120px;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  }
+
+  .custom-course-detail-cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .custom-course-detail-info {
+    flex: 1;
+  }
+
+  .custom-course-detail-title {
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 8px;
+  }
+
+  .custom-course-detail-subtitle {
+    font-size: 14px;
+    opacity: 0.8;
+    margin-bottom: 16px;
+  }
+
+  .custom-course-detail-progress {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .custom-course-detail-progress-bar {
+    flex: 1;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .custom-course-detail-progress-fill {
+    height: 100%;
+    background: white;
+    border-radius: 4px;
+  }
+
+  .custom-course-detail-progress-text {
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .custom-course-detail-toolbar {
+    display: flex;
+    gap: 16px;
+    padding: 16px 20px;
+    background: white;
+    border-radius: 12px;
+    margin-bottom: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  }
+
+  .custom-course-search-box {
+    flex: 1;
+    position: relative;
+  }
+
+  .custom-course-search-box input {
+    width: 100%;
+    padding: 10px 40px;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    font-size: 14px;
+  }
+
+  .custom-course-search-box .search-icon {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #999;
+  }
+
+  .custom-course-sort-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    background: #f5f5f5;
+    border-radius: 20px;
+    cursor: pointer;
+    border: none;
+    font-size: 14px;
+  }
+
+  .custom-course-chapter-list {
+    max-width: 100%;
+    margin: 0;
+  }
+
+  .custom-course-chapter-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 20px;
+    background: white;
+    border-radius: 12px;
+    margin-bottom: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    cursor: pointer;
+    transition: box-shadow 0.2s ease;
+  }
+
+  .custom-course-chapter-item:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  }
+
+  .custom-course-chapter-lock {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ddd;
+    font-size: 20px;
+    flex-shrink: 0;
+  }
+
+  .custom-course-chapter-lock.locked {
+    color: #999;
+  }
+
+  .custom-course-chapter-lock.unlocked {
+    color: #4CAF50;
+  }
+
+  .custom-course-chapter-info {
+    flex: 1;
+    padding-left: 16px;
+  }
+
+  .custom-course-chapter-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+  }
+
+  .custom-course-chapter-desc {
+    font-size: 13px;
+    color: #999;
+    margin-bottom: 8px;
+    line-height: 1.5;
+  }
+
+  .custom-course-chapter-meta {
+    font-size: 13px;
+    color: #999;
+    display: flex;
+    gap: 12px;
+  }
+
+  .custom-course-chapter-duration {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+}
+
+/* -------------------------- */
+/* 手机端样式 */
+/* -------------------------- */
+
+@media screen and (max-width: 768px) {
+  .custom-course-container {
+    width: 100%;
+    min-height: 100vh;
+    background: #ffffff;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* 视频播放区域 - 手机端显示 */
+  .custom-course-video-container {
+    display: block !important;
+    width: 100%;
+    background: #000;
+    position: relative;
+  }
+
+  /* 视频头部工具栏 */
+  .custom-course-video-header {
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.8);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+  }
+
+  .custom-course-back-btn {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 18px;
+  }
+
+  .custom-course-video-title {
+    flex: 1;
+    text-align: center;
+    color: white;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 0 40px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .custom-course-video-controls {
+    display: flex;
+    gap: 8px;
+  }
+
+  .custom-course-control-btn {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 18px;
+  }
+
+  /* 视频播放区域 */
+  .custom-course-video-wrapper {
+    width: 100%;
+    height: 220px;
+    position: relative;
+  }
+
+  .custom-course-video-placeholder {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #44449c, #7F70C8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .custom-course-play-icon {
+    width: 60px;
+    height: 60px;
+    color: white;
+    opacity: 0.9;
+  }
+
+  /* 课程详情页头部 - 手机端隐藏 */
+  .custom-course-detail-header {
+    display: none !important;
+  }
+
+  /* 工具栏 */
+  .custom-course-detail-toolbar {
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    gap: 12px;
+    border-bottom: 1px solid #eee;
+    background: white;
+  }
+
+  .custom-course-search-box {
+    position: relative;
+  }
+
+  .custom-course-search-box input {
+    width: 100%;
+    padding: 12px 40px;
+    border: 1px solid #ddd;
+    border-radius: 25px;
+    font-size: 14px;
+    box-sizing: border-box;
+  }
+
+  .custom-course-search-box .search-icon {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #999;
+  }
+
+  .custom-course-sort-btn {
+    padding: 12px;
+    border-radius: 25px;
+    justify-content: center;
+    background: #f5f5f5;
+    border: none;
+    font-size: 14px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 章节列表 */
+  .custom-course-chapter-list {
+    margin: 0;
+    padding: 12px;
+    background: #f8f8f8;
+  }
+
+  .custom-course-chapter-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 16px;
+    background: white;
+    border-radius: 16px;
+    margin-bottom: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    cursor: pointer;
+  }
+
+  .custom-course-chapter-lock {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+
+  .custom-course-chapter-lock.locked {
+    color: #ccc;
+  }
+
+  .custom-course-chapter-lock.unlocked {
+    color: #4CAF50;
+  }
+
+  .custom-course-chapter-info {
+    flex: 1;
+    padding-left: 12px;
+  }
+
+  .custom-course-chapter-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 6px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .custom-course-chapter-desc {
+    font-size: 12px;
+    color: #999;
+    margin-bottom: 6px;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .custom-course-chapter-meta {
+    font-size: 12px;
+    color: #999;
+    gap: 10px;
+    display: flex;
+    align-items: center;
+  }
+
+  .custom-course-chapter-duration {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+}
+
+/* -------------------------- */
+/* 空状态样式 */
+/* -------------------------- */
+
+.custom-course-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.custom-course-empty-icon {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  font-size: 40px;
+  color: #ccc;
+}
+
+.custom-course-empty-text {
+  font-size: 16px;
+  color: #999;
+  margin-bottom: 20px;
+}

src/styles/customCourseList.css

@@ -0,0 +1,138 @@
+/* ============================================ */
+/* 新课程列表样式 */
+/* 包含电脑端和移动端适配 */
+/* ============================================ */
+
+/* -------------------------- */
+/* 默认状态（电脑端） */
+/* -------------------------- */
+
+/* 默认隐藏移动端容器 */
+.custom-mobile-container {
+  display: none !important;
+}
+
+/* 默认显示电脑端课程项 */
+.custom-course-item {
+  display: flex !important;
+}
+
+/* -------------------------- */
+/* 移动端样式（≤768px） */
+/* -------------------------- */
+
+@media screen and (max-width: 768px) {
+  /* 隐藏电脑端课程项 */
+  .custom-course-item {
+    display: none !important;
+  }
+  
+  /* 显示移动端容器 */
+  .custom-mobile-container {
+    display: block !important;
+    width: 100%;
+    max-width: 100vw; /* 最大宽度不超过视口宽度 */
+    padding: 8px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  
+  /* 移动端课程项 */
+  .custom-mobile-item {
+    display: flex;
+    align-items: center;
+    background: #fff;
+    border-radius: 12px;
+    padding: 10px;
+    margin-bottom: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    cursor: pointer;
+    transition: box-shadow 0.2s ease;
+    box-sizing: border-box;
+    overflow: hidden;
+    width: 100%;
+    max-width: 100%;
+  }
+  
+  .custom-mobile-item:active {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  }
+  
+  /* 左侧图片 */
+  .custom-mobile-image {
+    width: 80px;
+    height: 60px;
+    border-radius: 8px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  
+  .custom-mobile-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  /* 中间内容 */
+  .custom-mobile-content {
+    flex: 1;
+    padding: 0 12px 0 16px; /* 增加左边距，距离图片更远 */
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    max-width: calc(100% - 130px); /* 减去图片和三点按钮的宽度 */
+    align-items: flex-start; /* 居左显示 */
+  }
+  
+  .custom-mobile-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+  }
+  
+  .custom-mobile-index {
+    margin-right: 6px;
+    color: #999;
+    font-weight: normal;
+  }
+  
+  .custom-mobile-desc {
+    font-size: 12px;
+    color: #999;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  /* 右侧三点按钮 */
+  .custom-mobile-more {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ccc;
+    font-size: 18px;
+  }
+}
+
+/* -------------------------- */
+/* 电脑端样式（>768px） */
+/* -------------------------- */
+
+@media screen and (min-width: 769px) {
+  /* 确保移动端容器隐藏 */
+  .custom-mobile-container {
+    display: none !important;
+  }
+  
+  /* 确保电脑端课程项显示 */
+  .custom-course-item {
+    display: flex !important;
+  }
+}

src/views/AIPage/AIGeneralCourse.vue

@@ -23,7 +23,7 @@
       </div>
 
       <transition name="drawer-slide">
-        <div class="main-content" v-if="drawerVisible">
+        <div class="main-content" :class="{ 'hidden': !drawerVisible }" v-if="drawerVisible">
           <!-- 菜单栏 -->
           <div class="drawer-box">
             <el-row class="tac">
@@ -127,10 +127,62 @@
         <SelfDirectedLearning v-if="currentOpenedMenu === menuConfigTemp[3].id"
                               @refreshData="refreshData" />
 
+        <!-- 新课程分类 - 与其他课程保持一致的样式 -->
+        <template v-else-if="currentOpenedMenu === '/custom'">
+          <!-- 电脑端样式：与原课程相同的布局结构 -->
+          <div
+              class="small-box custom-course-item"
+              v-for="(course, index) in currentCourseData"
+              :key="course.id"
+          >
+            <div
+                class="nested-box"
+                :style="{
+                backgroundImage: `url(${course.ctTypeImage})`,
+                backgroundSize: 'cover'
+              }"
+                @click="goToCustomCourse(course)"
+            ></div>
+            <div class="additional-text">
+              {{ course.ctTypeSort }} {{ course.ctType }}
+            </div>
+          </div>
+
+          <!-- 移动端样式 -->
+          <div class="custom-mobile-container">
+            <div
+                class="custom-mobile-item"
+                v-for="(course, index) in currentCourseData"
+                :key="course.id"
+                @click="goToCustomCourse(course)"
+            >
+              <!-- 左侧图片 -->
+              <div class="custom-mobile-image">
+                <img :src="course.ctTypeImage" :alt="course.title" />
+              </div>
+              <!-- 右侧内容 -->
+              <div class="custom-mobile-content">
+                <div class="custom-mobile-title">
+                  <span class="custom-mobile-index">{{ course.ctTypeSort }}</span>
+                  {{ course.ctType }}
+                </div>
+                <div class="custom-mobile-desc">{{ course.ctTypeDescribe || '' }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 空状态 -->
+          <div v-if="currentCourseData.length === 0" class="empty-state" style="width: 100%; text-align: center; padding: 40px;">
+            <p>暂无课程</p>
+          </div>
+        </template>
+
+        <!-- 其他课程类型的默认显示 -->
         <div
             class="small-box"
             v-for="(outlineData, index) in currentCourseData"
             :key="index"
+            v-else
         >
           <div
               class="nested-box"
@@ -173,12 +225,14 @@ import SelfDirectedLearning from '@/components/study/SelfDirectedLearning.vue'
 import DialogContent from "@/views/AIPage/aiGenerate/DialogContent.vue";
 import {teacherList} from "@/api/teachers.js";
 import { CONFIG } from '@/utils/roleUtils.js'
+import '@/styles/customCourseList.css'
 
 
 const router = useRouter() // 获取当前路由对象
 // 下拉菜单选中项
 const selectedGrade = ref('')
 // 抽屉显示状态
+const isMobile = ref(false)
 const drawerVisible = ref(true)
 // 下拉框可见性状态
 const dropdownVisible = ref(false)
@@ -192,6 +246,9 @@ const handleVisibleChange = (visible) => {
 const generalCourseData = ref([])
 const practicalCourseData = ref([])
 const aiCourseData = ref([])
+
+// 新课程列表数据（模拟数据）
+const customCourseList = ref([])
 const selfStudyCourseData = ref([])
 
 // 菜单配置
@@ -199,7 +256,9 @@ const menuConfigTemp = [
   { id: '/general', title: 'AI通识课', type: '1', data: generalCourseData },
   { id: '/practical', title: 'AI实操课', type: '2', data: practicalCourseData },
   { id: '/poetry', title: 'AI古诗词', type: '3', data: aiCourseData },
-  { id: '/selfstudy', title: 'AI自主学习', type: '4', data: selfStudyCourseData }
+  { id: '/selfstudy', title: 'AI自主学习', type: '4', data: selfStudyCourseData },
+  // 自定义课程分类（独立数据处理）
+  { id: '/custom', title: '新课程', type: '5', data: ref([]), isCustom: true }
 ]
 
 
@@ -221,7 +280,10 @@ const menuList = computed(() => {
 const roleRouteMenuSet = computed(() => {
   try {
     const roleRouteMenuStr = localStorage.getItem(CONFIG.USER_ROLE_ROUTE_MENU_KEY)
-    return roleRouteMenuStr ? JSON.parse(roleRouteMenuStr) : []
+    const roleRouteMenu = JSON.parse(roleRouteMenuStr)
+    roleRouteMenu.push('/custom')
+    return roleRouteMenu
+    // return roleRouteMenuStr ? JSON.parse(roleRouteMenuStr) : []
   } catch (error) {
     console.error('Error parsing roleRouteMenuSet:', error)
     return []
@@ -314,6 +376,16 @@ const handleGradeSelect = command => {
     })
   }
 }
+// 检测是否为移动设备
+const checkIsMobile = () => {
+  if (typeof window !== 'undefined') {
+    // 使用多种方式检测移动设备
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+        window.innerWidth <= 768; // 或者使用屏幕宽度作为判断标准
+  }
+  return false;
+}
+
 // 切换抽屉显示状态的函数
 const toggleDrawer = () => {
   drawerVisible.value = !drawerVisible.value
@@ -358,6 +430,13 @@ const getCourseTitle = index => {
 // 首页点击渲染后的页面title
 const pageTitle = ref('返回首页')
 onMounted(() => {
+  // 检测是否为移动设备
+  isMobile.value = checkIsMobile();
+  // 在移动端自动收起菜单
+  if (isMobile.value) {
+    drawerVisible.value = false;
+  }
+
   //加载所有数据
   fetchCtTypes()
 
@@ -457,6 +536,24 @@ const goToAIExperience = outlineData => {
     state: { typeId: outlineData.id, typeName: outlineData.ctType, typeSort: outlineData.ctTypeSort }
   })
 }
+
+// 新课程跳转方法
+const goToCustomCourse = (outlineData) => {
+  const menuId = currentOpenedMenu.value
+  const menu = menuConfig.value.find(m => m.id === menuId)
+  const currentData = menu ? menu.data.value : []
+  const index = currentData.findIndex(item => item.id === outlineData.id)
+
+  if (index !== -1) {
+    const menuIndex = menuId + '-' + (index + 1)
+    saveActiveState(menuId, menuIndex)
+  }
+
+  router.push({
+    path: '/custom-course-detail',
+    state: { typeId: outlineData.id, typeName: outlineData.ctType, typeSort: outlineData.ctTypeSort }
+  })
+}
 </script>
 
 <style scoped lang="scss">
@@ -856,7 +953,7 @@ const goToAIExperience = outlineData => {
   display: flex; // 确保子元素水平排列
   flex-wrap: wrap; // 允许子元素换行;
   cursor: pointer; // 添加鼠标指针样式
-  // margin: rpx(10) 0; 
+  // margin: rpx(10) 0;
   overflow-y: auto;
 }
 // Chrome、Edge等浏览器的滚动条样式
@@ -903,6 +1000,8 @@ const goToAIExperience = outlineData => {
   margin-bottom: rpx(4);
   font-size: rpx(8);
 }
+
+
 </style>
 
 <style lang="scss">
@@ -947,4 +1046,4 @@ const goToAIExperience = outlineData => {
           #ffcc00
   );
 }
-</style>
+</style>