|
|
|
|
@ -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 /> |
|
|
|
|
<!-- 资源收藏页面 --> |
|
|
|
|
@ -69,17 +63,28 @@ |
|
|
|
|
</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="item_2-3" 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> |
|
|
|
|
<p>{{ item }}</p> |
|
|
|
|
<el-button plain @click="centerDialogVisible = true"> |
|
|
|
|
点击播放 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<el-dialog v-model="centerDialogVisible" title="视频播放中" width="1000" align-center> |
|
|
|
|
<span>点击开了一个弹框</span> |
|
|
|
|
<template #footer> |
|
|
|
|
<div class="dialog-footer"> |
|
|
|
|
<video src=""></video> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-dialog> |
|
|
|
|
<!-- 小页面-4 --> |
|
|
|
|
<div class="Res_con" v-show="activeIndex == 4"> |
|
|
|
|
<div class="item_2-4" v-for="(item, index) in 8" :key="index"> |
|
|
|
|
@ -92,8 +97,8 @@ |
|
|
|
|
<p>文本名称-----{{ item }}</p> |
|
|
|
|
</div> |
|
|
|
|
</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"> |
|
|
|
|
@ -108,16 +113,9 @@ |
|
|
|
|
</div> |
|
|
|
|
</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" |
|
|
|
|
/> |
|
|
|
|
<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> |
|
|
|
|
<!-- 知识点收藏页面 --> |
|
|
|
|
@ -128,33 +126,73 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
import { ref, watch } 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' |
|
|
|
|
import { getAssApi } from "@/api/courseChaptersApi"; |
|
|
|
|
const centerDialogVisible = ref(false) |
|
|
|
|
|
|
|
|
|
const activeIndex = ref(1) |
|
|
|
|
function hsndelShow(index: number) { |
|
|
|
|
activeIndex.value = index |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const activeName = ref('first') |
|
|
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => { |
|
|
|
|
console.log(tab, event) |
|
|
|
|
//========================= |
|
|
|
|
function handleApi(params) { |
|
|
|
|
getAssApi(params).then(res => { |
|
|
|
|
arr.value = res.data.records |
|
|
|
|
total.value = res.data.total |
|
|
|
|
console.log(arr.value, '-', total.value) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const arr = ref([]) |
|
|
|
|
const total = ref(0) |
|
|
|
|
// 分页器 |
|
|
|
|
const currentPage1 = ref(1) |
|
|
|
|
const pageSize1 = ref(10) |
|
|
|
|
const disabled = ref(false) |
|
|
|
|
|
|
|
|
|
const handleSizeChange = (val: number) => { |
|
|
|
|
console.log(`${val} items per page`) |
|
|
|
|
hand() |
|
|
|
|
} |
|
|
|
|
const handleCurrentChange = (val: number) => { |
|
|
|
|
console.log(`current page: ${val}`) |
|
|
|
|
hand() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function initFenYie() { |
|
|
|
|
arr.value.length = 0 |
|
|
|
|
currentPage1.value = 1 |
|
|
|
|
pageSize1.value = 10 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch(activeIndex, (newVal) => { |
|
|
|
|
initFenYie() |
|
|
|
|
hand() |
|
|
|
|
}) |
|
|
|
|
function hand() { |
|
|
|
|
const params = { |
|
|
|
|
type: activeIndex.value, |
|
|
|
|
page: currentPage1.value, |
|
|
|
|
pageSize: pageSize1.value, |
|
|
|
|
resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20' |
|
|
|
|
} |
|
|
|
|
handleApi(params) |
|
|
|
|
} |
|
|
|
|
const obj = { |
|
|
|
|
type: activeIndex.value, |
|
|
|
|
page: currentPage1.value, |
|
|
|
|
pageSize: pageSize1.value, |
|
|
|
|
resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20' |
|
|
|
|
} |
|
|
|
|
handleApi(obj) |
|
|
|
|
//========================= |
|
|
|
|
|
|
|
|
|
const activeName = ref('first') |
|
|
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => { |
|
|
|
|
console.log(tab, event) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@ -162,7 +200,7 @@ const handleCurrentChange = (val: number) => { |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.example-pagination-block + .example-pagination-block { |
|
|
|
|
.example-pagination-block+.example-pagination-block { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -299,7 +337,7 @@ const handleCurrentChange = (val: number) => { |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ResClaDic > p { |
|
|
|
|
.ResClaDic>p { |
|
|
|
|
font-family: Inter, Inter; |
|
|
|
|
font-weight: 500; |
|
|
|
|
font-size: 20px; |
|
|
|
|
@ -330,7 +368,7 @@ const handleCurrentChange = (val: number) => { |
|
|
|
|
position: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-top: 1px solid rgb(229, 227, 227, 0.5); |
|
|
|
|
border-bottom: 1px solid rgb(229, 227, 227, 0.5); |
|
|
|
|
border-top: 1px solid rgb(229, 227, 227, .5); |
|
|
|
|
border-bottom: 1px solid rgb(229, 227, 227, .5); |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
youhang
5 months ago