|
|
@@ -26,9 +26,56 @@
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
+ <div class="reBox">
|
|
|
+ <div class="reTop">
|
|
|
+ <div>课程</div>
|
|
|
+ <div>
|
|
|
+ <div class="search" @click="selectAll">
|
|
|
+ <img src="../assets/icon/search.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <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
|
|
|
+ v-for="item1 in CourseTypeJson[item.id]"
|
|
|
+ :key="item1.id"
|
|
|
+ :label="item1.id"
|
|
|
+ @click="getCourse(item.name, item1.id)"
|
|
|
+ >
|
|
|
+ <el-tooltip
|
|
|
+ class="cName"
|
|
|
+ effect="light"
|
|
|
+ :content="item1.name"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ :class="
|
|
|
+ typea == item1.id || typeb == item1.id || typed == item1.id
|
|
|
+ ? 'isCType'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ item1.name }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="body_student">
|
|
|
- <div class="student_body">
|
|
|
- <div class="top">
|
|
|
+ <!-- <div class="top">
|
|
|
<div :class="{ active: 0 == zoneListId }" @click="selectAll()">
|
|
|
所有课程
|
|
|
</div>
|
|
|
@@ -40,83 +87,96 @@
|
|
|
>
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="main_box">
|
|
|
- <div
|
|
|
- class="box_course"
|
|
|
- v-for="(item, index) in zoneClass"
|
|
|
- :key="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="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="main_box">
|
|
|
+ <div
|
|
|
+ class="box_course"
|
|
|
+ v-for="(item, index) in zoneClass"
|
|
|
+ :key="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 ? item.typename : '暂无'"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>{{ item.typename ? item.typename : "暂无" }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <div style="padding-right: 10px">
|
|
|
+ {{ JSON.parse(item.chapters).length }}阶段
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="now_study"
|
|
|
- @click="
|
|
|
- goTo(
|
|
|
- '/courseDetail?courseId=' +
|
|
|
- item.courseId +
|
|
|
- '&userid=' +
|
|
|
- userid +
|
|
|
- '&oid=' +
|
|
|
- oid +
|
|
|
- '&cid=' +
|
|
|
- classId +
|
|
|
- '&tType=' +
|
|
|
- tType
|
|
|
- )
|
|
|
- "
|
|
|
- >
|
|
|
- 立即学习
|
|
|
+ <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="course_empty" v-if="zoneClass.length == 0">
|
|
|
- 暂无数据
|
|
|
+ <div
|
|
|
+ class="now_study"
|
|
|
+ @click="
|
|
|
+ goTo(
|
|
|
+ '/courseDetail?courseId=' +
|
|
|
+ item.courseId +
|
|
|
+ '&userid=' +
|
|
|
+ userid +
|
|
|
+ '&oid=' +
|
|
|
+ oid +
|
|
|
+ '&cid=' +
|
|
|
+ classId +
|
|
|
+ '&tType=' +
|
|
|
+ tType
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 立即学习
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="student_page" style="margin: 15px 0 0">
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- layout="prev, pager, next"
|
|
|
- :page-size="10"
|
|
|
- :total="total"
|
|
|
- v-if="page && zoneListId != 0"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- layout="prev, pager, next"
|
|
|
- :page-size="10"
|
|
|
- :total="total"
|
|
|
- v-if="page && zoneListId == 0"
|
|
|
- @current-change="handleCurrentChange1"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
+ <!-- <div class="course_empty" v-if="zoneClass.length == 0">
|
|
|
+ 暂无数据
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="student_page" style="margin: 15px 0 0">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="10"
|
|
|
+ :total="total"
|
|
|
+ v-if="page && zoneListId != 0"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="10"
|
|
|
+ :total="total"
|
|
|
+ v-if="page && zoneListId == 0"
|
|
|
+ @current-change="handleCurrentChange1"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -135,28 +195,35 @@ export default {
|
|
|
bannerList: [],
|
|
|
userid: this.$route.query.userid,
|
|
|
oid: this.$route.query.oid,
|
|
|
- classId:this.$route.query.cid,
|
|
|
+ classId: this.$route.query.cid,
|
|
|
tType: this.$route.query.tType,
|
|
|
+ CourseType: [],
|
|
|
+ CourseTypeJson: {},
|
|
|
+ courseTypeId: {},
|
|
|
+ sCourse: "",
|
|
|
+ isCType: "",
|
|
|
+ typea: "",
|
|
|
+ typeb: "",
|
|
|
+ typed: "",
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
goTo(path) {
|
|
|
this.$router.push(path);
|
|
|
},
|
|
|
- getZone() {
|
|
|
- this.ajax
|
|
|
- .get(this.$store.state.api + "getZone", "")
|
|
|
- .then((res) => {
|
|
|
- console.log(res.data[0]);
|
|
|
- this.zoneList = res.data[0];
|
|
|
- // this.zoneListId = this.zoneList[0].id;
|
|
|
- // this.getZoneClass(this.zoneList[0].id);
|
|
|
- this.selectAll();
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- },
|
|
|
+ // getZone() {
|
|
|
+ // this.ajax
|
|
|
+ // .get(this.$store.state.api + "getZone", "")
|
|
|
+ // .then((res) => {
|
|
|
+ // this.zoneList = res.data[0];
|
|
|
+ // // this.zoneListId = this.zoneList[0].id;
|
|
|
+ // // this.getZoneClass(this.zoneList[0].id);
|
|
|
+ // this.selectAll();
|
|
|
+ // })
|
|
|
+ // .catch((err) => {
|
|
|
+ // console.error(err);
|
|
|
+ // });
|
|
|
+ // },
|
|
|
//获取专区下的课程
|
|
|
getZoneClass(zid) {
|
|
|
this.isListAjax = true;
|
|
|
@@ -173,29 +240,57 @@ export default {
|
|
|
this.isListAjax = false;
|
|
|
this.zoneClass = res.data[0];
|
|
|
this.total = res.data[0].length ? res.data[0][0].num : 0;
|
|
|
- console.log(this.zoneClass);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.error(err);
|
|
|
});
|
|
|
},
|
|
|
+ getCourse(typeName, typeid) {
|
|
|
+ if (typeName == "年级") {
|
|
|
+ if (this.typea == typeid) {
|
|
|
+ this.typea = "";
|
|
|
+ } else {
|
|
|
+ this.typea = typeid;
|
|
|
+ }
|
|
|
+ } else if (typeName == "专栏") {
|
|
|
+ if (this.typeb == typeid) {
|
|
|
+ this.typeb = "";
|
|
|
+ } else {
|
|
|
+ this.typeb = typeid;
|
|
|
+ }
|
|
|
+ } else if (typeName == "学科") {
|
|
|
+ if (this.typed == typeid) {
|
|
|
+ this.typed = "";
|
|
|
+ } else {
|
|
|
+ this.typed = typeid;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.selectAll();
|
|
|
+ },
|
|
|
selectAll() {
|
|
|
this.zoneListId = 0;
|
|
|
this.isListAjax = true;
|
|
|
const loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
let params = {
|
|
|
+ uid: this.userid,
|
|
|
oid: this.oid,
|
|
|
- cid:this.classId,
|
|
|
+ typea: this.typea != undefined ? this.typea : "",
|
|
|
+ typeb: this.typeb != undefined ? this.typeb : "",
|
|
|
+ typec: "",
|
|
|
+ typed: this.typed != undefined ? this.typed : "",
|
|
|
+ typeE: "",
|
|
|
+ cu: "",
|
|
|
+ cn: this.sCourse,
|
|
|
+ classid: this.classId,
|
|
|
page: this.page,
|
|
|
};
|
|
|
this.ajax
|
|
|
- .get(this.$store.state.api + "selectAllCourseByCid", params)
|
|
|
+ .get(this.$store.state.api + "selectTypeCourse", params)
|
|
|
.then((res) => {
|
|
|
loading.close();
|
|
|
this.isListAjax = false;
|
|
|
this.zoneClass = res.data[0];
|
|
|
this.total = res.data[0].length ? res.data[0][0].num : 0;
|
|
|
- console.log(this.zoneClass);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.error(err);
|
|
|
@@ -226,9 +321,33 @@ export default {
|
|
|
console.error(err);
|
|
|
});
|
|
|
},
|
|
|
+ selectType() {
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectType")
|
|
|
+ .then((res) => {
|
|
|
+ this.CourseType = res.data;
|
|
|
+ for (var i = 0; i < res.data[0].length; i++) {
|
|
|
+ if (!this.cid) {
|
|
|
+ this.courseTypeId[res.data[0][i].id] = "";
|
|
|
+ }
|
|
|
+ for (var j = 0; j < res.data[1].length; j++) {
|
|
|
+ if (res.data[0][i].id == res.data[1][j].pid) {
|
|
|
+ if (!this.CourseTypeJson[res.data[0][i].id]) {
|
|
|
+ this.CourseTypeJson[res.data[0][i].id] = [];
|
|
|
+ }
|
|
|
+ this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
- this.getZone();
|
|
|
+ this.selectType();
|
|
|
+ this.selectAll();
|
|
|
this.getBanner();
|
|
|
document.scrollingElement.scrollTop = 0;
|
|
|
},
|
|
|
@@ -241,13 +360,7 @@ export default {
|
|
|
height: 100%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
-.student_body {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin: 0 auto;
|
|
|
- background: #fff;
|
|
|
- padding: 0 0 20px;
|
|
|
-}
|
|
|
+
|
|
|
.top {
|
|
|
padding: 20px 30px 20px 1%;
|
|
|
box-sizing: border-box;
|
|
|
@@ -299,14 +412,13 @@ export default {
|
|
|
flex-direction: column;
|
|
|
flex-wrap: nowrap;
|
|
|
margin: 0px 1% 20px;
|
|
|
- width: 18%;
|
|
|
+ width: 16%;
|
|
|
/*border: 1px solid #cecece; */
|
|
|
border-radius: 5px;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
|
|
|
0px 2px 1px -1px rgb(0 0 0 / 12%);
|
|
|
justify-content: space-between;
|
|
|
- height: 240px;
|
|
|
}
|
|
|
.middle_white {
|
|
|
font-size: 14px;
|
|
|
@@ -314,7 +426,6 @@ export default {
|
|
|
}
|
|
|
.people {
|
|
|
display: flex;
|
|
|
- margin-top: 5px;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.people > div:nth-child(2) {
|
|
|
@@ -324,14 +435,14 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 40px;
|
|
|
color: #fff;
|
|
|
- background: #86b8f5;
|
|
|
+ background: #4a9eed;
|
|
|
text-align: center;
|
|
|
line-height: 40px;
|
|
|
font-size: 13px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.now_study:hover {
|
|
|
- background: #658eeb;
|
|
|
+ background: #205cc6;
|
|
|
}
|
|
|
.main_box {
|
|
|
width: 100%;
|
|
|
@@ -352,7 +463,7 @@ export default {
|
|
|
}
|
|
|
.body_student {
|
|
|
margin: 10px auto;
|
|
|
- width: 98%;
|
|
|
+ width: 92%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
.student_head {
|
|
|
@@ -366,6 +477,8 @@ export default {
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
|
|
|
.student_page {
|
|
|
@@ -378,4 +491,135 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
+.choose > div:nth-child(3) > span {
|
|
|
+ letter-spacing: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.choose {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+.all_choose > span {
|
|
|
+ width: 80px;
|
|
|
+ display: block;
|
|
|
+ letter-spacing: 14px;
|
|
|
+}
|
|
|
+.all_choose > span:nth-child(1) {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.all_choose >>> .el-checkbox-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ width: 820px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 3px;
|
|
|
+}
|
|
|
+.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 {
|
|
|
+ min-width: 80px;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 80px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label:hover {
|
|
|
+ width: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.cName {
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.reBox {
|
|
|
+ position: relative;
|
|
|
+ top: -25px;
|
|
|
+ z-index: 999;
|
|
|
+ left: 5%;
|
|
|
+ background: #fff;
|
|
|
+ width: 90%;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+.reTop {
|
|
|
+ padding: 20px 0 0 0;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ width: 98%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.reTop > div:nth-child(1) {
|
|
|
+ font-weight: bold;
|
|
|
+ width: 40px;
|
|
|
+ border-bottom: 1px solid #205cc6;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ color: #205cc6;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+.reTop > div:nth-child(2) {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid #ccced3;
|
|
|
+ width: 300px;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 5px 0;
|
|
|
+}
|
|
|
+.search {
|
|
|
+ width: 20px;
|
|
|
+ padding: 0 5px;
|
|
|
+}
|
|
|
+.search > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.sInput {
|
|
|
+ border: none;
|
|
|
+ width: 85%;
|
|
|
+}
|
|
|
+.sInput:focus-visible {
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+.nameAndLength {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 5px 0;
|
|
|
+}
|
|
|
+.typeN {
|
|
|
+ width: 200px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.isCType {
|
|
|
+ color: #6282c2;
|
|
|
+}
|
|
|
</style>
|
zengyicheng
