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 { Collection, ChatDotSquare, FolderAdd, Setting } from '@element-plus/icons-vue'
import { Management, Comment, FolderAdd, Setting } from '@element-plus/icons-vue'
export const menus: IMenuItem[] = [
{
name: '学习',
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: '论坛',
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: '收藏',
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: '设置',
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) {
</el-menu-item>
</el-sub-menu>
<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>
</template>
</el-menu>
......@@ -102,7 +108,9 @@ function handleClick(path: string) {
margin: 50px auto;
border-radius: 14px;
&.is-active {
background: var(--el-menu-active-bg-color);
// background: var(--el-menu-active-bg-color);
background-color: #ab0a3d;
color: #fff;
}
.el-icon {
margin-bottom: 7px;
......
src/components/layout/Index.vue
浏览文件 @ 01d76ad6
......@@ -27,7 +27,7 @@ withDefaults(defineProps<{ sidebar?: boolean; hasTitle?: boolean }>(), {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #f8f8f8;
background-color: #eee;
}
.app-layout-container {
flex: 1;
......
src/modules/course/components/CourseListItem.vue
浏览文件 @ 01d76ad6
......@@ -85,18 +85,19 @@ function handleTop(data: CourseListItemType) {
.course-item {
position: relative;
padding: 12px;
margin: 20px 0;
border: 1px solid #e6e6e6;
margin: 14px 0;
// border: 1px solid #e6e6e6;
border-radius: 6px;
background-color: #fafafa;
&.is-top {
--el-border-color-lighter: #fff;
background: #eaeaea;
// --el-border-color-lighter: #fff;
// background: #eaeaea;
}
&:hover,
&.is-active {
--el-border-color-lighter: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.12);
background: #eaeaea;
box-shadow: 0px 3px 12px 1px rgba(0, 0, 0, 0.1216);
background: #fff;
}
}
.course-item__top {
......@@ -204,4 +205,9 @@ function handleTop(data: CourseListItemType) {
border-bottom-left-radius: 0;
}
}
::v-deep {
.el-progress-bar__outer {
background-color: #efefef;
}
}
</style>
src/modules/course/components/CourseViewChapter.vue
浏览文件 @ 01d76ad6
......@@ -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}`
}
}
// 父级点击开始学习按钮
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>
<template>
<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({
.course {
display: flex;
height: 100%;
background-color: #fff;
// background-color: #fff;
border-radius: 6px;
}
// 左侧
.course-left {
padding: 18px;
width: 354px;
// padding: 18px;
width: 313px;
flex: 0 0 354px;
overflow-y: auto;
border-right: 1px solid #e6e6e6;
// border-right: 1px solid #e6e6e6;
box-sizing: border-box;
}
// 右侧
......
src/modules/course/views/CourseView.vue
浏览文件 @ 01d76ad6
......@@ -41,6 +41,9 @@ const detail = reactive<CourseType>({
target: '',
lecturers: []
})
let infoText = $ref('')
let infoIndex = $ref(0)
// 获取课程信息
function fetchInfo() {
if (!courseId || !semesterId) {
......@@ -49,6 +52,7 @@ function fetchInfo() {
loading = true
api.getCourse({ course_id: courseId, semester_id: semesterId }).then(res => {
Object.assign(detail, res.data.detail)
infoText = detail.represent
loading = false
})
}
......@@ -61,16 +65,50 @@ const dialogInfo = reactive({
title: '',
content: ''
})
function showInfo(title: string, content: string) {
dialogInfo.visible = true
dialogInfo.title = title
dialogInfo.content = content
function showInfo(content: string, index: number) {
infoText = content
infoIndex = index
// dialogInfo.visible = true
// dialogInfo.title = title
// dialogInfo.content = content
}
const courseViewChapterRef = ref()
function handleStudy() {
courseViewChapterRef.value.study()
}
</script>
<template>
<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">
<h1>{{ detail.course_alias_name || detail.name }}</h1>
<ul>
......@@ -78,23 +116,14 @@ function showInfo(title: string, content: string) {
<li>{{ detail.credit }}学分</li>
<li v-if="detail.semester">{{ detail.semester.name }}</li>
</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 class="course-lecturers" v-if="detail.lecturers?.length">
<el-carousel
:autoplay="false"
indicator-position="none"
: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">
<img :src="item.avatar" class="lecturer-item__pic" />
<div class="lecturer-item__info">
......@@ -104,7 +133,8 @@ function showInfo(title: string, content: string) {
<div
class="lecturer-item__content"
v-html="item.summarize"
style="height: 66px; overflow: hidden"></div>
style="height: 66px; overflow: hidden"
></div>
</template>
<div class="lecturer-item__content" v-html="item.summarize"></div>
</el-popover>
......@@ -112,31 +142,41 @@ function showInfo(title: string, content: string) {
</el-carousel-item>
</el-carousel>
</div>
</section>
<div class="course-view-bd">
<el-tabs>
<el-tab-pane label="学习">
<CourseViewChapter />
</el-tab-pane>
<el-tab-pane label="论坛" lazy>
<CourseViewBBS />
</el-tab-pane>
<el-tab-pane label="大作业" lazy>
<CourseViewWork />
</el-tab-pane>
<el-tab-pane label="考试" lazy>
<CourseViewExam />
</el-tab-pane>
<el-tab-pane label="课程考核" lazy>
<CourseViewAssess />
</el-tab-pane>
<el-tab-pane label="直播" lazy>
<CourseViewLive />
</el-tab-pane>
<el-tab-pane label="资料" lazy>
<CourseViewMaterial />
</el-tab-pane>
</el-tabs>
</section> -->
<div class="course-view-content">
<div class="course-view-bd">
<el-tabs>
<el-tab-pane label="学习">
<CourseViewChapter ref="courseViewChapterRef" />
</el-tab-pane>
<el-tab-pane label="论坛" lazy>
<CourseViewBBS />
</el-tab-pane>
<el-tab-pane label="大作业" lazy>
<CourseViewWork />
</el-tab-pane>
<el-tab-pane label="考试" lazy>
<CourseViewExam />
</el-tab-pane>
<el-tab-pane label="课程考核" lazy>
<CourseViewAssess />
</el-tab-pane>
<el-tab-pane label="直播" lazy>
<CourseViewLive />
</el-tab-pane>
<el-tab-pane label="资料" lazy>
<CourseViewMaterial />
</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>
<el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" width="472px" center>
......@@ -145,6 +185,86 @@ function showInfo(title: string, content: string) {
</template>
<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 {
height: 100%;
}
......@@ -205,11 +325,13 @@ function showInfo(title: string, content: string) {
overflow: hidden;
}
.lecturer-item__pic {
width: 90px;
width: 146px;
height: 106px;
object-fit: cover;
display: block;
border-radius: 10px;
overflow: hidden;
margin: 18px auto;
}
.lecturer-item__info {
flex: 1;
......@@ -236,11 +358,67 @@ function showInfo(title: string, content: string) {
}
.course-view-bd {
flex: 1;
padding: 10px 20px;
background-color: #fff;
border-radius: 10px 10px 10px 10px;
}
.dialog-info {
:deep(img) {
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>
src/types.ts
浏览文件 @ 01d76ad6
......@@ -7,6 +7,8 @@ export interface IMenuItem {
path: string
icon?: Component
children?: IMenuItem[]
iconImg?: string
iconActiveImg?: string
}
// 用户类型
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论