Skip to content

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

update

上级 0555bcbc
显示空白字符变更
内嵌 并排
正在显示 包含 290 行增加 和 79 行删除
src/modules/course/views/CourseIndex.vue
浏览文件 @ 3c10b5c7
<script setup lang="ts"> <script setup lang="ts">
import CourseListSearch from '../components/CourseListSearch.vue' import CourseListSearch from '../components/CourseListSearch.vue'
import CourseListItem from '../components/CourseListItem.vue' import CourseListItem from '../components/CourseListItem.vue'
import CourseView from './CourseView.vue'
import type { CourseListParamsType, CourseListItemType } from '../types' import type { CourseListParamsType, CourseListItemType } from '../types'
import { getCourseList } from '../api' import { getCourseList } from '../api'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
...@@ -47,13 +48,16 @@ log.upload({ ...@@ -47,13 +48,16 @@ log.upload({
<template> <template>
<section class="course" :class="route.path === '/course' ? 'is-list' : 'is-view'"> <section class="course" :class="route.path === '/course' ? 'is-list' : 'is-view'">
<div class="course-left"> <!-- <div class="course-left">
<CourseListSearch @change="handleSearch"></CourseListSearch> <CourseListSearch @change="handleSearch"></CourseListSearch>
<div class="course-list"> <div class="course-list">
<CourseListItem v-for="item in courseList" :data="item" :key="item.id" @change="fetchList"></CourseListItem> <CourseListItem v-for="item in courseList" :data="item" :key="item.id" @change="fetchList"></CourseListItem>
</div> </div>
</div> -->
<!-- <div class="course-right"><router-view :key="$route.fullPath"></router-view></div> -->
<div class="course-right">
<CourseView v-for="item in courseList" :data="item" :key="item.id"></CourseView>
</div> </div>
<div class="course-right"><router-view :key="$route.fullPath"></router-view></div>
</section> </section>
</template> </template>
...@@ -76,8 +80,11 @@ log.upload({ ...@@ -76,8 +80,11 @@ log.upload({
// 右侧 // 右侧
.course-right { .course-right {
flex: 1; flex: 1;
overflow: hidden; // overflow: hidden;
margin-left: 20px; // background-color: #fff;
// margin-left: 20px;
border-radius: 10px;
height: fit-content;
} }
.is-h5 { .is-h5 {
.course-left { .course-left {
......
src/modules/course/views/CourseView.vue
浏览文件 @ 3c10b5c7
...@@ -5,6 +5,8 @@ import * as api from '../api' ...@@ -5,6 +5,8 @@ import * as api from '../api'
import { useDevice } from '@/composables/useDevice' import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice() const { mobile } = useDevice()
const props = defineProps<{ data: any }>()
const CourseViewChapter = defineAsyncComponent(() => import('../components/CourseViewChapter.vue')) const CourseViewChapter = defineAsyncComponent(() => import('../components/CourseViewChapter.vue'))
const CourseViewBBS = defineAsyncComponent(() => import('../components/CourseViewBBS.vue')) const CourseViewBBS = defineAsyncComponent(() => import('../components/CourseViewBBS.vue'))
const CourseViewWork = defineAsyncComponent(() => import('../components/CourseViewWork.vue')) const CourseViewWork = defineAsyncComponent(() => import('../components/CourseViewWork.vue'))
...@@ -19,12 +21,14 @@ const semesterId = $ref<string | null>(query.semester_id as string) ...@@ -19,12 +21,14 @@ const semesterId = $ref<string | null>(query.semester_id as string)
let loading = $ref<boolean>(false) let loading = $ref<boolean>(false)
const router = useRouter()
const mapStore = useMapStore() const mapStore = useMapStore()
// 选课类型 // 选课类型
const electiveTypes = mapStore.getMapValuesByKey('system_elective_type') const electiveTypes = mapStore.getMapValuesByKey('system_elective_type')
// 选课类型文本 // 选课类型文本
const electiveTypeText = computed(() => { const electiveTypeText = computed(() => {
return electiveTypes.find(item => parseInt(item.value) === detail.elective_type)?.label || '' return electiveTypes.find(item => parseInt(item.value) === props.data?.elective_type)?.label || ''
}) })
const detail = reactive<CourseType>({ const detail = reactive<CourseType>({
id: '', id: '',
...@@ -44,7 +48,7 @@ const detail = reactive<CourseType>({ ...@@ -44,7 +48,7 @@ const detail = reactive<CourseType>({
lecturers: [] lecturers: []
}) })
let infoText = $ref('') let infoText = $ref(props.data?.represent || '')
let infoIndex = $ref(0) let infoIndex = $ref(0)
// 获取课程信息 // 获取课程信息
function fetchInfo() { function fetchInfo() {
...@@ -54,12 +58,12 @@ function fetchInfo() { ...@@ -54,12 +58,12 @@ 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 infoText = props.data?.represent
loading = false loading = false
}) })
} }
onMounted(() => { onMounted(() => {
fetchInfo() // fetchInfo()
}) })
const dialogInfo = reactive({ const dialogInfo = reactive({
...@@ -79,10 +83,21 @@ const courseViewChapterRef = ref() ...@@ -79,10 +83,21 @@ const courseViewChapterRef = ref()
function handleStudy() { function handleStudy() {
courseViewChapterRef.value.study() courseViewChapterRef.value.study()
} }
let detailFlag = $ref(false)
const handleDetail = function () {
router.push({
path: '/course/view',
query: { course_id: props.data?.course_id, semester_id: props.data?.semester_id }
})
fetchInfo()
detailFlag = true
}
</script> </script>
<template> <template>
<div class="course-view" v-loading="loading"> <div class="course-view" v-loading="loading">
<div :class="detailFlag ? 'flex active' : 'flex'">
<div class="course-view-h"> <div class="course-view-h">
<div class="view-h-l"> <div class="view-h-l">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/campbellsville/20220804/lc23925.png" /> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/campbellsville/20220804/lc23925.png" />
...@@ -90,25 +105,56 @@ function handleStudy() { ...@@ -90,25 +105,56 @@ function handleStudy() {
</div> </div>
<div class="course-view-r"> <div class="course-view-r">
<div class="course-view-r__info"> <div class="course-view-r__info">
<div class="name">{{ detail.course_alias_name || detail.name }}</div> <div class="name">{{ props.data?.course_alias_name || props.data?.name }}</div>
<div class="tag-box"> <div class="tag-box">
<div class="tag">{{ electiveTypeText }}</div> <div class="tag">{{ electiveTypeText }}</div>
<div class="tag">{{ detail.credit }}学分</div> <div class="tag">{{ props.data?.credit }}学分</div>
<div class="tag" v-if="detail.semester">{{ detail.semester.name }}</div> <div class="tag" v-if="props.data?.semester">{{ props.data?.semester.name }}</div>
</div> </div>
</div> </div>
<div class="view-content"> <div class="view-content">
<div class="view-content-hd"> <div class="view-content-hd">
<div :class="infoIndex === 0 ? 'btn active' : 'btn'" @click="showInfo(detail.represent, 0)">课程简介</div> <div :class="infoIndex === 0 ? 'btn active' : 'btn'" @click="showInfo(props.data?.represent, 0)">
<div :class="infoIndex === 1 ? 'btn active' : 'btn'" @click="showInfo(detail.previous_preparation, 1)" v-if="false">预备知识</div> 课程简介
<div :class="infoIndex === 2 ? 'btn active' : 'btn'" @click="showInfo(detail.target, 2)">授课目标</div> </div>
<div
:class="infoIndex === 1 ? 'btn active' : 'btn'"
@click="showInfo(props.data?.previous_preparation, 1)"
v-if="false"
>
预备知识
</div>
<div :class="infoIndex === 2 ? 'btn active' : 'btn'" @click="showInfo(props.data?.target, 2)">
授课目标
</div>
</div> </div>
<div class="view-content_c" v-if="infoText === ''"> <div class="view-content_c" v-if="infoText === ''">
<el-empty :image-size="50" style="padding: 0" /> <el-empty :image-size="50" style="padding: 0" description="暂无数据"></el-empty>
</div> </div>
<div class="view-content_c" v-html="infoText" v-else></div> <div class="view-content_c" v-html="infoText" v-else></div>
</div> </div>
</div> </div>
<div class="view-btn" @click="handleDetail()" v-if="!detailFlag">
<img src="@/assets/images/icon-btn.png" class="icon" />
<img src="@/assets/images/icon-btn-a.png" class="icon-a" />
<div class="text">
<i>︾</i>
<span>查看详情</span>
</div>
</div>
</div>
<div class="course-view-teacher">
<div class="teacher-hd">课程讲师</div>
<div class="teacher-content">
<div class="teacher-content-item" v-for="item in props.data?.lecturers" :key="item.id">
<img :src="item.avatar" />
<div class="box">
<div class="name">{{ item.name }}</div>
<div class="dec" v-html="item.summarize"></div>
</div>
</div>
</div>
</div>
</div> </div>
<!-- <section class="course-view-hd"> <!-- <section class="course-view-hd">
<div class="course-info"> <div class="course-info">
...@@ -145,7 +191,7 @@ function handleStudy() { ...@@ -145,7 +191,7 @@ function handleStudy() {
</el-carousel> </el-carousel>
</div> </div>
</section> --> </section> -->
<div class="course-view-content"> <div class="course-view-content" v-if="detailFlag">
<div class="course-view-bd"> <div class="course-view-bd">
<el-tabs :stretch="mobile"> <el-tabs :stretch="mobile">
<el-tab-pane label="学习"> <el-tab-pane label="学习">
...@@ -171,14 +217,12 @@ function handleStudy() { ...@@ -171,14 +217,12 @@ function handleStudy() {
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div class="course-view-teacher"> <div class="view-btn c" @click="detailFlag = false" v-if="detailFlag">
<div class="teacher-hd">课程讲师</div> <img src="@/assets/images/icon-btn-b.png" class="icon" />
<div class="teacher-content" v-for="item in detail.lecturers" :key="item.id"> <img src="@/assets/images/icon-btn-a.png" class="icon-a" />
<img :src="item.avatar" class="lecturer-item__pic" /> <div class="text">
<div class="box"> <i>︽</i>
<div class="name">{{ item.name }}</div> <span>收起</span>
<div class="dec" v-html="item.summarize"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -189,79 +233,184 @@ function handleStudy() { ...@@ -189,79 +233,184 @@ function handleStudy() {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.flex {
display: flex;
&.active {
.course-view-h {
background: #ab0a3d;
box-shadow: 0px 6px 12px 1px rgba(0, 0, 0, 0.05);
}
.view-h-l {
.btn {
background: #fff;
color: #555555;
}
}
.course-view-r {
.name {
color: #fff;
}
.view-content {
.view-content-hd {
.btn {
color: #fff;
&.active {
color: #fff;
font-weight: bold;
}
}
}
.view-content_c {
color: #fff;
}
}
}
.view-btn {
.text {
color: #fff;
}
.icon-a {
display: block;
}
.icon {
display: none;
}
}
}
&:hover {
.course-view-h {
background: #ab0a3d;
box-shadow: 0px 6px 12px 1px rgba(0, 0, 0, 0.05);
}
.view-h-l {
.btn {
background: #fff;
color: #555555;
}
}
.course-view-r {
.name {
color: #fff;
}
.view-content {
.view-content-hd {
.btn {
color: #fff;
&.active {
color: #fff;
font-weight: bold;
}
}
}
.view-content_c {
color: #fff;
}
}
}
.view-btn {
.text {
color: #fff;
}
.icon-a {
display: block;
}
.icon {
display: none;
}
}
}
}
.course-view-h { .course-view-h {
flex: 1;
position: relative; position: relative;
background: #ab0a3d; // background: #ab0a3d;
box-shadow: 0px 1px 12px 1px rgba(0, 0, 0, 0.1098); // box-shadow: 0px 1px 12px 1px rgba(0, 0, 0, 0.1098);
border-radius: 10px 10px 10px 10px; // border-radius: 10px 10px 10px 10px;
padding: 0.2rem; background: linear-gradient(90deg, #dfe4e6 0%, #eaeaea 39%, #b3b3b3 100%);
border-radius: 10px 0 0 10px;
padding: 20px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
.view-h-l { .view-h-l {
margin-right: 0.2rem; margin-right: 0.2rem;
width: 2.4rem; min-width: 260px;
img { img {
height: 1.5rem; height: 150px;
width: 100%; width: 100%;
display: block; display: block;
border-radius: 6px 6px 6px 6px; border-radius: 12px;
} }
.btn { .btn {
background: #ffffff; background: #ab0a3d;
border-radius: 6px 6px 6px 6px; border-radius: 12px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #ab0a3d; color: #fff;
line-height: 37px; line-height: 37px;
margin-top: 10px; margin-top: 10px;
cursor: pointer; cursor: pointer;
} }
} }
.course-view-r { .course-view-r {
position: relative;
width: 100%; width: 100%;
.name { .name {
font-size: 0.18rem; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #000;
line-height: 100%; line-height: 100%;
margin-bottom: 6px; margin-bottom: 20px;
} }
.tag-box { .tag-box {
display: flex; display: flex;
.tag { .tag {
padding: 0 9px; padding: 0 9px;
line-height: 23px; line-height: 23px;
background: #e6b6c4; background: #fff;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
font-size: 0.12rem; font-size: 0.12rem;
color: #ab0a3d; color: #555555;
margin-right: 10px; margin-right: 10px;
} }
} }
.view-content { .view-content {
background-color: #fff; // background-color: #fff;
min-height: 140px; // min-height: 120px;
border-radius: 9px 9px 9px 9px; border-radius: 9px 9px 9px 9px;
margin-top: 10px; margin-top: 10px;
overflow: hidden; // overflow: hidden;
.view-content_c { .view-content_c {
padding: 12px 15px; // padding: 0 18px;
font-size: 12px; font-size: 12px;
color: #535353; color: #535353;
height: 85px;
overflow: auto;
&::-webkit-scrollbar {
width: 3px;
}
&::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 30px !important;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 30px !important;
}
} }
.view-content-hd { .view-content-hd {
background: #f7e6ec; // background: #f7e6ec;
display: flex; display: flex;
.btn { .btn {
line-height: 33px; line-height: 33px;
padding: 0 18px; // padding: 0 18px;
margin-right: 18px;
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #ba143e; color: #ba143e;
background-color: #fff; // background-color: #fff;
} }
} }
} }
...@@ -269,7 +418,9 @@ function handleStudy() { ...@@ -269,7 +418,9 @@ function handleStudy() {
} }
} }
.course-view { .course-view {
height: 100%; margin-bottom: 60px;
background-color: #fff;
border-radius: 10px;
} }
.course-view-hd { .course-view-hd {
display: flex; display: flex;
...@@ -374,48 +525,61 @@ function handleStudy() { ...@@ -374,48 +525,61 @@ function handleStudy() {
} }
.course-view-content { .course-view-content {
display: flex; display: flex;
margin-top: 0.2rem; position: relative;
.course-view-teacher { // margin-top: 0.2rem;
width: 217px; }
margin-left: 20px; .course-view-teacher {
border-radius: 10px 10px 10px 10px; width: 410px;
background-color: #fff; background-color: #fff;
padding: 0 13px 52px; border-radius: 0px 10px 10px 0px;
height: fit-content; padding: 30px 30px 0 30px;
box-sizing: border-box;
.teacher-hd { .teacher-hd {
line-height: 0.55rem; font-size: 20px;
text-align: center; font-weight: bold;
position: relative;
border-bottom: 1px solid #eaeaea;
font-size: 16px;
font-weight: 500;
color: #aa1941;
&::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 84px;
height: 2px;
background: #aa1941;
}
} }
.teacher-content { .teacher-content {
margin-top: 18px; padding-top: 30px;
box-sizing: border-box;
// padding: 30px 30px 0;
height: 150px;
overflow: auto;
&::-webkit-scrollbar {
width: 5px;
margin-right: 40px !important;
border-radius: 30px !important;
}
&::-webkit-scrollbar-track {
background-color: #dfe4e6;
opacity: 0.5;
border-radius: 30px !important;
}
&::-webkit-scrollbar-thumb {
background-color: #b3b3b3;
border-radius: 30px !important;
}
.teacher-content-item {
display: flex;
margin-bottom: 30px;
img {
width: 90px;
height: 90px;
border-radius: 50%;
}
}
.box {
margin-left: 30px;
.name { .name {
margin-top: 18px; font-size: 16px;
text-align: center;
font-size: 0.16rem;
font-weight: bold; font-weight: bold;
line-height: 100%;
color: #333333; color: #333333;
margin-bottom: 12px; line-height: 100%;
margin-bottom: 10px;
} }
.dec { .dec {
font-size: 14px; font-size: 12px;
color: #666666; color: #666666;
text-align: center; line-height: 18px;
} }
} }
} }
...@@ -424,6 +588,9 @@ function handleStudy() { ...@@ -424,6 +588,9 @@ function handleStudy() {
margin-top: 5px; margin-top: 5px;
font-size: 12px; font-size: 12px;
} }
:deep(.el-empty__description p) {
color: #edeef2;
}
.is-h5 { .is-h5 {
.course-view-h { .course-view-h {
...@@ -470,4 +637,41 @@ function handleStudy() { ...@@ -470,4 +637,41 @@ function handleStudy() {
} }
} }
} }
.view-btn {
position: absolute;
bottom: -48px;
right: 20%;
// transform: translateX(-50%);
cursor: pointer;
&.c {
right: 50%;
transform: translateX(50%);
.text {
i {
margin-top: -3px;
margin-left: 25px;
}
}
}
.icon-a {
display: none;
}
.text {
font-size: 14px;
color: #555555;
position: absolute;
top: 13px;
left: 50%;
transform: translateX(-50%);
display: flex;
i {
margin-top: 3px;
margin-right: 5px;
}
span {
width: 60px;
}
}
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论