添加轮播功能

src/components/blockly/MapGame.vue

@@ -238,7 +238,7 @@ const route = useRoute();
 const gameTitle = computed(() => props.gameTitle);
 const currentGameData = ref(null);
 const playerInitialDirection = ref(0); // 人物初始朝向
-const gameSort = ref('Game1'); // 默认排序
+const gameSort = ref('Game'); // 默认排序
 
 // 运行控制标志
 let shouldStopExecution = false;
@@ -1665,36 +1665,6 @@ onUnmounted(() => {
   --tile-size: v-bind('tileSize + "px"');
 }
 
-.map-game-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: transparent;
-  overflow-y: auto;
-  background-image: url('@/assets/programming/list_bg03.png');
-}
-
-/* 自定义滚动条样式 */
-.map-game-container::-webkit-scrollbar {
-  width: rpx(2); /* 滚动条宽度 */
-}
-
-.map-game-container::-webkit-scrollbar-track {
-  background: #f1effd; /* 滚动条轨道背景色 */
-  border-radius: rpx(4);
-}
-
-.map-game-container::-webkit-scrollbar-thumb {
-  background: #e2ddfc; /* 滚动条滑块颜色 */
-  border-radius: rpx(4);
-}
-
-.map-game-container::-webkit-scrollbar-thumb:hover {
-  background: #e2ddfc; /* 滚动条滑块 hover 状态颜色 */
-}
-
 /* 游戏简介样式 */
 .info-message-container {
   display: flex;

src/views/programming/Interface.vue

@@ -81,7 +81,7 @@
         <div class="video-switch">
           <div class="caret-left" @click="playPreviousVideo">
             <el-button type="warning" round>
-              <img :src="leftImg" alt="Left" />上一节</el-button
+              <img :src="leftImg" alt="Left" />上一节</el-button 
             >
           </div>
           <div class="caret-right" @click="playNextVideo">
@@ -655,10 +655,23 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   height: 100%;
   display: flex;
   flex-direction: column; /* 子元素上下排列 */
-  // background: linear-gradient(to bottom, #001169, #8a78d0);
   background-image: url('@/assets/programming/list_bg03.png');
-
   overflow-y: auto;
+  // 滚动条整体样式
+  &::-webkit-scrollbar {
+    width: rpx(1); // 滚动条宽度
+  }
+  // 滚动条滑块样式
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.5); // 滑块颜色
+    border-radius: 4px; // 滑块圆角
+    transition: background-color 0.3s ease;
+  }
+  // 滚动条轨道样式
+  &::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0.1); // 轨道颜色
+    border-radius: 4px; // 轨道圆角
+  }
 }
 .home-container {
   position: fixed;

src/views/programming/ProgrammingCourset.vue

@@ -28,11 +28,16 @@
     <!-- 课程部分 -->
     <div class="lower-box">
       <div class="content-box">
+        <!-- 左切换按钮 -->
+        <div v-if="!showVideo" class="carousel-btn prev-btn" @click="prevSlide" :disabled="currentIndex === 0">
+          <el-icon class="btn-icon"><ArrowLeftBold /></el-icon>
+        </div>
+        
         <!-- 动态渲染课程内容 -->
         <div 
-          v-for="item in courseItems" 
+          v-for="(item, index) in displayItems" 
           :key="item.id"
-          :class="item.positionClass"
+          :class="getPositionClass(index)"
           @click="handleCourseItemClick(item)"
         >
           <div class="box-content">
@@ -40,6 +45,11 @@
             <div class="box-text">{{ item.title }}</div>
           </div>
         </div>
+        
+        <!-- 右切换按钮 -->
+        <div v-if="!showVideo" class="carousel-btn next-btn" @click="nextSlide" :disabled="currentIndex >= courseItems.length - 3">
+          <el-icon class="btn-icon"><ArrowRightBold /></el-icon>
+        </div>
       </div>
     </div>
     
@@ -51,8 +61,8 @@
 
 <script setup>
 // 返回图标
-import { ArrowLeftBold } from '@element-plus/icons-vue';
-import { ref, onMounted } from 'vue';
+import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
+import { ref, onMounted, computed } from 'vue';
 // 导入路由
 import { useRouter, useRoute } from 'vue-router';
 // 导入接口
@@ -83,6 +93,33 @@ const courseItems = ref([])
 const selectedCourseData = ref(null)
 // 保存原始API返回的数据
 const resData = ref([])
+// 轮播图当前索引
+const currentIndex = ref(0)
+
+// 显示的项目（每次显示3个）
+const displayItems = computed(() => {
+  return courseItems.value.slice(currentIndex.value, currentIndex.value + 3)
+})
+
+// 获取位置类
+const getPositionClass = (index) => {
+  const positionClasses = ['left-content-box', 'center-content-box', 'right-content-box']
+  return positionClasses[index]
+}
+
+// 上一页
+const prevSlide = () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value = Math.max(0, currentIndex.value - 3)
+  }
+}
+
+// 下一页
+const nextSlide = () => {
+  if (currentIndex.value < courseItems.value.length - 3) {
+    currentIndex.value = Math.min(courseItems.value.length - 3, currentIndex.value + 3)
+  }
+}
 
 // 组件挂载时获取路由参数设置标题
 onMounted(() => {
@@ -121,7 +158,6 @@ onMounted(() => {
             id: item.id,
             title: item.bcName,
             image: positionInfo.image,
-            positionClass: positionInfo.positionClass,
             contentType: item.bcContentType
           })
         })
@@ -342,4 +378,45 @@ const goBackIndex = () => {
   color: #333;
   text-align: center;
 }
+
+/* 轮播图按钮样式 */
+.carousel-btn {
+  position: absolute;
+  top: 40%;
+  transform: translateY(-50%);
+  width: rpx(30);
+  height: rpx(30);
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  box-shadow: 0 rpx(5) rpx(10) rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+
+.carousel-btn:hover {
+  background-color: rgba(255, 255, 255, 1);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.carousel-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.prev-btn {
+  left: 1%;
+}
+
+.next-btn {
+  right: 1%;
+}
+
+.btn-icon {
+  font-size: rpx(15);
+  color: #333;
+}
 </style>