ypf 调整尺寸

5 months ago · a9c643c605
parent e3fa89776b
commit a9c643c605
4 changed files with 3249 additions and 3896 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/views/MyCourseStudy/ContainerCla.vue
+++ b/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
-        v-model:current-page="params.current"
-        v-model:page-size="params.pageSize"
-        :page-sizes="[6, 8, 12, 15]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
+      <el-pagination v-model:current-page="params.current" v-model:page-size="params.pageSize"
+        :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;
--- a/src/views/MyCourseStudy/ContainerRes.vue
+++ b/src/views/MyCourseStudy/ContainerRes.vue
@ -1,4 +0,0 @@
-<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,12 +1,6 @@
 <template>
  <div class="curse-collection">
-    <el-tabs
-      v-model="activeName"
-      type="card"
-      class="demo-tabs"
-      @tab-click="handleClick"
-      style="padding-top: 0"
-    >
+    <el-tabs 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;
-  height: 240px;
-  margin-bottom: 18px;
-  padding-left: 15px;
+  width: 240px;
+  height: 320px;
+  margin-bottom: 30px;
+  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-bottom: 5px;
+  margin-top: 3px;
+  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>