Your Name
6 months ago
parent
c40f11c115
commit
93cb03a381
4 changed files with 298 additions and 230 deletions
@ -0,0 +1,168 @@ |
|||||||
|
<template> |
||||||
|
<!-- 课程收藏页面 --> |
||||||
|
<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="ClassGd"> |
||||||
|
<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> |
||||||
|
<div class="Page-1"> |
||||||
|
<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[1, 2, 3, 4]" |
||||||
|
:small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" |
||||||
|
:total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
||||||
|
</div> |
||||||
|
</el-tab-pane> |
||||||
|
</template> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.el-pagination { |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.example-pagination-block+.example-pagination-block { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.example-pagination-block .example-demonstration { |
||||||
|
margin-bottom: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.curse-collection { |
||||||
|
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; |
||||||
|
} |
||||||
|
|
||||||
|
.item_1:hover { |
||||||
|
.ClassGd { |
||||||
|
display: block; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.ClassGd { |
||||||
|
position: absolute; |
||||||
|
display: none; |
||||||
|
margin-top: -9px; |
||||||
|
margin-left: 95%; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.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; |
||||||
|
} |
||||||
|
|
||||||
|
.Page-1 { |
||||||
|
width: 100%; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
</style > |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
<template></template> |
||||||
|
<script lang="ts" setup> |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped></style> |
||||||
Loading…
Reference in new issue