需要修改按钮样式

src/components/Image/ImageView.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="image-container">
+    <img :src="imagePath" :alt="altText" class="course-image" />
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+
+// 定义props
+const props = defineProps({
+  imagePath: { type: String, required: true },
+  altText: { type: String, default: '课程图片' }
+})
+
+
+
+</script>
+
+<style scoped lang="scss">
+@use 'sass:math';
+// 定义rpx转换函数
+@function rpx($px) {
+  @return math.div($px, 750) * 100vw;
+}
+
+.image-container {
+  width: 100%;
+  height: rpx(300);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.course-image {
+  max-width: 70%;
+  max-height: rpx(289);
+  border-radius: rpx(12);
+  object-fit: contain;
+}
+// 切换按钮
+.video-switch {
+  width: 100%;
+  display: flex;
+  margin-top: rpx(5);
+  margin-bottom: rpx(15);
+}
+.caret-right,
+.caret-left {
+  width: rpx(50);
+  margin: auto;
+  display: flex;
+}
+.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: rgb(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);
+}
+</style>

src/components/PPT/PptView.vue

@@ -50,7 +50,7 @@ import rightImg from '@/assets/icon/f-backward.png'
 // PPT
 import  VueOfficePptx  from '@vue-office/pptx'
 
-// 新增PPT翻页相关变量
+// PPT翻页相关变量
 const pptRef = ref(null)
 const currentPage = ref(1)
 const totalPages = ref(10)
@@ -200,16 +200,20 @@ const handlePptError = (error) => {
   width: 100%;
   display: flex;
   margin-top: rpx(5);
-  margin-bottom: rpx(15);
+  // margin-bottom: rpx(15);
+  justify-content: center;
+  align-items: center;
 }
 .caret-right,
 .caret-left {
   width: rpx(50);
-  margin: auto;
+   margin: 0 rpx(20);
   display: flex;
+  justify-content: center;
 }
 .page-info{
   color: #fff;
+  margin: 0 rpx(10);
 }
 
 .caret-left ::v-deep(.el-button.is-round),

src/components/videopage/VideoPlayer.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="video-container">
     <div class="box-video">
-      <!-- 根据contentType决定显示视频、图片、PPT -->
        <!-- 视频 -->
       <template v-if="contentType === 'video'">
         <video
@@ -13,31 +12,10 @@
           @ended="handleVideoEnded"
         ></video>
       </template>
-      <!-- 图片 -->
-      <template v-else-if="contentType === 'image'">
-        <div class="image-container">
-          <img :src="imagePath" alt="课程图片" class="course-image" />
-        </div>
-      </template>
-      <!-- PPT -->
-       <template v-else-if="contentType === 'ppt' || contentType === 'pptx'">
-          <div class="ppt-box">
-            <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>
 
     <!-- 视频切换按钮 - 始终显示 -->
-    <div class="video-switch">
+    <!-- <div class="video-switch">
       <div class="caret-left" @click="playPreviousVideo">
         <el-button type="warning" round>
           <img :src="leftImg" alt="Left" />上一节</el-button
@@ -48,7 +26,7 @@
           >下一节<img :src="rightImg" alt="Right" />
         </el-button> 
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -72,16 +50,12 @@ import { globalState } from '@/utils/globalState.js'
 import leftImg from '@/assets/icon/backward.png'
 import rightImg from '@/assets/icon/f-backward.png'
 import { saveRecord } from '@/api/personalized/index.js'
