|
|
|
@ -42,42 +42,42 @@ |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<!-- 切换栏对应的小页面 --> |
|
|
|
|
<!-- 小页面-1 --> |
|
|
|
|
<!-- 简介页面-1 --> |
|
|
|
|
<div class="Res_con" v-show="activeIndex == 1"> |
|
|
|
|
<div class="item_2-1" v-for="(item, index) in 5" :key="index"> |
|
|
|
|
<div class="item_2-1" v-for="(item, index) in datalist" :key="item.id"> |
|
|
|
|
<div class="ResImg-1"> |
|
|
|
|
<img src="../../assets/images/kctp.png" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="ResClaDic"> |
|
|
|
|
<p>课程名称-----{{ item }}</p> |
|
|
|
|
<P>课程描述-----{{ item }}</P> |
|
|
|
|
<div class="ResClaDic-1"> |
|
|
|
|
<p>{{index + 1}}. {{ item.name }}</p> |
|
|
|
|
<p style="color: rgb(180,180 ,180 );"> {{ item.description }}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 小页面-2 --> |
|
|
|
|
<!-- PPT页面-2 --> |
|
|
|
|
<div class="Res_con" v-show="activeIndex == 2"> |
|
|
|
|
<div class="item_2-2" v-for="(item, index) in 7" :key="index"> |
|
|
|
|
<div class="item_2-2" v-for="(item, index) in datalist" :key="item.id"> |
|
|
|
|
<div class="ResImg-2"> |
|
|
|
|
<div class="Img"> |
|
|
|
|
<img src="../../assets/icons/ppt.png" /> |
|
|
|
|
<img :src="item.img" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="ResClaDic"> |
|
|
|
|
<p>PPT名称-----{{ item }}</p> |
|
|
|
|
<p>{{ index + 1 }}. {{ item.name }}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 小页面-3 --> |
|
|
|
|
<!-- 视频页面-3 --> |
|
|
|
|
<div class="Res_con" v-show="activeIndex == 3"> |
|
|
|
|
<div class="item_2-3" v-for="(item, index) in 8" :key="index"> |
|
|
|
|
<div class="item_2-3" v-for="(item, index) in datalist" :key="index"> |
|
|
|
|
<div class="ResImg-2"> |
|
|
|
|
<div class="Img"> |
|
|
|
|
<img src="../../assets/icons/视频.png" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="ResClaDic"> |
|
|
|
|
<p>{{ item }}</p> |
|
|
|
|
<el-button plain @click="centerDialogVisible = true"> |
|
|
|
|
<p>{{ index + 1 }}. {{ item.name }}</p> |
|
|
|
|
<el-button plain @click="hand1(item)"> |
|
|
|
|
点击播放 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
@ -85,20 +85,20 @@ |
|
|
|
|
</div> |
|
|
|
|
<el-dialog |
|
|
|
|
v-model="centerDialogVisible" |
|
|
|
|
title="视频播放中" |
|
|
|
|
:title="`${data.name}`" |
|
|
|
|
width="1000" |
|
|
|
|
style="height:600px;" |
|
|
|
|
align-center |
|
|
|
|
class="adad" |
|
|
|
|
> |
|
|
|
|
<span>点击开了一个弹框</span> |
|
|
|
|
<!-- <span>点击开了一个弹框</span> --> |
|
|
|
|
<template #footer> |
|
|
|
|
<div class="dialog-footer"> |
|
|
|
|
<video |
|
|
|
|
src="https://www.bilibili.com/video/BV1HV4y1a7n4?p=50&vd_source=9e99d3200788d6043e077de463ef019b" |
|
|
|
|
></video> |
|
|
|
|
<video width="300" height="200" :src="data.img"></video> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-dialog> |
|
|
|
|
<!-- 小页面-4 --> |
|
|
|
|
<!-- 文本页面-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"> |
|
|
|
@ -112,7 +112,7 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 小页面-5 --> |
|
|
|
|
<!-- 音频页面-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"> |
|
|
|
@ -122,9 +122,6 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="ResClaDic"> |
|
|
|
|
<p>音频名称-----{{ item }}</p> |
|
|
|
|
<el-button plain @click="centerDialogVisible = true"> |
|
|
|
|
点击播放 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -149,26 +146,23 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { ref, watch } from 'vue' |
|
|
|
|
import { ref, watch,reactive } from 'vue' |
|
|
|
|
import type { TabsPaneContext } from 'element-plus' |
|
|
|
|
import ContainerCla from './ContainerCla.vue' |
|
|
|
|
import ContainerKno from './ContainerKno.vue' |
|
|
|
|
// import { getAssApi } from '@/api/courseChaptersApi' |
|
|
|
|
import { SeResourceFavourControllerService } from '../../../generated/services/SeResourceFavourControllerService' |
|
|
|
|
const centerDialogVisible = ref(false) |
|
|
|
|
|
|
|
|
|
const data = ref<any>({}) |
|
|
|
|
function hand1(item:any){ |
|
|
|
|
centerDialogVisible.value = true |
|
|
|
|
data.value= item |
|
|
|
|
console.log(data.value); |
|
|
|
|
} |
|
|
|
|
const activeIndex = ref(1) |
|
|
|
|
function hsndelShow(index: number) { |
|
|
|
|
activeIndex.value = index |
|
|
|
|
} |
|
|
|
|
// //========================= |
|
|
|
|
// 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) |
|
|
|
|
// 分页器 |
|
|
|
@ -193,19 +187,8 @@ watch(activeIndex, () => { |
|
|
|
|
initFenYie() |
|
|
|
|
getDatalist() |
|
|
|
|
}) |
|
|
|
|
// function hand() { |
|
|
|
|
// console.log(res) |
|
|
|
|
// // handleApi(params) |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
const params = { |
|
|
|
|
current: currentPage1.value, |
|
|
|
|
type: activeIndex.value, |
|
|
|
|
pageSize: pageSize1.value, |
|
|
|
|
sortField: '', |
|
|
|
|
sortOrder: '', |
|
|
|
|
userId: '3', |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const datalist = ref([ |
|
|
|
|
{ |
|
|
|
@ -221,6 +204,14 @@ const datalist = ref([ |
|
|
|
|
]) |
|
|
|
|
|
|
|
|
|
const getDatalist = async () => { |
|
|
|
|
const params = { |
|
|
|
|
current: currentPage1.value, |
|
|
|
|
type: activeIndex.value, |
|
|
|
|
pageSize: pageSize1.value, |
|
|
|
|
sortField: '', |
|
|
|
|
sortOrder: '', |
|
|
|
|
userId: '3', |
|
|
|
|
} |
|
|
|
|
const res = |
|
|
|
|
await SeResourceFavourControllerService.listPostByPageUsingPost3(params) |
|
|
|
|
datalist.value = res.data.records |
|
|
|
@ -228,17 +219,6 @@ const getDatalist = async () => { |
|
|
|
|
console.log(datalist.value[0]) |
|
|
|
|
} |
|
|
|
|
getDatalist() |
|
|
|
|
// hand() |
|
|
|
|
// const obj = { |
|
|
|
|
// type: activeIndex.value, |
|
|
|
|
// page: currentPage1.value, |
|
|
|
|
// pageSize: pageSize1.value, |
|
|
|
|
// sortField:'', |
|
|
|
|
// sortOrder:'', |
|
|
|
|
// resourceIdList: '' |
|
|
|
|
// } |
|
|
|
|
// handleApi(obj) |
|
|
|
|
//========================= |
|
|
|
|
|
|
|
|
|
const activeName = ref('first') |
|
|
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => { |
|
|
|
@ -354,20 +334,20 @@ const handleClick = (tab: TabsPaneContext, event: Event) => { |
|
|
|
|
// 简介页面中图片盒子 |
|
|
|
|
.ResImg-1 { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 60%; |
|
|
|
|
height: 215px; |
|
|
|
|
border-bottom: 1px solid rgb(229, 227, 227); |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
&>img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 简介页面课程描述 |
|
|
|
|
.ResClaDic { |
|
|
|
|
.ResClaDic-1 { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 40%; |
|
|
|
|
height: 85px; |
|
|
|
|
padding: 2%; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
@ -376,7 +356,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => { |
|
|
|
|
|
|
|
|
|
.ResImg-2 { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 60%; |
|
|
|
|
height: 225px; |
|
|
|
|
border-bottom: 1px solid rgb(214, 214, 214); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -386,9 +366,15 @@ const handleClick = (tab: TabsPaneContext, event: Event) => { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 5%; |
|
|
|
|
&>img{ |
|
|
|
|
height: 95%; |
|
|
|
|
width: 65%; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ResClaDic > p { |
|
|
|
|
.ResClaDic-1 > p { |
|
|
|
|
font-family: Inter, Inter; |
|
|
|
|
font-weight: 500; |
|
|
|
|
font-size: 20px; |
|
|
|
@ -401,7 +387,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => { |
|
|
|
|
.item_2-2, |
|
|
|
|
.item_2-5 { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 300px; |
|
|
|
|
height: 310px; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
border-left: 1px solid #e4e4e4; |
|
|
|
|
border-top: 1px solid #e4e4e4; |
|
|
|
@ -410,10 +396,27 @@ const handleClick = (tab: TabsPaneContext, event: Event) => { |
|
|
|
|
border-radius: 6px; |
|
|
|
|
margin-bottom: 32px; |
|
|
|
|
} |
|
|
|
|
.ResClaDic { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 85px; |
|
|
|
|
padding: 2%; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
} |
|
|
|
|
.ResClaDic > p { |
|
|
|
|
font-family: Inter, Inter; |
|
|
|
|
font-weight: 500; |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: #333333; |
|
|
|
|
line-height: 23px; |
|
|
|
|
text-align: left; |
|
|
|
|
margin-left: 5px; |
|
|
|
|
} |
|
|
|
|
.item_2-3, |
|
|
|
|
.item_2-4 { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 300px; |
|
|
|
|
height: 310px; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
border-left: 1px solid #e4e4e4; |
|
|
|
|
border-top: 1px solid #e4e4e4; |
|
|
|
|