Your Name
6 months ago
parent
cee5234eb1
commit
c4cd69b2ed
20 changed files with 1658 additions and 921 deletions
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 708 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 882 B |
|
Before Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 924 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 74 KiB |
@ -1,9 +1,542 @@ |
||||
<template> |
||||
<div>课程收藏</div> |
||||
<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>学时 |
||||
| |
||||
<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-tab-pane label="资源收藏" name="second"> |
||||
<div class="Container_Res"> |
||||
<ul class="Container_Res_Tab"> |
||||
<li class="img-svg" @click="hsndelShow(1)"> |
||||
<img src="../../assets/icons/课程简介.svg" alt="简介"> |
||||
<br> |
||||
<p>简介</p> |
||||
</li> |
||||
<li class="img-svg" @click="hsndelShow(2)"> |
||||
<img src="../../assets/icons/PPT文件.svg" alt="PPT"> |
||||
<br> |
||||
<p>PPT</p> |
||||
</li> |
||||
<li class="img-svg" @click="hsndelShow(3)"> |
||||
<img src="../../assets/icons/视频.svg" alt="视频"> |
||||
<br> |
||||
<p>视频</p> |
||||
</li> |
||||
<li class="img-svg" @click="hsndelShow(4)"> |
||||
<img src="../../assets/icons/文本.svg" alt="文本"> |
||||
<br> |
||||
<p>文本</p> |
||||
</li> |
||||
<li class="img-svg" @click="hsndelShow(5)"> |
||||
<img src="../../assets/icons/音频.svg" alt="音频"> |
||||
<br> |
||||
<p>音频</p> |
||||
</li> |
||||
</ul> |
||||
<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"> |
||||
<img src="../../assets/images/kctp.png"> |
||||
</div> |
||||
<div class="ResClaDic"> |
||||
<p>课程名称-----{{ item }}</p> |
||||
<P>课程描述-----{{ item }}</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 class="Res_con" v-show="activeIndex == 2"> |
||||
<div class="item_2-2" v-for="(item, index) in 7" :key="index"> |
||||
<div class="ResImg-2"> |
||||
<div class="Img"> |
||||
<img src="../../assets/icons/ppt.png"> |
||||
</div> |
||||
</div> |
||||
<div class="ResClaDic"> |
||||
<p>PPT名称-----{{ item }}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<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"> |
||||
<div class="Img"> |
||||
<img src="../../assets/icons/视频.png"> |
||||
</div> |
||||
</div> |
||||
<div class="ResClaDic"> |
||||
<p>视频名称-----{{ item }}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<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"> |
||||
<div class="Img"> |
||||
<img src="../../assets/icons/文本.png"> |
||||
</div> |
||||
</div> |
||||
<div class="ResClaDic"> |
||||
<p>文本名称-----{{ item }}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<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"> |
||||
<div class="Img"> |
||||
<img src="../../assets/icons/音频.png"> |
||||
</div> |
||||
</div> |
||||
<div class="ResClaDic"> |
||||
<p>音频名称-----{{ item }}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</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"> |
||||
<div> |
||||
<div class="KnowledgeCollent"> |
||||
<div class="KnoCon"> |
||||
<h4>课程名称</h4> |
||||
<p>第{{ item_3 }}章-xxxx</p> |
||||
</div> |
||||
<div class="KnoBtn"> |
||||
<img src="../../assets/icons/更多.svg" alt=""> |
||||
</div> |
||||
</div> |
||||
<div class="Knowledge_point"> |
||||
<ul> |
||||
<li v-for="(item, index) in 6" :key="index"> |
||||
知识点{{ item }} |
||||
<div @click="" class="btn">×</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
<el-backtop :right="100" :bottom="100" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import {} from 'vue' |
||||
import { ref } from 'vue' |
||||
import type { TabsPaneContext } from 'element-plus' |
||||
import axios from 'axios'; |
||||
// import { getDataListApi } from '@/api/user/corc.js' |
||||
const activeIndex = ref(1) |
||||
function hsndelShow(index: number) { |
||||
|
||||
activeIndex.value = index |
||||
console.log('触发了', index, activeIndex.value) |
||||
} |
||||
axios({ |
||||
url: "", |
||||
method: 'GET', |
||||
|
||||
}) |
||||
|
||||
const activeName = ref('first') |
||||
const handleClick = (tab: TabsPaneContext, event: Event) => { |
||||
console.log(tab, event) |
||||
} |
||||
const params = ref({ |
||||
page: 1, |
||||
pageNum: 12 |
||||
}) |
||||
const total = ref(0) |
||||
const datalist = ref([ |
||||
|
||||
]) |
||||
const getDatalist = async () => { |
||||
const res = await getDataListApi(params.value) |
||||
datalist.value = res.data.pagerecords |
||||
total.value = res.data.pageTotal |
||||
} |
||||
getDatalist() |
||||
const handleSizeChange = (size: any) => { |
||||
// console.log(size) |
||||
params.value.page = 1 |
||||
params.value.pageNum = size |
||||
// 基于每页条数重新渲染 |
||||
getDatalist() |
||||
} |
||||
const handleCurrentChange = (page: any) => { |
||||
console.log(page) |
||||
params.value.page = page |
||||
// 基于当前页渲染数据 |
||||
// getCourseList() |
||||
getDatalist() |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
<style lang="scss" scoped> |
||||
.example-pagination-block+.example-pagination-block { |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.example-pagination-block .example-demonstration { |
||||
margin-bottom: 16px; |
||||
} |
||||
|
||||
.curse-collection { |
||||
// margin-left: -20px; |
||||
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; |
||||
} |
||||
|
||||
.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; |
||||
border-bottom: #e4e4e4 solid 1px; |
||||
flex-direction: row; |
||||
} |
||||
|
||||
.img-svg { |
||||
width: 54px; |
||||
height: 58px; |
||||
padding: 4px 11px 6px 11px; |
||||
} |
||||
|
||||
.img-svg>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 { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.Res_con { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fill, 350px); |
||||
justify-content: space-around; |
||||
background-color: #ffffff; |
||||
} |
||||
|
||||
.item_2-1 { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-top: 20px; |
||||
border-radius: 6px; |
||||
border-left: 1px solid #e4e4e4; |
||||
border-top: 1px solid #e4e4e4; |
||||
overflow: hidden; |
||||
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 { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
|
||||
.ResClaDic { |
||||
width: 100%; |
||||
height: 40%; |
||||
padding: 2%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
} |
||||
|
||||
.ResImg-2 { |
||||
width: 100%; |
||||
height: 60%; |
||||
border-bottom: 1px solid rgb(214, 214, 214); |
||||
} |
||||
|
||||
.Img { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.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-2, |
||||
.item_2-3, |
||||
.item_2-4, |
||||
.item_2-5 { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-top: 20px; |
||||
border-left: 1px solid #e4e4e4; |
||||
border-top: 1px solid #e4e4e4; |
||||
overflow: hidden; |
||||
box-shadow: 2px 2px 2px 2px rgba(214, 212, 212, 0.5); |
||||
border-radius: 6px; |
||||
} |
||||
|
||||
.Container_Kno { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 15px; |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fill, 210px); |
||||
justify-content: space-around; |
||||
background-color: #F2F7FB; |
||||
} |
||||
|
||||
.item_3 { |
||||
width: 200px; |
||||
height: 240px; |
||||
margin-bottom: 18px; |
||||
padding-left: 15px; |
||||
border: 1px solid #e4e4e4; |
||||
border-radius: 6px; |
||||
box-shadow: 2px 2px 2px 2px #dbd8d8; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.KnowledgeCollent { |
||||
width: 100%; |
||||
height: 55px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-direction: row; |
||||
padding-left: 15px; |
||||
padding-right: 30px; |
||||
} |
||||
|
||||
.KnoCon { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
} |
||||
|
||||
.KnoBtn>img { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.KnowledgeCollent h4 { |
||||
margin-top: 3px; |
||||
font-size: 24px; |
||||
font-weight: 550; |
||||
font-style: normal; |
||||
} |
||||
|
||||
.KnowledgeCollent p { |
||||
margin-left: 3px; |
||||
font-size: 14px; |
||||
font-weight: 500; |
||||
font-style: normal; |
||||
} |
||||
|
||||
.Knowledge_point { |
||||
height: 185px; |
||||
padding-left: 5px; |
||||
font-size: 15px; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-direction: column |
||||
} |
||||
|
||||
.Knowledge_point>ul>li { |
||||
display: inline-block; |
||||
margin-top: 5px; |
||||
margin-bottom: 5px; |
||||
font-family: Inter, Inter; |
||||
font-weight: bold; |
||||
font-size: 12px; |
||||
color: #0052D9; |
||||
line-height: 20px; |
||||
padding-left: 5px; |
||||
background-color: #bfc5fe; |
||||
border-radius: 3px; |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
.btn { |
||||
display: inline; |
||||
} |
||||
|
||||
.btn:hover { |
||||
cursor: pointer; |
||||
color: rgb(15, 57, 76); |
||||
} |
||||
|
||||
.bu { |
||||
width: 20%; |
||||
height: 10%; |
||||
z-index: 10; |
||||
padding-left: 93%; |
||||
position: absolute; |
||||
// display: none; |
||||
} |
||||
|
||||
.item_1 :hover { |
||||
|
||||
&.bu { |
||||
display: block; |
||||
background-color: #0052D9; |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue