课程详情mock界面

src/components/player/PdfViewer.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="pdf-viewer">
+    <iframe
+      :src="pdfUrl"
+      frameborder="0"
+      width="100%"
+      height="100%"
+    ></iframe>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  pdfUrl: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.pdf-viewer {
+  width: 100%;
+  height: 600px;
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  overflow: hidden;
+}
+</style> 

src/components/player/PptViewer.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="ppt-viewer">
+    <div class="slide-container">
+      <img 
+        v-if="currentSlide"
+        :src="currentSlide.url" 
+        :alt="currentSlide.title"
+      />
+      <div class="slide-controls">
+        <el-button 
+          @click="prevSlide" 
+          :disabled="currentIndex === 0"
+        >
+          <el-icon><ArrowLeft /></el-icon>
+        </el-button>
+        <span class="slide-info">{{ currentIndex + 1 }} / {{ slides.length }}</span>
+        <el-button 
+          @click="nextSlide" 
+          :disabled="currentIndex === slides.length - 1"
+        >
+          <el-icon><ArrowRight /></el-icon>
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  slides: {
+    type: Array,
+    required: true
+  }
+})
+
+const currentIndex = ref(0)
+
+const currentSlide = computed(() => props.slides[currentIndex.value])
+
+const prevSlide = () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value--
+  }
+}
+
+const nextSlide = () => {
+  if (currentIndex.value < props.slides.length - 1) {
+    currentIndex.value++
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ppt-viewer {
+  width: 100%;
+  background: #000;
+  
+  .slide-container {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    
+    .slide-controls {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 20px;
+      
+      .slide-info {
+        color: white;
+        font-size: 14px;
+        min-width: 60px;
+        text-align: center;
+      }
+      
+      .el-button {
+        padding: 6px;
+        color: white;
+        background: transparent;
+        border: none;
+        
+        &:hover:not(:disabled) {
+          background: rgba(255, 255, 255, 0.1);
+        }
+        
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}
+</style> 

src/components/player/VideoPlayer.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="video-player">
+    <video
+      ref="videoRef"
+      class="video-element"
+      :src="src"
+      :poster="poster"
+      controls
+      @ended="$emit('ended')"
+      @timeupdate="handleTimeUpdate"
+    >
+      您的浏览器不支持 HTML5 视频播放
+    </video>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  poster: {
+    type: String,
+    default: ''
+  }
+})
+
+defineEmits(['ended', 'timeupdate'])
+
+const handleTimeUpdate = (event) => {
+  const video = event.target
+  emit('timeupdate', {
+    currentTime: video.currentTime,
+    duration: video.duration
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.video-player {
+  width: 100%;
+  background: #000;
+  
+  .video-element {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>