15db293d5b
主要更新： 1. 修复岗位等级数据： - 重新分类49个岗位到正确等级（普通岗29个、技术骨干岗12个、储备干部岗8个） - 更新项目库中所有项目的适用岗位，按照新的岗位等级映射关系重新配置 - 岗位卡片按等级排序：普通岗 → 技术骨干岗 → 储备干部岗 2. 优化任务列表(当日事项)样式： - 复用参考项目的任务列表样式，添加虚线时间轴设计 - 添加导师头像显示和个性化定位 - 在头像左侧添加状态圆点，根据任务完成状态显示不同颜色 - 修复时间显示格式，统一显示开始时间 - 设置1V1规划课时长为2小时 3. 优化日历组件： - 区分当前月份和其他月份日期的颜色显示 - 修复月份切换时高亮显示错误的问题 4. 优化课程列表样式： - 移除教师专长的hover效果 - 统一课程名称字体粗细，优化选中状态样式 5. 优化项目库适用岗位显示： - 修复第三张岗位卡片显示不全的问题 - 超过3个岗位时自动换行显示 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
381 lines
9.8 KiB
CSS
381 lines
9.8 KiB
CSS
.course-list-wrapper {
|
|
width: 304px;
|
|
height: 798px;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
padding: 20px 16px;
|
|
overflow-y: hidden;
|
|
|
|
.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;
|
|
|
|
&::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-content {
|
|
width: 100%;
|
|
height: 700px;
|
|
overflow-y: auto;
|
|
|
|
.course-list {
|
|
width: 100%;
|
|
|
|
/* 分割线样式 */
|
|
.course-divider {
|
|
width: 100%;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 20px 0;
|
|
position: relative;
|
|
|
|
.divider-line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, #e5e6eb 20%, #e5e6eb 80%, transparent);
|
|
border-style: dashed;
|
|
border-width: 1px 0 0 0;
|
|
border-color: #e5e6eb;
|
|
}
|
|
|
|
.divider-text {
|
|
padding: 0 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #86909c;
|
|
background-color: #fff;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
/* 自定义折叠面板元素 */
|
|
.course-list-item {
|
|
width: 272px;
|
|
margin-bottom: 10px;
|
|
box-sizing: border-box;
|
|
padding: 3px 0;
|
|
color: #4e5969;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 21px;
|
|
border: none;
|
|
|
|
&.has-preview-unit {
|
|
.arco-collapse-item-header {
|
|
background: linear-gradient(135deg, #f0f7ff 0%, #e8f3ff 100%);
|
|
border: 1px solid #b3d4ff;
|
|
box-shadow: 0 2px 8px rgba(64, 128, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
.arco-collapse-item-header {
|
|
border-radius: 8px;
|
|
background-color: #f2f3f5;
|
|
}
|
|
.arco-timeline-item {
|
|
margin-bottom: 10px;
|
|
padding-left: 0;
|
|
}
|
|
.arco-collapse-item-content-expanded {
|
|
background-color: #fff;
|
|
}
|
|
.arco-collapse-item-content-box {
|
|
margin-top: 10px;
|
|
padding: 0 0 0 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 自定义时间轴元素 - 统一使用CSS样式 */
|
|
.time-line-dot-icon {
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: #10b981;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.time-line-clock-icon {
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: #3b82f6;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.time-line-lock-icon {
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: #c9cdd4;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
opacity: 0.6;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.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;
|
|
|
|
> 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;
|
|
}
|
|
|
|
> .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: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
border: 1px solid #0275f2;
|
|
|
|
&::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%;
|
|
}
|
|
}
|
|
|
|
.selected {
|
|
background: linear-gradient(135deg, #e8f4ff 0%, #d4ecff 100%);
|
|
outline: 2px solid #165dff;
|
|
box-shadow: 0 4px 12px rgba(22, 93, 255, 0.25);
|
|
transform: none;
|
|
transition: all 0.3s ease;
|
|
|
|
p {
|
|
color: #165dff;
|
|
font-weight: 600; /* 与默认保持一致 */
|
|
}
|
|
|
|
.time-line-item-info {
|
|
color: #4080ff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.pending {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
|
|
> p {
|
|
color: #86909c;
|
|
}
|
|
|
|
.time-line-item-info {
|
|
color: #86909c;
|
|
}
|
|
}
|
|
|
|
.coming {
|
|
&::before {
|
|
content: "即将开始";
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
width: 60px;
|
|
height: 20px;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
border-radius: 12px;
|
|
background-color: #f2f3f5;
|
|
color: #ff7d00;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
box-sizing: border-box;
|
|
border: 1px solid #ff7d00;
|
|
}
|
|
}
|
|
|
|
.preview-badge {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 60%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 4px 12px;
|
|
background: #4080ff;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
border-radius: 12px;
|
|
z-index: 10;
|
|
box-shadow: 0 3px 8px rgba(64, 128, 255, 0.3);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
box-shadow: 0 3px 8px rgba(255, 107, 107, 0.3);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.5);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 3px 8px rgba(255, 107, 107, 0.3);
|
|
}
|
|
}
|
|
|
|
.has-preview {
|
|
/* 可试看标签已调整到中心位置，不需要额外样式 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 强制覆盖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 .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;
|
|
} |