-// PPT
-import  VueOfficePptx  from '@vue-office/pptx'
-// import '@vue-office/pptx/lib/index.css'
+
 
 // 定义props
 const props = defineProps({
   contentType: { type: String, required: true }, // contentType类型
   videoPath: { type: String }, // 变为可选
-  imagePath: { type: String }, // 图片路径
-  pptPath: { type: String }, // PPT路径
   courseId: { type: String, required: true },
   typeId: { type: String, required: true }, 
   courseConfigList: { type: Array, default: () => [] },
@@ -106,9 +80,6 @@ const THROTTLE_TIME = 3000
 const lastPlayProgress = ref(0)
 // 定义进度数组
 const targetProgresses = [10, 50, 100]
-// PPT
-const totalPages = ref(1)
-const currentPage = ref(1)
 
 // 定义节流函数
 const throttle = (fn, delay) => {
@@ -213,60 +184,30 @@ const handleVideoEnded = () => {
   // emits('videoEnded')
 }
 
-// 处理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 = () => {
-  const currentIndexInList = props.allIndices.indexOf(props.currentIndex)
-  if (
-    currentIndexInList !== -1 &&
-    currentIndexInList < props.allIndices.length - 1
-  ) {
-    const nextIndex = props.allIndices[currentIndexInList + 1]
-    emits('switchVideo', nextIndex)
-    // 重置暂停索引
-    pausedIndices.value = []
-  }
-}
-
-// 播放上一个视频
-const playPreviousVideo = () => {
-  const currentIndexInList = props.allIndices.indexOf(props.currentIndex)
-  if (currentIndexInList > 0) {
-    const previousIndex = props.allIndices[currentIndexInList - 1]
-    emits('switchVideo', previousIndex)
-    // 重置暂停索引
-    pausedIndices.value = []
-  }
-}
+// // 播放下一个视频
+// const playNextVideo = () => {
+//   const currentIndexInList = props.allIndices.indexOf(props.currentIndex)
+//   if (
+//     currentIndexInList !== -1 &&
+//     currentIndexInList < props.allIndices.length - 1
+//   ) {
+//     const nextIndex = props.allIndices[currentIndexInList + 1]
+//     emits('switchVideo', nextIndex)
+//     // 重置暂停索引
+//     pausedIndices.value = []
+//   }
+// }
+
+// // 播放上一个视频
+// const playPreviousVideo = () => {
+//   const currentIndexInList = props.allIndices.indexOf(props.currentIndex)
+//   if (currentIndexInList > 0) {
+//     const previousIndex = props.allIndices[currentIndexInList - 1]
+//     emits('switchVideo', previousIndex)
+//     // 重置暂停索引
+//     pausedIndices.value = []
+//   }
+// }
 
 // 初始化视频播放器
 const initVideoPlayer = () => {
@@ -484,46 +425,46 @@ video::-webkit-media-controls-panel {
   background: transparent !important; /* 去掉背景渐变，设为透明 */
 }
 
-.video-switch {
-  width: 100%;
-  display: flex;
-  margin-top: rpx(5);
-  margin-bottom: rpx(15);
-}
-.image-container {
-  width: 100%;
-  height: rpx(300);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.course-image {
-  max-width: 70%;
-  max-height: rpx(289);
-  border-radius: rpx(12);
-  object-fit: contain;
-}
-.caret-right,
-.caret-left {
-  width: rpx(50);
-  margin: auto;
-  display: flex;
-}
-
-.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: rgb(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);
-}
+// .video-switch {
+//   width: 100%;
+//   display: flex;
+//   margin-top: rpx(5);
+//   margin-bottom: rpx(15);
+// }
+// .image-container {
+//   width: 100%;
+//   height: rpx(300);
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// }
+// .course-image {
+//   max-width: 70%;
+//   max-height: rpx(289);
+//   border-radius: rpx(12);
+//   object-fit: contain;
+// }
+// .caret-right,
+// .caret-left {
+//   width: rpx(50);
+//   margin: auto;
+//   display: flex;
+// }
+
+// .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: rgb(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);
+// }
 </style>

src/views/AIDevelop.vue

@@ -104,12 +104,11 @@
         <div class="small-title">
           <span>{{ course.courseName }}</span>
         </div>
+        
         <!-- 视频组件 -->
         <VideoPlayer v-if="course.courseContentType === 'video'"
           :contentType="course.courseContentType"
           :videoPath="course.courseVideoPath"
-          :imagePath="course.courseImagePath"
-          :pptPath="course.pptPath"
           :courseId="course.id || ''"
           :typeId="typeId"
           :courseConfigList="course.courseConfigList || []"
@@ -119,7 +118,26 @@
           @videoEnded="handleVideoEnded"
           @switchVideo="handleSelect"
         />
+        <!-- 图片 -->
+        <ImageView v-if="course.courseContentType === 'image'" :imagePath="course.courseImagePath" altText="课程图片"></ImageView>
+        
+        <!-- PPT -->
         <PptView v-if="course.courseContentType === 'ppt'" :pptPath="course.pptPath" ref="pptRef"></PptView>
+      
+        <!-- 视频切换按钮 - 始终显示 -->
+        <div class="video-switch">
+          <div class="caret-left" @click="playPreviousVideo">
+            <el-button type="warning" round>
+              <img :src="leftImg" alt="Left" />上一节</el-button
+            >
+          </div>
+          <div class="caret-right" @click="playNextVideo">
+            <el-button type="warning" round
+              >下一节<img :src="rightImg" alt="Right" /> 
+            </el-button> 
+          </div>
+        </div>
+
       </div>
     </div>
 
@@ -152,10 +170,15 @@ import { saveRecord } from '@/api/personalized/index.js'
 // 导入全局状态
 import { globalState } from '@/utils/globalState.js'
 
+// 导入图标 - 新增
+import leftImg from '@/assets/icon/backward.png'
+import rightImg from '@/assets/icon/f-backward.png'
+
 // 导入新创建的组件
 import VideoPlayer from '@/components/videopage/VideoPlayer.vue'
 import DialogComponents from '@/components/videopage/DialogComponents.vue'
 import PptView from "@/components/PPT/PptView.vue";
+import ImageView from '@/components/Image/ImageView.vue'
 
 const router = useRouter() // 获取当前路由对象
 const route = useRoute()
@@ -246,6 +269,27 @@ const flattenMenuItems = () => {
   return indices
 }
 
+// 播放上一个视频
+const playPreviousVideo = () => {
+  const allIndices = flattenMenuItems()
+  const currentIndexInList = allIndices.indexOf(course.value.key)
+  if (currentIndexInList > 0) {
+    const previousIndex = allIndices[currentIndexInList - 1]
+    handleSelect(previousIndex)
+  }
+}
+
+// 播放下一个视频
+const playNextVideo = () => {
+  const allIndices = flattenMenuItems()
+  const currentIndexInList = allIndices.indexOf(course.value.key)
+  if (currentIndexInList !== -1 && currentIndexInList < allIndices.length - 1) {
+    const nextIndex = allIndices[currentIndexInList + 1]
+    handleSelect(nextIndex)
+  }
+}
+
+
 // 播放下一个视频
 const handleVideoEnded = () => {
   // 记录当前视频ID为已观看
@@ -405,12 +449,15 @@ onMounted(async () => {
           index: menuIndex,
           title: courseTemp.courseName
         }
+
         // 手动修改第一个课程为image类型用于测试
         if (index === 0) {
           courseTemp.courseContentType = 'ppt';
           courseTemp.pptPath = 'http://59.110.91.129:8088/admin-api/infra/file/29/get/20250820/ppt_1755654972861.pptx';
+          // courseTemp.courseContentType = 'image';
+          // courseTemp.courseImagePath = 'http://59.110.91.129:8088/admin-api/infra/file/4/get/20250715/one_1752549934393.png';
           // 可选：修改课程名称以便识别
-          courseTemp.courseName = '测试PPT';
+          courseTemp.courseName = '测试';
         }
 
         if (topName === courseTemp.courseLabel) {
@@ -450,6 +497,7 @@ onMounted(async () => {
           course.value = courseTemp
           courseId.value = courseTemp.id
         }
+
       })
     } catch (error) {
       console.error('获取课程数据失败：', error)
@@ -485,6 +533,47 @@ $accent-color: rgb(133, 89, 220); // 强调色：暗蓝紫色
 $light-color: #ffffff; // 浅色背景：淡紫色
 $text-color: #483d8b; // 文本颜色：靛蓝色
 
+
+// 视频切换按钮样式
+.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: rgb(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);
+}
+
+.default-messages {
+  margin-top: rpx(-10);
+  margin-bottom: rpx(5);
+}
+
 /* 添加过渡样式 */
 .drawer-slide-enter-active,
 .drawer-slide-leave-active {
@@ -775,7 +864,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: rpx(20) 0;
+  // padding: rpx(20) 0;
 }
 
 // 图片样式

src/views/AILaboratory.vue

@@ -45,6 +45,7 @@
           <div class="people-title">{{ person.name }}</div>
         </div>
       </div>
+      
     </div>
   </div>
 </template>
@@ -120,7 +121,7 @@ const navigateToAIQuestions = person => {
     path: '/ai-questions',
     query: {
       ...person,
-      from: 'ai-laboratory'  // 添加来源标识
+      from: 'ai-laboratory',  // 添加来源标识
     },
     category: grade.value
   })

src/views/AIQuestions.vue

@@ -490,6 +490,7 @@ const textRoll = async () => {
   } catch {}
 };
 
+
 /** 初始化 **/
 onMounted(async () => {
   if (personId.value) {
@@ -502,16 +503,15 @@ onMounted(async () => {
       .catch((error) => {
         console.error("请求出错:", error);
       });
-
     await getConversation(personId.value);
   }
-
   // 获取列表数据
   // activeMessageListLoading.value = true
 });
 
 
 
+
 </script>
 
 <style scoped lang="scss">