From 9a14678a12186e277f36543953aa71ae79c4f44b Mon Sep 17 00:00:00 2001 From: KQL Date: Mon, 8 Sep 2025 09:32:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=85=AC=E5=85=B1?= =?UTF-8?q?=E8=AF=BE=E5=8D=95=E5=85=83=E8=83=8C=E6=99=AF=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=92=8C=E9=A1=B9=E7=9B=AE=E5=BA=93=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 为公共课直播间添加单元背景图片切换功能 - 支持终生学习系统、企业高管公开课、营销能力课的背景图片 - 点击不同单元课程时左侧直播间背景自动切换 - 添加我的项目库功能，展示25个完成项目 - 项目库采用灰色禁用样式，hover显示权限提示 - 优化李奇导师头像显示效果和容器背景色匹配 - 修复展会课程跳转链接 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/components/CoursesVideoPlayer/index.css | 15 +-- src/components/CoursesVideoPlayer/index.jsx | 11 +- src/components/PublicCourseList/index.css | 37 +++++- src/components/PublicCourseList/index.jsx | 19 ++- src/pages/ProjectLibraryPage/index.css | 32 ++++- src/pages/ProjectLibraryPage/index.jsx | 123 +++++++++++++++++++- 6 files changed, 221 insertions(+), 16 deletions(-) diff --git a/src/components/CoursesVideoPlayer/index.css b/src/components/CoursesVideoPlayer/index.css index b7122fa..ab3d649 100644 --- a/src/components/CoursesVideoPlayer/index.css +++ b/src/components/CoursesVideoPlayer/index.css @@ -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; } } diff --git a/src/components/CoursesVideoPlayer/index.jsx b/src/components/CoursesVideoPlayer/index.jsx index 23fbaa6..8ed03cd 100644 --- a/src/components/CoursesVideoPlayer/index.jsx +++ b/src/components/CoursesVideoPlayer/index.jsx @@ -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 /* 选中课程时显示模糊的海报图和锁定状态 */
{ + 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%', diff --git a/src/components/PublicCourseList/index.css b/src/components/PublicCourseList/index.css index e939a47..4bccd63 100644 --- a/src/components/PublicCourseList/index.css +++ b/src/components/PublicCourseList/index.css @@ -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 { diff --git a/src/components/PublicCourseList/index.jsx b/src/components/PublicCourseList/index.jsx index 0dc066c..eb44650 100644 --- a/src/components/PublicCourseList/index.jsx +++ b/src/components/PublicCourseList/index.jsx @@ -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 }) => { >
{ +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' }} > diff --git a/src/pages/ProjectLibraryPage/index.css b/src/pages/ProjectLibraryPage/index.css index 53f0033..fbf81b0 100644 --- a/src/pages/ProjectLibraryPage/index.css +++ b/src/pages/ProjectLibraryPage/index.css @@ -158,7 +158,7 @@ } } - .my-project-library { +.my-project-library { margin-top: 20px; .project-library-empty { @@ -173,5 +173,35 @@ font-size: 14px; } } + + .my-project-item { + background-color: #f7f8fa !important; + border-color: #e5e6eb !important; + cursor: default !important; + + &:hover { + border-color: #e5e6eb !important; + box-shadow: none !important; + transform: none !important; + background-color: #f7f8fa !important; + } + + .project-library-item-title { + color: #86909c !important; + border-color: #c9cdd4 !important; + background-color: #f7f8fa !important; + } + + > div { + > p { + color: #86909c !important; + } + + .disabled-detail { + color: #c9cdd4 !important; + cursor: default !important; + } + } + } } } diff --git a/src/pages/ProjectLibraryPage/index.jsx b/src/pages/ProjectLibraryPage/index.jsx index c2e1c4d..4e4704f 100644 --- a/src/pages/ProjectLibraryPage/index.jsx +++ b/src/pages/ProjectLibraryPage/index.jsx @@ -1,14 +1,114 @@ import { useState } from "react"; +import { Tooltip } from "@arco-design/web-react"; import toast from "@/components/Toast"; import InfiniteScroll from "@/components/InfiniteScroll"; import ProjectCasesModal from "./components/ProjectCasesModal"; import { getProjectsList, getProjectsdetail } from "@/services/projectLibrary"; +// 我的项目库数据 +const myProjectsData = [ + { + unitName: "商业活动策略设计与创意策划", + projects: [ + "校园特色摆摊创意策划与出摊运营项目", + "社区水果店节日促销创意方案设计与落地执行项目" + ] + }, + { + unitName: "商业活动全程策划执行与运营优化", + projects: [ + "社区便利店促销活动策划落地项目", + "校园二手物品交易活动策划执行与运营项目" + ] + }, + { + unitName: "商业空间与文创产品设计", + projects: [ + "街边小型咖啡馆主题空间布置与配套文创周边设计项目", + "社区书店文创体验区空间规划项目" + ] + }, + { + unitName: "短视频与自媒体运营", + projects: [ + "本地某餐厅生活服务新媒体账号运营项目", + "某猫咖宠物日常类短视频账号运营实操项目" + ] + }, + { + unitName: "漫展与二次元活动策划与执行", + projects: [ + "南京 Comic Festival 周边展区活动统筹项目", + "盐城 ICGC 动漫嘉年华品牌互动区运营项目" + ] + }, + { + unitName: "户外音乐节主题策划与流程统筹", + projects: [ + "青春旋律校园户外音乐节活动策划与实施项目", + "环湖露天音乐节活动策划与组织项目" + ] + }, + { + unitName: "城市 IP 赛事活动整合与策划", + projects: [ + "2025 城市电竞对抗赛整体策划与落地项目", + "城市龙舟赛活动统筹与文化主题策划项目", + "成都跑酷&街舞跨界赛事活动策划与组织项目" + ] + }, + { + unitName: "消费电子展品牌策划与执行", + projects: [ + "智能穿戴设备消费电子展展区策划与执行项目", + "智能生活类消费电子展策划项目" + ] + }, + { + unitName: "品牌招商展全案策划与招商运营", + projects: [ + "苏州文旅文创产业品牌招商展策划与落地运营项目", + "南京青年创客品牌招商展策划项目" + ] + }, + { + unitName: "商业街区打卡空间视觉呈现", + projects: [ + "南京老门东历史街区创意打卡点策划项目", + "苏州观前街沉浸式商业打卡体验空间设计项目", + "无锡拈花湾文旅商业街区夜景灯光打卡点策划项目" + ] + }, + { + unitName: "文旅衍生文创产品设计", + projects: [ + "南京云锦纹样衍生丝巾与服饰配件设计项目", + "苏州园林拙政园窗棂纹样衍生文创书签与文具设计项目" + ] + } +]; import "./index.css"; const PAGE_SIZE = 10; const ProjectLibrary = () => { + // 处理我的项目数据 + const processMyProjects = () => { + const projects = []; + myProjectsData.forEach(unit => { + unit.projects.forEach(projectName => { + projects.push({ + id: `my-${projects.length + 1}`, + unitName: unit.unitName, + name: projectName, + isMyProject: true + }); + }); + }); + return projects; + }; + + const myProjects = processMyProjects(); const [modalData, setModalData] = useState(undefined); const [projectList, setProjectList] = useState([]); const [projectCasesModalVisible, setProjectCasesModalVisible] = @@ -19,6 +119,11 @@ const ProjectLibrary = () => { const handleProjectClick = async (item) => { + // 如果是我的项目，不允许点击 + if (item?.isMyProject) { + return; + } + if (item?.id) { const res = await getProjectsdetail(item.id); if (res.success) { @@ -84,8 +189,22 @@ const ProjectLibrary = () => { {/* 我的项目库板块 */}

我完成的项目库

-
-

暂无项目

+
+ {myProjects.map((item) => ( + +
  • +

    {item.unitName}

    +
    +

    {item.name}

    + 详情 > +
    +
    • +     + ))}