ypf 2.0

6 months ago · 93cb03a381
parent c40f11c115
commit 93cb03a381
4 changed files with 298 additions and 230 deletions
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -5,12 +5,14 @@
 ::-webkit-scrollbar {
    width: 10px;
 }
+
 ::-webkit-scrollbar-track {
    background-color: $base-menu-background;
 }
+
 ::-webkit-scrollbar-thumb {
    width: 10px;
-    background-color: #fff;
+    background-color: #7d7b7b;
    border-radius: 10px;
 }

@ -18,27 +20,33 @@
 .el-menu {
    background-color: #ffffff;
 }
+
 .el-menu-item:hover {
    background-color: #5577ff;
    color: #fff;
 }
+
 .el-sub-menu__title:hover {
    background-color: #5577ff;
    color: #fff;
 }
+
 .el-menu-item.is-active {
    color: #fff;
    background-color: #5577ff;
 }
+
 .el-menu-item {
    color: #9896A3;
    border-radius: 10px;
    margin: 5px 0;
 }
+
 .el-sub-menu__title {
    color: #9896A3;
    border-radius: 10px;
 }
+
 .el-scrollbar__wrap {
    padding: 0 15px;
 }
--- a/src/views/MyCourseStudy/ContainerCla.vue
+++ 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 >
--- a/src/views/MyCourseStudy/ContainerRes.vue
+++ b/src/views/MyCourseStudy/ContainerRes.vue
@ -0,0 +1,4 @@
+<template></template>
+<script lang="ts" setup>
+</script>
+<style lang="scss" scoped></style>
--- 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,6 +34,9 @@
              <p>音频</p>
            </li>
          </ul>
+        </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">
@ -86,17 +48,7 @@
            </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>
+        <!-- 页面-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">
@ -109,6 +61,7 @@
            </div>
          </div>
        </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">
@ -121,6 +74,7 @@
            </div>
          </div>
        </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">
@ -132,6 +86,8 @@
              <p>文本名称-----{{ item }}</p>
            </div>
          </div>
+          <div>
+          </div>
        </div>
        <div class="Res_con" v-show="activeIndex == 5">
          <div class="item_2-5" v-for="(item, index) in 10" :key="index">
@ -144,9 +100,12 @@
              <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,6 +221,10 @@ const handleCurrentChange = (page: any) => {
 </script>

 <style lang="scss" scoped>
+.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 {
+    width: 32px;
+    height: 32px;
  }

-.img-svg > p {
+  // 切换栏下面的文字
+  & 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 {
+  & 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 {
+  img {
    width: 100%;
    height: 100%;
  }
+}

+// 简介页面课程描述
 .ResClaDic {
  width: 100%;
  height: 40%;
@ -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 {
@ -527,6 +424,7 @@ const handleCurrentChange = (page: any) => {
 }

 .KnoBtn>img {
+  padding-top: 20px;
  cursor: pointer;
 }

@ -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>