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