|
|
@@ -17,43 +17,24 @@
|
|
|
<div class="search" @click="selectAll">
|
|
|
<img src="../assets/icon/search.png" alt="" />
|
|
|
</div>
|
|
|
- <input
|
|
|
- class="sInput"
|
|
|
- type="text"
|
|
|
- placeholder="请输入关键字"
|
|
|
- v-model="sCourse"
|
|
|
- />
|
|
|
+ <input class="sInput" type="text" placeholder="请输入关键字" v-model="sCourse" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="choose">
|
|
|
- <div
|
|
|
- class="all_choose"
|
|
|
- v-for="(item, index) in CourseType[0]"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <span>{{ item.name }}:</span>
|
|
|
- <div class="typeCss">
|
|
|
- <div
|
|
|
- class="cName"
|
|
|
- @click="getCourse(item.name, '', item.id, 1)"
|
|
|
- :class="typeE.indexOf(item.id) != -1 ? 'isCType' : ''"
|
|
|
- >
|
|
|
+ <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index" :style="{margin:!CourseTypeJson[item.id].length && 0}">
|
|
|
+ <span v-if="CourseTypeJson[item.id].length">{{ item.name }}:</span>
|
|
|
+ <div class="typeCss" v-if="CourseTypeJson[item.id].length">
|
|
|
+ <div class="cName" @click="getCourse(item.name, '', item.id, 1)"
|
|
|
+ :class="typeE.indexOf(item.id) != -1 ? 'isCType' : ''">
|
|
|
全部
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-for="(item1, index1) in CourseTypeJson[item.id]"
|
|
|
- :key="index + '-' + index1"
|
|
|
- :label="item1.id"
|
|
|
- @click="getCourse(item.name, item.id, item1.id, 2)"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="cName"
|
|
|
- :class="
|
|
|
- typea == item1.id || typeb == item1.id || typed == item1.id
|
|
|
- ? 'isCType'
|
|
|
- : ''
|
|
|
- "
|
|
|
- >
|
|
|
+ <div v-for="(item1, index1) in CourseTypeJson[item.id]" :key="index + '-' + index1" :label="item1.id"
|
|
|
+ @click="getCourse(item.name, item.id, item1.id, 2)">
|
|
|
+ <div class="cName" :class="
|
|
|
+ typea == item1.id || typeb == item1.id || typed == item1.id
|
|
|
+ ? 'isCType'
|
|
|
+ : ''
|
|
|
+ ">
|
|
|
{{ item1.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -77,7 +58,78 @@
|
|
|
</div> -->
|
|
|
<div>
|
|
|
<div class="main_box">
|
|
|
- <div
|
|
|
+ <div class="FirstTypeBox" v-for="(type, tindex) in CourseType2" :key="tindex">
|
|
|
+ <div class="title">{{ type.name }}</div>
|
|
|
+ <div style="display: flex;flex-flow: wrap;margin-top: 20px;">
|
|
|
+ <div
|
|
|
+ class="box_course"
|
|
|
+ v-for="(item, index) in type.course"
|
|
|
+ :key="tindex + '-' + index"
|
|
|
+ >
|
|
|
+ <div class="wheel">
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ item.cover
|
|
|
+ ? JSON.parse(item.cover)[0].url
|
|
|
+ : require('../assets/wheel.png')
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="middle_white">
|
|
|
+ <div class="textOverflow">{{ item.title }}</div>
|
|
|
+ <div class="nameAndLength">
|
|
|
+ <el-tooltip
|
|
|
+ class="typeN"
|
|
|
+ effect="light"
|
|
|
+ :content="item.typename"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>{{ item.typename }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <div>{{ JSON.parse(item.chapters).length }}阶段</div>
|
|
|
+ </div>
|
|
|
+ <div class="school_box">
|
|
|
+ <el-tooltip
|
|
|
+ effect="light"
|
|
|
+ :content="item.school"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div class="school">
|
|
|
+ {{ item.school }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <div style="color: #b4b4b4">{{ item.utime }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="now_study"
|
|
|
+ @click="
|
|
|
+ goTo(
|
|
|
+ '/courseDetail?courseId=' +
|
|
|
+ item.courseId +
|
|
|
+ '&userid=' +
|
|
|
+ userid +
|
|
|
+ '&oid=' +
|
|
|
+ oid +
|
|
|
+ '&org=' +
|
|
|
+ org +
|
|
|
+ '&cid=' +
|
|
|
+ classId +
|
|
|
+ '&tType=' +
|
|
|
+ tType +
|
|
|
+ '&screenType=' +
|
|
|
+ screenType
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 立即学习
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div
|
|
|
class="box_course"
|
|
|
v-for="(item, index) in zoneClass"
|
|
|
:key="index"
|
|
|
@@ -118,16 +170,6 @@
|
|
|
</el-tooltip>
|
|
|
<div style="color: #b4b4b4">{{ item.utime }}</div>
|
|
|
</div>
|
|
|
- <!-- <div class="people">
|
|
|
- <div class="man">
|
|
|
- <img src="../assets/people.png" alt="" />
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- {{
|
|
|
- item.pNum != null && item.pNum != "" ? item.pNum : "0"
|
|
|
- }}人学习
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
<div
|
|
|
class="now_study"
|
|
|
@@ -152,13 +194,13 @@
|
|
|
>
|
|
|
立即学习
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="course_empty" v-if="zoneClass.length == 0">
|
|
|
暂无课程
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
+ <!-- <div
|
|
|
class="student_page"
|
|
|
style="margin: 15px 0 0"
|
|
|
v-if="zoneClass.length > 0"
|
|
|
@@ -181,7 +223,7 @@
|
|
|
@current-change="handleCurrentChange1"
|
|
|
>
|
|
|
</el-pagination>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -205,6 +247,7 @@ export default {
|
|
|
org: this.$route.query.org,
|
|
|
screenType: this.$route.query.screenType,
|
|
|
CourseType: [],
|
|
|
+ CourseType2:[],
|
|
|
CourseTypeJson: {},
|
|
|
courseTypeId: {},
|
|
|
sCourse: "",
|
|
|
@@ -407,7 +450,7 @@ export default {
|
|
|
page: this.page,
|
|
|
};
|
|
|
this.ajax
|
|
|
- .get(this.$store.state.api + "selectTypeCourse2", params)
|
|
|
+ .get(this.$store.state.api + "selectTypeCourse2Mode", params)
|
|
|
.then((res) => {
|
|
|
if (this.loading) {
|
|
|
this.loading.close();
|
|
|
@@ -416,11 +459,34 @@ export default {
|
|
|
this.isListAjax = false;
|
|
|
this.zoneClass = res.data[0];
|
|
|
this.total = res.data[0].length ? res.data[0][0].num : 0;
|
|
|
-
|
|
|
+ let CourseType2 = JSON.parse(JSON.stringify(this.CourseType[0]))
|
|
|
+ for (var i = 0; i < CourseType2.length; i++) {
|
|
|
+ CourseType2[i].course = []
|
|
|
+ for (var j = 0; j < res.data[0].length; j++) {
|
|
|
+ if (res.data[0][j].pid && res.data[0][j].pid.indexOf(CourseType2[i].id) != -1) {
|
|
|
+ CourseType2[i].course.push(res.data[0][j])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let noTypeCourse = []
|
|
|
+ for (var j = 0; j < res.data[0].length; j++) {
|
|
|
+ if (!res.data[0][j].pid) {
|
|
|
+ noTypeCourse.push(res.data[0][j])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (noTypeCourse.length > 0) {
|
|
|
+ CourseType2.push({
|
|
|
+ course: noTypeCourse,
|
|
|
+ name: '其他'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ CourseType2 = CourseType2.filter(item => {
|
|
|
+ return item.course.length > 0;
|
|
|
+ })
|
|
|
+ this.CourseType2 = CourseType2
|
|
|
// this.selectType({
|
|
|
// data: [res.data[1], res.data[2], res.data[3], res.data[4]],
|
|
|
// });
|
|
|
- this.selectAllType();
|
|
|
this.getBanner({
|
|
|
data: [res.data[6], res.data[5], res.data[7]],
|
|
|
});
|
|
|
@@ -547,6 +613,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ this.selectAll()
|
|
|
this.$forceUpdate();
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
@@ -638,10 +705,10 @@ export default {
|
|
|
created() {
|
|
|
this.loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
// this.selectType();
|
|
|
- this.selectAll();
|
|
|
+ this.selectAllType();
|
|
|
// this.getBanner();
|
|
|
this.timer = setInterval(() => {
|
|
|
- this.selectAll();
|
|
|
+ this.selectAllType();
|
|
|
// this.getBanner();
|
|
|
}, 5000);
|
|
|
document.scrollingElement.scrollTop = 0;
|
|
|
@@ -706,8 +773,8 @@ export default {
|
|
|
height: 16px;
|
|
|
}
|
|
|
|
|
|
-.wheel > img,
|
|
|
-.man > img {
|
|
|
+.wheel>img,
|
|
|
+.man>img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
@@ -717,7 +784,8 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
flex-wrap: nowrap;
|
|
|
- margin: 0px 1% 20px;
|
|
|
+ /* margin: 0px 1% 20px; */
|
|
|
+ margin: 0 15px 20px 0;
|
|
|
width: 300px;
|
|
|
height: 260px;
|
|
|
/*border: 1px solid #cecece; */
|
|
|
@@ -738,7 +806,7 @@ export default {
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
-.people > div:nth-child(2) {
|
|
|
+.people>div:nth-child(2) {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
@@ -759,10 +827,10 @@ export default {
|
|
|
|
|
|
.main_box {
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: flex-start;
|
|
|
+ /* display: flex; */
|
|
|
+ /* flex-direction: row; */
|
|
|
+ /* flex-wrap: wrap; */
|
|
|
+ /* justify-content: flex-start; */
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
@@ -772,14 +840,14 @@ export default {
|
|
|
margin: auto 0;
|
|
|
}
|
|
|
|
|
|
-.right_bottom_flex > img {
|
|
|
+.right_bottom_flex>img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.body_student {
|
|
|
margin: 10px auto;
|
|
|
- width: 91.5%;
|
|
|
+ width: 90%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
@@ -828,17 +896,17 @@ export default {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
-.all_choose > span {
|
|
|
+.all_choose>span {
|
|
|
min-width: 80px;
|
|
|
display: block;
|
|
|
letter-spacing: 14px;
|
|
|
}
|
|
|
|
|
|
-.all_choose > span:nth-child(1) {
|
|
|
+.all_choose>span:nth-child(1) {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
-.all_choose >>> .el-checkbox-group {
|
|
|
+.all_choose>>>.el-checkbox-group {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
width: 820px;
|
|
|
@@ -849,14 +917,14 @@ export default {
|
|
|
margin-top: 3px;
|
|
|
}
|
|
|
|
|
|
-.all_choose > .el-checkbox-group >>> .el-checkbox {
|
|
|
+.all_choose>.el-checkbox-group>>>.el-checkbox {
|
|
|
margin-bottom: 10px;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
-.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label {
|
|
|
+.all_choose>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label {
|
|
|
min-width: 80px;
|
|
|
overflow: hidden;
|
|
|
width: 80px;
|
|
|
@@ -864,7 +932,7 @@ export default {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
-.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label:hover {
|
|
|
+.all_choose>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label:hover {
|
|
|
width: auto;
|
|
|
}
|
|
|
|
|
|
@@ -881,13 +949,16 @@ export default {
|
|
|
|
|
|
.reBox {
|
|
|
position: relative;
|
|
|
- top: -25px;
|
|
|
- z-index: 999;
|
|
|
- left: 5%;
|
|
|
- background: #fff;
|
|
|
- width: 90%;
|
|
|
- border-radius: 5px;
|
|
|
- padding-left: 20px;
|
|
|
+ top: -25px;
|
|
|
+ z-index: 999;
|
|
|
+ /* left: auto; */
|
|
|
+ /* right: auto; */
|
|
|
+ background: #fff;
|
|
|
+ width: 90%;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding-left: 20px;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.reTop {
|
|
|
@@ -901,7 +972,7 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
-.reTop > div:nth-child(1) {
|
|
|
+.reTop>div:nth-child(1) {
|
|
|
font-weight: bold;
|
|
|
width: 40px;
|
|
|
border-bottom: 1px solid #205cc6;
|
|
|
@@ -910,7 +981,7 @@ export default {
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
|
|
|
-.reTop > div:nth-child(2) {
|
|
|
+.reTop>div:nth-child(2) {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
@@ -926,7 +997,7 @@ export default {
|
|
|
padding: 0 5px;
|
|
|
}
|
|
|
|
|
|
-.search > img {
|
|
|
+.search>img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -981,4 +1052,16 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+.FirstTypeBox {}
|
|
|
+
|
|
|
+.FirstTypeBox+.FirstTypeBox {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.FirstTypeBox>.title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
</style>
|
zengyicheng