Merge remote-tracking branch 'origin/wanzi'

src/components/HomePage.vue

@@ -122,7 +122,7 @@ const handleButtonClick = (button) => {
 // 按钮配置数组
 const buttonConfigs = ref([
   { name: 'AI编程课', route: blocklyRoutes.home },
-  { name: 'AI实验课', route: aiCourseRoutes.home }
+  // { name: 'AI实验课', route: aiCourseRoutes.home }
 ])
 // 取消默认选中状态
 const selectedButton = ref('')

src/views/laboratory/ExperimentalCourses.vue

@@ -32,6 +32,7 @@
         <div 
             class="content-box"
             ref="middleBox"
+            :class="{ 'short-bg': courseList.length <= 3 }" 
             @mousedown="handleMouseDown"
             @mousemove="handleMouseMove"
             @mouseup="handleMouseUp"
@@ -42,7 +43,7 @@
           <div 
             v-for="(item, index) in courseList" 
             :key="item.id"
-            :class="['slide-item', { active: activeButton === index }]"
+            :class="['slide-item', { 'three-items': courseList.length <= 3 }, { active: activeButton === index }]"
             :style="courseList.length <= 3 ? { float: 'left' } : {}"
             @click="!isDragging && !hasMoved && handleCourseItemClick(item, index)"
             v-memo="[activeButton === index, item.isDisabled]"
@@ -91,7 +92,7 @@
 <script setup>
 // 返回图标
 import { ArrowLeftBold } from '@element-plus/icons-vue';
-import {ref, onMounted, onUnmounted, watch, nextTick} from 'vue';
+import {ref, onMounted,computed , onUnmounted, watch, nextTick} from 'vue';
 // 导入路由
 import { useRouter } from 'vue-router';
 // 导入按钮图片
@@ -101,6 +102,8 @@ import ExperimentalInterface from './ExperimentalInterface.vue'
 // 星星图片
 import star02Image from '@/assets/programming/star02.png'
 import star01Image from '@/assets/programming/star01.png'
+import trackLongImage from '@/assets/programming/track-long.png'
+import trackShortImage from '@/assets/programming/track.png'
 import {Message} from "@/utils/message/Message.js";
 // 根据ID获取实验室课程列表接口
 import { getCourseByTypeId } from '@/api/laboratory/index.js'
@@ -142,6 +145,14 @@ const resData = ref([])
 const blocklyActiveButton = ref("aiCourseSectionActiveButton")
 // 当前激活的按钮索引
 const activeButton = ref(Number(localStorage.getItem(blocklyActiveButton.value)) || 0)
+
+// 根据课程项数量动态计算背景图
+const backgroundImage = computed(() => {
+  return courseList.value.length <= 3 
+    ? `url(${trackShortImage})`
+    : `url(${trackLongImage})`;
+})
+
 // 拖动相关变量
 const isDragging = ref(false)
 const startX = ref(0)
@@ -473,7 +484,7 @@ watch(showVideo, (newValue, oldValue) => {
 
 .content-box {
   width: 100%;
-  min-width: rpx(660); /* 最小宽度 */
+  min-width: rpx(700); /* 最小宽度 */
   height: 100%;
   overflow-x: auto; /* 水平滚动条 */
   overflow-y: hidden; /* 取消上下滚动 */
@@ -490,13 +501,18 @@ watch(showVideo, (newValue, oldValue) => {
   backface-visibility: hidden;
   perspective: 1000px;
   /* 设置背景图  */
-  background-image: url('@/assets/programming/track03.png');
+  background-image: v-bind(backgroundImage);
   background-size: rpx(1360) rpx(400); /* 固定宽度,背景图大小一致 */
-  background-position: left calc(-1 * rpx(70));
+  background-position: left calc(-1 * rpx(80));
   background-repeat: repeat-x;
   background-attachment: local; /* 背景图跟内容一起滚动 */
 }
 
+.short-bg {
+  background-size: rpx(790) rpx(300);
+  background-position: center calc(-1 * rpx(10));
+}
+
 /* 鼠标按下时的光标样式 */
 .content-box:active {
   cursor: grabbing;
@@ -515,7 +531,7 @@ watch(showVideo, (newValue, oldValue) => {
 .slide-item {
   width: rpx(130); /* 设置固定宽度 */
   height: rpx(110); /* 高度设置 */
-  margin-top: rpx(90);
+  margin-top: rpx(80);
   margin-right: rpx(85);
   margin-left: rpx(10);
   border-radius: rpx(35);
@@ -533,6 +549,11 @@ watch(showVideo, (newValue, oldValue) => {
   backface-visibility: hidden;
   perspective: 1000px;
 }
+/* 当只有3个课程项时调整间距 */
+.slide-item.three-items {
+  margin-right: rpx(70);
+  margin-left: rpx(50);
+}
 /* 奇数项在上层 */
 .slide-item:nth-child(odd) {
   transform: translateY(-50%) translateZ(0);

src/views/programming/ProgrammingCourset.vue

@@ -32,6 +32,7 @@
         <div 
             class="content-box"
             ref="contentBox"
+            :class="{ 'short-bg': courseItems.length <= 3 }"
             @mousedown="handleMouseDown"
             @mousemove="handleMouseMove"
             @mouseup="handleMouseUp"
@@ -42,7 +43,7 @@
           <div 
             v-for="(item, index) in courseItems" 
             :key="item.id"
-            :class="['slide-item', { active: activeButton === index }]"
+            :class="['slide-item', { 'three-items': courseItems.length <= 3 }, { active: activeButton === index }]"
             :style="courseItems.length <= 3 ? { float: 'left' } : {}"
             @click="!isDragging && !hasMoved && handleCourseItemClick(item, index)"
           >
@@ -104,6 +105,8 @@ import Interface from './Interface.vue'
 // 星星图片
 import star02Image from '@/assets/programming/star02.png'
 import star01Image from '@/assets/programming/star01.png'
+import trackLongImage from '@/assets/programming/track-long.png'
+import trackShortImage from '@/assets/programming/track.png'
 import {Message} from "@/utils/message/Message.js";
 import {DICT_TYPE} from "@/utils/dictUtils.js";
 import {scrollToCenter} from "@/utils/pageCss/scrollToCenter.js";
@@ -133,6 +136,13 @@ const blocklyActiveButton = ref("blocklyCourseSectionIndexActiveButton")
 // 当前激活的按钮索引
 const activeButton = ref(Number(localStorage.getItem(blocklyActiveButton.value)) || 0)
 
+// 根据课程项数量动态计算背景图
+const backgroundImage = computed(() => {
+  return courseItems.value.length <= 3 
+    ? `url(${trackShortImage})`
+    : `url(${trackLongImage})`;
+})
+
 // 课程拖动变量
 const isDragging = ref(false)
 const startX = ref(0)
@@ -462,7 +472,7 @@ watch(showVideo, (newValue, oldValue) => {
 
 .content-box {
   width: 100%;
-  min-width: rpx(660); /* 最小宽度 */
+  min-width: rpx(700); /* 最小宽度 */
   height: 100%;
   overflow-x: auto; /* 水平滚动条 */
   overflow-y: hidden; /* 取消上下滚动 */
@@ -479,13 +489,18 @@ watch(showVideo, (newValue, oldValue) => {
   backface-visibility: hidden;
   perspective: 1000px;
   /* 设置背景图  */
-  background-image: url('@/assets/programming/track03.png');
+  background-image: v-bind(backgroundImage);
   background-size: rpx(1360) rpx(400); /* 固定宽度,背景图大小一致 */
-  background-position: left calc(-1 * rpx(70));
+  background-position: left calc(-1 * rpx(80));
   background-repeat: repeat-x; /* 水平方向平铺 */
   background-attachment: local; /* 背景图跟内容一起滚动 */
 }
 
+.content-box.short-bg {
+  background-size: rpx(790) rpx(300);
+  background-position: center calc(-1 * rpx(10));
+}
+
 /* 鼠标按下时的光标样式 */
 .content-box:active {
   cursor: grabbing;
@@ -504,7 +519,7 @@ watch(showVideo, (newValue, oldValue) => {
 .slide-item {
   width: rpx(130); /* 设置固定宽度 */
   height: rpx(110); /* 高度设置 */
-  margin-top: rpx(90);
+  margin-top: rpx(80);
   margin-right: rpx(85);
   margin-left: rpx(10);
   border-radius: rpx(35);
@@ -522,6 +537,13 @@ watch(showVideo, (newValue, oldValue) => {
   backface-visibility: hidden;
   perspective: 1000px;
 }
+
+/* 当只有3个课程项时调整间距 */
+.slide-item.three-items {
+  margin-right: rpx(70);
+  margin-left: rpx(50);
+}
+
 /* 奇数项在上层 */
 .slide-item:nth-child(odd) {
   transform: translateY(-50%) translateZ(0);