parent
b23c8a3ff1
commit
15863f54c7
9 changed files with 686 additions and 316 deletions
@ -0,0 +1,140 @@ |
||||
<template> |
||||
<div class="container"> |
||||
|
||||
<div class="left"> |
||||
<div class="header"> |
||||
<span>课程学习路径</span> |
||||
<div class="extra"> |
||||
<input type="text" placeholder="请输入课程名称" name="" id=""> |
||||
<el-button class="btn" type="primary" :icon="Search">搜索</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="box"> |
||||
|
||||
|
||||
<el-table :data="learnPath" style="width: 95%; margin: 50px auto;"> |
||||
<el-table-column label="课程名称" prop="name"> </el-table-column> |
||||
<el-table-column label="路径序列" prop="ll"></el-table-column> |
||||
<el-table-column label="知识点个数" prop="ge" width="100"></el-table-column> |
||||
<el-table-column label="总学时" prop="tla" width="100"></el-table-column> |
||||
</el-table> |
||||
|
||||
<div class="page"> |
||||
<el-pagination style="margin-left: 350px;" @size-change="onSizeChange" @current-change="onCurrentChange" |
||||
:current-page="params.pegenum" :page-sizes="[6,7,8,]" :page-size="params.pagesize" |
||||
layout="jumper,total, sizes, prev, pager, next, " :total="7"> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="infomation">资讯列表</div> |
||||
<div class="student">学生列表</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref } from "vue" |
||||
import { Search } from "@element-plus/icons-vue"; |
||||
|
||||
const learnPath=ref([{ |
||||
name:'软件项目管理', |
||||
ll:'aaa,bbb', |
||||
ge:'30', |
||||
tla:'32' |
||||
}, |
||||
{ |
||||
name: '软件分析与设计', |
||||
ll: 'aaa,bbb', |
||||
ge: '30', |
||||
tla: '32' |
||||
}, |
||||
{ |
||||
name: '软件项目管理', |
||||
ll: 'aaa,bbb,ccc,ddd,aaa,', |
||||
ge: '30', |
||||
tla: '32' |
||||
}, |
||||
{ |
||||
name: '软件分析与设计', |
||||
ll: 'aaa,bbb', |
||||
ge: '30', |
||||
tla: '32' |
||||
}, |
||||
{ |
||||
name: '软件项目管理', |
||||
ll: 'aaa,bbb', |
||||
ge: '30', |
||||
tla: '32' |
||||
}, |
||||
{ |
||||
name: '软件分析与设计', |
||||
ll: 'aaa,bbb', |
||||
ge: '30', |
||||
tla: '32' |
||||
}, |
||||
{ |
||||
name: '软件项目管理', |
||||
ll: 'aaa,bbb', |
||||
ge: '30', |
||||
tla: '32' |
||||
}, |
||||
|
||||
]) |
||||
const params=ref({ |
||||
pegenum:1,//当前页 |
||||
pagesize:5,//当前生效的每页条数 |
||||
cate_id:'', |
||||
state:'' |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.container { |
||||
width: $base-container-width; |
||||
height: 650px; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
box-sizing: border-box; |
||||
|
||||
|
||||
.header { |
||||
margin: 20px 30px 60px 30px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
font-size: 22px; |
||||
.extra input{ |
||||
font-size: 13px; |
||||
width: 200px; |
||||
height: 35px; |
||||
margin-right: 6px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.left { |
||||
width: 1200px; |
||||
height: 620px; |
||||
background-color: #ffffff; |
||||
margin: 10px 10px 0 0; |
||||
} |
||||
|
||||
.right { |
||||
width: 410px; |
||||
height: 500px; |
||||
margin-top: 10px; |
||||
|
||||
.infomation, |
||||
.student { |
||||
height: 305px; |
||||
margin-bottom: 10px; |
||||
background-color: #ffffff; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,343 @@ |
||||
<script setup lang="ts"> |
||||
// import { onMounted, ref, watch } from 'vue'; |
||||
// import { useRouter } from 'vue-router'; |
||||
// import useLearnPathStore from '@/store/module/learnPath'; |
||||
// import { userGetInfoService, getCourseListApi } from '@/api/configuration'; |
||||
// import useUserStore from '@/store/module/user'; |
||||
// const userStore = useUserStore() |
||||
// const $router = useRouter() |
||||
// const learnPathStore = useLearnPathStore() |
||||
// function paginationChange(currentPage: number, pageSize: number) { |
||||
// params.value.pageNo = currentPage |
||||
// params.value.pageSize = pageSize |
||||
// getCourseList() |
||||
// } |
||||
// const params = ref({ |
||||
// pageNo: 1, |
||||
// pageSize: 7, |
||||
// // username: 'qiuqiu', |
||||
// userId: userStore.userInfo.id, |
||||
// assessmenttype: '', |
||||
// category: '', |
||||
// nature: '', |
||||
// teacher: '', |
||||
// }) |
||||
// const getCourseList = async () => { |
||||
// loading.value = true |
||||
// const res = await getCourseListApi(params.value) |
||||
// courseList.value = res.data.list |
||||
// total.value = res.data.total |
||||
// loading.value = false |
||||
// // console.log(userStore.userName, '1111') |
||||
// } |
||||
// watch(() => userStore.userInfo.id, (newVal) => { |
||||
// params.value.userId = newVal |
||||
// getCourseList() |
||||
// }) |
||||
|
||||
|
||||
|
||||
// onMounted(() => { |
||||
// if (userStore.userInfo.id) getCourseList() |
||||
// }) |
||||
// const total = ref(0) |
||||
// const loading = ref(false) |
||||
// const courseList = ref() |
||||
|
||||
|
||||
// const isLogin = ref(false) |
||||
// userGetInfoService(userStore.token).then(res => { |
||||
// // @ts-ignore |
||||
// if (res.code === 200) { |
||||
// isLogin.value = true |
||||
// } |
||||
// }) |
||||
// function skip(url: string) { |
||||
// location.assign(url) |
||||
// } |
||||
// function handlePraise(item: any) { |
||||
// if (isLogin.value) item.isPraise = !item.isPraise |
||||
// else skip('http://localhost:5173/#/login?redirect=/configurationPage') |
||||
// } |
||||
// function handleStar(item: any) { |
||||
// if (isLogin.value) item.isStar = !item.isStar |
||||
// else skip('http://localhost:5173/#/login?redirect=/configurationPage') |
||||
// } |
||||
|
||||
|
||||
// // 点击查看课程详情，把课程id传过去 |
||||
// const onGetCourseObject = async (id: any) => { |
||||
|
||||
// skip(`http://localhost:5173/#/curriculumCenter/courseDetails?id=${id}`) |
||||
|
||||
// } |
||||
|
||||
// function toPath(item: any) { |
||||
// $router.push({ |
||||
// path:'/roadbedRecommendation', |
||||
// query:{ |
||||
// isCourse:'true', |
||||
// id:item.id |
||||
// } |
||||
|
||||
// }) |
||||
// learnPathStore.setCourseData(item) |
||||
// } |
||||
</script> |
||||
|
||||
<template> |
||||
<div>aaa</div> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <div class="view-container" > |
||||
<div class="container" style="padding-bottom: 20px;"> |
||||
<div class="main-content"> |
||||
<div class="header"> |
||||
<div class="btn"> |
||||
<div class="course"> |
||||
<ul class="course_list"> |
||||
<li v-for="item in courseList" :key="item.id"> |
||||
<img title="点击查看课程详情" :src="item.img" alt="" @click="onGetCourseObject(item.id)" /> |
||||
<h2 title="点击查看课程基本信息" class="course_name"> |
||||
{{ item.name }} |
||||
</h2> |
||||
<p class="teacher_name">讲师：{{ item.teacher }}</p> |
||||
<p class="credit"> |
||||
<span>{{ item.classhours }}</span> |
||||
学时 | |
||||
<span>{{ item.credit }}</span> |
||||
学分 |
||||
</p> |
||||
|
||||
<div class="parent"> |
||||
<div class="div1" @click="handlePraise(item)"> |
||||
<SvgIcon v-if="!item.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(item)"> |
||||
<SvgIcon v-if="!item.isStar" width="12px" height="12px" name="Star"> |
||||
</SvgIcon> |
||||
<SvgIcon v-else width="12px" height="12px" name="StarFilled" |
||||
color="#f7ba2a"></SvgIcon> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="object"> |
||||
<el-button round plain @click="onGetCourseObject(item.id)"> |
||||
详情 |
||||
</el-button> |
||||
<el-button round plain @click="toPath(item)"> |
||||
路径规划 |
||||
</el-button> |
||||
</div> |
||||
|
||||
</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" @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: 280px; |
||||
// 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> |
||||
Loading…
Reference in new issue