Skip to content

X
x-learn
提交 e36aaa7a authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

Merge branch 'master' of https://gitlab.ezijing.com/ezijing/x-learn

上级 971227a6 6aa3e5f8
隐藏空白字符变更
内嵌 并排
正在显示 包含 227 行增加 和 221 行删除
src/components/CourseTag.vue
浏览文件 @ e36aaa7a
<template>
<div element-loading-text="加载中..." v-loading="!loaded">
<el-collapse v-model="activeNames" v-if="detail.chapters.length">
<el-collapse-item :title="item.name" :name="item.id" v-for="item in detail.chapters" :key="item.id">
<ul>
<li v-for="subItem in item.tag" :key="subItem.id" @click="$emit('on-click', subItem)">
<div class="name">{{ subItem.title }}</div>
</li>
</ul>
</el-collapse-item>
</el-collapse>
<div class="empty" v-else>暂无相关内容</div>
</div>
<el-collapse v-model="activeNames" v-if="list.length">
<el-collapse-item :title="item.name" :name="item.id" v-for="item in list" :key="item.id">
<ul>
<li
:class="{ 'is-active': subItem.id === activeId }"
v-for="subItem in item.tag"
:key="subItem.id"
@click="$emit('on-click', subItem)"
>
<div class="name">{{ subItem.title }}</div>
</li>
</ul>
</el-collapse-item>
</el-collapse>
</template>
<script>
import * as api from '@/api/course.js'
export default {
props: {
activeId: { type: String },
courseId: {
type: String,
default() {
return this.$route.params.id
}
},
isTest: { type: Boolean, default: false }
}
},
data() {
return {
loaded: false,
detail: { chapters: [] },
list: [],
activeNames: []
}
},
watch: {
parentId(value) {
this.activeNames = [value]
}
},
computed: {
parentId() {
for (const item of this.list) {
if (item.tag && item.tag.length) {
for (const subitem of item.tag) {
if (subitem.id === this.activeId) {
return item.id
}
}
}
}
return ''
}
},
methods: {
// 获取知识点列表
getCourseTagList() {
this.loaded = false
api
.getCourseTagList(this.courseId)
.then(response => {
this.detail = response
})
.finally(() => {
this.loaded = true
})
api.getCourseTagList(this.courseId).then(response => {
const { chapters = [] } = response
this.list = chapters
})
}
},
beforeMount() {
......@@ -69,7 +84,8 @@ li {
padding: 5px 0;
cursor: pointer;
color: #666;
&:hover {
&:hover,
&.is-active {
color: #c01540;
}
.name {
......
src/modules/viewer/components/aside/chapter.vue
浏览文件 @ e36aaa7a
......@@ -114,7 +114,7 @@ export default {
&.is-active {
background: #3c3c3c;
.chapter-item-list__name {
color: #b49441;
color: #c01540;
}
}
&:hover {
......
src/modules/viewer/components/aside/index.vue
浏览文件 @ e36aaa7a
......@@ -76,7 +76,7 @@ export default {
color: #909090;
text-align: center;
&.is-active {
color: #b49441;
color: #c01540;
}
}
::v-deep .el-tabs__active-bar,
......
src/modules/viewer/components/common/upload.vue
浏览文件 @ e36aaa7a
......@@ -106,7 +106,7 @@ export default {
text-decoration: none;
color: #333;
&:hover {
color: #b49441;
color: #c01540;
}
}
}
......
src/modules/viewer/components/read/fileList.vue
浏览文件 @ e36aaa7a
......@@ -51,7 +51,7 @@ export default {
text-decoration: none;
color: #333;
&:hover {
color: #b49441;
color: #c01540;
}
::v-deep * {
margin: 0;
......
src/pages/course/learn/components/TagLayout.vue 0 → 100644
浏览文件 @ e36aaa7a
<template>
<div class="app-tag" element-loading-text="加载中..." v-loading="!loaded">
<div class="app-tag-main">
<!-- 顶部区域 -->
<div class="app-tag-main-hd">
<router-link :to="`/course/learn/${courseId}`">
<i class="el-icon-arrow-left"></i>
</router-link>
<h1 class="app-tag-main-hd__title">{{ detail.title }}</h1>
<div class="menu" @click="menuVisible = !menuVisible">
<i class="el-icon-s-unfold" v-if="menuVisible"></i>
<i class="el-icon-s-fold" v-else></i>
</div>
</div>
<!-- 主体区域 -->
<div class="app-tag-main-bd">
<router-view :key="$route.fullPath" @ready="onReady" />
</div>
</div>
<div class="app-tag-aside" v-show="menuVisible">
<div class="app-tag-aside-hd">考点列表</div>
<div class="app-tag-aside-bd">
<course-tag :activeId="$route.params.id" :courseId="courseId" @on-click="onTagClick"></course-tag>
</div>
</div>
</div>
</template>
<script>
import CourseTag from '@/components/CourseTag'
export default {
components: { CourseTag },
data() {
return {
menuVisible: true,
loaded: true,
detail: {}
}
},
computed: {
courseId() {
return this.$route.params.courseId
}
},
methods: {
onReady(response) {
this.detail = response
},
onTagClick(data) {
this.$router.push({ name: 'courseTagItem', params: { courseId: this.courseId, id: data.id } })
}
}
}
</script>
<style lang="scss">
.app-tag {
display: flex;
height: 100vh;
overflow: hidden;
}
.app-tag-main {
flex: 1;
display: flex;
flex-direction: column;
}
.app-tag-main-hd {
display: flex;
align-items: center;
background-color: #3f3f3f;
height: 56px;
a {
color: #fff;
padding: 10px;
}
i {
font-size: 24px;
color: #fff;
}
}
.app-tag-main-hd__title {
flex: 1;
font-size: 1.5em;
// text-align: center;
color: #a0a0a0;
}
.app-tag-main-bd {
flex: 1;
height: calc(100vh - 56px);
overflow-y: auto;
}
.app-tag .menu {
width: 24px;
height: 24px;
padding: 12px;
margin-right: 10px;
color: #fff;
text-align: center;
border-radius: 50%;
cursor: pointer;
&:hover {
background-color: rgba(255, 255, 255, 0.08);
}
}
.app-tag-aside {
display: flex;
flex-direction: column;
width: 350px;
min-height: 100vh;
background-color: #232323;
}
.app-tag-aside-hd {
height: 56px;
font-size: 16px;
font-weight: 600;
line-height: 56px;
color: #909090;
text-align: center;
}
.app-tag-aside-bd {
flex: 1;
overflow-x: hidden;
overflow-y: auto;
padding: 0 10px 0 20px;
color: #b0b0b0;
.el-collapse-item__header {
font-size: 15px;
color: #b0b0b0;
background-color: transparent;
border: 0;
}
.el-collapse-item__wrap {
background-color: transparent;
border: 0;
}
.el-collapse-item__content {
font-size: 14px;
}
}
</style>
src/pages/course/learn/tag.vue
浏览文件 @ e36aaa7a
<template>
<div class="course-tag-wrapper" element-loading-text="加载中..." v-loading="!loaded">
<div class="course-tag-bd">
<div class="course-tag-main">
<div class="tag-content" v-html="html"></div>
<div class="course-tag" element-loading-text="加载中..." v-loading="!loaded">
<div class="course-tag-main">
<div class="tag-content" v-html="html"></div>
</div>
<div class="tools">
<div>
<el-button type="primary" size="medium" @click="toExamPage" v-if="detail.has_kaoshi">去测试</el-button>
<el-button type="primary" size="medium" @click="toCourseVideo" v-if="detail.has_video">相关视频</el-button>
</div>
<div class="tools">
<div>
<el-button type="primary" size="medium" @click="toExamPage" v-if="detail.has_kaoshi">去测试</el-button>
<el-button type="primary" size="medium" @click="toCourseVideo" v-if="detail.has_video">相关视频</el-button>
</div>
<div>
<el-button type="primary" size="medium" @click="getCourseTag(detail.last)" v-if="detail.last"
>上一点</el-button
>
<el-button type="primary" size="medium" @click="getCourseTag(detail.next)" v-if="detail.next"
>下一点</el-button
>
</div>
<div>
<el-button type="primary" size="medium" @click="getCourseTag(detail.last)" v-if="detail.last">上一点</el-button>
<el-button type="primary" size="medium" @click="getCourseTag(detail.next)" v-if="detail.next">下一点</el-button>
</div>
</div>
</div>
......@@ -57,6 +51,7 @@ export default {
api.getCourseTag(tagId || this.tagId).then(response => {
this.loaded = true
this.detail = response
this.$emit('ready', response)
})
},
// 去知识点考试页面
......@@ -79,20 +74,20 @@ export default {
</script>
<style lang="scss" scoped>
.course-tag {
height: 100%;
display: flex;
flex-direction: column;
}
.course-tag-main {
flex: 1;
padding: 30px;
background-color: #fff;
border-radius: 8px;
}
.tag-title {
font-size: 15px;
font-weight: bold;
color: #222;
line-height: 24px;
}
.tag-content {
font-size: 13px;
line-height: 22px;
font-size: 14px;
line-height: 30px;
::v-deep img {
max-width: 100%;
}
......@@ -101,14 +96,12 @@ export default {
}
}
.tools {
height: 50px;
position: sticky;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 0 30px;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
}
......
src/pages/my/course/index.vue
浏览文件 @ e36aaa7a
<template>
<course-list :showProgress="true" />
<course-list :showProgress="true" @on-click="handleClick" />
</template>
<script>
import CourseList from '@/components/CourseList.vue'
export default {
name: 'CourseLearn',
components: { CourseList }
components: { CourseList },
methods: {
handleClick(data) {
this.$router.push({ name: 'courseLearnItem', params: { id: data.id } })
}
}
}
</script>
src/router/routes.js
浏览文件 @ e36aaa7a
......@@ -17,12 +17,6 @@ const courseRoutes = [
name: 'courseLearnChapter',
component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/course/learn/item')
},
// 课程知识点详情
{
path: '/course/learn/:courseId/tag/:id',
name: 'courseTagItem',
component: () => import(/* webpackChunkName: "course-learn" */ '@/pages/course/learn/tag')
},
// 课程练习列表
{ path: '/course/test', component: () => import(/* webpackChunkName: "course-test" */ '@/pages/course/test') },
// 课程练习详情
......@@ -58,160 +52,6 @@ const examAnswer = [
export default [
{ path: '*', redirect: '/index' },
{ path: '/', redirect: '/index' },
// /* 课程检测 */
// {
// path: '/exam/abilityAnswer',
// name: 'abilityAnswer',
// component: () => import('../pages/courseExam/abilityAnswer.vue')
// },
// /* 能力自测首页 */
// {
// path: '/exam/index',
// name: 'examIndex',
// component: () => import('../pages/courseExam/index.vue')
// },
// /* 能力自测答题页面 */
// {
// path: '/exam/answer',
// name: 'examAnswer',
// component: () => import('../pages/courseExam/answer.vue')
// },
// /* 能力自测答题结果 */
// {
// path: '/exam/result',
// name: 'examResult',
// component: () => import('../pages/courseExam/answerResult.vue')
// },
// /* 知识点详情 */
// {
// path: '/exam/courseNode',
// name: 'courseNode',
// component: () => import('../pages/courseExam/courseNode.vue')
// },
// /* 知识点考试 */
// {
// path: '/exam/courseNodeExam',
// name: 'courseNodeExam',
// component: () => import('../pages/courseExam/courseNodeExam.vue')
// },
// /* 模拟考试 */
// {
// path: '/mock/index',
// name: 'mockIndex',
// component: () => import('../pages/mockExam/index.vue')
// // meta: { requiredLogin: true }
// },
// /* 模拟考试答题页面 */
// {
// path: '/mock/answer',
// name: 'mockAnswer',
// component: () => import('../pages/mockExam/answer.vue')
// },
// /* 模拟考试答题页面 */
// {
// path: '/mock/result',
// name: 'mockResult',
// component: () => import('../pages/mockExam/answerResult.vue')
// },
// // 听课列表
// {
// path: '/course/player',
// name: 'coursePlayer',
// component: () => import('../pages/course/player/index.vue')
// },
// // 听课详情
// {
// path: '/course/player/:id',
// name: 'coursePlayerItem',
// component: () => import('../pages/course/player/item.vue')
// },
// // 课程知识点
// {
// path: '/course/learn/:courseId/tag/:chapterId',
// name: 'courseTag',
// component: () => import('../pages/course/tag/list.vue')
// },
// // 课程知识点详情
// {
// path: '/course/tag/:id',
// name: 'courseTagItem',
// component: () => import('../pages/course/tag/item.vue')
// },
// // 我的-已购课程
// {
// path: '/my/buyCourses',
// name: 'buyCourses',
// component: () => import('../pages/my/buyCourses.vue'),
// meta: { requiredLogin: true }
// },
// // 我的-已做试题
// {
// path: '/my/questionsList',
// name: 'questionsList',
// component: () => import('../pages/my/questionsList.vue')
// },
// // 错题列表
// {
// path: '/errorQuestionList',
// name: 'errorQuestionList',
// component: () => import('../pages/my/errorQuestionList.vue')
// },
// // 我的-已做试题详情
// {
// path: '/my/questionsDetails',
// name: 'questionsDetails',
// component: () => import('../pages/my/questionsDetails.vue')
// },
// // 我的-试题详情-答题卡
// {
// path: '/my/answerCard',
// name: 'answerCard',
// component: () => import('../pages/my/answerCard.vue')
// },
// // 我的-收藏试题
// {
// path: '/my/collectQuestions',
// name: 'collectQuestions',
// component: () => import('../pages/my/collectQuestions.vue')
// },
// // 我的-发票页面
// {
// path: '/my/invoice',
// name: 'myInvoice',
// component: () => import('../pages/my/invoice.vue'),
// meta: { requiredLogin: true }
// },
// // 我的-联系客服
// {
// path: '/my/service',
// name: 'myService',
// component: () => import('../pages/my/service.vue')
// },
// // 我的-意见反馈
// {
// path: '/my/feedback',
// name: 'myFeedback',
// component: () => import('../pages/my/feedback.vue')
// },
// {
// path: '/buy',
// name: 'buy',
// component: () => import('../pages/buy/index.vue')
// // meta: { requiredLogin: true }
// },
// // 已学课程
// {
// path: '/my/learn',
// name: 'MyLearn',
// component: () => import('../pages/my/learn/index.vue')
// },
// // 课程学习详情
// {
// path: '/my/learn/:id',
// name: 'myLearnItem',
// component: () => import('../pages/my/learn/item.vue')
// },
{
path: '/',
component: Layout,
......@@ -242,6 +82,18 @@ export default [
...examAnswer
]
},
// 课程知识点详情
{
path: '/course/learn/:courseId/tag/:id',
component: () => import(/* webpackChunkName: "course-lear-tag" */ '@/pages/course/learn/components/TagLayout'),
children: [
{
path: '',
name: 'courseTagItem',
component: () => import(/* webpackChunkName: "course-lear-tag" */ '@/pages/course/learn/tag')
}
]
},
/* 搜索 */
{
path: '/search',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论