From 93cb03a38165158a0e360d74c6243857294406b6 Mon Sep 17 00:00:00 2001
From: Your Name <you@qq.com>
Date: Fri, 7 Jun 2024 16:49:42 +0800
Subject: [PATCH] ypf 2.0

---
 src/styles/index.scss                         |  32 +-
 src/views/MyCourseStudy/ContainerCla.vue      | 168 +++++++++
 src/views/MyCourseStudy/ContainerRes.vue      |   4 +
 src/views/MyCourseStudy/courseCollections.vue | 324 ++++++------------
 4 files changed, 298 insertions(+), 230 deletions(-)
 create mode 100644 src/views/MyCourseStudy/ContainerCla.vue
 create mode 100644 src/views/MyCourseStudy/ContainerRes.vue

diff --git a/src/styles/index.scss b/src/styles/index.scss
index b83a609..49fb8ba 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,43 +2,51 @@
 @import './reset.scss';
 
 // 滚动条外观样式设置
-::-webkit-scrollbar{
+::-webkit-scrollbar {
     width: 10px;
 }
-::-webkit-scrollbar-track{
-    background-color:$base-menu-background;
+
+::-webkit-scrollbar-track {
+    background-color: $base-menu-background;
 }
-::-webkit-scrollbar-thumb{
+
+::-webkit-scrollbar-thumb {
     width: 10px;
-    background-color: #fff;
+    background-color: #7d7b7b;
     border-radius: 10px;
 }
 
 // 修改elemen plus样式
-.el-menu{
+.el-menu {
     background-color: #ffffff;
 }
-.el-menu-item:hover{
+
+.el-menu-item:hover {
     background-color: #5577ff;
     color: #fff;
 }
-.el-sub-menu__title:hover{
+
+.el-sub-menu__title:hover {
     background-color: #5577ff;
     color: #fff;
 }
-.el-menu-item.is-active{
+
+.el-menu-item.is-active {
     color: #fff;
     background-color: #5577ff;
 }
-.el-menu-item{
+
+.el-menu-item {
     color: #9896A3;
     border-radius: 10px;
     margin: 5px 0;
 }
-.el-sub-menu__title{
+
+.el-sub-menu__title {
     color: #9896A3;
     border-radius: 10px;
 }
-.el-scrollbar__wrap{
+
+.el-scrollbar__wrap {
     padding: 0 15px;
 }
\ No newline at end of file
diff --git a/src/views/MyCourseStudy/ContainerCla.vue b/src/views/MyCourseStudy/ContainerCla.vue
new file mode 100644
index 0000000..fc720bb
--- /dev/null
+++ b/src/views/MyCourseStudy/ContainerCla.vue
@@ -0,0 +1,168 @@
+<template>
+  <!-- 课程收藏页面 -->
+  <el-tab-pane label="课程收藏" name="first">
+    <div class="Container_Cla">
+      <div class="item_1" v-for="(item_1, index) in 12" :key="index">
+        <!-- 课程图片盒子 -->
+        <div class="ClassImg">
+          <!-- 更多图片盒子 -->
+          <div class="ClassGd">
+            <img src="../../assets/icons/更多.svg" width="100%" height="100%" />
+          </div>
+          <!-- 课程图片 -->
+          <img src="../../assets/images/kctp.png" />
+        </div>
+        <div class="ClaCon">
+          <div class="Con">
+            <h3>软件项目管理{{ item_1 }}</h3>
+            <p>讲师:王兴</p>
+            <p>
+              <span>32</span>
+              学时 &nbsp; | &nbsp;
+              <span>2.0</span>
+              学分
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="Page-1">
+      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[1, 2, 3, 4]"
+        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
+        :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
+  </el-tab-pane>
+</template>
+<style lang="scss" scoped>
+.el-pagination {
+  justify-content: center;
+}
+
+.example-pagination-block+.example-pagination-block {
+  margin-top: 10px;
+}
+
+.example-pagination-block .example-demonstration {
+  margin-bottom: 16px;
+}
+
+.curse-collection {
+  margin: 0;
+}
+
+::v-deep .el-tabs__header {
+  margin-bottom: 5px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.demo-tabs {
+  padding: 0px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+
+.Container_Cla {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 350px);
+  justify-content: space-around;
+  padding-top: 20px;
+}
+
+.item_1 {
+  display: inline-block;
+  width: 100%;
+  height: 300px;
+  margin-bottom: 30px;
+  border-left: 1px solid #e4e4e4;
+  border-top: 1px solid #e4e4e4;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 2px 2px 2px 2px rgba(214, 212, 212, 0.5);
+}
+
+.ClassImg {
+  height: 180px;
+  width: 100%;
+  position: relative;
+  background-color: rgb(249, 245, 245);
+  border-bottom: 1px solid rgb(217, 217, 217);
+}
+
+.ClassImg>img {
+  width: 100%;
+  height: 180px;
+}
+
+.item_1:hover {
+  .ClassGd {
+    display: block;
+
+  }
+}
+
+.ClassGd {
+  position: absolute;
+  display: none;
+  margin-top: -9px;
+  margin-left: 95%;
+  cursor: pointer;
+}
+
+.ClaCon {
+  display: flex;
+  justify-content: space-between;
+  background-color: #cfded071;
+}
+
+.Con {
+  display: inline-block;
+  height: 120px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.Con>h3 {
+  margin-left: 15px;
+  font-size: 25px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.Con>p {
+  margin-left: 15px;
+  margin-top: 5px;
+  font-size: 13px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.Con>p>span {
+  margin-left: 5px;
+  margin-right: 5px;
+  color: rgb(94, 188, 231);
+  font-weight: 600;
+}
+
+.Con>button {
+  width: 45px;
+  height: 20px;
+  font-size: 9px;
+  margin-left: 200px;
+  margin-bottom: 10px;
+}
+
+.Page-1 {
+  width: 100%;
+  justify-content: center;
+}
+</style >
\ No newline at end of file
diff --git a/src/views/MyCourseStudy/ContainerRes.vue b/src/views/MyCourseStudy/ContainerRes.vue
new file mode 100644
index 0000000..7708f31
--- /dev/null
+++ b/src/views/MyCourseStudy/ContainerRes.vue
@@ -0,0 +1,4 @@
+<template></template>
+<script lang="ts" setup>
+</script>
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/MyCourseStudy/courseCollections.vue b/src/views/MyCourseStudy/courseCollections.vue
index c506df8..4348879 100644
--- a/src/views/MyCourseStudy/courseCollections.vue
+++ b/src/views/MyCourseStudy/courseCollections.vue
@@ -1,53 +1,12 @@
 <template>
   <div class="curse-collection">
-    <el-tabs
-      v-model="activeName"
-      type="card"
-      class="demo-tabs"
-      @tab-click="handleClick"
-      style="padding-top: 0"
-    >
-      <el-tab-pane label="课程收藏" name="first">
-        <div class="Container_Cla">
-          <div class="item_1" v-for="(item_1, index) in 12" :key="index">
-            <div class="ClassImg">
-              <div class="bu">
-                <img
-                  src="../../assets/icons/更多.svg"
-                  width="100%"
-                  height="100%"
-                />
-              </div>
-              <img src="../../assets/images/kctp.png" />
-            </div>
-            <div class="ClaCon">
-              <div class="Con">
-                <h3>软件项目管理{{ item_1 }}</h3>
-                <p>讲师:王兴</p>
-                <p>
-                  <span>32</span>
-                  学时 &nbsp; | &nbsp;
-                  <span>2.0</span>
-                  学分
-                </p>
-              </div>
-            </div>
-          </div>
-          <div style="width: 100%; display: flex; justify-content: center">
-            <el-pagination
-              v-model:current-page="params.page"
-              v-model:page-size="params.pageNum"
-              :page-sizes="[100, 200, 300, 400]"
-              layout="total, sizes, prev, pager, next, jumper"
-              :total="total"
-              @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-            />
-          </div>
-        </div>
-      </el-tab-pane>
+    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick" style="padding-top: 0">
+      <!-- 课程收藏页面 -->
+      <ContainerCla />
+      <!-- 资源收藏页面 -->
       <el-tab-pane label="资源收藏" name="second">
         <div class="Container_Res">
+          <!-- Tab切换栏 -->
           <ul class="Container_Res_Tab">
             <li class="img-svg" @click="hsndelShow(1)">
               <img src="../../assets/icons/课程简介.svg" alt="简介" />
@@ -75,78 +34,78 @@
               <p>音频</p>
             </li>
           </ul>
-          <div class="Res_con" v-show="activeIndex == 1">
-            <div class="item_2-1" v-for="(item, index) in 5" :key="index">
-              <div class="ResImg-1">
-                <img src="../../assets/images/kctp.png" />
-              </div>
-              <div class="ResClaDic">
-                <p>课程名称-----{{ item }}</p>
-                <P>课程描述-----{{ item }}</P>
-              </div>
+        </div>
+        <!-- 切换栏对应的小页面 -->
+        <!-- 小页面-1 -->
+        <div class="Res_con" v-show="activeIndex == 1">
+          <div class="item_2-1" v-for="(item, index) in 5" :key="index">
+            <div class="ResImg-1">
+              <img src="../../assets/images/kctp.png" />
+            </div>
+            <div class="ResClaDic">
+              <p>课程名称-----{{ item }}</p>
+              <P>课程描述-----{{ item }}</P>
             </div>
           </div>
-          <div style="width: 100%; display: flex; justify-content: center">
-            <el-pagination
-              v-model:current-page="params.page"
-              v-model:page-size="params.pageNum"
-              :page-sizes="[100, 200, 300, 400]"
-              layout="total, sizes, prev, pager, next, jumper"
-              :total="total"
-              @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-            />
-          </div>
-          <div class="Res_con" v-show="activeIndex == 2">
-            <div class="item_2-2" v-for="(item, index) in 7" :key="index">
-              <div class="ResImg-2">
-                <div class="Img">
-                  <img src="../../assets/icons/ppt.png" />
-                </div>
-              </div>
-              <div class="ResClaDic">
-                <p>PPT名称-----{{ item }}</p>
+        </div>
+        <!-- 页面-2 -->
+        <div class="Res_con" v-show="activeIndex == 2">
+          <div class="item_2-2" v-for="(item, index) in 7" :key="index">
+            <div class="ResImg-2">
+              <div class="Img">
+                <img src="../../assets/icons/ppt.png" />
               </div>
             </div>
+            <div class="ResClaDic">
+              <p>PPT名称-----{{ item }}</p>
+            </div>
           </div>
-          <div class="Res_con" v-show="activeIndex == 3">
-            <div class="item_2-3" v-for="(item, index) in 6" :key="index">
-              <div class="ResImg-2">
-                <div class="Img">
-                  <img src="../../assets/icons/视频.png" />
-                </div>
-              </div>
-              <div class="ResClaDic">
-                <p>视频名称-----{{ item }}</p>
+        </div>
+        <!-- 小页面-3 -->
+        <div class="Res_con" v-show="activeIndex == 3">
+          <div class="item_2-3" v-for="(item, index) in 6" :key="index">
+            <div class="ResImg-2">
+              <div class="Img">
+                <img src="../../assets/icons/视频.png" />
               </div>
             </div>
+            <div class="ResClaDic">
+              <p>视频名称-----{{ item }}</p>
+            </div>
           </div>
-          <div class="Res_con" v-show="activeIndex == 4">
-            <div class="item_2-4" v-for="(item, index) in 8" :key="index">
-              <div class="ResImg-2">
-                <div class="Img">
-                  <img src="../../assets/icons/文本.png" />
-                </div>
-              </div>
-              <div class="ResClaDic">
-                <p>文本名称-----{{ item }}</p>
+        </div>
+        <!-- 小页面-4 -->
+        <div class="Res_con" v-show="activeIndex == 4">
+          <div class="item_2-4" v-for="(item, index) in 8" :key="index">
+            <div class="ResImg-2">
+              <div class="Img">
+                <img src="../../assets/icons/文本.png" />
               </div>
             </div>
+            <div class="ResClaDic">
+              <p>文本名称-----{{ item }}</p>
+            </div>
           </div>
-          <div class="Res_con" v-show="activeIndex == 5">
-            <div class="item_2-5" v-for="(item, index) in 10" :key="index">
-              <div class="ResImg-2">
-                <div class="Img">
-                  <img src="../../assets/icons/音频.png" />
-                </div>
-              </div>
-              <div class="ResClaDic">
-                <p>音频名称-----{{ item }}</p>
+          <div>
+          </div>
+        </div>
+        <div class="Res_con" v-show="activeIndex == 5">
+          <div class="item_2-5" v-for="(item, index) in 10" :key="index">
+            <div class="ResImg-2">
+              <div class="Img">
+                <img src="../../assets/icons/音频.png" />
               </div>
             </div>
+            <div class="ResClaDic">
+              <p>音频名称-----{{ item }}</p>
+            </div>
           </div>
+
+        </div>
+        <div class="Page-2">
         </div>
       </el-tab-pane>
+      <!-- 知识点收藏页面 -->
       <el-tab-pane label="知识点收藏" name="third">
         <div class="Container_Kno">
           <div class="item_3" v-for="(item_3, index) in 10" :key="index">
@@ -183,6 +142,8 @@ import { ref } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import { SeCourseFavourControllerService } from '../../../generated/services/SeCourseFavourControllerService'
 import { CourseFavourQueryRequest } from 'generated/models/CourseFavourQueryRequest'
+import ContainerCla from './ContainerCla.vue'
+// import ContainerRes from "./ContainerRes.vue";
 // import { getDataListApi } from '@/api/user/corc.js'
 const activeIndex = ref(1)
 function hsndelShow(index: number) {
@@ -260,7 +221,11 @@ const handleCurrentChange = (page: any) => {
 </script>
 
 <style lang="scss" scoped>
-.example-pagination-block + .example-pagination-block {
+.el-pagination {
+  justify-content: center;
+}
+
+.example-pagination-block+.example-pagination-block {
   margin-top: 10px;
 }
 
@@ -290,126 +255,54 @@ const handleCurrentChange = (page: any) => {
   font-weight: 600;
 }
 
-.Container_Cla {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 350px);
-  justify-content: space-around;
-  padding-top: 20px;
-}
-
-.item_1 {
-  display: inline-block;
-  width: 100%;
-  height: 300px;
-  margin-bottom: 30px;
-  border-left: 1px solid #e4e4e4;
-  border-top: 1px solid #e4e4e4;
-  border-radius: 6px;
-  overflow: hidden;
-  box-shadow: 2px 2px 2px 2px rgba(214, 212, 212, 0.5);
-}
-
-.ClassImg {
-  height: 180px;
-  width: 100%;
-  position: relative;
-  background-color: rgb(249, 245, 245);
-  border-bottom: 1px solid rgb(217, 217, 217);
-}
-
-.ClassImg > img {
-  width: 100%;
-  height: 180px;
-}
-
-.ClaCon {
-  display: flex;
-  justify-content: space-between;
-  background-color: #cfded071;
-}
-
-.Con {
-  display: inline-block;
-  height: 120px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-
-.Con > h3 {
-  margin-left: 15px;
-  font-size: 25px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.Con > p {
-  margin-left: 15px;
-  margin-top: 5px;
-  font-size: 13px;
-  font-weight: 400;
-  cursor: pointer;
-}
-
-.Con > p > span {
-  margin-left: 5px;
-  margin-right: 5px;
-  color: rgb(94, 188, 231);
-  font-weight: 600;
-}
-
-.Con > button {
-  width: 45px;
-  height: 20px;
-  font-size: 9px;
-  margin-left: 200px;
-  margin-bottom: 10px;
-}
-
+// 资源收藏页面大盒子
 .Container_Res {
   width: 100%;
   height: 100%;
   background-color: #f2f7fb;
 }
 
+// 资源收藏盒子切换栏
 .Container_Res_Tab {
   height: 60px;
   display: flex;
   justify-content: space-around;
-  background-color: #f0f4fa;
+  background-color: #f3f5f8;
   border-bottom: #e4e4e4 solid 1px;
   flex-direction: row;
 }
 
+// 资源收藏盒子切换栏图标盒子
 .img-svg {
   width: 54px;
   height: 58px;
   padding: 4px 11px 6px 11px;
-}
 
-.img-svg > p {
-  font-size: 10px;
-  font-weight: 400;
-  text-align: center;
+  // 切换栏里面图片的大小
+  & img {
+    width: 32px;
+    height: 32px;
+  }
+
+  // 切换栏下面的文字
+  & p {
+    font-size: 10px;
+    font-weight: 400;
+    text-align: center;
+  }
 }
 
+// 切换栏鼠标悬停样式
 .img-svg:hover {
   cursor: pointer;
   border-bottom: rgb(96, 93, 172) solid 3px;
-}
-
-.img-svg > img {
-  width: 32px;
-  height: 32px;
-}
 
-.img-svg > p:hover {
-  text-decoration: underline;
+  & p:hover {
+    text-decoration: underline;
+  }
 }
 
+// 切换栏下面的大页面
 .Res_con {
   width: 100%;
   height: 100%;
@@ -419,6 +312,7 @@ const handleCurrentChange = (page: any) => {
   background-color: #ffffff;
 }
 
+// 简介页面中的每一项
 .item_2-1 {
   width: 100%;
   height: 300px;
@@ -430,18 +324,20 @@ const handleCurrentChange = (page: any) => {
   box-shadow: 2px 2px 2px 2px rgba(214, 212, 212, 0.5);
 }
 
+// 简介页面中图片盒子
 .ResImg-1 {
   width: 100%;
   height: 60%;
   border-bottom: 1px solid rgb(229, 227, 227);
   overflow: hidden;
-}
 
-.ResImg-1 > img {
-  width: 100%;
-  height: 100%;
+  img {
+    width: 100%;
+    height: 100%;
+  }
 }
 
+// 简介页面课程描述
 .ResClaDic {
   width: 100%;
   height: 40%;
@@ -465,7 +361,7 @@ const handleCurrentChange = (page: any) => {
   align-items: center;
 }
 
-.ResClaDic > p {
+.ResClaDic>p {
   font-family: Inter, Inter;
   font-weight: 500;
   font-size: 20px;
@@ -487,6 +383,7 @@ const handleCurrentChange = (page: any) => {
   overflow: hidden;
   box-shadow: 2px 2px 2px 2px rgba(214, 212, 212, 0.5);
   border-radius: 6px;
+  margin-bottom: 32px;
 }
 
 .Container_Kno {
@@ -516,8 +413,8 @@ const handleCurrentChange = (page: any) => {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
-  padding-left: 15px;
-  padding-right: 30px;
+  padding-left: 9px;
+  padding-right: 20px;
 }
 
 .KnoCon {
@@ -526,7 +423,8 @@ const handleCurrentChange = (page: any) => {
   justify-content: space-around;
 }
 
-.KnoBtn > img {
+.KnoBtn>img {
+  padding-top: 20px;
   cursor: pointer;
 }
 
@@ -553,7 +451,7 @@ const handleCurrentChange = (page: any) => {
   flex-direction: column;
 }
 
-.Knowledge_point > ul > li {
+.Knowledge_point>ul>li {
   display: inline-block;
   margin-top: 5px;
   margin-bottom: 5px;
@@ -577,19 +475,9 @@ const handleCurrentChange = (page: any) => {
   color: rgb(15, 57, 76);
 }
 
-.bu {
-  width: 20%;
-  height: 10%;
-  z-index: 10;
-  padding-left: 93%;
+.Page-2 {
   position: absolute;
-  // display: none;
-}
-
-.item_1 :hover {
-  &.bu {
-    display: block;
-    background-color: #0052d9;
-  }
+  width: 100%;
+  justify-content: center;
 }
 </style>