diff --git a/reading-platform-frontend/src/views/teacher/lessons/components/KidsMode.vue b/reading-platform-frontend/src/views/teacher/lessons/components/KidsMode.vue index 25d815f..0424440 100644 --- a/reading-platform-frontend/src/views/teacher/lessons/components/KidsMode.vue +++ b/reading-platform-frontend/src/views/teacher/lessons/components/KidsMode.vue @@ -70,12 +70,10 @@ -
-
- -
-
{{ props.currentLesson?.name || '准备开始' }}
-
点击下方资源开始播放
+
@@ -198,6 +196,7 @@ import { VolumeX, MonitorPlay, Lightbulb, + Play, } from 'lucide-vue-next'; import EbookViewer from './viewers/EbookViewer.vue'; import Player from '@/views/office/player.vue'; @@ -801,6 +800,12 @@ const handleResourceByIndex = (index: number) => { } }; +// 播放当前选中的资源 +const playCurrentResource = () => { + if (allLessonResources.value.length === 0) return; + handleResourceByIndex(currentResourceIndex.value); +}; + // 上一个资源 const prevResource = () => { if (currentResourceIndex.value > 0) { @@ -1227,6 +1232,37 @@ onUnmounted(() => { opacity: 0.7; color: #8D6E63; } + + .play-area-btn { + display: flex; + align-items: center; + justify-content: center; + width: 160px; + height: 160px; + margin-top: 32px; + padding: 0; + border-radius: 50%; + background: linear-gradient(135deg, #FF9800 0%, #FF6F00 100%); + border: 4px solid #E65100; + color: white; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 8px 32px rgba(255, 111, 0, 0.45); + + &:hover:not(:disabled) { + transform: scale(1.08); + box-shadow: 0 12px 40px rgba(255, 111, 0, 0.55); + } + + &:active:not(:disabled) { + transform: scale(0.98); + } + + &:disabled { + opacity: 0.4; + cursor: not-allowed; + } + } } // 底部固定导航 @@ -1511,7 +1547,8 @@ onUnmounted(() => { .resources-section { margin-bottom: 16px; - padding: 4px 0; /* 为动画留出上下呼吸空间,避免被父级裁剪 */ + padding: 4px 0; + /* 为动画留出上下呼吸空间,避免被父级裁剪 */ .section-label { display: flex; @@ -1533,7 +1570,8 @@ onUnmounted(() => { display: flex; gap: 16px; overflow-x: auto; - padding: 16px 12px; /* 增加内边距,为 scale/shadow 动画留出空间 */ + padding: 16px 12px; + /* 增加内边距,为 scale/shadow 动画留出空间 */ flex-wrap: wrap; &::-webkit-scrollbar {