mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-25 02:32:52 +08:00
502 lines
12 KiB
Vue
502 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<div class="empBanner">
|
||
</div>
|
||
<div class="xindex-content" style="padding: 0">
|
||
<div class="modules xcontent2">
|
||
<div class="xcontent2-main">
|
||
<div class="navTop">
|
||
<div>
|
||
<router-link to="/grateful" class="nav">首页</router-link> >
|
||
<span style="cursor: pointer;" class="nav">教师赋能</span>
|
||
</div>
|
||
<div style="position: relative;">
|
||
<el-input class="portal-input" placeholder="请输入课程名称" style="border-radius: 20px !important; "
|
||
@keyup.enter.native="searchJump()" clearable maxlength="50" v-model="param.name">
|
||
</el-input>
|
||
<el-button class="sear-but" @click="searchJump()" type="primary" size="mini">搜索</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 教师赋能 -->
|
||
<div class="xindex-content" style="padding: 0">
|
||
<div class="modules xcontent2">
|
||
<div class="xcontent2-main">
|
||
<div class="modules-list list" style="margin-top: 0">
|
||
<!--内容列表内容-->
|
||
<div v-for="(course, ccidx) in list" :key="'cc' + ccidx" class="xindex-course" style="position: relative">
|
||
<a @click="toCourseDetail(course)">
|
||
<div class="xindex-course-image">
|
||
<course-image :course="course"></course-image>
|
||
<span v-if="course.type == 20 || course.type == 10" class="course-type">录播课</span>
|
||
<span v-if="course.type == 30" class="course-type">面授课</span>
|
||
<span v-if="course.type == 40" class="course-type">学习项目</span>
|
||
</div>
|
||
<div style="width: 80%" :title="course.name" v-html="course.name"
|
||
class="course-title portal-title-tow two-line-ellipsis"></div>
|
||
<div class="course-author">
|
||
<div class="course-author-left">
|
||
{{ course.teacher }}
|
||
<span class="study-num">{{ formatNum(course.studies) }}人学习</span>
|
||
</div>
|
||
<div style="display: flex">
|
||
<div v-if="course.score != '0'">
|
||
<span class="course-score-value" style="margin-left: 10px">{{ toScore(Number(course.score))
|
||
}}分</span>
|
||
</div>
|
||
<div v-else class="course-score-no">未评分</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div v-if="list.length == 0" class="pagination-div">
|
||
<span class="notcoures">
|
||
<img :src="`${webBaseUrl}/images/nocase.png`" alt="">
|
||
<h5>暂无数据～</h5>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="list.length !== 0" style="margin-bottom: 45px;">
|
||
<pagination :size="param.pageSize" :total="total" :page="param.pageNo" @change-size="changePageSize"
|
||
@change-page="loadData" style="background-color: rgba(0, 0, 0, 0);" :autoScroll="false"
|
||
:pageSizes="[12, 24, 36, 48]"></pagination>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import apiCourseStudy from "@/api/modules/courseStudy.js";
|
||
import courseImage from "@/components/Course/courseImage.vue";
|
||
import { toScore, formatUserNumber } from "@/utils/tools.js";
|
||
import { courselList } from '@/api/modules/grateful.js'
|
||
export default {
|
||
name: "TeacherEmpowerment",
|
||
components: {
|
||
courseImage,
|
||
},
|
||
data() {
|
||
return {
|
||
formatNum: formatUserNumber,
|
||
toScore,
|
||
list: [],
|
||
total: 0,
|
||
param: {
|
||
name: '',
|
||
pageNo: 1,
|
||
pageSize: 12
|
||
}
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getCourseData();
|
||
},
|
||
methods: {
|
||
searchJump() {
|
||
this.param.pageNo = 1
|
||
this.getCourseData();
|
||
},
|
||
changePageSize(pageSize) {
|
||
this.param.pageSize = pageSize;
|
||
this.getCourseData()
|
||
},
|
||
loadData(pageNo) {
|
||
this.param.pageNo = pageNo
|
||
this.getCourseData()
|
||
},
|
||
getPic(index) {
|
||
return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
|
||
},
|
||
toCourseDetail(item) {
|
||
//二期调整，直接改成一个地址
|
||
//return this.webBaseUrl + '/course/detail?id=' + item.id;
|
||
let $this = this;
|
||
if (item.type == 10) {
|
||
//return this.webBaseUrl + "/course/studyindex?id=" + item.id;
|
||
//console.log("直接进入学习页面");
|
||
this.$router.push("/course/studyindex?id=" + item.courseId);
|
||
} else if (item.type == 20) {
|
||
apiCourseStudy.hasSignup(item.courseId).then((rs) => {
|
||
if (rs.status == 200) {
|
||
//return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
|
||
this.$router.push("/course/studyindex?id=" + item.courseId);
|
||
} else {
|
||
//return $this.webBaseUrl + "/course/detail?id=" + item.id;
|
||
this.$router.push("/course/detail?id=" + item.courseId);
|
||
}
|
||
});
|
||
//return $this.webBaseUrl + "/course/detail?id=" + item.id;
|
||
}
|
||
},
|
||
//高亮
|
||
brightenKeyword(val, keyword) {
|
||
const Reg = new RegExp(keyword, 'i');
|
||
let res = '';
|
||
if (val) {
|
||
res = val.replace(Reg, `<span style="color: #3e7fff;">${keyword}</span>`);
|
||
return res;
|
||
}
|
||
},
|
||
getCourseData() {
|
||
courselList(this.param).then((res) => {
|
||
if (res.code == 200 && res.data.records.length > 0) {
|
||
console.log(res.data, '之前的');
|
||
res.data.records.forEach(item => {
|
||
item.name = this.brightenKeyword(item.name, this.param.name);
|
||
});
|
||
this.list = res.data.records;
|
||
this.total = res.data.total
|
||
} else {
|
||
console.log("加载课程信息失败:" + res.error);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.nav:hover {
|
||
color: #387DF7;
|
||
}
|
||
|
||
.empBanner {
|
||
width: 100%;
|
||
height: 240px;
|
||
position: relative;
|
||
background: url('../../assets/images/grateful/empBanner.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
&::before {
|
||
content: url(../../assets/images//grateful/logo.png);
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 40px;
|
||
}
|
||
|
||
&::after {
|
||
content: '教师赋能';
|
||
position: absolute;
|
||
bottom: 25px;
|
||
left: 180px;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
font-size: 64px;
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 240px;
|
||
}
|
||
}
|
||
|
||
.navTop {
|
||
color: #666;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.sear-but {
|
||
position: absolute;
|
||
bottom: 10%;
|
||
right: 5px;
|
||
}
|
||
}
|
||
|
||
.xindex-course-image:hover {
|
||
transform: scale(1.2) translateY(-15px);
|
||
transition: all 0.6s;
|
||
}
|
||
|
||
|
||
.two-line-ellipsis {
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
// 内容部分
|
||
.modules {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
|
||
.modules-title {
|
||
.modules-text {
|
||
height: 28px;
|
||
font-size: 20px;
|
||
font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
}
|
||
|
||
.recommend {
|
||
vertical-align: text-bottom;
|
||
height: 26px;
|
||
}
|
||
|
||
.quyer-tag {
|
||
margin-left: 15px;
|
||
|
||
a {
|
||
color: #333333;
|
||
font-size: 14px;
|
||
margin: 0 15px;
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
outline: none;
|
||
}
|
||
|
||
.current {
|
||
width: 44px;
|
||
height: 26px;
|
||
background: #387df7;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
line-height: 26px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.more {
|
||
float: right;
|
||
margin-top: 7px;
|
||
margin-right: 30px;
|
||
color: #333333;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.pagination-div {
|
||
text-align: center;
|
||
padding: 70px 0;
|
||
}
|
||
|
||
.modules-list {
|
||
margin-top: 30px;
|
||
|
||
.case-card {
|
||
margin-bottom: 15px;
|
||
|
||
.case-info-image-box {
|
||
position: relative;
|
||
|
||
.case-info {
|
||
width: 385px;
|
||
|
||
.case-info-title {
|
||
font-size: 18px;
|
||
color: #343434;
|
||
margin-bottom: 5px;
|
||
|
||
.case-info-time {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
float: right;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
.case-info-summary {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
height: 82px;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 160px;
|
||
height: 105px;
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.case-info-box {
|
||
.case-info {
|
||
.case-info-title {
|
||
font-size: 18px;
|
||
color: #343434;
|
||
margin-bottom: 5px;
|
||
|
||
.case-info-time {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
float: right;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
.case-info-summary {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
height: 82px;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.case-other-info {
|
||
height: 40px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.article-card {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
|
||
.article-card-left {
|
||
.article-card-box {
|
||
.article-info-image-box {
|
||
border-radius: 4px;
|
||
|
||
.article-info {
|
||
height: 400px;
|
||
|
||
.article-info-title {
|
||
font-size: 16px;
|
||
color: #00253e;
|
||
font-weight: 500;
|
||
margin-bottom: 5px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.article-info-summary {
|
||
font-size: 14px;
|
||
color: #6e7b84;
|
||
height: 160px;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 470px;
|
||
height: 330px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-card-right {
|
||
flex: 1;
|
||
margin-left: 28px;
|
||
|
||
.article-card-box {
|
||
margin-bottom: 16px;
|
||
padding-bottom: 16px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0px;
|
||
padding-bottom: 0px;
|
||
}
|
||
|
||
.article-info-box {
|
||
.article-info {
|
||
display: flex;
|
||
|
||
.article-image {
|
||
width: 140px;
|
||
height: 105px;
|
||
margin-top: 10px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.article-body {
|
||
flex: 1;
|
||
|
||
.article-info-title {
|
||
font-size: 18px;
|
||
color: #343434;
|
||
margin-bottom: 5px;
|
||
|
||
.article-info-time {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
float: right;
|
||
margin-top: 8px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.article-info-summary {
|
||
padding-top: 9px;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
height: 43px;
|
||
line-height: 18px;
|
||
font-weight: 500;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-card-box:not(:last-child) {
|
||
border-bottom: 1px solid #ededed;
|
||
}
|
||
}
|
||
|
||
.article-other-info {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.qa-card {
|
||
box-sizing: border-box;
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.qa-top {
|
||
& span:first-child {
|
||
height: 24px;
|
||
background: rgba($color: #387df7, $alpha: 0.05);
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: #387df7;
|
||
}
|
||
|
||
span {
|
||
color: #6e7b84;
|
||
}
|
||
}
|
||
|
||
.qa-center {
|
||
position: relative;
|
||
background: rgba($color: #04243c, $alpha: 0.04);
|
||
border-radius: 4px;
|
||
|
||
.qa-views {
|
||
position: absolute;
|
||
color: #6e7b84;
|
||
}
|
||
}
|
||
|
||
.qa-char {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
display: grid;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
</style>
|