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 {