|
|
@@ -4,7 +4,7 @@
|
|
|
<CarouselCard style="grid-column-start: 1; grid-column-end: 3;"/>
|
|
|
|
|
|
<div>
|
|
|
- <el-card :style="{height: courseRowHeight + 'px'}">
|
|
|
+ <el-card :style="{height: this.courseRowHeight + 'px'}">
|
|
|
<div class="portal-card-title">
|
|
|
<div class="portal-card-title-main">我的课程</div>
|
|
|
</div>
|
|
|
@@ -12,7 +12,7 @@
|
|
|
<div>
|
|
|
|
|
|
<div v-if="!isLogin"
|
|
|
- :style="{height: (courseRowHeight - 63) + 'px', marginTop: (courseRowHeight / 2 - 100) + 'px'}"
|
|
|
+ :style="{height: (this.courseRowHeight - 63) + 'px', marginTop: (this.courseRowHeight / 2 - 100) + 'px'}"
|
|
|
class="portal-card-main" style="cursor: pointer"
|
|
|
@click="this.$router.push('/auth')">
|
|
|
<el-icon :size="72" color="#bfbfbf">
|
|
|
@@ -22,7 +22,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div v-if="isLogin && isStudent && myCourseList.length!==0"
|
|
|
- :style="{height: (courseRowHeight - 63) + 'px'}"
|
|
|
+ :style="{height: (this.courseRowHeight - 63) + 'px'}"
|
|
|
class="portal-card-main">
|
|
|
<div class="portal-my-card-main">
|
|
|
<MyCourseCard v-for="course in myCourseList" :key="course.id" :courseVO="course"/>
|
|
|
@@ -30,7 +30,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div v-if="isLogin && isStudent && myCourseList.length===0"
|
|
|
- :style="{height: (courseRowHeight - 63) + 'px', marginTop: (courseRowHeight / 2 - 100) + 'px'}"
|
|
|
+ :style="{height: (this.courseRowHeight - 63) + 'px', marginTop: (this.courseRowHeight / 2 - 100) + 'px'}"
|
|
|
class="portal-card-main" style="cursor: pointer"
|
|
|
@click="this.$router.push('/course')">
|
|
|
<el-icon :size="72" color="#bfbfbf">
|
|
|
@@ -40,7 +40,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div v-show="isLogin && isTeacher"
|
|
|
- :style="{height: (courseRowHeight - 63) + 'px', marginTop: (courseRowHeight / 2 - 100) + 'px'}"
|
|
|
+ :style="{height: (this.courseRowHeight - 63) + 'px', marginTop: (this.courseRowHeight / 2 - 100) + 'px'}"
|
|
|
class="portal-card-main" style="cursor: pointer"
|
|
|
@click="this.$router.push('/manage')">
|
|
|
<el-icon :size="72" color="#bfbfbf">
|
|
|
@@ -53,27 +53,33 @@
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
- <el-card id="portal-course-card-main" :style="{height: courseRowHeight + 'px'}">
|
|
|
+ <el-card id="portal-course-card-main" :style="{height: this.courseRowHeight + 'px'}">
|
|
|
<div class="portal-card-title">
|
|
|
<div class="portal-card-title-main">精选课程</div>
|
|
|
+ <el-pagination v-if="isExpanding && courseList.length > 6"
|
|
|
+ :page-size="6"
|
|
|
+ :total="courseList.length"
|
|
|
+ @current-change="handleCourseCurrentChange"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ style="width: 200px; margin: 0 auto 0 auto"/>
|
|
|
<ElButton plain round type="primary" @click="this.$router.push('/course')">查看全部课程</ElButton>
|
|
|
</div>
|
|
|
<el-divider class="portal-card-divider"/>
|
|
|
<div class="portal-card-content">
|
|
|
- <CourseCard v-for="item in courseList" :key="item.id" :courseVO="item"/>
|
|
|
+ <CourseCard v-for="item in showCourseList" :key="item.id" :courseVO="item"/>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
- <el-card :style="{height: testRowHeight + 'px'}">
|
|
|
+ <el-card :style="{height: this.testRowHeight + 'px'}">
|
|
|
<div class="portal-card-title">
|
|
|
<div class="portal-card-title-main">我的测试</div>
|
|
|
</div>
|
|
|
<el-divider class="portal-card-divider"/>
|
|
|
<div>
|
|
|
<div v-if="!isLogin"
|
|
|
- :style="{height: (testRowHeight - 63) + 'px', marginTop: (testRowHeight / 2 - 100) + 'px'}"
|
|
|
+ :style="{height: (this.testRowHeight - 63) + 'px', marginTop: (this.testRowHeight / 2 - 100) + 'px'}"
|
|
|
class="portal-card-main" style="cursor: pointer"
|
|
|
@click="this.$router.push('/auth')">
|
|
|
<el-icon :size="72" color="#bfbfbf">
|
|
|
@@ -83,7 +89,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div v-if="isLogin && isStudent && myTestList!==null && myTestList.length!==0"
|
|
|
- :style="{height: (testRowHeight - 63) + 'px'}"
|
|
|
+ :style="{height: (this.testRowHeight - 63) + 'px'}"
|
|
|
class="portal-card-main">
|
|
|
<div class="portal-my-card-main">
|
|
|
<MyTestCard v-for="test in myTestList" :key="test.id" :testVO="test"/>
|
|
|
@@ -91,7 +97,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div v-if="isLogin && isStudent && myTestList!==null && myTestList.length===0"
|
|
|
- :style="{height: (testRowHeight - 63) + 'px', marginTop: (testRowHeight / 2 - 100) + 'px'}"
|
|
|
+ :style="{height: (this.testRowHeight - 63) + 'px', marginTop: (this.testRowHeight / 2 - 100) + 'px'}"
|
|
|
class="portal-card-main" style="cursor: pointer"
|
|
|
@click="this.$router.push('/test')">
|
|
|
<el-icon :size="72" color="#bfbfbf">
|
|
|
@@ -101,7 +107,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div v-show="isLogin && isTeacher"
|
|
|
- :style="{height: (testRowHeight - 63) + 'px', marginTop: (testRowHeight / 2 - 100) + 'px'}"
|
|
|
+ :style="{height: (this.testRowHeight - 63) + 'px', marginTop: (this.testRowHeight / 2 - 100) + 'px'}"
|
|
|
class="portal-card-main" style="cursor: pointer"
|
|
|
@click="this.$router.push('/manage')">
|
|
|
<el-icon :size="72" color="#bfbfbf">
|
|
|
@@ -162,9 +168,11 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ isExpanding: false,
|
|
|
activeTestPaneName: "eval",
|
|
|
evalExamList: [],
|
|
|
courseList: [],
|
|
|
+ showCourseList_current: 1,
|
|
|
coderExamList: [],
|
|
|
myCourseList: [],
|
|
|
myEvalExamList: [],
|
|
|
@@ -190,19 +198,20 @@ export default {
|
|
|
return [].concat(this.myEvalExamList).concat(this.myCoderExamList);
|
|
|
}
|
|
|
},
|
|
|
+ showCourseList() {
|
|
|
+ return this.courseList.slice((this.showCourseList_current - 1) * 6, this.showCourseList_current * 6);
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
//生命周期函数
|
|
|
created() {
|
|
|
window.addEventListener("scroll", this.handleResize, true);
|
|
|
},
|
|
|
+ beforeUnmount() {
|
|
|
+ window.removeEventListener("scroll", this.handleResize,);
|
|
|
+ },
|
|
|
async mounted() {
|
|
|
const that = this;
|
|
|
- window.onresize = () => {
|
|
|
- return (() => {
|
|
|
- that.handleResize();
|
|
|
- })();
|
|
|
- };
|
|
|
|
|
|
this.courseList = (await this.$apis.getExampleCourses()).data.data;
|
|
|
this.evalExamList = (await this.$apis.getExampleEvalExams()).data.data;
|
|
|
@@ -233,11 +242,12 @@ export default {
|
|
|
//其他函数
|
|
|
methods: {
|
|
|
handleResize() {
|
|
|
- if (this.$route.path!=="/portal") return;
|
|
|
+ if (this.$route.path !== "/portal") return;
|
|
|
// todo @DQJ 可能还得优化
|
|
|
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
if (scrollTop > 100) {
|
|
|
this.courseRowHeight = 640;
|
|
|
+ this.isExpanding = true;
|
|
|
}
|
|
|
this.testRowHeight = Math.max(this.$refs.portalTestCardBodyMain.$el.clientHeight, 300);
|
|
|
},
|
|
|
@@ -268,6 +278,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ handleCourseCurrentChange(index) {
|
|
|
+ this.showCourseList_current = index;
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
Damon
