fix: 修复面试评价页面UI和功能优化
- 重新设计面试评价三板块(专业能力、现场表现力、综合评价)的布局 - 移除专业能力和现场表现力图标的彩色背景框 - 删除综合评价板块的图标 - 修复评价内容字符串解析错误 - 优化三个评价板块的视觉样式和内容提取逻辑 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
KQL
@@ -2,7 +2,7 @@ import { Avatar, Tooltip } from "@arco-design/web-react";
|
||||
import Locked from "@/components/Locked";
|
||||
import "./index.css";
|
||||
|
||||
export default ({ className = "", isLock = false, selectedCourse, teacherData, unitPosters, isPublicCourse = false }) => {
|
||||
export default ({ className = "", isLock = false, selectedCourse, teacherData, unitPosters, isPublicCourse = false, backgroundImage }) => {
|
||||
const handleClickBtn = (item) => {
|
||||
console.log(item);
|
||||
};
|
||||
@@ -84,8 +84,8 @@ export default ({ className = "", isLock = false, selectedCourse, teacherData, u
|
||||
{isLock ? (
|
||||
<Locked
|
||||
className="video-lock-wrapper"
|
||||
text="该板块将于「垂直能力提升」阶段启动后开放届时，请留意教务系统通知，您可在该板块进行线上
|
||||
1V1 求职策略定制"
|
||||
text="DEMO演示，非学员本人与导师无查看权限"
|
||||
backgroundImage={backgroundImage}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@@ -101,19 +101,27 @@
|
||||
.live-summary-item-content-item {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
min-height: 32px;
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 8px;
|
||||
padding: 0 10px;
|
||||
line-height: 46px;
|
||||
font-size: 14px;
|
||||
padding: 8px 10px;
|
||||
line-height: 1.5;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #1d2129;
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #e8f3ff;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,31 +10,29 @@ const LiveSummary = ({ className = "", showBtn = false, isLiving = true }) => {
|
||||
navigate("/job-strategy-detail");
|
||||
};
|
||||
|
||||
// 将时间字符串转换为秒数用于排序
|
||||
const timeToSeconds = (timeStr) => {
|
||||
const parts = timeStr.split(':').map(Number);
|
||||
if (parts.length === 3) {
|
||||
return parts[0] * 3600 + parts[1] * 60 + parts[2];
|
||||
} else if (parts.length === 2) {
|
||||
return parts[0] * 60 + parts[1];
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
// 按时间排序keyPoints（从早到晚）
|
||||
const sortedPoints = [...jobStrategyNotes.keyPoints].sort((a, b) => {
|
||||
const timeA = a.time.split(':').map(Number);
|
||||
const timeB = b.time.split(':').map(Number);
|
||||
return (timeA[0] * 60 + timeA[1]) - (timeB[0] * 60 + timeB[1]);
|
||||
return timeToSeconds(a.time) - timeToSeconds(b.time);
|
||||
});
|
||||
|
||||
// 根据type分组排序后的keyPoints
|
||||
const groupedPoints = sortedPoints.reduce((acc, point) => {
|
||||
const typeMap = {
|
||||
strategy: "策略建议",
|
||||
advice: "专家建议",
|
||||
technique: "核心技巧",
|
||||
timeline: "时间规划",
|
||||
qa: "答疑解惑"
|
||||
};
|
||||
|
||||
const groupName = typeMap[point.type] || point.type;
|
||||
|
||||
if (!acc[groupName]) {
|
||||
acc[groupName] = [];
|
||||
}
|
||||
acc[groupName].push(point);
|
||||
return acc;
|
||||
}, {});
|
||||
// 根据纪要文档的分组结构
|
||||
const groupedPoints = {
|
||||
"策略建议": sortedPoints.filter(p => [1, 2, 3].includes(p.id)),
|
||||
"求职核心技巧": sortedPoints.filter(p => [4, 5, 6].includes(p.id)),
|
||||
"面试流程拆解": sortedPoints.filter(p => [7, 8, 9, 10, 11].includes(p.id)),
|
||||
"个性化策略": sortedPoints.filter(p => [12, 13, 14, 15, 16].includes(p.id))
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${className} live-summary-wrapper`}>
|
||||
@@ -42,13 +40,15 @@ const LiveSummary = ({ className = "", showBtn = false, isLiving = true }) => {
|
||||
{jobStrategyNotes.title}
|
||||
</p>
|
||||
<ul className="live-summary-list">
|
||||
{Object.entries(groupedPoints).slice(0, 3).map(([groupName, points]) => (
|
||||
{Object.entries(groupedPoints).map(([groupName, points]) => (
|
||||
<li className="live-summary-item" key={groupName}>
|
||||
<p className="live-summary-item-title">{groupName}</p>
|
||||
<ul className="live-summary-item-content-list">
|
||||
{points.slice(0, 3).map((point) => (
|
||||
{points.map((point) => (
|
||||
<li className="live-summary-item-content-item" key={point.id}>
|
||||
<span style={{fontWeight: "600"}}>{point.time}</span> - {point.title}
|
||||
<span style={{fontWeight: "600", color: "#2c7aff"}}>{point.time}</span>
|
||||
<span style={{margin: "0 8px", color: "#86909c"}}>→</span>
|
||||
<span>{point.title}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-image: url("https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuVOrz2GnJdK.png");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
@@ -20,15 +20,19 @@
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
bottom: -60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 433px;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,31 @@
|
||||
import "./index.css";
|
||||
|
||||
export default ({ text = "", className = "" }) => {
|
||||
export default ({ text = "", className = "", backgroundImage }) => {
|
||||
return (
|
||||
<div className={`lock-wrapper ${className}`}>
|
||||
<div className="lock">{text ? <span>{text}</span> : null}</div>
|
||||
<div
|
||||
className={`lock-wrapper ${className}`}
|
||||
style={backgroundImage ? {
|
||||
backgroundImage: `url(${backgroundImage})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
position: 'relative'
|
||||
} : {}}
|
||||
>
|
||||
{backgroundImage && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backdropFilter: 'blur(20px)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)'
|
||||
}} />
|
||||
)}
|
||||
<div className="lock" style={backgroundImage ? { position: 'relative', zIndex: 1 } : {}}>
|
||||
{text ? <span>{text}</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user