significative
3 months ago
parent
5a4398f8cb
commit
bce89463f2
4 changed files with 258 additions and 13 deletions
@ -0,0 +1,230 @@ |
||||
<script setup lang="ts"> |
||||
// import {} from 'vue'; |
||||
|
||||
// const params = ref({ |
||||
// pageNo: 1, |
||||
// pageSize: 7, |
||||
// // username: 'qiuqiu', |
||||
// userId: userStore.data.id, |
||||
// assessmenttype: '', |
||||
// category: '', |
||||
// nature: '', |
||||
// teacher: '', |
||||
// }) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="view-container"> |
||||
<div class="banner"></div> |
||||
<div class="container"> |
||||
|
||||
<div class="main-content" v-loading="0"> |
||||
<div class="header"> |
||||
<div class="btn"> |
||||
<div class="course"> |
||||
<ul class="course_list"> |
||||
<li v-if="1" @click="" class="add_course"> |
||||
<div class="plus"> |
||||
<el-icon class="avatar-uploader-icon"> |
||||
<Plus /> |
||||
</el-icon> |
||||
</div> |
||||
<h2 class="course_name">course_name</h2> |
||||
</li> |
||||
<li v-for="item in 7" :key="item"> |
||||
<img title="点击查看课程详情" :src="''" alt="" @click="" /> |
||||
<h2 title="点击查看课程基本信息" class="course_name" @click=""> |
||||
item.name |
||||
</h2> |
||||
<p class="teacher_name">讲师：item.teacher</p> |
||||
<p class="credit"> |
||||
<span>item.classhours</span> |
||||
学时 | |
||||
<span>item.credit</span> |
||||
学分 |
||||
</p> |
||||
<el-icon class="del" @click=""> |
||||
<Delete /> |
||||
</el-icon> |
||||
<el-button class="object" round plain @click=""> |
||||
查看课程详情 |
||||
</el-button> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- <el-pagination v-model:current-page="params.pageNo" v-model:page-size="params.pageSize" |
||||
:page-sizes="[2, 5, 7, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next " |
||||
:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" |
||||
style="margin-top: 10px; justify-content: center" /> --> |
||||
|
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.main-content { |
||||
width: 1440px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.header { |
||||
width: 100%; |
||||
// height: 100px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
} |
||||
|
||||
// .btn { |
||||
// // display: flex; |
||||
// width: 50%; |
||||
// height: 100%; |
||||
// padding: 10px 0; |
||||
// // display: inline; |
||||
// // height: 40px; |
||||
// // margin: 20px; |
||||
// // padding-left: 50px; |
||||
// } |
||||
.search { |
||||
width: 50%; |
||||
display: flex; |
||||
height: 100%; |
||||
justify-content: flex-end; |
||||
|
||||
// flex-direction: row-reverse; |
||||
// padding: 0 40px 0; |
||||
input { |
||||
width: 240px; |
||||
height: 40px; |
||||
border: 1px solid #dcdcdc; |
||||
border-radius: 60px; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
|
||||
.course { |
||||
|
||||
// display: flex; |
||||
// flex: 0 0 25%; |
||||
// justify-content: space-between; |
||||
// flex-wrap: wrap; |
||||
.course_list { |
||||
display: flex; |
||||
// flex: 0 0 25%; |
||||
// justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
column-gap: 50px; |
||||
} |
||||
|
||||
li { |
||||
margin: 40px 0; |
||||
width: 349px; |
||||
width: 100%; |
||||
height: 297px; |
||||
background: rgb(255, 255, 255); |
||||
transition: all 0.5s; |
||||
border-radius: 6px; |
||||
position: relative; |
||||
|
||||
// flex: 1; /* 子元素按比例伸缩 */ |
||||
&:hover { |
||||
transform: translate3d(0, -3px, 0); |
||||
box-shadow: 0 3px 8px rgb(0 0 0 / 20%); |
||||
} |
||||
|
||||
.course_name { |
||||
font-family: Inter-Bold; |
||||
color: #333; |
||||
font-size: 24px; |
||||
margin-left: 30px; |
||||
margin-top: 10px; |
||||
font-weight: bold; |
||||
|
||||
&:hover { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
img { |
||||
background-color: #cccccc; |
||||
width: 100%; |
||||
height: 178px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
p { |
||||
margin-left: 30px; |
||||
margin-top: 5px; |
||||
color: #555555; |
||||
font-size: 14px; |
||||
padding-top: 10px; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
|
||||
span { |
||||
color: #0052ff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.del { |
||||
position: absolute; |
||||
margin-left: 280px; |
||||
margin-top: -80px; |
||||
color: #0052ff; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.object { |
||||
position: absolute; |
||||
margin-left: 180px; |
||||
margin-top: -29px; |
||||
} |
||||
} |
||||
|
||||
.plus { |
||||
width: 100%; |
||||
height: 178px; |
||||
|
||||
&:hover { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
// background-position: center center; |
||||
.el-icon.avatar-uploader-icon { |
||||
font-size: 50px; |
||||
color: #8c939d; |
||||
width: 100%; |
||||
height: 178px; |
||||
margin-top: 20px; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.add_course { |
||||
border: 2px dashed rgb(143, 139, 139); |
||||
|
||||
h2 { |
||||
font-size: 40px; |
||||
text-align: center; |
||||
font-family: Inter-Bold; |
||||
color: #535050; |
||||
font-weight: bold; |
||||
margin-top: 20px; |
||||
|
||||
&:hover { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.short-form-item { |
||||
width: 300px; |
||||
margin-right: 100px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,5 @@ |
||||
declare module '*.vue' { |
||||
import { DefineComponent } from "vue" |
||||
const component: ReturnType<typeof DefineComponent> |
||||
export default component |
||||
} |
||||
Loading…
Reference in new issue