|
|
|
|
@ -1,22 +1,29 @@ |
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
// import {} from 'vue'; |
|
|
|
|
|
|
|
|
|
// const params = ref({ |
|
|
|
|
// pageNo: 1, |
|
|
|
|
// pageSize: 7, |
|
|
|
|
// // username: 'qiuqiu', |
|
|
|
|
// userId: userStore.data.id, |
|
|
|
|
// assessmenttype: '', |
|
|
|
|
// category: '', |
|
|
|
|
// nature: '', |
|
|
|
|
// teacher: '', |
|
|
|
|
// }) |
|
|
|
|
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="banner"></div> |
|
|
|
|
<div class="container"> |
|
|
|
|
<div class="container" style="padding-bottom: 20px;"> |
|
|
|
|
|
|
|
|
|
<div class="main-content" v-loading="0"> |
|
|
|
|
<div class="header"> |
|
|
|
|
@ -29,20 +36,34 @@ |
|
|
|
|
<Plus /> |
|
|
|
|
</el-icon> |
|
|
|
|
</div> |
|
|
|
|
<h2 class="course_name">course_name</h2> |
|
|
|
|
<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=""> |
|
|
|
|
item.name |
|
|
|
|
软件项目管理 |
|
|
|
|
</h2> |
|
|
|
|
<p class="teacher_name">讲师：item.teacher</p> |
|
|
|
|
<p class="teacher_name">讲师：肖海南</p> |
|
|
|
|
<p class="credit"> |
|
|
|
|
<span>item.classhours</span> |
|
|
|
|
<span>4</span> |
|
|
|
|
学时 | |
|
|
|
|
<span>item.credit</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> |
|
|
|
|
@ -55,16 +76,40 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- <el-pagination v-model:current-page="params.pageNo" v-model:page-size="params.pageSize" |
|
|
|
|
<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="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" |
|
|
|
|
style="margin-top: 10px; justify-content: center" /> --> |
|
|
|
|
: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; |
|
|
|
|
@ -123,7 +168,6 @@ |
|
|
|
|
li { |
|
|
|
|
margin: 40px 0; |
|
|
|
|
width: 349px; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 297px; |
|
|
|
|
background: rgb(255, 255, 255); |
|
|
|
|
transition: all 0.5s; |
|
|
|
|
|
significative
3 months ago
