|
|
@@ -0,0 +1,690 @@
|
|
|
+<template>
|
|
|
+ <!-- ======================================== -->
|
|
|
+ <!-- 手机端：完整布局 -->
|
|
|
+ <!-- ======================================== -->
|
|
|
+ <div class="mobile-container" :class="{ 'fullscreen-active': isFullscreen }">
|
|
|
+ <!-- 手机端：顶部导航栏 - 悬浮在视频上方 -->
|
|
|
+ <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="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 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, onUnmounted } from 'vue'
|
|
|
+import { useRouter, useRoute } from 'vue-router'
|
|
|
+import {
|
|
|
+ Search,
|
|
|
+ ArrowLeftBold,
|
|
|
+ CaretRight
|
|
|
+} from '@element-plus/icons-vue'
|
|
|
+import VideoPlayer from '@/components/videopage/VideoPlayer.vue'
|
|
|
+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 currentChapterId = ref('')
|
|
|
+const isPlaying = ref(false)
|
|
|
+// 强制设为移动端，不再检测设备类型
|
|
|
+const isMobile = ref(true)
|
|
|
+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.go(-1)
|
|
|
+}
|
|
|
+
|
|
|
+const handleSelect = (index) => {
|
|
|
+ if (videoPathMap.value[index]) {
|
|
|
+ currentCourse.value = videoPathMap.value[index]
|
|
|
+ currentChapterId.value = index
|
|
|
+ } 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 handleFullscreenChange = (isFullscreenNow) => {
|
|
|
+ isFullscreen.value = isFullscreenNow
|
|
|
+}
|
|
|
+
|
|
|
+// 监听设备方向变化
|
|
|
+const handleOrientationChange = () => {
|
|
|
+ // 在全屏状态下，设备方向改变时强制重新调整视频容器尺寸
|
|
|
+ if (isFullscreen.value) {
|
|
|
+ // 使用setTimeout确保DOM更新完成后再执行
|
|
|
+ setTimeout(() => {
|
|
|
+ // 触发一次强制重绘
|
|
|
+ const videoArea = document.querySelector('.mobile-video-area');
|
|
|
+ if (videoArea) {
|
|
|
+ videoArea.style.display = 'none';
|
|
|
+ void videoArea.offsetWidth; // 强制重排
|
|
|
+ videoArea.style.display = '';
|
|
|
+ }
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ // 监听设备方向变化事件
|
|
|
+ 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()
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ // 移除设备方向变化事件监听器
|
|
|
+ window.removeEventListener('orientationchange', handleOrientationChange);
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+@use 'sass:math';
|
|
|
+
|
|
|
+@function rpx($px) {
|
|
|
+ @return math.div($px, 750) * 100vw;
|
|
|
+}
|
|
|
+
|
|
|
+/* ======================================== */
|
|
|
+/* 手机端样式 */
|
|
|
+/* ======================================== */
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.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-container.fullscreen-active .mobile-video-area {
|
|
|
+ position: fixed !important;
|
|
|
+ top: 0 !important;
|
|
|
+ left: 0 !important;
|
|
|
+ right: 0 !important;
|
|
|
+ bottom: 0 !important;
|
|
|
+ z-index: 9999 !important;
|
|
|
+ margin-top: 0 !important;
|
|
|
+ /* 使用视口单位确保在设备方向改变时适应屏幕 */
|
|
|
+ width: 100vw !important;
|
|
|
+ height: 100vh !important;
|
|
|
+ min-height: 100vh !important;
|
|
|
+ max-height: 100vh !important;
|
|
|
+ /* 确保视频容器占据全部可用空间 */
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center !important;
|
|
|
+ justify-content: center !important;
|
|
|
+}
|
|
|
+
|
|
|
+.mobile-container.fullscreen-active .mobile-header {
|
|
|
+ z-index: 10000;
|
|
|
+}
|
|
|
+
|
|
|
+.mobile-container.fullscreen-active .mobile-search-container,
|
|
|
+.mobile-container.fullscreen-active .mobile-chapter-list {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 手机端搜索框容器 */
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+/* 手机端视频播放器去圆角 */
|
|
|
+.mobile-video-area :deep(.d-player-wrap),
|
|
|
+.mobile-video-area :deep(.full-box-video),
|
|
|
+.mobile-video-area :deep(.ppt-container) {
|
|
|
+ border-radius: 0 !important;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ max-width: 100% !important;
|
|
|
+ max-height: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+.mobile-video-area :deep(*) {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ max-width: 100% !important;
|
|
|
+ max-height: 100% !important;
|
|
|
+ object-fit: contain !important; /* 使用contain确保视频完全可见 */
|
|
|
+ border-radius: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 特别处理全屏模式下的视频播放器 */
|
|
|
+.mobile-container.fullscreen-active .mobile-video-area :deep(.d-player-wrap),
|
|
|
+.mobile-container.fullscreen-active .mobile-video-area :deep(.full-box-video),
|
|
|
+.mobile-container.fullscreen-active .mobile-video-area :deep(.ppt-container) {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ max-width: 100% !important;
|
|
|
+ max-height: 100% !important;
|
|
|
+ position: relative !important;
|
|
|
+}
|
|
|
+
|
|
|
+.mobile-container.fullscreen-active .mobile-video-area :deep(video) {
|
|
|
+ object-fit: contain !important;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ max-width: 100% !important;
|
|
|
+ max-height: 100% !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;
|
|
|
+}
|
|
|
+
|
|
|
+/* 处理设备方向变化时的全屏视频 */
|
|
|
+@media screen and (orientation: landscape) {
|
|
|
+ .mobile-container.fullscreen-active .mobile-video-area {
|
|
|
+ width: 100vw !important;
|
|
|
+ height: 100vh !important;
|
|
|
+ min-height: 100vh !important;
|
|
|
+ max-height: 100vh !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (orientation: portrait) {
|
|
|
+ .mobile-container.fullscreen-active .mobile-video-area {
|
|
|
+ width: 100vw !important;
|
|
|
+ height: 100vh !important;
|
|
|
+ min-height: 100vh !important;
|
|
|
+ max-height: 100vh !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
liyanbo