PPT按钮及翻页样式

src/components/videopage/VideoPlayer.vue

@@ -22,8 +22,17 @@
       <!-- PPT -->
        <template v-else-if="contentType === 'ppt' || contentType === 'pptx'">
           <div class="ppt-box">
-            <VueOfficePptx class="ppt-container" :src="pptPath" @error="handlePptError" @rendered="handlePptRendered" />
+            <VueOfficePptx class="ppt-container"  :src="pptPath" @error="handlePptError" @rendered="handlePptRendered" />
+            <!-- PPT页码显示 -->
+            <div class="ppt-page-info">
+              {{ currentPage }}/{{ totalPages }}
+            </div>
           </div>
+          <!-- PPT翻页按钮 -->
+            <div class="ppt-navigation">
+              <button @click="prevPage"  class="ppt-btn ppt-prev-btn">上一页</button>
+              <button @click="nextPage" class="ppt-btn ppt-next-btn">下一页</button>
+            </div>
        </template>
     </div>
 
@@ -98,6 +107,9 @@ const lastPlayProgress = ref(0)
 // 定义进度数组
 const targetProgresses = [10, 50, 100]
 
+const totalPages = ref(1)
+const currentPage = ref(1)
+
 // 定义节流函数
 const throttle = (fn, delay) => {
   let lastCall = 0
@@ -203,14 +215,34 @@ const handleVideoEnded = () => {
 }
 
 // 处理PPT渲染完成事件
-const handlePptRendered = () => {
-  console.log('PPT渲染完成')
-}
+const handlePptRendered = (pptInfo) => {
+  console.log('PPT渲染完成');
+  // 增强的页数检测逻辑
+  const pageCount = pptInfo?.slides?.length ||
+    pptInfo?.pageCount ||
+    pptInfo?.totalSlides ||
+    (pptInfo?.slideCount ? parseInt(pptInfo.slideCount) : 1);
+    totalPages.value = pageCount;
+  // 确保当前页在有效范围内
+  if (currentPage.value > pageCount) {
+    currentPage.value = pageCount;
+  }
+  console.log('PPT总页数:', pageCount, '当前页:', currentPage.value);
+} 
 // PPT错误处理事件
 const handlePptError = (error) => {
   console.error('PPT加载错误:', error)
   ElMessage.error('PPT加载失败，请检查文件路径或格式')
 }
+// 上一页
+const prevPage = () =>{
+  console.log('上一页'); 
+}
+// 下一页
+const nextPage = () =>{
+  console.log('下一页');
+}
+
 
 // 播放下一个视频
 const playNextVideo = () => {
@@ -371,6 +403,19 @@ onBeforeUnmount(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+}
+.ppt-page-info {
+  position: absolute;
+  bottom: rpx(10); // 距离底部10rpx
+  left: 50%; // 水平居中
+  transform: translateX(-50%); // 水平居中调整
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: rpx(3) rpx(8);
+  border-radius: rpx(4);
+  font-size: rpx(8);
+  z-index: 10;
 }
 .ppt-container {
   width: 70%;
@@ -400,6 +445,41 @@ onBeforeUnmount(() => {
   // border-radius: rpx(12);
 }
 
+
+.ppt-navigation {
+  position: absolute;
+  bottom: rpx(18);
+  width: 70%;
+  display: flex;
+  justify-content: center;
+  gap: rpx(20);
+  padding: 0 rpx(10);
+  box-sizing: border-box;
+}
+
+.ppt-btn {
+  background-color: rgb(255, 255, 255, 0.5);
+  color: white;
+   border: 1px white solid;
+  border-radius: rpx(12);
+  font-size: rpx(7);
+  cursor: pointer;
+  transition: background-color 0.3s;
+  display: flex; // 添加这一行
+  align-items: center; // 添加这一行以确保按钮内文本垂直居中
+  justify-content: center; // 添加这一行以确保按钮内文本水平居中
+  height: rpx(15);
+}
+
+.ppt-btn:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.ppt-prev-btn, .ppt-next-btn {
+  width: rpx(50);
+}
+
+
 /* 隐藏 Chrome 视频控件的渐变背景等默认样式 */
 video::-webkit-media-controls-panel {
   background: transparent !important; /* 去掉背景渐变，设为透明 */

src/views/AIDevelop.vue

@@ -417,7 +417,6 @@ onMounted(async () => {
           index: menuIndex,
           title: courseTemp.courseName
         }
-
         // 手动修改第一个课程为image类型用于测试
         if (index === 0) {
           courseTemp.courseContentType = 'ppt';