移出桌面端适配，优先考虑手机端适配

src/components/customCourse/CustomCourseDetail.vue

@@ -1,132 +1,8 @@
 <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-container" :class="{ 'fullscreen-active': isFullscreen }">
     <!-- 手机端：顶部导航栏 - 悬浮在视频上方 -->
     <div class="mobile-header" :class="{ 'header-hidden': headerHidden }">
       <button class="mobile-back-btn" @click="goBack">
@@ -140,7 +16,7 @@
     <div class="mobile-video-area">
       <!-- 手机端视频播放器 -->
       <VideoPlayer
-        v-if="isMobile && currentCourse && currentCourse.courseContentType === 'video'"
+        v-if="currentCourse && currentCourse.courseContentType === 'video'"
         :key="'mobile-' + (currentCourse?.id || currentChapterId)"
         :contentType="currentCourse.courseContentType"
         :videoPath="currentCourse.courseVideoPath"
@@ -159,7 +35,7 @@
     </div>
 
     <!-- 手机端：搜索框 -->
-    <div v-if="isMobile" class="mobile-search-container">
+    <div class="mobile-search-container">
       <el-input
         v-model="searchKeyword"
         placeholder="搜索课程内容..."
@@ -220,16 +96,11 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import {
-  Lock,
   Search,
   ArrowLeftBold,
-  VideoPlay,
-  CaretRight,
-  Loading
+  CaretRight
 } 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'
@@ -241,10 +112,10 @@ 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 isMobile = ref(true)
 const headerHidden = ref(false)
 
 const courseInfo = ref({
@@ -303,15 +174,10 @@ 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)
   }
@@ -374,24 +240,11 @@ const formatDuration = (seconds) => {
   return `${mins.toString().padStart(2, '0')}分${secs.toString().padStart(2, '0')}秒`
 }
 
-const checkMobile = () => {
-  isMobile.value = window.innerWidth <= 768
-}
-
-// 检测设备方向变化
-const handleOrientationChange = () => {
-  // 延迟执行以确保获取正确的尺寸
-  setTimeout(() => {
-    checkMobile()
-  }, 100)
+const handleFullscreenChange = (isFullscreenNow) => {
+  isFullscreen.value = isFullscreenNow
 }
 
 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
@@ -451,671 +304,309 @@ onMounted(async () => {
 }
 
 /* ======================================== */
-/* 网页端样式 */
+/* 手机端样式 */
 /* ======================================== */
-.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;
+.mobile-container {
   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);
+  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;
+}
+
+.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; /* 添加过渡动画 */
 }
 
