分出页面*3

src/views/MyCourseStudy/ContainerCla.vue

@@ -1,6 +1,5 @@
 <template>
   <!-- 课程收藏页面 -->
-
   <el-tab-pane label="课程收藏" name="first">
     <div class="Container_Cla" ref="container">
       <div class="item_1" v-for="(item_1, index) in datalist" :key="index">

src/views/MyCourseStudy/ContainerKno.vue

@@ -0,0 +1,118 @@
+<template>
+        <el-tab-pane label="知识点收藏" name="third">
+          <div class="Container_Kno">
+            <div class="item_3" v-for="(item_3, index) in 10" :key="index">
+              <div>
+                <div class="KnowledgeCollent">
+                  <div class="KnoCon">
+                    <h4>课程名称</h4>
+                    <p>第{{ item_3 }}章-xxxx</p>
+                  </div>
+                  <div class="KnoBtn">
+                    <img src="../../assets/icons/更多.svg" alt="" />
+                  </div>
+                </div>
+                <div class="Knowledge_point">
+                  <ul>
+                    <li v-for="(item, index) in 6" :key="index">
+                      知识点知识点知识点{{ item }} &nbsp;
+                      <div class="btn">×</div>
+                      &nbsp;
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+</template>
+<script lang="ts" setup></script>
+<style lang="scss" scoped>
+.Container_Kno {
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 250px);
+  justify-content: space-around;
+  background-color: #f2f7fb;
+}
+
+.item_3 {
+  width: 240px;
+  height: 320px;
+  margin-bottom: 30px;
+  padding-left: 20px;
+  border: 1px solid #e4e4e4;
+  border-radius: 6px;
+  box-shadow: 2px 2px 2px 2px #dbd8d8;
+  background-color: #fff;
+}
+
+.KnowledgeCollent {
+  width: 100%;
+  height: 85px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  padding-left: 8px;
+  padding-right: 20px;
+}
+
+.KnoCon {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.KnoBtn>img {
+  padding-top: 20px;
+  cursor: pointer;
+}
+
+.KnowledgeCollent h4 {
+  margin-top: 3px;
+  font-size: 30px;
+  font-weight: 550;
+  font-style: normal;
+}
+
+.KnowledgeCollent p {
+  margin-left: 3px;
+  font-size: 18px;
+  font-weight: 500;
+  font-style: normal;
+}
+
+.Knowledge_point {
+  height: 235px;
+  padding-left: 5px;
+  font-size: 15px;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+}
+
+.Knowledge_point>ul>li {
+  display: inline-block;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  font-family: Inter, Inter;
+  font-weight: bold;
+  font-size: 15px;
+  color: #0052d9;
+  line-height: 25px;
+  padding-left: 5px;
+  background-color: #bfc5fe;
+  border-radius: 3px;
+}
+
+.btn {
+  display: inline;
+}
+
+.btn:hover {
+  cursor: pointer;
+  color: rgb(15, 57, 76);
+}
+</style>

src/views/MyCourseStudy/courseCollections.vue

@@ -108,32 +108,7 @@
         </div>
       </el-tab-pane>
       <!-- 知识点收藏页面 -->
-      <el-tab-pane label="知识点收藏" name="third">
+      <ContainerKno />
-        <div class="Container_Kno">
-          <div class="item_3" v-for="(item_3, index) in 10" :key="index">
-            <div>
-              <div class="KnowledgeCollent">
-                <div class="KnoCon">
-                  <h4>课程名称</h4>
-                  <p>第{{ item_3 }}章-xxxx</p>
-                </div>
-                <div class="KnoBtn">
-                  <img src="../../assets/icons/更多.svg" alt="" />
-                </div>
-              </div>
-              <div class="Knowledge_point">
-                <ul>
-                  <li v-for="(item, index) in 6" :key="index">
-                    知识点知识点知识点{{ item }} &nbsp;
-                    <div @click="" class="btn">×</div>
-                    &nbsp;
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </el-tab-pane>
     </el-tabs>
     <el-backtop :right="100" :bottom="100" />
   </div>
@@ -143,6 +118,7 @@
 import { ref } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import ContainerCla from './ContainerCla.vue'
+import ContainerKno from './ContainerKno.vue'
 // import ContainerRes from "./ContainerRes.vue";
 // import { getDataListApi } from '@/api/user/corc.js'
 const activeIndex = ref(1)
@@ -335,94 +311,6 @@ const handleCurrentChange = (val: number) => {
   margin-bottom: 32px;
 }
 
-.Container_Kno {
-  width: 100%;
-  height: 100%;
-  padding: 15px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 250px);
-  justify-content: space-around;
-  background-color: #f2f7fb;
-}
-
-.item_3 {
-  width: 240px;
-  height: 320px;
-  margin-bottom: 30px;
-  padding-left: 20px;
-  border: 1px solid #e4e4e4;
-  border-radius: 6px;
-  box-shadow: 2px 2px 2px 2px #dbd8d8;
-  background-color: #fff;
-}
-
-.KnowledgeCollent {
-  width: 100%;
-  height: 85px;
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  padding-left: 8px;
-  padding-right: 20px;
-}
-
-.KnoCon {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-
-.KnoBtn>img {
-  padding-top: 20px;
-  cursor: pointer;
-}
-
-.KnowledgeCollent h4 {
-  margin-top: 3px;
-  font-size: 30px;
-  font-weight: 550;
-  font-style: normal;
-}
-
-.KnowledgeCollent p {
-  margin-left: 3px;
-  font-size: 18px;
-  font-weight: 500;
-  font-style: normal;
-}
-
-.Knowledge_point {
-  height: 235px;
-  padding-left: 5px;
-  font-size: 15px;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-}
-
-.Knowledge_point>ul>li {
-  display: inline-block;
-  margin-top: 3px;
-  margin-bottom: 3px;
-  font-family: Inter, Inter;
-  font-weight: bold;
-  font-size: 15px;
-  color: #0052d9;
-  line-height: 25px;
-  padding-left: 5px;
-  background-color: #bfc5fe;
-  border-radius: 3px;
-}
-
-.btn {
-  display: inline;
-}
-
-.btn:hover {
-  cursor: pointer;
-  color: rgb(15, 57, 76);
-}
-
 .Page-2 {
   width: 100%;
   padding: 10px;