Skip to content

S
saas-learn
提交 01d76ad6 authored 作者: lhh's avatar lhh
浏览文件
操作

update

上级 ceef84ce
隐藏空白字符变更
内嵌 并排
正在显示 包含 278 行增加 和 61 行删除
src/assets/menus.ts
浏览文件 @ 01d76ad6
import type { IMenuItem } from '@/types' import type { IMenuItem } from '@/types'
import { Collection, ChatDotSquare, FolderAdd, Setting } from '@element-plus/icons-vue' import { Management, Comment, FolderAdd, Setting } from '@element-plus/icons-vue'
export const menus: IMenuItem[] = [ export const menus: IMenuItem[] = [
{ {
name: '学习', name: '学习',
path: '/course', path: '/course',
icon: Collection icon: Management,
iconImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-cou.png',
iconActiveImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-cou-a.png'
}, },
{ {
name: '论坛', name: '论坛',
path: '/bbs', path: '/bbs',
icon: ChatDotSquare icon: Comment,
iconImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-forum.png',
iconActiveImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-forum-a.png'
}, },
{ {
name: '收藏', name: '收藏',
path: '/favorites', path: '/favorites',
icon: FolderAdd icon: FolderAdd,
iconImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-collect.png',
iconActiveImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-collect-a.png'
}, },
{ {
name: '设置', name: '设置',
path: '/settings', path: '/settings',
icon: Setting icon: Setting,
iconImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-set.png',
iconActiveImg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/learn-set-a.png'
} }
] ]
src/components/layout/Aside.vue
浏览文件 @ 01d76ad6
...@@ -57,7 +57,13 @@ function handleClick(path: string) { ...@@ -57,7 +57,13 @@ function handleClick(path: string) {
</el-menu-item> </el-menu-item>
</el-sub-menu> </el-sub-menu>
<el-menu-item :index="item.path" @click="handleClick(item.path)" v-else> <el-menu-item :index="item.path" @click="handleClick(item.path)" v-else>
<el-icon><component :is="item.icon"></component></el-icon>{{ item.name }} <el-icon>
<img
:src="item.iconImg"
v-if="item.path.slice(1, item.path.length) !== route.path.slice(1, route.path.length).split('/')[0]"
/>
<img :src="item.iconActiveImg" v-else /> </el-icon
>{{ item.name }}
</el-menu-item> </el-menu-item>
</template> </template>
</el-menu> </el-menu>
...@@ -102,7 +108,9 @@ function handleClick(path: string) { ...@@ -102,7 +108,9 @@ function handleClick(path: string) {
margin: 50px auto; margin: 50px auto;
border-radius: 14px; border-radius: 14px;
&.is-active { &.is-active {
background: var(--el-menu-active-bg-color); // background: var(--el-menu-active-bg-color);
background-color: #ab0a3d;
color: #fff;
} }
.el-icon { .el-icon {
margin-bottom: 7px; margin-bottom: 7px;
......
src/components/layout/Index.vue
浏览文件 @ 01d76ad6
...@@ -27,7 +27,7 @@ withDefaults(defineProps<{ sidebar?: boolean; hasTitle?: boolean }>(), { ...@@ -27,7 +27,7 @@ withDefaults(defineProps<{ sidebar?: boolean; hasTitle?: boolean }>(), {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background-color: #f8f8f8; background-color: #eee;
} }
.app-layout-container { .app-layout-container {
flex: 1; flex: 1;
......
src/modules/course/components/CourseListItem.vue
浏览文件 @ 01d76ad6
...@@ -85,18 +85,19 @@ function handleTop(data: CourseListItemType) { ...@@ -85,18 +85,19 @@ function handleTop(data: CourseListItemType) {
.course-item { .course-item {
position: relative; position: relative;
padding: 12px; padding: 12px;
margin: 20px 0; margin: 14px 0;
border: 1px solid #e6e6e6; // border: 1px solid #e6e6e6;
border-radius: 6px; border-radius: 6px;
background-color: #fafafa;
&.is-top { &.is-top {
--el-border-color-lighter: #fff; // --el-border-color-lighter: #fff;
background: #eaeaea; // background: #eaeaea;
} }
&:hover, &:hover,
&.is-active { &.is-active {
--el-border-color-lighter: #fff; --el-border-color-lighter: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.12); box-shadow: 0px 3px 12px 1px rgba(0, 0, 0, 0.1216);
background: #eaeaea; background: #fff;
} }
} }
.course-item__top { .course-item__top {
...@@ -204,4 +205,9 @@ function handleTop(data: CourseListItemType) { ...@@ -204,4 +205,9 @@ function handleTop(data: CourseListItemType) {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
} }
::v-deep {
.el-progress-bar__outer {
background-color: #efefef;
}
}
</style> </style>
src/modules/course/components/CourseViewChapter.vue
浏览文件 @ 01d76ad6
...@@ -115,6 +115,21 @@ function targetUrl(resource: CourseResourceType, section: CourseSectionType, cha ...@@ -115,6 +115,21 @@ function targetUrl(resource: CourseResourceType, section: CourseSectionType, cha
return `/preview?course_id=${courseId}&semester_id=${semesterId}&resource_id=${resource.resource_id}&resource_type=${resource.resource_type}&url=${resource.info?.url}` return `/preview?course_id=${courseId}&semester_id=${semesterId}&resource_id=${resource.resource_id}&resource_type=${resource.resource_type}&url=${resource.info?.url}`
} }
} }
// 父级点击开始学习按钮
const study = function () {
if (chapterList.length) {
if (chapterList[0]?.sections?.length) {
if (chapterList[0].sections[0]?.resources?.length) {
window.open(targetUrl(chapterList[0].sections[0].resources[0], chapterList[0].sections[0], chapterList[0]))
}
}
}
}
defineExpose({
study
})
</script> </script>
<template> <template>
<el-collapse class="course-chapters" v-model="chapterIds" v-if="chapterList.length"> <el-collapse class="course-chapters" v-model="chapterIds" v-if="chapterList.length">
......
src/modules/course/views/CourseIndex.vue
浏览文件 @ 01d76ad6
...@@ -59,16 +59,16 @@ log.upload({ ...@@ -59,16 +59,16 @@ log.upload({
.course { .course {
display: flex; display: flex;
height: 100%; height: 100%;
background-color: #fff; // background-color: #fff;
border-radius: 6px; border-radius: 6px;
} }
// 左侧 // 左侧
.course-left { .course-left {
padding: 18px; // padding: 18px;
width: 354px; width: 313px;
flex: 0 0 354px; flex: 0 0 354px;
overflow-y: auto; overflow-y: auto;
border-right: 1px solid #e6e6e6; // border-right: 1px solid #e6e6e6;
box-sizing: border-box; box-sizing: border-box;
} }
// 右侧 // 右侧
......
src/modules/course/views/CourseView.vue
浏览文件 @ 01d76ad6
...@@ -41,6 +41,9 @@ const detail = reactive<CourseType>({ ...@@ -41,6 +41,9 @@ const detail = reactive<CourseType>({
target: '', target: '',
lecturers: [] lecturers: []
}) })
let infoText = $ref('')
let infoIndex = $ref(0)
// 获取课程信息 // 获取课程信息
function fetchInfo() { function fetchInfo() {
if (!courseId || !semesterId) { if (!courseId || !semesterId) {
...@@ -49,6 +52,7 @@ function fetchInfo() { ...@@ -49,6 +52,7 @@ function fetchInfo() {
loading = true loading = true
api.getCourse({ course_id: courseId, semester_id: semesterId }).then(res => { api.getCourse({ course_id: courseId, semester_id: semesterId }).then(res => {
Object.assign(detail, res.data.detail) Object.assign(detail, res.data.detail)
infoText = detail.represent
loading = false loading = false
}) })
} }
...@@ -61,16 +65,50 @@ const dialogInfo = reactive({ ...@@ -61,16 +65,50 @@ const dialogInfo = reactive({
title: '', title: '',
content: '' content: ''
}) })
function showInfo(title: string, content: string) { function showInfo(content: string, index: number) {
dialogInfo.visible = true infoText = content
dialogInfo.title = title infoIndex = index
dialogInfo.content = content // dialogInfo.visible = true
// dialogInfo.title = title
// dialogInfo.content = content
}
const courseViewChapterRef = ref()
function handleStudy() {
courseViewChapterRef.value.study()
} }
</script> </script>
<template> <template>
<div class="course-view" v-loading="loading"> <div class="course-view" v-loading="loading">
<section class="course-view-hd"> <div class="course-view-h">
<div class="view-h-l">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/campbellsville/20220804/lc23925.png" />
<div class="btn" @click="handleStudy">立即学习</div>
</div>
<div class="course-view-r">
<div class="name">{{ detail.course_alias_name || detail.name }}</div>
<div class="tag-box">
<div class="tag">{{ electiveTypeText }}</div>
<div class="tag">{{ detail.credit }}学分</div>
<div class="tag" v-if="detail.semester">{{ detail.semester.name }}</div>
</div>
<div class="view-content">
<div class="view-content-hd">
<div :class="infoIndex === 0 ? 'btn active' : 'btn'" @click="showInfo(detail.represent, 0)">课程简介</div>
<div :class="infoIndex === 1 ? 'btn active' : 'btn'" @click="showInfo(detail.previous_preparation, 1)">
预备知识
</div>
<div :class="infoIndex === 2 ? 'btn active' : 'btn'" @click="showInfo(detail.target, 2)">授课目标</div>
</div>
<div class="view-content_c" v-if="infoText === ''">
<el-empty :image-size="50" style="padding: 0" />
</div>
<div class="view-content_c" v-html="infoText" v-else></div>
</div>
</div>
</div>
<!-- <section class="course-view-hd">
<div class="course-info"> <div class="course-info">
<h1>{{ detail.course_alias_name || detail.name }}</h1> <h1>{{ detail.course_alias_name || detail.name }}</h1>
<ul> <ul>
...@@ -78,23 +116,14 @@ function showInfo(title: string, content: string) { ...@@ -78,23 +116,14 @@ function showInfo(title: string, content: string) {
<li>{{ detail.credit }}学分</li> <li>{{ detail.credit }}学分</li>
<li v-if="detail.semester">{{ detail.semester.name }}</li> <li v-if="detail.semester">{{ detail.semester.name }}</li>
</ul> </ul>
<el-button round @click="showInfo('课程简介', detail.represent)" :disabled="!detail.represent"
>课程简介</el-button
>
<el-button
round
@click="showInfo('预备知识', detail.previous_preparation)"
:disabled="!detail.previous_preparation"
>预备知识</el-button
>
<el-button round @click="showInfo('授课目标', detail.target)" :disabled="!detail.target">授课目标</el-button>
</div> </div>
<div class="course-lecturers" v-if="detail.lecturers?.length"> <div class="course-lecturers" v-if="detail.lecturers?.length">
<el-carousel <el-carousel
:autoplay="false" :autoplay="false"
indicator-position="none" indicator-position="none"
:arrow="detail.lecturers.length > 1 ? 'always' : 'never'" :arrow="detail.lecturers.length > 1 ? 'always' : 'never'"
height="126px"> height="126px"
>
<el-carousel-item v-for="item in detail.lecturers" :key="item.id" class="lecturer-item"> <el-carousel-item v-for="item in detail.lecturers" :key="item.id" class="lecturer-item">
<img :src="item.avatar" class="lecturer-item__pic" /> <img :src="item.avatar" class="lecturer-item__pic" />
<div class="lecturer-item__info"> <div class="lecturer-item__info">
...@@ -104,7 +133,8 @@ function showInfo(title: string, content: string) { ...@@ -104,7 +133,8 @@ function showInfo(title: string, content: string) {
<div <div
class="lecturer-item__content" class="lecturer-item__content"
v-html="item.summarize" v-html="item.summarize"
style="height: 66px; overflow: hidden"></div> style="height: 66px; overflow: hidden"
></div>
</template> </template>
<div class="lecturer-item__content" v-html="item.summarize"></div> <div class="lecturer-item__content" v-html="item.summarize"></div>
</el-popover> </el-popover>
...@@ -112,31 +142,41 @@ function showInfo(title: string, content: string) { ...@@ -112,31 +142,41 @@ function showInfo(title: string, content: string) {
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
</section> </section> -->
<div class="course-view-bd"> <div class="course-view-content">
<el-tabs> <div class="course-view-bd">
<el-tab-pane label="学习"> <el-tabs>
<CourseViewChapter /> <el-tab-pane label="学习">
</el-tab-pane> <CourseViewChapter ref="courseViewChapterRef" />
<el-tab-pane label="论坛" lazy> </el-tab-pane>
<CourseViewBBS /> <el-tab-pane label="论坛" lazy>
</el-tab-pane> <CourseViewBBS />
<el-tab-pane label="大作业" lazy> </el-tab-pane>
<CourseViewWork /> <el-tab-pane label="大作业" lazy>
</el-tab-pane> <CourseViewWork />
<el-tab-pane label="考试" lazy> </el-tab-pane>
<CourseViewExam /> <el-tab-pane label="考试" lazy>
</el-tab-pane> <CourseViewExam />
<el-tab-pane label="课程考核" lazy> </el-tab-pane>
<CourseViewAssess /> <el-tab-pane label="课程考核" lazy>
</el-tab-pane> <CourseViewAssess />
<el-tab-pane label="直播" lazy> </el-tab-pane>
<CourseViewLive /> <el-tab-pane label="直播" lazy>
</el-tab-pane> <CourseViewLive />
<el-tab-pane label="资料" lazy> </el-tab-pane>
<CourseViewMaterial /> <el-tab-pane label="资料" lazy>
</el-tab-pane> <CourseViewMaterial />
</el-tabs> </el-tab-pane>
</el-tabs>
</div>
<div class="course-view-teacher">
<div class="teacher-hd">课程讲师</div>
<div class="teacher-content" v-for="item in detail.lecturers" :key="item.id">
<img :src="item.avatar" class="lecturer-item__pic" />
<div class="name">{{ item.name }}</div>
<div class="dec" v-html="item.summarize"></div>
</div>
</div>
</div> </div>
</div> </div>
<el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" width="472px" center> <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" width="472px" center>
...@@ -145,6 +185,86 @@ function showInfo(title: string, content: string) { ...@@ -145,6 +185,86 @@ function showInfo(title: string, content: string) {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.course-view-h {
background: #ab0a3d;
box-shadow: 0px 1px 12px 1px rgba(0, 0, 0, 0.1098);
border-radius: 10px 10px 10px 10px;
margin-left: 20px;
padding: 20px;
box-sizing: border-box;
display: flex;
.view-h-l {
margin-right: 20px;
width: 243px;
img {
height: 151px;
width: 100%;
display: block;
border-radius: 6px 6px 6px 6px;
}
.btn {
width: 243px;
background: #ffffff;
border-radius: 6px 6px 6px 6px;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #ab0a3d;
line-height: 37px;
margin-top: 10px;
cursor: pointer;
}
}
.course-view-r {
width: 100%;
.name {
font-size: 18px;
font-weight: bold;
color: #ffffff;
line-height: 100%;
margin-bottom: 6px;
}
.tag-box {
display: flex;
.tag {
padding: 0 9px;
line-height: 23px;
background: #e6b6c4;
border-radius: 4px 4px 4px 4px;
font-size: 12px;
color: #ab0a3d;
margin-right: 10px;
}
}
.view-content {
background-color: #fff;
min-height: 140px;
border-radius: 9px 9px 9px 9px;
margin-top: 10px;
overflow: hidden;
.view-content_c {
padding: 12px 15px;
font-size: 12px;
color: #535353;
}
.view-content-hd {
background: #f7e6ec;
display: flex;
.btn {
line-height: 33px;
padding: 0 18px;
font-size: 14px;
color: #666666;
cursor: pointer;
&.active {
color: #ba143e;
background-color: #fff;
}
}
}
}
}
}
.course-view { .course-view {
height: 100%; height: 100%;
} }
...@@ -205,11 +325,13 @@ function showInfo(title: string, content: string) { ...@@ -205,11 +325,13 @@ function showInfo(title: string, content: string) {
overflow: hidden; overflow: hidden;
} }
.lecturer-item__pic { .lecturer-item__pic {
width: 90px; width: 146px;
height: 106px; height: 106px;
object-fit: cover; object-fit: cover;
display: block;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
margin: 18px auto;
} }
.lecturer-item__info { .lecturer-item__info {
flex: 1; flex: 1;
...@@ -236,11 +358,67 @@ function showInfo(title: string, content: string) { ...@@ -236,11 +358,67 @@ function showInfo(title: string, content: string) {
} }
.course-view-bd { .course-view-bd {
flex: 1;
padding: 10px 20px; padding: 10px 20px;
background-color: #fff;
border-radius: 10px 10px 10px 10px;
} }
.dialog-info { .dialog-info {
:deep(img) { :deep(img) {
max-width: 100%; max-width: 100%;
} }
} }
.course-view-content {
display: flex;
padding-left: 20px;
margin-top: 20px;
.course-view-teacher {
width: 217px;
margin-left: 20px;
border-radius: 10px 10px 10px 10px;
background-color: #fff;
padding: 0 13px 52px;
height: fit-content;
.teacher-hd {
line-height: 55px;
text-align: center;
position: relative;
border-bottom: 1px solid #eaeaea;
font-size: 16px;
font-weight: bold;
color: #aa1941;
&::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 84px;
height: 2px;
background: #aa1941;
}
}
.teacher-content {
.name {
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 100%;
color: #333333;
margin-bottom: 12px;
}
.dec {
font-size: 14px;
color: #666666;
text-align: center;
}
}
}
}
::v-deep {
.el-empty__description {
margin-top: 5px;
font-size: 12px;
}
}
</style> </style>
src/types.ts
浏览文件 @ 01d76ad6
...@@ -7,6 +7,8 @@ export interface IMenuItem { ...@@ -7,6 +7,8 @@ export interface IMenuItem {
path: string path: string
icon?: Component icon?: Component
children?: IMenuItem[] children?: IMenuItem[]
iconImg?: string
iconActiveImg?: string
} }
// 用户类型 // 用户类型
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论