-.content-box {
-  flex: 1;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(to bottom, #001169, #8a78d0);
+.mobile-header.header-hidden {
+  transform: translateY(-100%); /* 向上隐藏 */
 }
 
-.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%);
+.mobile-back-btn {
+  width: 32px;
+  height: 32px;
   display: flex;
-  justify-content: center;
   align-items: center;
-  transition: all 0.3s ease;
+  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;
 }
 
-.icon-expand .vertical-lines {
-  color: #8a78d0;
-  font-size: rpx(10);
+.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;
 }
 
-.home-container {
+.mobile-container.fullscreen-active .mobile-video-area {
   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);
+  z-index: 9999;
+  margin-top: 0;
 }
 
-.tac ::v-deep(.el-menu) {
-  background-color: transparent;
-  border: none;
-  width: 100%;
-  margin-top: rpx(8);
+.mobile-container.fullscreen-active .mobile-header {
+  z-index: 10000;
 }
 
-.tac ::v-deep(.el-menu-item.is-active),
-.tac ::v-deep(.el-sub-menu__title.is-active) {
-  color: white;
+.mobile-container.fullscreen-active .mobile-search-container,
+.mobile-container.fullscreen-active .mobile-chapter-list {
+  display: none;
 }
 
-.tac ::v-deep(.el-sub-menu__title) {
-  width: rpx(130);
-  height: rpx(20);
-  margin-bottom: rpx(5);
-  border-radius: rpx(6);
+/* 手机端搜索框容器 */
+.mobile-search-container {
+  width: 100%;
+  padding: rpx(16);
+  background: #f5f5f5;
+  box-sizing: border-box;
   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);
+.mobile-search-input {
+  width: 100%;
+  height: rpx(64);
 }
 
-.el-menu ::v-deep(.el-sub-menu__title:hover .el-sub-menu__icon-arrow) {
-  color: black;
+.mobile-search-input :deep(.el-input__wrapper) {
+  border-radius: rpx(32);
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  border: none;
+  box-shadow: none;
 }
 
-.el-menu ::v-deep(.el-icon svg) {
-  font-size: rpx(9);
+.mobile-search-input :deep(.el-input__inner) {
+  height: 100%;
+  line-height: rpx(64);
+  font-size: rpx(28);
+  color: #999;
 }
 
-.mb-2 {
-  color: white;
-  font-size: rpx(9);
+/* 手机端视频播放器去圆角 */
+.mobile-video-area :deep(.d-player-wrap),
+.mobile-video-area :deep(.full-box-video),
+.mobile-video-area :deep(.ppt-container) {
+  border-radius: 0 !important;
 }
 
-.mb-2 img {
-  width: rpx(10);
-  height: rpx(10);
-  vertical-align: middle;
-  margin-top: rpx(-2);
+.mobile-video-area :deep(*) {
+  width: 100% !important;
+  height: 100% !important;
+  max-height: 100% !important;
+  object-fit: cover !important;
+  border-radius: 0 !important;
 }
 
-.el-menu-item {
-  width: rpx(100);
-  height: rpx(20);
-  margin-bottom: rpx(5);
-  border-radius: rpx(6);
-  color: white;
-  font-size: rpx(8);
+.mobile-chapter-list {
+  flex: 1;
+  padding: 0;
+  background: #fff;
+  margin-top: rpx(10); /* 与视频信息区域分开 */
 }
 
-.el-menu ::v-deep(.el-sub-menu__title) {
-  color: white;
-  width: rpx(100);
-  height: rpx(20);
-  margin-bottom: rpx(5);
-  font-size: rpx(8);
+.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;
 }
 
-.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;
+.mobile-chapter-item:last-child {
+  border-bottom: none;
 }
 
-.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);
+.mobile-chapter-item.active {
+  background: #fff;
 }
 
-.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);
+.mobile-chapter-item.locked {
+  opacity: 0.6;
 }
 
-.drawer-box {
-  position: absolute;
+.mobile-chapter-info {
+  flex: 1;
   display: flex;
-  align-items: center;
-  height: 100%;
-  width: 80%;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.box-1 {
-  width: 100%;
-  margin-top: rpx(10);
+.mobile-chapter-title-row {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  font-size: rpx(15);
+  align-items: flex-start;
+  gap: 6px;
 }
 
-.inner-box {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: rpx(16);
+.mobile-chapter-number {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+  flex-shrink: 0;
 }
 
-.left-box {
-  position: relative;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex: 1;
-  cursor: pointer;
+.mobile-chapter-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: #333;
+  line-height: 1.4;
 }
 
-.box-icon {
+.mobile-chapter-meta {
+  font-size: 12px;
+  color: #999;
   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);
+  gap: 8px;
+  padding-left: 28px;
 }
 
-.box-icon:hover {
-  background-color: rgba(255, 255, 255, 90%);
-  transform: translateX(-3px);
+.mobile-chapter-type {
+  color: #999;
 }
 
-.left-icon {
-  font-size: rpx(10);
+.mobile-chapter-divider {
+  color: #ddd;
 }
 
-.right-box {
-  flex: 1;
-  position: relative;
+.mobile-chapter-duration {
+  color: #999;
 }
 
-.top-right-box {
-  position: absolute;
-  margin-left: rpx(260);
-  width: rpx(100);
-  margin-right: rpx(20);
+.mobile-chapter-play-icon {
+  flex-shrink: 0;
+  margin-left: 12px;
+  width: 24px;
+  height: 24px;
   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;
-  }
+  align-items: center;
+  justify-content: center;
 }
 
-.search-input {
-  width: rpx(100);
-  height: rpx(15);
-  font-size: rpx(7);
+.mobile-chapter-play-icon .el-icon {
+  font-size: 20px;
+  color: #409EFF;
 }
 
-.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;
+.mobile-chapter-play-icon .playing-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.small-title {
-  width: 100%;
-  height: rpx(20);
-  color: white;
-  font-size: rpx(10);
+.audio-wave {
+  display: flex;
+  align-items: center;
   justify-content: center;
+  gap: 2px;
+  height: 20px;
 }
 
-/* ======================================== */
-/* 视频播放器显示控制 */
-/* ======================================== */
-.web-video-player {
-  display: block;
+.wave-bar {
+  width: 2px;
+  height: 8px;
+  background-color: #409EFF;
+  border-radius: 1px;
+  animation: wave-animation 1.2s ease-in-out infinite;
 }
 
-.mobile-video-player {
-  display: none;
+.wave-bar:nth-child(1) {
+  animation-delay: 0s;
 }
 
-/* ======================================== */
-/* 手机端全局重置 */
-/* ======================================== */
-@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;
-  }
+.wave-bar:nth-child(2) {
+  animation-delay: 0.2s;
 }
 
-/* ======================================== */
-/* 手机端样式 */
-/* ======================================== */
-.mobile-container {
-  display: none;
+.wave-bar:nth-child(3) {
+  animation-delay: 0.4s;
 }
 
-@media screen and (max-width: 768px) {
-  .web-video-player {
-    display: none;
+@keyframes wave-animation {
+  0%, 100% {
+    transform: scaleY(1);
+    opacity: 0.7;
   }
-
-  .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;
-    }
+  50% {
+    transform: scaleY(1.8);
+    opacity: 1;
   }
+}
 
-  .mobile-chapter-action {
-    width: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+.mobile-chapter-action {
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  .mobile-lock-icon {
-    color: #ccc;
-    font-size: 16px;
-  }
+.mobile-lock-icon {
+  color: #ccc;
+  font-size: 16px;
 }
 </style>