Duguay/teach_sys_Demo
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 实现公共课单元背景图片切换和项目库功能

Browse Source 
- 为公共课直播间添加单元背景图片切换功能
- 支持终生学习系统、企业高管公开课、营销能力课的背景图片
- 点击不同单元课程时左侧直播间背景自动切换
- 添加我的项目库功能，展示25个完成项目
- 项目库采用灰色禁用样式，hover显示权限提示
- 优化李奇导师头像显示效果和容器背景色匹配
- 修复展会课程跳转链接

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
KQL
2025-09-08 09:32:40 +08:00
parent 7132a9f190
commit 9a14678a12
6 changed files with 221 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/CoursesVideoPlayer/index.css
View File

@@ -124,18 +124,19 @@
}
}
/* 李奇导师头像特殊调整 - 居中显示 */
/* 李奇导师头像特殊调整 - 放大并居中显示 */
.teacher-avatar.teacher-liqi {
overflow: hidden !important;
background-color: rgb(190, 196, 202) !important;
img {
width: 140% !important;
height: 140% !important;
width: 260% !important;
height: 260% !important;
object-fit: cover !important;
object-position: center 35% !important;
object-position: center 30% !important;
position: absolute !important;
top: 55% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
top: -25% !important;
left: -20% !important;
transform: none !important;
}
}

11
src/components/CoursesVideoPlayer/index.jsx
View File

@@ -46,7 +46,8 @@ export default ({ className = "", isLock = false, selectedCourse, teacherData, u
"郭建辉": "#E0D9D3", // 米灰色
"赵志强": "#E3E2E0", // 浅灰色
"孙应战": "#FFFFFF", // 白色
"魏立慧": "#DCD8D4" // 灰褐色
"魏立慧": "#DCD8D4", // 灰褐色
"李奇": "#E8E8E8" // 浅灰色 - 匹配头像背景
};
return backgrounds[name] || "#E3E2E0";
};
@@ -101,7 +102,13 @@ export default ({ className = "", isLock = false, selectedCourse, teacherData, u
/* 选中课程时显示模糊的海报图和锁定状态 */
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
<img
src={unitPosters?.[unitName] || unitPosters?.["终生学习系统课"]}
src={(() => {
const posterUrl = selectedCourse?.unitPoster || unitPosters?.[unitName] || unitPosters?.["终生学习系统课"];
console.log('CoursesVideoPlayer 背景图片URL:', posterUrl);
console.log('selectedCourse.unitPoster:', selectedCourse?.unitPoster);
console.log('unitName:', unitName);
return posterUrl;
})()}
alt={unitName}
style={{
width: '100%',

37
src/components/PublicCourseList/index.css
View File

@@ -58,7 +58,32 @@
.course-list-item .arco-collapse-item-header {
border-radius: 8px;
background-color: #f2f3f5;
background-color: rgba(242, 243, 245, 0.9);
color: #1d2129;
font-weight: 600;
position: relative;
overflow: hidden;
}
/* 为带有背景图的单元项添加特殊样式 */
.course-list-item[style*="background-image"] .arco-collapse-item-header {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.course-list-item[style*="background-image"] .arco-collapse-item-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
background-size: cover;
background-position: center;
opacity: 0.3;
z-index: -1;
}
.course-list-item .arco-timeline-item {
@@ -67,7 +92,15 @@
}
.course-list-item .arco-collapse-item-content-expanded {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(2px);
border-radius: 0 0 8px 8px;
}
/* 为带有背景图的单元项内容区域添加特殊样式 */
.course-list-item[style*="background-image"] .arco-collapse-item-content-expanded {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(4px);
}
.course-list-item .arco-collapse-item-content-box {

19
src/components/PublicCourseList/index.jsx
View File

@@ -3,6 +3,13 @@ import { Collapse, Timeline, Spin } from "@arco-design/web-react";
import { getPublicCourseLiveList } from "@/services/courseLive";
import "./index.css";
// 公共课单元海报数据
const unitPosters = {
"终生学习系统": "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/public_bg/recuW7gMz6sRee.jpg", // AI课 -> sRee
"企业高管公开课": "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/public_bg/recuW7gMz6CiPN.jpg", // 公共课 -> CiPN
"营销能力课": "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/public_bg/recuW7gMz6zwRv.jpg" // 营销课 -> zwRv
};
const TimelineItem = Timeline.Item;
const CollapseItem = Collapse.Item;
@@ -104,9 +111,17 @@ const PublicCourseList = ({ className = "", onCourseClick }) => {
>
<div
className={`time-line-item ${getCourseStatus(course)} ${selectedCourseId === course.courseId ? 'selected' : ''}`}
onClick={() => {
onClick={() => {
setSelectedCourseId(course.courseId);
onCourseClick && onCourseClick({ ...course, unitName: unit.unitName });
// 调试日志
console.log('点击课程单元:', unit.unitName);
console.log('匹配的海报URL:', unitPosters[unit.unitName]);
onCourseClick && onCourseClick({
...course,
unitName: unit.unitName,
unitPoster: unitPosters[unit.unitName] || unitPosters["终生学习系统"] || "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/public_bg/recuW7gMz6sRee.jpg"
});
}}
style={{ cursor: 'pointer' }}
>