将实操课单独放出来

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-view></router-view>
+      <router-view></router-view>
 </template>
 
 <script setup>

src/api/class.js

@@ -9,10 +9,18 @@ export function ClassList (data) {
   })
 }
 
-// 根据年级id获取教学大纲
+// 根据年级id获取教学大纲 通识课
 export function ClassOutline (id) {
   return axios({
-    url: 'bjdxWeb/course/getTypeByGradeId?id=' + id ,
+    url: 'bjdxWeb/course/getTypeTsByGradeId?id=' + id ,
+    method: 'get'
+  })
+}
+
+// 实操课
+export function ClassOutlineSc (id) {
+  return axios({
+    url: 'bjdxWeb/course/getTypeScByGradeId?id=' + id ,
     method: 'get'
   })
 }

src/components/HomePage.vue

@@ -300,6 +300,8 @@ onMounted(() => {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
+  background-origin: border-box; // 确保背景图从边框开始显示
+  background-clip: padding-box; // 确保背景图不会延伸到边框外
 }
 .left-box-in-box2:hover,
 .left-box-in-box2:active,
@@ -312,7 +314,7 @@ onMounted(() => {
 .top-sub-box,
 .bottom-sub-box {
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: 100% 100%;
   background-position: center;
 }
 .right-box-in-box2 {

src/views/AIGeneralCourse.vue

@@ -78,6 +78,16 @@
               </template>
             </el-dropdown>
           </div>
+          <!-- 实操课按钮 -->
+          <div class="new-button-container">
+            <el-button 
+              type="primary" 
+              @click="handleNewButtonClick"
+              :style="{ backgroundColor: showPracticalCourse ? '#ffcc00' : '#fee78a' }"
+            >
+              {{ showPracticalCourse ? '返回通识课' : '实操课' }}
+            </el-button>
+          </div>
         </div>
         <div class="inner-box right-box">
           <div class="top-right-box">
@@ -111,7 +121,7 @@
       <div class="box-2">
         <div
           class="small-box"
-          v-for="(outlineData, index) in classOutlineData"
+          v-for="(outlineData, index) in (showPracticalCourse ? ClassOutlineScData : classOutlineData)"
           :key="index"
           @click="goToAIExperience(outlineData)"
         >
@@ -134,8 +144,8 @@
 <script setup>
 import { ref, onMounted, computed, watch } from 'vue'
 
-import { ClassList, ClassOutline } from '@/api/class.js'
-// 添加 Element Plus 组件引入
+import { ClassList, ClassOutline,ClassOutlineSc } from '@/api/class.js'
+//  Element Plus 组件引入
 import {
   ArrowDown,
   ArrowRightBold,
@@ -159,10 +169,16 @@ const selectedGrade = ref('')
 // 添加抽屉显示状态
 const drawerVisible = ref(true)
 
-// 统一函数来获取课程大纲数据
+// 实操课
+const ClassOutlineScData = ref([])
+// 状态变量，跟踪当前显示的是通识课还是实操课
+const showPracticalCourse = ref(false)
+
+// 统一函数来获取课程大纲数据 通识课/实操课
 const fetchClassOutline = async (classId) => {
   try {
     const res = await ClassOutline(classId)
+    console.log(res);
     if (res.code === 0) {
       classOutlineData.value = res.data
       classOutlineData.value.map((item, index) => {
@@ -170,11 +186,29 @@ const fetchClassOutline = async (classId) => {
         item.ctTypeSort = item.ctTypeSort > 9 ? item.ctTypeSort : "0" + item.ctTypeSort
       })
     }
+    const Scres = await ClassOutlineSc(classId)
+    console.log(Scres);
+    // 保存实操课数据
+    if (Scres.code === 0) {
+      ClassOutlineScData.value = Scres.data
+      ClassOutlineScData.value.map((item, index) => {
+        item.ctTypeSort = index + 1
+        item.ctTypeSort = item.ctTypeSort > 9 ? item.ctTypeSort : "0" + item.ctTypeSort
+      })
+    }
   } catch (error) {
     console.error('获取课程大纲数据失败:', error)
   }
 }
 
+// 实操课
+const handleNewButtonClick = async() => {
+  // 切换状态
+  showPracticalCourse.value = !showPracticalCourse.value
+  // 保存状态到localStorage
+  localStorage.setItem('showPracticalCourse', showPracticalCourse.value.toString())
+}
+
 // 处理下拉菜单选择
 const handleGradeSelect = command => {
   selectedGrade.value = command
@@ -195,11 +229,9 @@ const toggleDrawer = () => {
 }
 // 获取年级
 const classData = ref([])
-// 添加接口返回的数据引用，用于存储 ClassOutline 结果
+// 接口返回的数据引用，用于存储 ClassOutline 结果
 const classOutlineData = ref([])
 
-
-
 const fetchCtTypes = async () => {
   try {
     const response = await ClassList()
@@ -224,7 +256,7 @@ const fetchCtTypes = async () => {
   }
 }
 
-// 添加获取课程标题
+// 获取课程标题
 const getCourseTitle = index => {
   if (
     classOutlineData.value.length > 0 &&
@@ -238,7 +270,8 @@ const getCourseTitle = index => {
 
 // 课程标题数组，依赖修改后的 getCourseTitle 函数 修改课程标题数组为 computed 属性
 const courseTitles = computed(() => {
-  return classOutlineData.value.map(item => {
+  const data = showPracticalCourse.value ? ClassOutlineScData.value : classOutlineData.value
+  return data.map(item => {
     return `${item.ctTypeSort}${item.ctType}`;
   });
 })
@@ -251,22 +284,28 @@ onMounted(() => {
   if (title) {
     pageTitle.value = title
   }
+  // 从localStorage读取状态
+  const savedState = localStorage.getItem('showPracticalCourse')
+  if (savedState !== null) {
+    showPracticalCourse.value = savedState === 'true'
+  }
 })
 
 import { Message } from '@/utils/message/Message.js'
 
 // 搜索框
 const SearchInput = ref('')
-// 添加搜索建议查询方法
+// 搜索建议查询方法
 const querySearch = (queryString, cb) => {
+  const data = showPracticalCourse.value ? ClassOutlineScData.value : classOutlineData.value
   const results = queryString
-    ? classOutlineData.value.filter(item => {
+    ? data.filter(item => {
         return item.ctType.toLowerCase().includes(queryString.toLowerCase())
       })
-    : classOutlineData.value
+    : data
   cb(results)
 }
-// 添加搜索选择处理方法
+// 搜索选择处理方法
 const handleSearchSelect = item => {
   goToAIExperience(item)
     // 添加以下代码清空输入框
@@ -274,10 +313,11 @@ const handleSearchSelect = item => {
 }
 // 修改过滤逻辑，直接使用classOutlineData
 const filteredTitles = computed(() => {
+  const data = showPracticalCourse.value ? ClassOutlineScData.value : classOutlineData.value
   if (!SearchInput.value) {
-    return classOutlineData.value
+    return data
   }
-  return classOutlineData.value.filter(title =>
+  return data.filter(title =>
     title.ctType.toLowerCase().includes(SearchInput.value.toLowerCase())
   )
 })
@@ -296,6 +336,7 @@ const goToAIExperience = outlineData => {
       return
     }
   }
+
   router.push({
     path: '/ai-develop', // 跳转视频页面
     query: { typeId: outlineData.id, typeName: outlineData.ctType }
@@ -380,7 +421,7 @@ const goToAIExperience = outlineData => {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  cursor: pointer; // 添加鼠标指针样式
+  cursor: pointer; // 鼠标指针样式
   // 修改裁剪路径使右侧边缘垂直无缝贴合
   clip-path: polygon(0 0, 100% 15%, 100% 90%, 0 100%);
   display: flex;
@@ -511,20 +552,46 @@ const goToAIExperience = outlineData => {
 }
 .left-box {
   position: relative;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex: 1; // 设置左侧盒子占比为 2
+  justify-content: left;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: rpx(5); // 间距控制
+}
+.new-button-container {
+  display: flex;
+  align-items: center;
+  margin-left: rpx(5); 
+}
+.new-button-container .el-button {
+  width: rpx(60);
+  height: rpx(15);
+  background-color: #fee78a;
+  border: 1px white solid;
+  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.2);
+  color: black;
+  border: none;
+  border-radius: rpx(12);
+  font-size: rpx(8);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.new-button-container .el-button:hover {
+  transform: scale(1.05);
+  background: linear-gradient(
+    to bottom,
+    #fee78a,
+    #ffce1b
+  );
+  box-shadow: 0 6px 12px rgb(0, 0, 0, 0.3);
 }
 .box-icon {
-  width: 100%;
   height: 100%;
-  flex: 0.6;
-  display: flex; // 添加 flex 布局
+  display: flex;
   align-items: center; // 垂直居中
   color: black; // 设置图标颜色为白色
   padding-left: rpx(15);
   font-size: rpx(10); // 设置图标大小，可按需调整
-  cursor: pointer; // 添加鼠标指针样式
+  cursor: pointer; // 鼠标指针样式
   z-index: 999;
 }
 .box-icon .left-icon {
@@ -540,12 +607,9 @@ const goToAIExperience = outlineData => {
   color: white;
 }
 .dropdown-box {
-  width: 100%;
   height: 100%;
-  display: flex; // 添加 flex 布局;
-  flex: 1;
+  display: flex; // flex 布局;
   align-items: center; // 垂直居中;
-  // padding-right: rpx(0); // 添加右侧内边距;
 }
 .dropdown-box .el-button {
   width: rpx(60); // 设置按钮宽度;
@@ -567,7 +631,6 @@ const goToAIExperience = outlineData => {
 }
 .dropdown-menu {
   width: rpx(100);
-  // height: rpx(60);
   border-radius: rpx(5);
   border: 1px white solid;
   background-color: rgb(255, 255, 255, 0.5);
@@ -594,15 +657,17 @@ const goToAIExperience = outlineData => {
   ); /* 设置悬停、聚焦、点击状态下的背景色 */
 }
 .right-box {
-  flex: 2;
+  flex: 1;
   position: relative; // 添加相对定位;
+  // background-color: #fff;
+  display: flex;
+  justify-content: right;
+  align-items: center;
 }
 .top-right-box {
-  position: absolute; // 添加绝对定位
-  margin-left: rpx(260); // 调整右边距离
-  width: rpx(100);
+   width: rpx(130);
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex;
 }
 .top-right-box {
   ::v-deep(.el-input__wrapper) {
@@ -624,6 +689,10 @@ const goToAIExperience = outlineData => {
   ::v-deep(.el-input__inner) {
     color: black;
   }
+  ::v-deep(.el-input--prefix){
+    width: rpx(100);
+    text-align: right;
+  }
 }
 // 搜索
 .search-input {