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> |
<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> |
</template> |
||||||
|
|
||||||
<script lang="ts" setup> |
<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> |
</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