ypf 调整尺寸

src/views/MyCourseStudy/ContainerCla.vue

@@ -1,7 +1,8 @@
 <template>
   <!-- 课程收藏页面 -->
+
   <el-tab-pane label="课程收藏" name="first">
-    <div class="Container_Cla">
+    <div class="Container_Cla" ref="container">
       <div class="item_1" v-for="(item_1, index) in datalist" :key="index">
         <!-- 课程图片盒子 -->
         <div class="ClassImg">
@@ -27,23 +28,39 @@
       </div>
     </div>
     <div class="Page-1">
-      <el-pagination
+      <el-pagination v-model:current-page="params.current" v-model:page-size="params.pageSize"
-        v-model:current-page="params.current"
+        :page-sizes="[6, 8, 12, 15]" layout="total, sizes, prev, pager, next, jumper" :total="total"
-        v-model:page-size="params.pageSize"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-        :page-sizes="[6, 8, 12, 15]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
     </div>
   </el-tab-pane>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { SeCourseFavourControllerService } from '../../../generated/services/SeCourseFavourControllerService'
 import { CourseFavourQueryRequest } from 'generated/models/CourseFavourQueryRequest'
-
+// ===============================
+const container = ref()
+function handleResize() {
+  const style = getComputedStyle(container.value)
+  const width = Number(style.width.slice(0, -2))
+  if (width >= 350 * 4.5) container.value.style.gridTemplateColumns = "repeat(4, 350px)"
+  else container.value.style.gridTemplateColumns = "repeat(auto-fill, 350px)"
+}
+function debounce(func: any, delay: any) {
+  let timer: any
+  return function () {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      // @ts-ignore
+      func.apply(this, arguments);
+    }, delay);
+  };
+}
+const deHR = debounce(handleResize, 500)
+const myObserver = new ResizeObserver((deHR))
+onMounted(() => myObserver.observe(container.value))
+onBeforeUnmount(myObserver.disconnect)
+// ===============================
 const total = ref(0)
 const datalist = ref([
   {
@@ -109,7 +126,7 @@ const handleCurrentChange = (page: any) => {
   justify-content: center;
 }
 
-.example-pagination-block + .example-pagination-block {
+.example-pagination-block+.example-pagination-block {
   margin-top: 10px;
 }
 
@@ -168,7 +185,7 @@ const handleCurrentChange = (page: any) => {
   border-bottom: 1px solid rgb(217, 217, 217);
 }
 
-.ClassImg > img {
+.ClassImg>img {
   width: 100%;
   height: 180px;
 }
@@ -202,14 +219,14 @@ const handleCurrentChange = (page: any) => {
   justify-content: space-around;
 }
 
-.Con > h3 {
+.Con>h3 {
   margin-left: 15px;
   font-size: 25px;
   font-weight: 600;
   cursor: pointer;
 }
 
-.Con > p {
+.Con>p {
   margin-left: 15px;
   margin-top: 5px;
   font-size: 13px;
@@ -217,14 +234,14 @@ const handleCurrentChange = (page: any) => {
   cursor: pointer;
 }
 
-.Con > p > span {
+.Con>p>span {
   margin-left: 5px;
   margin-right: 5px;
   color: rgb(94, 188, 231);
   font-weight: 600;
 }
 
-.Con > button {
+.Con>button {
   width: 45px;
   height: 20px;
   font-size: 9px;

src/views/MyCourseStudy/ContainerRes.vue

@@ -1,4 +0,0 @@
-<template></template>
-<script lang="ts" setup>
-</script>
-<style lang="scss" scoped></style>

src/views/MyCourseStudy/courseCollections.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="curse-collection">
-    <el-tabs
+    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick" style="padding-top: 0">
-      v-model="activeName"
-      type="card"
-      class="demo-tabs"
-      @tab-click="handleClick"
-      style="padding-top: 0"
-    >
       <!-- 课程收藏页面 -->
       <ContainerCla />
       <!-- 资源收藏页面 -->
@@ -54,7 +48,7 @@
             </div>
           </div>
         </div>
-        <!-- 页面-2 -->
+        <!-- 小页面-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">
@@ -94,6 +88,7 @@
           </div>
           <div></div>
         </div>
+        <!-- 小页面-5 -->
         <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">
@@ -106,7 +101,11 @@
             </div>
           </div>
         </div>
-        <div class="Page-2"></div>
+        <div class="Page-2">
+          <el-pagination v-model:current-page="currentPage1" v-model:page-size="pageSize1" :disabled="disabled"
+            :page-sizes="[6, 8, 12, 15]" layout="total, sizes, prev, pager, next, jumper" :total="10"
+            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </div>
       </el-tab-pane>
       <!-- 知识点收藏页面 -->
       <el-tab-pane label="知识点收藏" name="third">
@@ -125,7 +124,7 @@
               <div class="Knowledge_point">
                 <ul>
                   <li v-for="(item, index) in 6" :key="index">
-                    知识点{{ item }} &nbsp;
+                    知识点知识点知识点{{ item }} &nbsp;
                     <div @click="" class="btn">×</div>
                     &nbsp;
                   </li>
@@ -149,13 +148,24 @@ import ContainerCla from './ContainerCla.vue'
 const activeIndex = ref(1)
 function hsndelShow(index: number) {
   activeIndex.value = index
-  console.log('触发了', index, activeIndex.value)
 }
 
 const activeName = ref('first')
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
 }
+
+// 分页器
+const currentPage1 = ref(1)
+const pageSize1 = ref(10)
+const disabled = ref(false)
+
+const handleSizeChange = (val: number) => {
+  console.log(`${val} items per page`)
+}
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -163,7 +173,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   justify-content: center;
 }
 
-.example-pagination-block + .example-pagination-block {
+.example-pagination-block+.example-pagination-block {
   margin-top: 10px;
 }
 
@@ -244,6 +254,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 .Res_con {
   width: 100%;
   height: 100%;
+  min-height: 750px;
   display: grid;
   grid-template-columns: repeat(auto-fill, 350px);
   justify-content: space-around;
@@ -299,7 +310,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   align-items: center;
 }
 
-.ResClaDic > p {
+.ResClaDic>p {
   font-family: Inter, Inter;
   font-weight: 500;
   font-size: 20px;
@@ -329,16 +340,16 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   height: 100%;
   padding: 15px;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 210px);
+  grid-template-columns: repeat(auto-fill, 250px);
   justify-content: space-around;
   background-color: #f2f7fb;
 }
 
 .item_3 {
-  width: 200px;
+  width: 240px;
-  height: 240px;
+  height: 320px;
-  margin-bottom: 18px;
+  margin-bottom: 30px;
-  padding-left: 15px;
+  padding-left: 20px;
   border: 1px solid #e4e4e4;
   border-radius: 6px;
   box-shadow: 2px 2px 2px 2px #dbd8d8;
@@ -347,11 +358,11 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 
 .KnowledgeCollent {
   width: 100%;
-  height: 55px;
+  height: 85px;
   display: flex;
   justify-content: space-between;
   flex-direction: row;
-  padding-left: 9px;
+  padding-left: 8px;
   padding-right: 20px;
 }
 
@@ -361,27 +372,27 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   justify-content: space-around;
 }
 
-.KnoBtn > img {
+.KnoBtn>img {
   padding-top: 20px;
   cursor: pointer;
 }
 
 .KnowledgeCollent h4 {
   margin-top: 3px;
-  font-size: 24px;
+  font-size: 30px;
   font-weight: 550;
   font-style: normal;
 }
 
 .KnowledgeCollent p {
   margin-left: 3px;
-  font-size: 14px;
+  font-size: 18px;
   font-weight: 500;
   font-style: normal;
 }
 
 .Knowledge_point {
-  height: 185px;
+  height: 235px;
   padding-left: 5px;
   font-size: 15px;
   display: flex;
@@ -389,19 +400,18 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   flex-direction: column;
 }
 
-.Knowledge_point > ul > li {
+.Knowledge_point>ul>li {
   display: inline-block;
-  margin-top: 5px;
+  margin-top: 3px;
-  margin-bottom: 5px;
+  margin-bottom: 3px;
   font-family: Inter, Inter;
   font-weight: bold;
-  font-size: 12px;
+  font-size: 15px;
   color: #0052d9;
-  line-height: 20px;
+  line-height: 25px;
   padding-left: 5px;
   background-color: #bfc5fe;
   border-radius: 3px;
-  margin-right: 10px;
 }
 
 .btn {
@@ -414,8 +424,12 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 }
 
 .Page-2 {
-  position: absolute;
   width: 100%;
+  padding: 10px;
+  position: flex;
   justify-content: center;
+  background-color: #fff;
+  border-top: 1px solid rgb(229, 227, 227, .5);
+  border-bottom: 1px solid rgb(229, 227, 227, .5);
 }
 </style>