mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 11:26:43 +08:00
修改
This commit is contained in:
@@ -14,6 +14,8 @@ const courselList = (data = {}) => ajax.postJson(baseURL, '/xboe/m/boe/course/li
|
|||||||
const noticeDataById = (id) => ajax.get(baseURL, `/xboe/m/boe/notice/getDataById?id=${id}`);
|
const noticeDataById = (id) => ajax.get(baseURL, `/xboe/m/boe/notice/getDataById?id=${id}`);
|
||||||
//教师列表
|
//教师列表
|
||||||
const teachersList = (data = {}) => ajax.postJson(baseURL, '/xboe/m/boe/teachers/list', data);
|
const teachersList = (data = {}) => ajax.postJson(baseURL, '/xboe/m/boe/teachers/list', data);
|
||||||
|
//教师列表
|
||||||
|
const carouselList = (data = {}) => ajax.postJson(baseURL, '/xboe/m/boe/rotation/list', data);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -25,5 +27,6 @@ export {
|
|||||||
noticeList,
|
noticeList,
|
||||||
noticeDataById,
|
noticeDataById,
|
||||||
courselList,
|
courselList,
|
||||||
teachersList
|
teachersList,
|
||||||
|
carouselList
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<!--用于显示课程的图片-->
|
<!--用于显示课程的图片-->
|
||||||
<div style="border-radius: 5px;" class="img-box" id="img-box">
|
<div style="border-radius: 5px;" class="img-box" id="img-box">
|
||||||
<el-image
|
<el-image style="background-color: #eeeeee;border-radius: 5px;" :style="`width:${width};height:${height};`"
|
||||||
style="background-color: #eeeeee;border-radius: 5px;"
|
fit="fill " :src="imageUrl">
|
||||||
:style="`width:${width};height:${height};`"
|
|
||||||
fit="fill "
|
|
||||||
:src="imageUrl"
|
|
||||||
>
|
|
||||||
<div slot="error" class="image-slot">
|
<div slot="error" class="image-slot">
|
||||||
<i class="el-icon-picture-outline"></i>
|
<i class="el-icon-picture-outline"></i>
|
||||||
</div>
|
</div>
|
||||||
@@ -32,43 +28,42 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
course: {
|
course: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {},
|
default: () => { },
|
||||||
},
|
},
|
||||||
height: {
|
height: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "100%",
|
default: "100%",
|
||||||
},
|
},
|
||||||
text:{
|
text: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default:true,
|
default: true,
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "100%",
|
default: "100%",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
name(){
|
name() {
|
||||||
let name = '';
|
let name = '';
|
||||||
if(this.course && this.course.name && this.course.name !== '') {
|
if (this.course && this.course.name && this.course.name !== '') {
|
||||||
name = this.course.name.replace('color:#FF0000','color:#fff');
|
name = this.course.name.replace('color:#FF0000', 'color:#fff');
|
||||||
}
|
}
|
||||||
if(this.course && this.course.courseName && this.course.courseName !== '') {
|
if (this.course && this.course.courseName && this.course.courseName !== '') {
|
||||||
name = this.course.courseName.replace('color:#FF0000','color:#fff');
|
name = this.course.courseName.replace('color:#FF0000', 'color:#fff');
|
||||||
}
|
}
|
||||||
if(this.course && this.course.title && this.course.title !== '') {
|
if (this.course && this.course.title && this.course.title !== '') {
|
||||||
name = this.course.title.replace('color:#FF0000','color:#fff');
|
name = this.course.title.replace('color:#FF0000', 'color:#fff');
|
||||||
}
|
}
|
||||||
return name;
|
return name;
|
||||||
// course.name || course.courseName || course.title
|
// course.name || course.courseName || course.title
|
||||||
},
|
},
|
||||||
imageUrl() {
|
imageUrl() {
|
||||||
this.isShow = false;
|
this.isShow = false;
|
||||||
if(this.course && this.course.coverImg && this.course.coverImg.startsWith('http')) {
|
if (this.course && this.course.coverImg && this.course.coverImg.startsWith('http')) {
|
||||||
return this.course.coverImg;
|
return this.course.coverImg;
|
||||||
}
|
}
|
||||||
if(this.course && this.course.courseImage && this.course.courseImage.startsWith('http')) {
|
if (this.course && this.course.courseImage && this.course.courseImage.startsWith('http')) {
|
||||||
return this.course.courseImage;
|
return this.course.courseImage;
|
||||||
}
|
}
|
||||||
if (this.course && this.course.coverImg && this.course.coverImg != "") {
|
if (this.course && this.course.coverImg && this.course.coverImg != "") {
|
||||||
@@ -110,6 +105,8 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
console.log('hoahaioaiohaiohio');
|
||||||
|
console.log(this.course, '嘿嘿');
|
||||||
let obj = document.getElementById("img-box");
|
let obj = document.getElementById("img-box");
|
||||||
if ((obj.offsetWidth > 500 || obj.offsetWidth == 500) && obj.offsetWidth < 900) {
|
if ((obj.offsetWidth > 500 || obj.offsetWidth == 500) && obj.offsetWidth < 900) {
|
||||||
this.imageTextSize = 3;
|
this.imageTextSize = 3;
|
||||||
@@ -122,7 +119,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
imageError() {},
|
imageError() { },
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -130,43 +127,56 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.text {
|
.text {
|
||||||
text-shadow: 0px 0px 2px #ffffff;
|
text-shadow: 0px 0px 2px #ffffff;
|
||||||
span{
|
|
||||||
|
span {
|
||||||
color: #ffffff !important;
|
color: #ffffff !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.image-slot{
|
|
||||||
|
.image-slot {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-box {
|
.img-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
-moz-user-select: none; /*火狐*/
|
-moz-user-select: none;
|
||||||
-webkit-user-select: none; /*webkit浏览器*/
|
/*火狐*/
|
||||||
-ms-user-select: none; /*IE10*/
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none; /*早期浏览器*/
|
/*webkit浏览器*/
|
||||||
|
-ms-user-select: none;
|
||||||
|
/*IE10*/
|
||||||
|
-khtml-user-select: none;
|
||||||
|
/*早期浏览器*/
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
// white-space:pre-wrap;
|
// white-space:pre-wrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
// text-overflow:ellipsis;
|
// text-overflow:ellipsis;
|
||||||
word-break:break-all;
|
word-break: break-all;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
-moz-user-select: none; /*火狐*/
|
-moz-user-select: none;
|
||||||
-webkit-user-select: none; /*webkit浏览器*/
|
/*火狐*/
|
||||||
-ms-user-select: none; /*IE10*/
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none; /*早期浏览器*/
|
/*webkit浏览器*/
|
||||||
|
-ms-user-select: none;
|
||||||
|
/*IE10*/
|
||||||
|
-khtml-user-select: none;
|
||||||
|
/*早期浏览器*/
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mini {
|
.mini {
|
||||||
top: 30%;
|
top: 30%;
|
||||||
left: 8%;
|
left: 8%;
|
||||||
@@ -174,6 +184,7 @@ export default {
|
|||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mid {
|
.mid {
|
||||||
top: 30%;
|
top: 30%;
|
||||||
left: 8%;
|
left: 8%;
|
||||||
@@ -181,6 +192,7 @@ export default {
|
|||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max {
|
.max {
|
||||||
top: 30%;
|
top: 30%;
|
||||||
left: 8%;
|
left: 8%;
|
||||||
@@ -188,6 +200,7 @@ export default {
|
|||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.te-max {
|
.te-max {
|
||||||
top: 30%;
|
top: 30%;
|
||||||
left: 8%;
|
left: 8%;
|
||||||
@@ -195,5 +208,4 @@ export default {
|
|||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
}
|
}
|
||||||
}
|
}</style>
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1308,6 +1308,8 @@ export default {
|
|||||||
courseIds.push(item.id);
|
courseIds.push(item.id);
|
||||||
});
|
});
|
||||||
this.loadCouserTeacher(res.result, courseIds);
|
this.loadCouserTeacher(res.result, courseIds);
|
||||||
|
console.log(res.result,'lalalala');
|
||||||
|
|
||||||
this.courseList.list = res.result;
|
this.courseList.list = res.result;
|
||||||
//this.couname = res.result.list.name;
|
//this.couname = res.result.list.name;
|
||||||
// if (res.result.count - pageIndex * num < 8) {
|
// if (res.result.count - pageIndex * num < 8) {
|
||||||
|
|||||||
@@ -1,6 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 教师赋能 -->
|
<div class="course-banner">
|
||||||
|
<div id="container" style="z-index: 99" v-if="resonimg.length == 1">
|
||||||
|
<!-- 当轮播图等于一张时 -->
|
||||||
|
<swiper :options="swiperOptiontwo">
|
||||||
|
<swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'a' + idx"
|
||||||
|
class="swiper-slide games pointer">
|
||||||
|
<div class="bannbox" :style="{
|
||||||
|
background: `url(${fileBaseUrl + item.image
|
||||||
|
}) no-repeat 100% / 100%`,
|
||||||
|
}"></div>
|
||||||
|
<img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
|
</div>
|
||||||
|
<div id="container" style="z-index: 99" v-else>
|
||||||
|
<swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length > 1">
|
||||||
|
<swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'b' + idx"
|
||||||
|
class="swiper-slide games pointer">
|
||||||
|
<div class="bannbox" :style="{
|
||||||
|
background: `url(${fileBaseUrl + item.image
|
||||||
|
}) no-repeat 100% / 100%`,
|
||||||
|
}"></div>
|
||||||
|
<img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
|
||||||
|
</swiper-slide>
|
||||||
|
<div class="swiper-pagination" slot="pagination"></div>
|
||||||
|
</swiper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 图片 -->
|
||||||
<div class="xindex-content">
|
<div class="xindex-content">
|
||||||
<div class="modules xcontent2">
|
<div class="modules xcontent2">
|
||||||
<div class="xcontent2-main">
|
<div class="xcontent2-main">
|
||||||
@@ -157,7 +185,7 @@
|
|||||||
import apiCourseStudy from "@/api/modules/courseStudy.js";
|
import apiCourseStudy from "@/api/modules/courseStudy.js";
|
||||||
import courseImage from "@/components/Course/courseImage.vue";
|
import courseImage from "@/components/Course/courseImage.vue";
|
||||||
import { toScore, formatUserNumber } from "@/utils/tools.js";
|
import { toScore, formatUserNumber } from "@/utils/tools.js";
|
||||||
import { saveOpinion, noticeList, courselList, toolList } from '@/api/modules/grateful.js'
|
import { saveOpinion, noticeList, courselList, toolList, carouselList } from '@/api/modules/grateful.js'
|
||||||
export default {
|
export default {
|
||||||
name: "Grateful",
|
name: "Grateful",
|
||||||
components: {
|
components: {
|
||||||
@@ -179,14 +207,56 @@ export default {
|
|||||||
noticeList: [],
|
noticeList: [],
|
||||||
toolList: []
|
toolList: []
|
||||||
},
|
},
|
||||||
|
resonimg: [],
|
||||||
|
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||||||
|
swiperOptiontwo: {
|
||||||
|
autoplay: false,
|
||||||
|
// noSwiping: true,
|
||||||
|
},
|
||||||
|
resonimg: [],
|
||||||
|
swiperOption: {
|
||||||
|
autoplay: {
|
||||||
|
delay: 2000,
|
||||||
|
disableOnInteraction: false, //解决滑动后不能轮播的问题
|
||||||
|
},
|
||||||
|
speed: 3000, //切换速度,即slider自动滑动开始到结束的时间(单位ms)
|
||||||
|
loop: true, //循环切换
|
||||||
|
peed: 300, //循环速度
|
||||||
|
scrollbar: ".swiper-scrollbar",
|
||||||
|
pagination: {
|
||||||
|
el: ".swiper-pagination",
|
||||||
|
// type : 'progressbar', //分页器形状
|
||||||
|
clickable: true, //点击分页器的指示点分页器会控制Swiper切换
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".swiper-button-next",
|
||||||
|
prevEl: ".swiper-button-prev",
|
||||||
|
},
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.couresreso();
|
||||||
this.getCourseData(1);
|
this.getCourseData(1);
|
||||||
this.getNoticeData()
|
this.getNoticeData()
|
||||||
this.getToolData()
|
this.getToolData()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
couresreso() {
|
||||||
|
carouselList().then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
const list = res.data.records.map(item => {
|
||||||
|
return {
|
||||||
|
image: item.picPath,
|
||||||
|
name: item.displayPage,
|
||||||
|
JumpUrl: '',
|
||||||
|
bgcolor: '',
|
||||||
|
...item
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.resonimg = list;
|
||||||
|
})
|
||||||
|
},
|
||||||
submitNotice() {
|
submitNotice() {
|
||||||
if (!this.form.textarea) return this.$message({ message: '请输入内容', type: 'error' })
|
if (!this.form.textarea) return this.$message({ message: '请输入内容', type: 'error' })
|
||||||
saveOpinion({ content: this.form.textarea }).then(() => {
|
saveOpinion({ content: this.form.textarea }).then(() => {
|
||||||
@@ -221,7 +291,13 @@ export default {
|
|||||||
pageSize: 8
|
pageSize: 8
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
if (res.code == 200 && res.data.records.length > 0) {
|
if (res.code == 200 && res.data.records.length > 0) {
|
||||||
console.log(res.result, '之前的');
|
console.log(res.data.records, '之前的');
|
||||||
|
// res.data.records.map((item) => {
|
||||||
|
// return {
|
||||||
|
// ...item,
|
||||||
|
// coverImg:item.coverImg
|
||||||
|
// }
|
||||||
|
// })
|
||||||
this.courseList.list = res.data.records;
|
this.courseList.list = res.data.records;
|
||||||
} else {
|
} else {
|
||||||
console.log("加载课程信息失败:" + res.error);
|
console.log("加载课程信息失败:" + res.error);
|
||||||
@@ -251,6 +327,103 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.bannbox {
|
||||||
|
width: 100%;
|
||||||
|
height: 520px;
|
||||||
|
text-align: center;
|
||||||
|
filter: blur(5px);
|
||||||
|
z-index: -1;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep.swiper-slide .games .swiper-slide-active {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
position: absolute;
|
||||||
|
height: 520px;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-img {
|
||||||
|
height: 520px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: (-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-banner {
|
||||||
|
height: 520px;
|
||||||
|
|
||||||
|
.swiper-button-prev {
|
||||||
|
height: 38px;
|
||||||
|
padding: 0 16px;
|
||||||
|
background: rgba($color: #000000, $alpha: 0.8) url("../../assets/images/icon/ban-left.png") no-repeat;
|
||||||
|
background-size: 12px 18px;
|
||||||
|
background-position: 16px 10px;
|
||||||
|
bottom: 66px;
|
||||||
|
border-radius: 19px 0 0 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-next {
|
||||||
|
height: 38px;
|
||||||
|
bottom: 66px;
|
||||||
|
top: auto;
|
||||||
|
padding: 0 16px;
|
||||||
|
background: rgba($color: #000000, $alpha: 0.1) url("../../assets/images/icon/ban-right.png") no-repeat;
|
||||||
|
background-size: 12px 18px;
|
||||||
|
background-position: 6px 10px;
|
||||||
|
border-radius: 0 19px 19px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-pagination-bullets {
|
||||||
|
left: 60px;
|
||||||
|
bottom: 66px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .swiper-pagination {
|
||||||
|
line-height: 25px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 19px;
|
||||||
|
width: auto;
|
||||||
|
left: 45%;
|
||||||
|
padding: 0 20px;
|
||||||
|
border-radius: 19px;
|
||||||
|
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
position: relative;
|
||||||
|
width: 25px;
|
||||||
|
height: 5px;
|
||||||
|
margin-top: 10px;
|
||||||
|
background: #fff;
|
||||||
|
opacity: 1 !important;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-pagination-bullet::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
bottom: -20px;
|
||||||
|
left: -2px;
|
||||||
|
right: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-pagination-bullet-active {
|
||||||
|
height: 5px;
|
||||||
|
opacity: 1 !important;
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 25px;
|
||||||
|
background: #387df7;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
::v-deep .el-dialog__body {
|
::v-deep .el-dialog__body {
|
||||||
background: linear-gradient(180deg, rgba(56, 125, 247, 0.2) 0%, rgba(166, 168, 255, 0) 100%) no-repeat;
|
background: linear-gradient(180deg, rgba(56, 125, 247, 0.2) 0%, rgba(166, 168, 255, 0) 100%) no-repeat;
|
||||||
background-size: 100% 136px;
|
background-size: 100% 136px;
|
||||||
|
|||||||
@@ -31,6 +31,12 @@
|
|||||||
</pagination>
|
</pagination>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
@@ -122,6 +128,11 @@ export default {
|
|||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.pagination-div {
|
||||||
|
text-align: center;
|
||||||
|
padding: 70px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.bgc {
|
.bgc {
|
||||||
background: linear-gradient(180deg,
|
background: linear-gradient(180deg,
|
||||||
rgba(56, 125, 247, 0.2) 0%,
|
rgba(56, 125, 247, 0.2) 0%,
|
||||||
|
|||||||
@@ -32,9 +32,8 @@
|
|||||||
<course-image :course="course"></course-image>
|
<course-image :course="course"></course-image>
|
||||||
<span v-if="course.type == 20 || 10" class="course-type">录播课</span>
|
<span v-if="course.type == 20 || 10" class="course-type">录播课</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 80%" :title="course.name" class="course-title portal-title-tow two-line-ellipsis">
|
<div style="width: 80%" :title="course.name" v-html="course.name"
|
||||||
{{ course.name }}
|
class="course-title portal-title-tow two-line-ellipsis"></div>
|
||||||
</div>
|
|
||||||
<div class="course-author">
|
<div class="course-author">
|
||||||
<div class="course-author-left">
|
<div class="course-author-left">
|
||||||
{{ course.createName }}
|
{{ course.createName }}
|
||||||
@@ -51,10 +50,16 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
|
<div v-if="list.length !== 0">
|
||||||
<pagination :size="param.pageSize" :total="total" :page="param.pageNo" @change-size="changePageSize"
|
<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"
|
@change-page="loadData" style="background-color: rgba(0, 0, 0, 0);" :autoScroll="false"
|
||||||
:pageSizes="[12, 24, 36, 48]"></pagination>
|
:pageSizes="[12, 24, 36, 48]"></pagination>
|
||||||
@@ -125,10 +130,22 @@ export default {
|
|||||||
//return $this.webBaseUrl + "/course/detail?id=" + item.id;
|
//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() {
|
getCourseData() {
|
||||||
courselList(this.param).then((res) => {
|
courselList(this.param).then((res) => {
|
||||||
if (res.code == 200 && res.data.records.length > 0) {
|
if (res.code == 200 && res.data.records.length > 0) {
|
||||||
console.log(res.data, '之前的');
|
console.log(res.data, '之前的');
|
||||||
|
res.data.records.forEach(item => {
|
||||||
|
item.name = this.brightenKeyword(item.name, this.param.name);
|
||||||
|
});
|
||||||
this.list = res.data.records;
|
this.list = res.data.records;
|
||||||
this.total = res.data.total
|
this.total = res.data.total
|
||||||
} else {
|
} else {
|
||||||
@@ -249,6 +266,11 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pagination-div {
|
||||||
|
text-align: center;
|
||||||
|
padding: 70px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.modules-list {
|
.modules-list {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
|
|
||||||
|
|||||||
@@ -37,6 +37,12 @@
|
|||||||
:page="params.pageNo" @change-size="changePageSize" @change-page="loadData" :autoScroll="false">
|
:page="params.pageNo" @change-size="changePageSize" @change-page="loadData" :autoScroll="false">
|
||||||
</pagination>
|
</pagination>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
@@ -145,8 +151,20 @@ export default {
|
|||||||
rgba(166, 168, 255, 0) 100%) no-repeat;
|
rgba(166, 168, 255, 0) 100%) no-repeat;
|
||||||
background-size: 100% 166px;
|
background-size: 100% 166px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.pagination-div {
|
||||||
|
text-align: center;
|
||||||
|
padding: 70px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-div {
|
||||||
|
text-align: center;
|
||||||
|
padding: 70px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.sear-but {
|
.sear-but {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10%;
|
bottom: 10%;
|
||||||
|
|||||||
@@ -1,33 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="course-banner" v-if="!$route.meta.hidden">
|
|
||||||
<div id="container" style="z-index: 99" v-if="resonimg.length == 1">
|
|
||||||
<!-- 当轮播图等于一张时 -->
|
|
||||||
<swiper :options="swiperOptiontwo">
|
|
||||||
<swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'a' + idx"
|
|
||||||
class="swiper-slide games pointer">
|
|
||||||
<div class="bannbox" :style="{
|
|
||||||
background: `url(${fileBaseUrl + item.image
|
|
||||||
}) no-repeat 100% / 100%`,
|
|
||||||
}"></div>
|
|
||||||
<img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
|
|
||||||
</swiper-slide>
|
|
||||||
</swiper>
|
|
||||||
</div>
|
|
||||||
<div id="container" style="z-index: 99" v-else>
|
|
||||||
<swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length > 1">
|
|
||||||
<swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'b' + idx"
|
|
||||||
class="swiper-slide games pointer">
|
|
||||||
<div class="bannbox" :style="{
|
|
||||||
background: `url(${fileBaseUrl + item.image
|
|
||||||
}) no-repeat 100% / 100%`,
|
|
||||||
}"></div>
|
|
||||||
<img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
|
|
||||||
</swiper-slide>
|
|
||||||
<div class="swiper-pagination" slot="pagination"></div>
|
|
||||||
</swiper>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
<div class="grateful">
|
<div class="grateful">
|
||||||
@@ -37,50 +9,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import apiPlace from "@/api/phase2/place.js";
|
|
||||||
export default {
|
export default {
|
||||||
name: "Grateful",
|
name: "Grateful",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
resonimg: [],
|
|
||||||
swiperOptiontwo: {
|
|
||||||
autoplay: false,
|
|
||||||
// noSwiping: true,
|
|
||||||
},
|
|
||||||
swiperOption: {
|
|
||||||
autoplay: {
|
|
||||||
delay: 2000,
|
|
||||||
disableOnInteraction: false, //解决滑动后不能轮播的问题
|
|
||||||
},
|
|
||||||
speed: 3000, //切换速度,即slider自动滑动开始到结束的时间(单位ms)
|
|
||||||
loop: true, //循环切换
|
|
||||||
peed: 300, //循环速度
|
|
||||||
scrollbar: ".swiper-scrollbar",
|
|
||||||
pagination: {
|
|
||||||
el: ".swiper-pagination",
|
|
||||||
// type : 'progressbar', //分页器形状
|
|
||||||
clickable: true, //点击分页器的指示点分页器会控制Swiper切换
|
|
||||||
},
|
|
||||||
navigation: {
|
|
||||||
nextEl: ".swiper-button-next",
|
|
||||||
prevEl: ".swiper-button-prev",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
|
||||||
};
|
};
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.couresreso();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
couresreso() {
|
|
||||||
let key = "index";
|
|
||||||
apiPlace.detail(key).then((res) => {
|
|
||||||
let lmj = JSON.parse(res.result.content);
|
|
||||||
this.resonimg = lmj;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -123,101 +57,4 @@ export default {
|
|||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bannbox {
|
|
||||||
width: 100%;
|
|
||||||
height: 520px;
|
|
||||||
text-align: center;
|
|
||||||
filter: blur(5px);
|
|
||||||
z-index: -1;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep.swiper-slide .games .swiper-slide-active {
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container {
|
|
||||||
position: absolute;
|
|
||||||
height: 520px;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner-img {
|
|
||||||
height: 520px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
transform: (-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-banner {
|
|
||||||
height: 520px;
|
|
||||||
|
|
||||||
.swiper-button-prev {
|
|
||||||
height: 38px;
|
|
||||||
padding: 0 16px;
|
|
||||||
background: rgba($color: #000000, $alpha: 0.8) url("../../assets/images/icon/ban-left.png") no-repeat;
|
|
||||||
background-size: 12px 18px;
|
|
||||||
background-position: 16px 10px;
|
|
||||||
bottom: 66px;
|
|
||||||
border-radius: 19px 0 0 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-button-next {
|
|
||||||
height: 38px;
|
|
||||||
bottom: 66px;
|
|
||||||
top: auto;
|
|
||||||
padding: 0 16px;
|
|
||||||
background: rgba($color: #000000, $alpha: 0.1) url("../../assets/images/icon/ban-right.png") no-repeat;
|
|
||||||
background-size: 12px 18px;
|
|
||||||
background-position: 6px 10px;
|
|
||||||
border-radius: 0 19px 19px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-pagination-bullets {
|
|
||||||
left: 60px;
|
|
||||||
bottom: 66px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .swiper-pagination {
|
|
||||||
line-height: 25px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 19px;
|
|
||||||
width: auto;
|
|
||||||
left: 45%;
|
|
||||||
padding: 0 20px;
|
|
||||||
border-radius: 19px;
|
|
||||||
|
|
||||||
.swiper-pagination-bullet {
|
|
||||||
position: relative;
|
|
||||||
width: 25px;
|
|
||||||
height: 5px;
|
|
||||||
margin-top: 10px;
|
|
||||||
background: #fff;
|
|
||||||
opacity: 1 !important;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-pagination-bullet::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: -20px;
|
|
||||||
bottom: -20px;
|
|
||||||
left: -2px;
|
|
||||||
right: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-pagination-bullet-active {
|
|
||||||
height: 5px;
|
|
||||||
opacity: 1 !important;
|
|
||||||
margin-top: 10px;
|
|
||||||
width: 25px;
|
|
||||||
background: #387df7;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="couser-list-content" class="couser-list-content">
|
<div id="couser-list-content" class="couser-list-content">
|
||||||
<div class="course-banner">
|
<div class="course-banner">
|
||||||
<portal-header current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput" @showClass="showClass"></portal-header>
|
<portal-header current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput"
|
||||||
|
@showClass="showClass"></portal-header>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding-top:30px">
|
<div style="padding-top:30px">
|
||||||
<div class="xcontent2">
|
<div class="xcontent2">
|
||||||
@@ -394,7 +395,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<!-- 线上品牌系列课程 -->
|
<!-- 线上品牌系列课程 -->
|
||||||
<template v-if="newData">
|
<template v-if="newData">
|
||||||
<div class="xcourse-card" style="margin-bottom: 0;margin-top: 36px;" v-for="(cinfo, cidx) in courseList" :key="cinfo.id">
|
<div class="xcourse-card" v-for="cinfo in courseList" :key="cinfo.id" style="margin-bottom: 0;margin-top: 36px;">
|
||||||
<div class="course-card" style="padding: 10px;">
|
<div class="course-card" style="padding: 10px;">
|
||||||
<a @click="() => $message.success('如需了解详情,请联系BOEU')">
|
<a @click="() => $message.success('如需了解详情,请联系BOEU')">
|
||||||
<div class="course-img-box">
|
<div class="course-img-box">
|
||||||
@@ -615,7 +616,7 @@ export default {
|
|||||||
oneList: [], //一级分类{type:11}
|
oneList: [], //一级分类{type:11}
|
||||||
twoList: [], //二级分类{type:12}
|
twoList: [], //二级分类{type:12}
|
||||||
threeList: [],//三级分类{type:13}
|
threeList: [],//三级分类{type:13}
|
||||||
searching:false,//是否正在搜索中
|
searching: false,//是否正在搜索中
|
||||||
|
|
||||||
resonimg: {},
|
resonimg: {},
|
||||||
formatDate,
|
formatDate,
|
||||||
@@ -631,7 +632,7 @@ export default {
|
|||||||
// 查询信息
|
// 查询信息
|
||||||
course: {
|
course: {
|
||||||
orderField: "studys",
|
orderField: "studys",
|
||||||
companyId:'',
|
companyId: '',
|
||||||
keyword: '',//关键词
|
keyword: '',//关键词
|
||||||
topOrder: true,
|
topOrder: true,
|
||||||
orderAsc: false,
|
orderAsc: false,
|
||||||
@@ -799,31 +800,31 @@ export default {
|
|||||||
let hasData = sessionStorage.getItem(this.localSessionKey);
|
let hasData = sessionStorage.getItem(this.localSessionKey);
|
||||||
let $this = this;
|
let $this = this;
|
||||||
if (hasData) {
|
if (hasData) {
|
||||||
let typeCodeList=JSON.parse(hasData);
|
let typeCodeList = JSON.parse(hasData);
|
||||||
typeCodeList.forEach(item=>{
|
typeCodeList.forEach(item => {
|
||||||
if(item.type==0){
|
if (item.type == 0) {
|
||||||
this.keyword=item.name;
|
this.keyword = item.name;
|
||||||
}else if(item.type==1){
|
} else if (item.type == 1) {
|
||||||
if(item.id==20){
|
if (item.id == 20) {
|
||||||
$this.ctypeList[0].checked=true;
|
$this.ctypeList[0].checked = true;
|
||||||
}else if(item.id==30){
|
} else if (item.id == 30) {
|
||||||
$this.ctypeList[1].checked=true;
|
$this.ctypeList[1].checked = true;
|
||||||
}else if(item.id==40){
|
} else if (item.id == 40) {
|
||||||
$this.ctypeList[2].checked=true;
|
$this.ctypeList[2].checked = true;
|
||||||
}
|
}
|
||||||
}else{ //三级分类的处理,如果一个分类选中多个,显示哪个,显示第一个,是否可以
|
} else { //三级分类的处理,如果一个分类选中多个,显示哪个,显示第一个,是否可以
|
||||||
this.oneList.forEach(one => {
|
this.oneList.forEach(one => {
|
||||||
if(one.id == item.id && item.type == '11'){
|
if (one.id == item.id && item.type == '11') {
|
||||||
this.navTitle = [{ ...one }]
|
this.navTitle = [{ ...one }]
|
||||||
one.checked = true
|
one.checked = true
|
||||||
}
|
}
|
||||||
one.children.forEach(two => {
|
one.children.forEach(two => {
|
||||||
if(two.id == item.id && item.type == '12'){
|
if (two.id == item.id && item.type == '12') {
|
||||||
this.navTitle = [{ ...one }, { ...two }]
|
this.navTitle = [{ ...one }, { ...two }]
|
||||||
two.checked = true
|
two.checked = true
|
||||||
}
|
}
|
||||||
two.children.forEach(three => {
|
two.children.forEach(three => {
|
||||||
if(three.id == item.id && item.type == '13'){
|
if (three.id == item.id && item.type == '13') {
|
||||||
this.navTitle = [{ ...one }, { ...two }, { ...three }]
|
this.navTitle = [{ ...one }, { ...two }, { ...three }]
|
||||||
three.checked = true
|
three.checked = true
|
||||||
}
|
}
|
||||||
@@ -1010,12 +1011,12 @@ export default {
|
|||||||
// });
|
// });
|
||||||
// }
|
// }
|
||||||
// })
|
// })
|
||||||
this.oneList.forEach(one=>{
|
this.oneList.forEach(one => {
|
||||||
if(one.checked){
|
if (one.checked) {
|
||||||
one.children.forEach(two=>{
|
one.children.forEach(two => {
|
||||||
$this.twoList.push(two);
|
$this.twoList.push(two);
|
||||||
if(two.checked){
|
if (two.checked) {
|
||||||
two.children.forEach(three=>{
|
two.children.forEach(three => {
|
||||||
$this.threeList.push(three);
|
$this.threeList.push(three);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -1318,11 +1319,11 @@ export default {
|
|||||||
// 查询
|
// 查询
|
||||||
async search() {
|
async search() {
|
||||||
//
|
//
|
||||||
if(this.searching){
|
if (this.searching) {
|
||||||
this.$message.warning("正在搜索中,请待搜索完成后再重新搜索");
|
this.$message.warning("正在搜索中,请待搜索完成后再重新搜索");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.searching=true;
|
this.searching = true;
|
||||||
//测试时间格式化
|
//测试时间格式化
|
||||||
// let s=1650973801;
|
// let s=1650973801;
|
||||||
// var d = new Date(1650973801*1000);
|
// var d = new Date(1650973801*1000);
|
||||||
@@ -1371,7 +1372,7 @@ export default {
|
|||||||
// 隐藏loadMore
|
// 隐藏loadMore
|
||||||
this.moreState = 2;
|
this.moreState = 2;
|
||||||
await apiCoursePortal.courseSearch(this.course).then(res => {
|
await apiCoursePortal.courseSearch(this.course).then(res => {
|
||||||
this.searching=false;
|
this.searching = false;
|
||||||
if (res.status == 200) {
|
if (res.status == 200) {
|
||||||
this.totalPages = res.result.totalPages;
|
this.totalPages = res.result.totalPages;
|
||||||
res.result.list.forEach(item => {
|
res.result.list.forEach(item => {
|
||||||
@@ -1449,7 +1450,7 @@ export default {
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
this.count = res?.result?.count
|
this.count = res?.result?.count
|
||||||
if(this.newData) {
|
if (this.newData) {
|
||||||
this.count = 1
|
this.count = 1
|
||||||
}
|
}
|
||||||
this.moreState = 3
|
this.moreState = 3
|
||||||
@@ -1553,9 +1554,10 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.couser-list-content{
|
.couser-list-content {
|
||||||
min-height: 110%;
|
min-height: 110%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 标题
|
// 标题
|
||||||
.navTitle {
|
.navTitle {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@@ -2388,5 +2390,4 @@ export default {
|
|||||||
|
|
||||||
.option-active {
|
.option-active {
|
||||||
color: #387DF7;
|
color: #387DF7;
|
||||||
}
|
}</style>
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user