diff --git a/src/components/PublicCourseList/index.css b/src/components/PublicCourseList/index.css
index 73eda9e..17a3aa6 100644
--- a/src/components/PublicCourseList/index.css
+++ b/src/components/PublicCourseList/index.css
@@ -1,167 +1,307 @@
-.public-course-list {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: #fff;
+.course-list-wrapper {
+  width: 304px;
+  height: 798px;
   border-radius: 8px;
-  overflow: hidden;
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 20px 16px;
+  overflow-y: hidden;
 }
 
-.course-list-header {
-  padding: 16px 20px;
-  border-bottom: 1px solid #e5e6eb;
-  background: #fafafa;
-}
-
-.course-list-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 500;
+.course-list-wrapper .course-list-title {
+  width: 100%;
+  height: 30px;
+  position: relative;
+  box-sizing: border-box;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 20px;
   color: #1d2129;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e5e6eb;
+  margin-bottom: 10px;
 }
 
-.course-list-collapse {
-  flex: 1;
+.course-list-wrapper .course-list-title::before {
+  content: "";
+  position: absolute;
+  left: 20px;
+  bottom: 5px;
+  width: 31px;
+  height: 3px;
+  background-image: url("@/assets/images/Common/title_icon.png");
+  background-size: 100% 100%;
+}
+
+.course-list-wrapper .course-list-content {
+  width: 100%;
+  height: 700px;
   overflow-y: auto;
-  padding: 12px;
 }
 
-.course-list-collapse .arco-collapse-item {
-  margin-bottom: 8px;
-  border: 1px solid #e5e6eb;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.course-list-collapse .arco-collapse-item-header {
-  background: #f7f8fa;
-  padding: 12px 16px;
-}
-
-.unit-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.course-list-wrapper .course-list-content .course-list {
   width: 100%;
 }
 
-.unit-name {
+/* 自定义折叠面板元素 */
+.course-list-wrapper .course-list-content .course-list .course-list-item {
+  width: 272px;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+  padding: 3px 0;
+  color: #4e5969;
   font-size: 14px;
-  font-weight: 500;
-  color: #1d2129;
+  font-weight: 400;
+  line-height: 21px;
+  border: none;
 }
 
-.unit-course-count {
-  font-size: 12px;
-  color: #86909c;
-  margin-right: 20px;
+.course-list-item .arco-collapse-item-header {
+  border-radius: 8px;
+  background-color: #f2f3f5;
 }
 
-.course-timeline {
-  padding: 16px 0;
+.course-list-item .arco-timeline-item {
+  margin-bottom: 10px;
+  padding-left: 0;
 }
 
-.timeline-dot {
-  width: 8px;
-  height: 8px;
+.course-list-item .arco-collapse-item-content-expanded {
+  background-color: #fff;
+}
+
+.course-list-item .arco-collapse-item-content-box {
+  margin-top: 10px;
+  padding: 0 0 0 5px;
+  box-sizing: border-box;
+}
+
+/* 自定义时间轴元素 - 统一使用CSS样式 */
+.course-list-item .time-line-dot-icon {
+  width: 12px;
+  height: 12px;
+  background-color: #10b981;
   border-radius: 50%;
-  background: #e5e6eb;
+  position: relative;
 }
 
-.timeline-dot.completed {
-  background: #00b42a;
+.course-list-item .time-line-dot-icon::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 6px;
+  height: 6px;
+  background-color: #fff;
+  border-radius: 50%;
 }
 
-.timeline-dot.current {
-  background: #ff7d00;
-  box-shadow: 0 0 0 4px rgba(255, 125, 0, 0.2);
+.course-list-item .time-line-clock-icon {
+  width: 12px;
+  height: 12px;
+  background-color: #3b82f6;
+  border-radius: 50%;
+  position: relative;
 }
 
-.timeline-dot.upcoming {
-  background: #165dff;
+.course-list-item .time-line-clock-icon::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 6px;
+  height: 6px;
+  background-color: #fff;
+  border-radius: 50%;
 }
 
-.course-item {
-  padding: 12px;
-  background: #f7f8fa;
-  border-radius: 4px;
+.course-list-item .time-line-lock-icon {
+  width: 12px;
+  height: 12px;
+  background-color: #c9cdd4;
+  border-radius: 50%;
+  position: relative;
+  opacity: 0.6;
+}
+
+.course-list-item .time-line-lock-icon::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 6px;
+  height: 6px;
+  background-color: #fff;
+  border-radius: 50%;
+}
+
+.course-list-item .time-line-item {
+  width: 248px;
+  min-height: 74px !important;
+  height: auto !important;
+  background-color: #f2f3f5;
+  border-radius: 8px;
+  position: relative;
+  box-sizing: border-box;
+  padding: 10px;
   cursor: pointer;
   transition: all 0.3s;
+}
+
+.course-list-item .time-line-item:hover {
+  background-color: #e8f3ff;
+  transform: translateX(2px);
+}
+
+.course-list-item .time-line-item > p {
+  width: calc(100% - 70px) !important;
+  min-height: 22px !important;
+  height: auto !important;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  color: #1d2129;
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+  white-space: normal !important;
+  overflow-wrap: break-word !important;
+  display: block !important;
+  text-overflow: unset !important;
+  overflow: visible !important;
+  max-width: none !important;
+  -webkit-line-clamp: unset !important;
+  -webkit-box-orient: unset !important;
+  text-rendering: auto !important;
+}
+
+.course-list-item .time-line-item > .time-line-item-info {
+  margin-top: 10px;
+  width: 100%;
+  min-height: 20px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #4e5969;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 5px;
 }
 
-.course-item:hover {
-  background: #e8f3ff;
-  transform: translateX(4px);
-}
-
-.course-item.selected {
-  background: #e8f3ff;
-  border-left: 3px solid #165dff;
-}
-
-.course-item.completed {
-  opacity: 0.7;
-}
-
-.course-info {
-  flex: 1;
-}
-
-.course-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #1d2129;
-  margin-bottom: 4px;
-}
-
-.course-meta {
-  display: flex;
-  gap: 16px;
+.course-list-item .finish::before {
+  content: "已结束";
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 48px;
+  height: 20px;
+  line-height: 18px;
+  text-align: center;
+  border-radius: 12px;
+  background-color: #c9cdd4;
+  color: #86909c;
   font-size: 12px;
+  font-weight: 600;
+  box-sizing: border-box;
+  border: 1px solid #c9cdd4;
+}
+
+.course-list-item .not-started::before {
+  content: "未开始";
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 48px;
+  height: 20px;
+  line-height: 18px;
+  text-align: center;
+  border-radius: 12px;
+  background-color: #e8e8e8;
+  color: #86909c;
+  font-size: 12px;
+  font-weight: 600;
+  box-sizing: border-box;
+  border: 1px solid #e8e8e8;
+}
+
+.course-list-item .active {
+  border: 1px solid #0275f2;
+}
+
+.course-list-item .active::before {
+  content: "";
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 60px;
+  height: 20px;
+  background-image: url("@/assets/images/CoursesVideoPlayer/living_icon.png");
+  background-size: 100% 100%;
+}
+
+.course-list-item .selected {
+  background-color: #f2f8ff;
+  border: 1px solid #4080ff !important;
+  box-shadow: 0 2px 8px rgba(64, 128, 255, 0.15);
+}
+
+.course-list-item .selected p {
+  color: #1d2129;
+  font-weight: 500;
+}
+
+.course-list-item .pending {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.course-list-item .pending > p {
   color: #86909c;
 }
 
-.course-status {
-  padding: 2px 8px;
+.course-list-item .pending .time-line-item-info {
+  color: #86909c;
+}
+
+.course-list-item .coming::before {
+  content: "即将开始";
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 60px;
+  height: 20px;
+  line-height: 18px;
+  text-align: center;
   border-radius: 12px;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.course-status.completed {
-  background: #e8ffea;
-  color: #00b42a;
-}
-
-.course-status.current {
-  background: #fff7e8;
+  background-color: #f2f3f5;
   color: #ff7d00;
+  font-size: 12px;
+  font-weight: 600;
+  box-sizing: border-box;
+  border: 1px solid #ff7d00;
 }
 
-.course-status.upcoming {
-  background: #e8f3ff;
-  color: #165dff;
+/* 强制覆盖Arco Timeline文本省略 */
+.course-list .arco-timeline-item-content p {
+  text-overflow: unset !important;
+  overflow: visible !important;
+  white-space: normal !important;
+  display: block !important;
+  -webkit-line-clamp: unset !important;
+  -webkit-box-orient: unset !important;
+  word-break: break-word !important;
+  max-width: calc(100% - 70px) !important;
 }
 
-/* 自定义滚动条 */
-.course-list-collapse::-webkit-scrollbar {
-  width: 6px;
-}
-
-.course-list-collapse::-webkit-scrollbar-track {
-  background: #f2f3f5;
-  border-radius: 3px;
-}
-
-.course-list-collapse::-webkit-scrollbar-thumb {
-  background: #c9cdd4;
-  border-radius: 3px;
-}
-
-.course-list-collapse::-webkit-scrollbar-thumb:hover {
-  background: #86909c;
+.course-list .time-line-item p {
+  text-overflow: unset !important;
+  overflow: visible !important;
+  white-space: normal !important;
+  display: block !important;
+  -webkit-line-clamp: unset !important;
+  -webkit-box-orient: unset !important;
 }
\ No newline at end of file
diff --git a/src/components/PublicCourseList/index.jsx b/src/components/PublicCourseList/index.jsx
index bd91c58..aabd3e2 100644
--- a/src/components/PublicCourseList/index.jsx
+++ b/src/components/PublicCourseList/index.jsx
@@ -67,80 +67,98 @@ const PublicCourseList = ({ className = "", onCourseClick }) => {
     }
   };
 
-  const handleCourseClick = (course, unitName) => {
-    setSelectedCourseId(course.courseId);
-    if (onCourseClick) {
-      onCourseClick({
-        ...course,
-        unitName: unitName
-      });
+  const getCourseStatus = (course) => {
+    if (course.completed) return "finish";
+    if (course.current) return "active";
+    
+    // 判断未来课程的具体状态
+    if (course.upcoming) {
+      const courseDate = new Date(course.date);
+      const today = new Date();
+      
+      // 重置时间部分只比较日期
+      courseDate.setHours(0, 0, 0, 0);
+      today.setHours(0, 0, 0, 0);
+      
+      const timeDiff = courseDate - today;
+      const daysDiff = Math.floor(timeDiff / (24 * 60 * 60 * 1000));
+      
+      // 未来7天内的课程显示为"即将开始"
+      if (daysDiff > 0 && daysDiff <= 7) {
+        return "coming";
+      }
+      // 7天后的课程显示为"未开始"
+      return "not-started";
     }
+    
+    // 默认状态
+    return "pending";
   };
 
-  const renderCourseStatus = (course) => {
-    if (course.completed) {
-      return <span className="course-status completed">已完成</span>;
-    } else if (course.current) {
-      return <span className="course-status current">正在进行</span>;
-    } else if (course.upcoming) {
-      return <span className="course-status upcoming">即将开始</span>;
-    }
-    return null;
+  // 获取图标类型
+  const getDotIcon = (course) => {
+    if (course.completed) return <div className="time-line-dot-icon" />;
+    if (course.current) return <div className="time-line-clock-icon" />;
+    return <div className="time-line-lock-icon" />;
   };
 
+  if (loading) {
+    return (
+      <div className={`${className} course-list-wrapper`}>
+        <p className="course-list-title">公共课程列表</p>
+        <div className="course-list-content">
+          <Spin />
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div className={`public-course-list ${className}`}>
-      <div className="course-list-header">
-        <h3>公共课程列表</h3>
-      </div>
-      
-      <Spin loading={loading} style={{ width: '100%' }}>
-        <Collapse 
-          defaultActiveKey={courseLiveList.map(unit => unit.unitId)}
-          className="course-list-collapse"
+    <div className={`${className} course-list-wrapper`}>
+      <p className="course-list-title">公共课程列表</p>
+      <div className="course-list-content">
+        <Collapse
+          lazyload
+          className="course-list"
+          bordered={false}
+          expandIconPosition="right"
+          defaultActiveKey={["1", "2", "3"]}
         >
-          {courseLiveList.map((unit) => (
+          {courseLiveList.map((unit, index) => (
             <CollapseItem
               key={unit.unitId}
-              header={
-                <div className="unit-header">
-                  <span className="unit-name">{unit.unitName}</span>
-                  <span className="unit-course-count">
-                    {unit.courses.filter(c => c.completed).length}/{unit.courses.length} 已完成
-                  </span>
-                </div>
-              }
-              name={unit.unitId}
+              header={unit.unitName}
+              name={String(index + 1)}
+              className="course-list-item"
             >
-              <Timeline className="course-timeline">
+              <Timeline>
                 {unit.courses.map((course) => (
                   <TimelineItem
                     key={course.courseId}
-                    dot={
-                      <div
-                        className={`timeline-dot ${
-                          course.completed ? 'completed' : 
-                          course.current ? 'current' : 
-                          course.upcoming ? 'upcoming' : ''
-                        }`}
-                      />
-                    }
-                    label={course.date}
+                    dot={getDotIcon(course)}
+                    lineType="dashed"
                   >
-                    <div
-                      className={`course-item ${
-                        selectedCourseId === course.courseId ? 'selected' : ''
-                      } ${course.completed ? 'completed' : ''}`}
-                      onClick={() => handleCourseClick(course, unit.unitName)}
+                    <div 
+                      className={`time-line-item ${getCourseStatus(course)} ${selectedCourseId === course.courseId ? 'selected' : ''}`}
+                      onClick={() => {
+                        setSelectedCourseId(course.courseId);
+                        onCourseClick && onCourseClick({ ...course, unitName: unit.unitName });
+                      }}
+                      style={{ cursor: 'pointer' }}
                     >
-                      <div className="course-info">
-                        <div className="course-name">{course.courseName}</div>
-                        <div className="course-meta">
-                          <span className="course-teacher">讲师：{course.teacherName}</span>
-                          {course.time && <span className="course-time">时间：{course.time}</span>}
-                        </div>
+                      <p style={{ 
+                        overflow: 'visible',
+                        textOverflow: 'unset',
+                        whiteSpace: 'normal',
+                        wordBreak: 'break-word'
+                      }}>
+                        {course.courseName}
+                      </p>
+                      <div className="time-line-item-info">
+                        <span>讲师：{course.teacherName}</span>
+                        {course.date && <span>{course.date}</span>}
+                        {course.time && <span>{course.time}</span>}
                       </div>
-                      {renderCourseStatus(course)}
                     </div>
                   </TimelineItem>
                 ))}
@@ -148,7 +166,7 @@ const PublicCourseList = ({ className = "", onCourseClick }) => {
             </CollapseItem>
           ))}
         </Collapse>
-      </Spin>
+      </div>
     </div>
   );
 };