Merge branch 'develoop' of http://182.92.169.222:3000/dlsx/Teaching_integration_platform_template into develoop
JayChou
3 months ago
commit
dc81277329
13 changed files with 402 additions and 37 deletions
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 816 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 67 KiB |
@ -0,0 +1,274 @@ |
||||
<script setup lang="ts"> |
||||
import { ref } from 'vue'; |
||||
|
||||
const paginationData = ref({ |
||||
pageNo: 1, |
||||
pageSize: 7, |
||||
total: 7 |
||||
}) |
||||
function paginationChange(currentPage: number, pageSize: number) { |
||||
|
||||
} |
||||
|
||||
// 临时的，有接口后使用接口数据 |
||||
const isPraise = ref(true) |
||||
const isStar = ref(true) |
||||
function handlePraise() { |
||||
isPraise.value = !isPraise.value |
||||
} |
||||
function handleStar() { |
||||
isStar.value = !isStar.value |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="view-container"> |
||||
<div class="container" style="padding-bottom: 20px;"> |
||||
|
||||
<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">点击添加课程</h2> |
||||
</li> |
||||
<li v-for="item in 7" :key="item"> |
||||
<img title="点击查看课程详情" :src="''" alt="" @click="" /> |
||||
<h2 title="点击查看课程基本信息" class="course_name" @click=""> |
||||
软件项目管理 |
||||
</h2> |
||||
<p class="teacher_name">讲师：肖海南</p> |
||||
<p class="credit"> |
||||
<span>4</span> |
||||
学时 | |
||||
<span>4</span> |
||||
学分 |
||||
</p> |
||||
|
||||
<div class="parent"> |
||||
<div class="div1" @click="handlePraise"> |
||||
<SvgIcon v-if="isPraise" width="12px" height="12px" name="Praise"></SvgIcon> |
||||
<SvgIcon v-else width="12px" height="12px" name="PraiseFilled" |
||||
color="#f7ba2a"></SvgIcon> |
||||
</div> |
||||
<div class="div2" @click="handleStar"> |
||||
<SvgIcon v-if="isStar" width="12px" height="12px" name="Star"></SvgIcon> |
||||
<SvgIcon v-else width="12px" height="12px" name="StarFilled" |
||||
color="#f7ba2a"></SvgIcon> |
||||
</div> |
||||
|
||||
</div> |
||||
<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="paginationData.pageNo" v-model:page-size="paginationData.pageSize" |
||||
:page-sizes="[2, 5, 7, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next " |
||||
:total="paginationData.total" @change="paginationChange" |
||||
style="margin-top: 10px; justify-content: center" /> |
||||
|
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.parent { |
||||
display: grid; |
||||
grid-template-columns: repeat(2, 1fr); |
||||
grid-template-rows: 1fr; |
||||
grid-column-gap: 5px; |
||||
grid-row-gap: 0px; |
||||
position: absolute; |
||||
margin-left: 245px; |
||||
margin-top: -80px; |
||||
color: #0052ff; |
||||
cursor: pointer; |
||||
|
||||
.div1 { |
||||
grid-area: 1 / 1 / 2 / 2; |
||||
} |
||||
|
||||
.div2 { |
||||
grid-area: 1 / 2 / 2 / 3; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
.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; |
||||
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