开始
- 9/1 10:00
+ {formatDateTime(courseDate)} - 14:00
时长
@@ -63,16 +131,15 @@ export default ({ className = "", isLock = false }) => {
导师介绍
- 企业资深一线HR，专注于为求职者提供一对一的个性化指导。通过真实招聘视角，深入剖析个人优势与短板、传授面试技巧、规划职业定位与发展路径，帮助学生快速提升求职竞争力。求职策略以实用落地为核心，注重互动交流与角色定位，让学员在轻松氛围中获得直击痛点的求职策略。
+ {currentTeacher.introduction}
教师专长
- - 深谙用人逻辑
- - 擅长挖掘优势
- - 沟通真诚自然
- - 点评直击要害
+ {currentTeacher.specialties.map((specialty, index) => (
+ - {specialty}
+ ))}
diff --git a/src/components/EchartsProgress/index.jsx b/src/components/EchartsProgress/index.jsx
new file mode 100644
index 0000000..78a3306
--- /dev/null
+++ b/src/components/EchartsProgress/index.jsx
@@ -0,0 +1,109 @@
+import { useEffect, useRef } from "react";
+import * as echarts from "echarts";
+
+const EchartsProgress = ({
+ percent = 0,
+ strokeWidth = 20,
+ progressColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: "#0275F2" },
+ { offset: 1, color: "#389CFA" },
+ ]), // 进度条颜色，默认为渐变色
+ backgroundColor = "#FFF", // 背景颜色
+}) => {
+ const chartRef = useRef(null);
+ const chartInstance = useRef(null);
+
+ useEffect(() => {
+ // 初始化图表
+ if (chartRef.current && !chartInstance.current) {
+ chartInstance.current = echarts.init(chartRef.current);
+ }
+
+ // 配置图表选项 - 得分环
+ const option = {
+ series: [
+ {
+ type: "gauge",
+ startAngle: 90,
+ radius: "100%",
+ endAngle: -270,
+ pointer: {
+ show: false,
+ },
+ progress: {
+ show: true,
+ overlap: false,
+ roundCap: true,
+ clip: false,
+ itemStyle: {
+ borderWidth: 0,
+ color: progressColor, // 设置进度条颜色
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ width: strokeWidth,
+ color: [
+ [1, backgroundColor], // 背景颜色
+ ],
+ },
+ },
+ splitLine: {
+ show: false,
+ distance: 0,
+ length: 10,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ distance: 50,
+ },
+ data: [
+ {
+ value: percent,
+ detail: {
+ valueAnimation: true,
+ offsetCenter: ["0%", "0%"],
+ },
+ },
+ ],
+ detail: {
+ formatter: "{a|{value}%}\n{c| }\n{b|整体课程完成进度}",
+ rich: {
+ a: {
+ color: "#0077FF",
+ fontSize: 40,
+ align: "center",
+ },
+ c: { color: "transparent", lineHeight: 20 }, // 透明占位行
+ b: {
+ color: "#4E5969",
+ fontSize: 20,
+ align: "center",
+ },
+ },
+ },
+ },
+ ],
+ };
+
+ // 设置图表选项
+ chartInstance.current.setOption(option);
+
+ // 响应窗口大小变化
+ const resizeHandler = () => {
+ chartInstance.current.resize();
+ };
+
+ window.addEventListener("resize", resizeHandler);
+ return () => {
+ window.removeEventListener("resize", resizeHandler);
+ };
+ }, [backgroundColor, percent, progressColor, strokeWidth]);
+
+ return
;
+};
+
+export default EchartsProgress;
diff --git a/src/pages/Dashboard/components/CalendarTaskModule/index.css b/src/pages/Dashboard/components/CalendarTaskModule/index.css
index bb57347..66dd4b5 100644
--- a/src/pages/Dashboard/components/CalendarTaskModule/index.css
+++ b/src/pages/Dashboard/components/CalendarTaskModule/index.css
@@ -1,21 +1,28 @@
.module-calendar-task-wrapper {
- width: 360px;
- height: 508px;
- background-color: #fff;
+ width: 100%;
+ height: 393px;
border-radius: 16px;
- border: 1px solid #fff;
+ border-bottom: 1px solid #fff;
flex-shrink: 0;
box-sizing: border-box;
padding: 20px;
+ position: relative;
+ z-index: 1;
- .module-calendar-task-title {
- height: 30px;
- width: 100%;
- font-size: 20px;
- font-weight: 500;
- line-height: 30px;
- color: #262626;
- margin-bottom: 20px;
+ &::after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 160px;
+ height: 160px;
+ background-image: url("@/assets/images/Dashboard/CalendarTaskModule/calendar_task_bg.png");
+ background-size: 100% 100%;
+ z-index: -1;
+ }
+ .arco-calendar {
+ background-color: transparent;
}
.arco-calendar-header {
height: 50px;
@@ -46,10 +53,23 @@
align-items: center;
justify-content: center;
cursor: pointer;
-
&.is-today {
.date-number {
- background-color: rgb(0, 119, 255);
+ background-color: rgb(0, 119, 255) !important;
+ color: white;
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 500;
+ }
+ }
+
+ &.is-current-day {
+ .date-number {
+ background-color: rgba(10, 216, 239, 0.696);
color: white;
width: 28px;
height: 28px;
diff --git a/src/pages/Dashboard/components/CalendarTaskModule/index.jsx b/src/pages/Dashboard/components/CalendarTaskModule/index.jsx
index 4b047af..9e2e41d 100644
--- a/src/pages/Dashboard/components/CalendarTaskModule/index.jsx
+++ b/src/pages/Dashboard/components/CalendarTaskModule/index.jsx
@@ -1,31 +1,30 @@
+import dayjs from "dayjs";
+import { Calendar } from "@arco-design/web-react";
import "./index.css";
-import { Calendar, Skeleton } from "@arco-design/web-react";
-
-const CalendarTaskModule = ({ tasks = [], selectedDate, onDateChange, loading }) => {
- if (loading) {
- return (
-
- );
- }
+const CalendarTaskModule = ({ tasks = [], selectedDate, onDateChange }) => {
// 格式化今天的日期
const today = new Date();
- const formattedToday = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
-
+ const formattedToday = `${today.getFullYear()}-${String(
+ today.getMonth() + 1
+ ).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
+
// 获取有任务的日期集合
- const datesWithTasks = new Set(tasks?.map(task => task.date) || []);
-
+ const datesWithTasks = new Set(tasks?.map((task) => task.date) || []);
+
// 日历单元格渲染函数
const dateRender = (current) => {
- const dateStr = current.format('YYYY-MM-DD');
- const hasTasks = datesWithTasks.has(dateStr);
+ const dateStr = current.format("YYYY-MM-DD");
+ const hasTasks = datesWithTasks.has(dateStr); // 存在任务
+ const isCurrentDay = dateStr === dayjs(selectedDate).format("YYYY-MM-DD");
const isToday = dateStr === formattedToday;
-
+
return (
-
+
{current.date()}
{hasTasks &&
}
@@ -37,14 +36,14 @@ const CalendarTaskModule = ({ tasks = [], selectedDate, onDateChange, loading })
// Arco Calendar passes a dayjs object
if (date && date.format) {
// Convert dayjs to Date object
- const dateStr = date.format('YYYY-MM-DD');
- const dateObj = new Date(dateStr + 'T00:00:00');
+ const dateStr = date.format("YYYY-MM-DD");
+ const dateObj = new Date(dateStr + "T00:00:00");
if (!isNaN(dateObj.getTime())) {
onDateChange(dateObj);
}
} else if (dateString) {
// Fallback to dateString if available
- const dateObj = new Date(dateString + 'T00:00:00');
+ const dateObj = new Date(dateString + "T00:00:00");
if (!isNaN(dateObj.getTime())) {
onDateChange(dateObj);
}
@@ -54,12 +53,15 @@ const CalendarTaskModule = ({ tasks = [], selectedDate, onDateChange, loading })
return (
-
日历
{
const navigate = useNavigate();
@@ -12,41 +29,24 @@ const QuickAccess = () => {
};
return (
-
快捷入口
+
+
+ 快捷入口
+
- - handleClick("/expert-support")}
- >
-
- 专家支持中心
-
- - handleClick("/live")}
- >
-
- 课程直播间
-
- - handleClick("/career-tree")}
- >
-
- 就业管家知识树
-
+ {QuickAccessArray.map((item, index) => (
+ - handleClick(item.route)}
+ >
+
+
{item.name}
+
+ ))}
-
开始上课
+
+
+ 开始上课
+
- -
-
最近课程
-
- {courses?.recentCourses?.length > 0 ? (
- courses.recentCourses.slice(0, 3).map((course, index) => (
- -
- {formatCourseDate(course.date)}《{course.courseName}》
+
+
-
+
+
+ 下次上课
+ {courses?.nextCourse?.length || 0}
+
+
+ {courses?.nextCourse ? (
+ -
+ 《{courses.nextCourse.courseName}》
+ {courses.nextCourse.classroom && (
+
+ - {courses.nextCourse.classroom}
+
+ )}
- ))
- ) : (
- - 暂无最近课程记录
- )}
- {courses?.todaysCourses?.length > 0 && (
- courses.todaysCourses.slice(0, 2).map((course, index) => (
- -
- 今日计划《{course.courseName}》
-
- ))
- )}
-
-
-
-
-
下次上课
-
- {courses?.nextCourse ? (
- -
- 《{courses.nextCourse.courseName}》
- {courses.nextCourse.classroom && (
- - {courses.nextCourse.classroom}
- )}
-
- ) : (
- - 暂无安排课程
- )}
-
-
-
-
-
- 待办事项（{pendingTasks.length}）
-
-
- {pendingTasks.length > 0 ? (
- pendingTasks.map((task) => (
- -
- 《{task.courseName}》{task.title}
-
- ))
- ) : (
- - 暂无待办事项
- )}
-
-
+ ) : (
+
- 暂无安排课程
+ )}
+
+
+
-
+
+
+ 待办事项
+ {pendingTasks.length || 0}
+
+
+ {pendingTasks.length > 0 ? (
+ pendingTasks.map((task) => (
+ -
+ 《{task.courseName}》{task.title}
+
+ ))
+ ) : (
+ - 暂无待办事项
+ )}
+
+
+
+
-
+
+
+ 最近课程
+ {courses?.recentCourses?.length || 0}
+
+
+ {courses?.recentCourses?.length > 0 ? (
+ courses?.recentCourses?.map((course, index) => (
+ -
+ {formatCourseDate(course.date)}《{course.courseName}》
+
+ ))
+ ) : (
+ - 暂无最近课程记录
+ )}
+
+
+
-
学习情况
+
+
+ 学习情况
+
-
- 整体课程完成进度 ({progress || 0}%)
-
-
- 事项 - {formatDate(selectedDate)}
- {tasks.length > 0 && (
- ({tasks.length})
- )}
-
-
- {tasks.length === 0 ? (
-
-
-
- ) : (
-
- {tasks.map((item, index) => (
- -
-
-
- {item?.teacherAvatar ? (
- 
- ) : (
- item?.teacherName?.charAt(0) || "T"
- )}
-
-
- {item?.teacherName || "未知教师"}
-
-
-
-
-
- {getTaskTypeText(item.type)}：
-
- {item?.title}
-
-
- 课程名称：{item?.courseName}
-
- {item?.duration}
-
- {/*
- {item.status === 'PENDING' ? '待完成' :
- item.status === 'IN_PROGRESS' ? '进行中' :
- item.status === 'COMPLETED' ? '已完成' : '未知'}
- */}
-
-
-
- ))}
-
- )}
-
+
+
+ 当日事项
+
+ {tasks.length === 0 ? (
+
+
+
+ ) : (
+
+ {tasks.map((item, index) => (
+ -
+
+
+ {item?.teacherAvatar ? (
+
+ ) : (
+ item?.teacherName?.charAt(0) || "T"
+ )}
+
+
+ {item?.teacherName || "未知教师"}
+
+
+
+
+
+ {getTaskTypeText(item.type)}：
+
+ {item?.title}
+
+
+ 课程名称：{item?.courseName}
+
+ {item?.duration}
+
+ {/*
+ {item.status === 'PENDING' ? '待完成' :
+ item.status === 'IN_PROGRESS' ? '进行中' :
+ item.status === 'COMPLETED' ? '已完成' : '未知'}
+ */}
+
+
+
+ ))}
+
+ )}
+
-
);
diff --git a/src/pages/LivePage/index.jsx b/src/pages/LivePage/index.jsx
index 2eeeeda..75cbef4 100644
--- a/src/pages/LivePage/index.jsx
+++ b/src/pages/LivePage/index.jsx
@@ -1,15 +1,23 @@
+import { useState } from "react";
import CoursesVideoPlayer from "@/components/CoursesVideoPlayer";
import CourseList from "@/components/CourseList";
import StageProgress from "@/components/StageProgress";
+import { mockData } from "@/data/mockData";
import "./index.css";
const LivePage = () => {
+ const [selectedCourse, setSelectedCourse] = useState(null);
+
+ const handleCourseClick = (course) => {
+ setSelectedCourse(course);
+ };
+
return (
);
diff --git a/src/pages/PersonalProfile/components/AttendanceRingChart/index.jsx b/src/pages/PersonalProfile/components/AttendanceRingChart/index.jsx
index 8eed572..cc7c767 100644
--- a/src/pages/PersonalProfile/components/AttendanceRingChart/index.jsx
+++ b/src/pages/PersonalProfile/components/AttendanceRingChart/index.jsx
@@ -73,16 +73,16 @@ const AttendanceRingChart = ({
{centerContent && (
{
const studentInfo = useSelector((state) => state.student.studentInfo);
-
return (
@@ -47,29 +47,43 @@ const ProfileCard = () => {
-
-
+
学校
{studentInfo?.school || "-"}
-
-
+
专业
{studentInfo?.major || "-"}
-
-
- 班级
+
+
+ 就业管家课程
+
{studentInfo?.className || "-"}
-
-
- 学习阶段
+
+ 垂直方向
{studentInfo?.stageName || "-"}
diff --git a/src/pages/PersonalProfile/components/ScoreRingChart/index.jsx b/src/pages/PersonalProfile/components/ScoreRingChart/index.jsx
index 6bb212c..37abc6d 100644
--- a/src/pages/PersonalProfile/components/ScoreRingChart/index.jsx
+++ b/src/pages/PersonalProfile/components/ScoreRingChart/index.jsx
@@ -1,12 +1,10 @@
-import React, { useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
import * as echarts from "echarts";
-const screenWidth = window.screen.width; // 物理屏幕宽度（单位：像素）
const ScoreRingChart = ({
className = "",
ringData = [], // 数据
- title = "",
- bgColor = "#F7F8FA", // 未填充部分背景色
+ bgColor = "#EDF4FF", // 未填充部分背景色
}) => {
// 创建图表容器引用
const chartRef = useRef(null);
@@ -44,7 +42,7 @@ const ScoreRingChart = ({
},
axisLine: {
lineStyle: {
- width: 10,
+ width: 20,
color: [[1, bgColor]],
},
},
@@ -58,23 +56,13 @@ const ScoreRingChart = ({
show: false,
},
data: [ringData[0]],
- title: {
- fontSize: 14,
- },
- detail: {
- fontSize: 16,
- color: "#1D2129",
- formatter: title,
- lineHeight: 20,
- height: 40,
- offsetCenter: [0, 0],
- },
+ detail: false,
},
{
type: "gauge",
startAngle: 90,
endAngle: -270,
- radius: "80%",
+ radius: "70%",
pointer: {
show: false,
},
@@ -86,7 +74,7 @@ const ScoreRingChart = ({
},
axisLine: {
lineStyle: {
- width: 10,
+ width: 20,
color: [[1, bgColor]],
},
},
@@ -126,7 +114,7 @@ const ScoreRingChart = ({
chartInstance.current = null;
}
};
- }, [ringData, title, bgColor]);
+ }, [ringData, bgColor]);
return ;
};
diff --git a/src/pages/PersonalProfile/components/StudyStudes/index.css b/src/pages/PersonalProfile/components/StudyStudes/index.css
index d454ede..df3f099 100644
--- a/src/pages/PersonalProfile/components/StudyStudes/index.css
+++ b/src/pages/PersonalProfile/components/StudyStudes/index.css
@@ -1,14 +1,16 @@
.study-studes-card-wrapper {
width: 100%;
height: 100%;
- border-radius: 8px;
- background-color: #fff;
+ border-radius: 16px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
box-sizing: border-box;
padding: 20px;
+ position: relative;
+ z-index: 1;
+ overflow: hidden;
.study-studes-card-title {
height: 30px;
@@ -18,7 +20,16 @@
line-height: 30px;
color: #262626;
margin-bottom: 20px;
+ display: flex;
+ align-items: center;
+
+ .title-icon {
+ width: 24px;
+ height: 24px;
+ margin-right: 10px;
+ }
}
+
.study-studes-card-spin {
margin: auto;
}
@@ -27,164 +38,208 @@
width: 100%;
height: 100%;
display: flex;
- justify-content: flex-start;
+ justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
.study-studes-card-study-info {
+ width: 356px;
+ height: 310px;
flex-shrink: 0;
- width: 338px;
- height: 308px;
+ border-radius: 12px;
position: relative;
- background-image: url("@/assets/images/PersonalProfile/study_study_bg.png");
- background-size: 100% 100%;
+ background-color: rgba(255, 255, 255, 0.6);
+ border: 2px solid rgba(255, 255, 255, 0.8);
+ box-sizing: border-box;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: column;
.study-studes-card-time-wrapper {
- position: absolute;
- bottom: 20px;
- left: 50%;
- transform: translateX(-50%);
border-radius: 8px;
border: 1px solid #fff;
- width: 314px;
- height: 156px;
+ width: 324px;
+ height: 133px;
background-color: #fff;
- box-shadow: 2px 2px 16.4px 0px rgba(103, 162, 247, 0.25);
box-sizing: border-box;
- padding: 20px;
- .study-studes-card-study-time-wrapper {
+ padding: 20px 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ flex-direction: column;
+
+ .study-studes-card-study-info-title {
width: 100%;
- height: 60px;
- display: flex;
- justify-content: flex-start;
- align-items: flex-start;
- flex-direction: column;
+ height: 24px;
+ font-size: 16px;
+ font-weight: 400;
+ color: #1d2129;
+ position: relative;
+ box-sizing: border-box;
+ padding-left: 30px;
- .study-studes-card-study-info-title {
- font-size: 14px;
- font-weight: 600;
- color: #4e5969;
- margin-bottom: 10px;
+ &::before {
+ content: "";
+ width: 24px;
+ height: 24px;
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ background-image: url("@/assets/images/PersonalProfile/title_icon.png");
+ background-size: 100% 100%;
}
+ }
- .study-studes-card-study-time-line-class {
- > i {
- background: linear-gradient(
- to right,
- #4564ff,
- #ab2cff
- ) !important;
- }
- }
- .study-studes-card-study-time-line {
- width: 265px;
- height: 10px;
+ .study-studes-card-study-time-line {
+ width: 290px;
+ height: 12px;
+ border-radius: 12px;
+ background-color: #f4f7f9;
+ position: relative;
+ margin-bottom: 10px;
+ > i {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
border-radius: 12px;
- background-color: #cedefa;
- position: relative;
- > i {
+ > span {
position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- border-radius: 12px;
- background: linear-gradient(to right, #2c7aff, #00aeff);
-
- > span {
- position: absolute;
- display: block;
- right: 0;
- top: 30%;
- transform: translate(50%, 30%);
- font-style: normal;
- width: 38px;
- height: 21px;
- line-height: 22px;
- text-align: center;
- font-size: 12px;
- font-weight: 600;
- color: #2358ed;
- background-image: url("@/assets/images/PersonalProfile/line_icon.png");
- background-size: 100% 100%;
- }
+ display: block;
+ right: 0;
+ top: -25px;
+ transform: translateX(50%);
+ font-style: normal;
+ width: 46px;
+ height: 24px;
+ line-height: 20px;
+ text-align: center;
+ font-size: 14px;
+ font-weight: 700;
+ color: #fff;
+ background-size: 100% 100%;
}
+
+ .icon1 {
+ background-image: url("@/assets/images/PersonalProfile/line_icon1.png");
+ }
+ .icon2 {
+ background-image: url("@/assets/images/PersonalProfile/line_icon2.png");
+ }
+ }
+ .line1 {
+ background: linear-gradient(to right, #2c7dff, #2da7ff);
+ }
+ .line2 {
+ background: linear-gradient(to right, #37c850, #86e263);
}
}
}
}
.study-studes-card-study-progress {
+ height: 310px;
+ width: 356px;
+ box-sizing: border-box;
+ border-radius: 12px;
+ background-color: rgba(255, 255, 255, 0.6);
+ border: 2px solid rgba(255, 255, 255, 0.8);
display: flex;
- justify-content: flex-start;
+ justify-content: center;
align-items: center;
- flex-direction: column;
- height: 308px;
- width: 330px;
- border-radius: 8px;
- margin-left: 20px;
-
- .study-studes-card-study-progress-chart {
- width: 250px;
- height: 250px;
- margin-top: 50px;
- margin-bottom: 20px;
- }
-
- .study-studes-card-study-progress-title {
- color: #1d2129;
- font-size: 16px;
- font-weight: 600;
- margin-top: 20px;
- }
- }
- .study-studes-card-curriculum-homework {
- margin-left: 40px;
- margin-right: 40px;
+ margin-left: 15px;
+ margin-bottom: 20px;
}
+
.study-studes-card-curriculum {
- width: 194px;
- height: 350px;
+ width: 232px;
+ height: 390px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
- margin-top: 20px;
+ box-sizing: border-box;
+ border-radius: 12px;
+ background-color: rgba(255, 255, 255, 0.6);
+ border: 2px solid rgba(255, 255, 255, 0.8);
+ padding: 10px;
+
+ .study-studes-card-curriculum-title {
+ width: 100%;
+ height: 24px;
+ font-size: 16px;
+ font-weight: 400;
+ color: #1d2129;
+ position: relative;
+ box-sizing: border-box;
+ padding-left: 30px;
+ margin-bottom: 10px;
+
+ &::before {
+ content: "";
+ width: 24px;
+ height: 24px;
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ background-image: url("@/assets/images/PersonalProfile/title_icon.png");
+ background-size: 100% 100%;
+ }
+ }
.study-studes-card-curriculum-chart {
- width: 194px;
- height: 200px;
- margin-bottom: 30px;
+ width: 180px;
+ height: 180px;
+ margin-bottom: 10px;
}
.study-studes-card-curriculum-info:last-child {
margin-bottom: 0;
}
.study-studes-card-curriculum-info {
- width: 194px;
- height: 69px;
- border-radius: 8px;
- background-color: #f7f8fa;
+ width: 200px;
+ height: 73px;
+ border-radius: 12px;
+ background-color: #ffffff;
box-sizing: border-box;
padding: 10px;
- margin-bottom: 20px;
+ margin-bottom: 10px;
> p {
- font-size: 14px;
- font-weight: 400;
- color: #4e5969;
+ width: 100%;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ > i {
+ width: 12px;
+ height: 12px;
+ border-radius: 3px;
+ margin-right: 5px;
+ }
+ .my-i {
+ background-image: linear-gradient(0deg, #2c7aff, #2cb1ff);
+ }
+ .class-i {
+ background-image: linear-gradient(0deg, #25c343, #99e869);
+ }
+ .loss-i {
+ background-image: linear-gradient(0deg, #ff9a2d, #ffc02d);
+ }
+ > span {
+ font-size: 14px;
+ font-weight: 400;
+ color: #1d2129;
+ }
}
> span {
font-size: 20px;
- font-weight: 600;
- }
- .study-studes-card-curriculum-info-span1 {
- color: #0aa4ff;
- }
- .study-studes-card-curriculum-info-span2 {
- color: #5e57ff;
- }
- .study-studes-card-curriculum-info-span3 {
- color: #ff9d2c;
+ font-weight: 900;
+ font-family: "HarmonyOS Sans TC";
+ color: #1d2129;
}
}
}
diff --git a/src/pages/PersonalProfile/components/StudyStudes/index.jsx b/src/pages/PersonalProfile/components/StudyStudes/index.jsx
index f17565b..1aa9cb9 100644
--- a/src/pages/PersonalProfile/components/StudyStudes/index.jsx
+++ b/src/pages/PersonalProfile/components/StudyStudes/index.jsx
@@ -1,7 +1,8 @@
import * as echarts from "echarts";
import { useSelector } from "react-redux";
import { Spin } from "@arco-design/web-react";
-import StudyProgress from "../StudyProgress";
+import IconFont from "@/components/IconFont";
+import EchartsProgress from "@/components/EchartsProgress";
import ScoreRingChart from "../ScoreRingChart";
import AttendanceRingChart from "../AttendanceRingChart";
import "./index.css";
@@ -28,27 +29,27 @@ const StudyStudes = ({ studyStatistics, learningProgress, loading }) => {
const courseRingData = [
{
value: personalCourseProgress,
- name: "我的",
- title: {
- offsetCenter: ["-30%", "-90%"],
- },
+ // name: "我的",
+ // title: {
+ // offsetCenter: ["-30%", "-90%"],
+ // },
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{ offset: 0, color: "#2C7AFF" },
- { offset: 1, color: "#00AEFF" },
+ { offset: 1, color: "#2CB9FF" },
]),
},
},
{
value: classAverageCourseProgress,
- name: "班级",
- title: {
- offsetCenter: ["-60%", "-90%"],
- },
+ // name: "班级",
+ // title: {
+ // offsetCenter: ["-60%", "-90%"],
+ // },
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
- { offset: 0, color: "#4564FF" },
- { offset: 1, color: "#AB2CFF" },
+ { offset: 0, color: "#25C343" },
+ { offset: 1, color: "#A3EB6C" },
]),
},
},
@@ -57,27 +58,27 @@ const StudyStudes = ({ studyStatistics, learningProgress, loading }) => {
const homeworkRingData = [
{
value: personalHomeworkProgress,
- name: "我的",
- title: {
- offsetCenter: ["-30%", "-90%"],
- },
+ // name: "我的",
+ // title: {
+ // offsetCenter: ["-30%", "-90%"],
+ // },
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{ offset: 0, color: "#2C7AFF" },
- { offset: 1, color: "#00AEFF" },
+ { offset: 1, color: "#2CB9FF" },
]),
},
},
{
value: classAverageHomeworkProgress,
- name: "班级",
- title: {
- offsetCenter: ["-60%", "-90%"],
- },
+ // name: "班级",
+ // title: {
+ // offsetCenter: ["-60%", "-90%"],
+ // },
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
- { offset: 0, color: "#4564FF" },
- { offset: 1, color: "#AB2CFF" },
+ { offset: 0, color: "#25C343" },
+ { offset: 1, color: "#A3EB6C" },
]),
},
},
@@ -90,16 +91,28 @@ const StudyStudes = ({ studyStatistics, learningProgress, loading }) => {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{ offset: 0, color: "#2C7AFF" },
- { offset: 1, color: "#00D5FF" },
+ { offset: 1, color: "#2CB9FF" },
+ ]),
+ },
+ },
+ {
+ name: "缺勤率",
+ value: absenceRate,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+ { offset: 0, color: "#FF9A2D" },
+ { offset: 1, color: "#FFC02D" },
]),
},
},
- { name: "缺勤率", value: absenceRate, itemStyle: { color: "#FF9D2C" } },
];
return (
-
学习情况
+
+
+ 学习情况
+
{loading ? (
) : (
@@ -107,87 +120,90 @@ const StudyStudes = ({ studyStatistics, learningProgress, loading }) => {
{/* 时长 */}
-
-
-
- 个人学习时长（h）
-
-
-
- {personalStudyHours}
-
-
-
-
-
- 班级平均学习时长（h）
-
-
-
- {classAverageStudyHours}
-
-
-
+
+ 个人学习时长（h）
+
+
+
+ {personalStudyHours}
+
+
+
+
+ 班级平均学习时长（h）
+
+
+
+ {classAverageStudyHours}
+
+
{/* 进度 */}
-
-
-
- 整体课程完成进度
-
+
{/* 课程整体完成情况 */}
-
+
+ 整体课程完成情况
+
-
班级平均进度
-
- {classAverageCourseProgress}%
-
+
+
+ 我的进度
+
+
{personalCourseProgress}%
-
我的进度
-
- {personalCourseProgress}%
-
+
+
+ 班级平均进度
+
+
{classAverageCourseProgress}%
{/* 课后作业完成情况 */}
-
+
+ 课后作业完成情况
+
-
班级平均进度
-
- {classAverageHomeworkProgress}%
-
+
+
+ 我的进度
+
+
{personalHomeworkProgress}%
-
我的进度
-
- {personalHomeworkProgress}%
-
+
+
+ 班级平均进度
+
+
{classAverageHomeworkProgress}%
{/* 考勤情况 */}
-
+
考勤情况
{
/>
-
出勤率
-
- {attendanceRate}%
-
+
+
+ 出勤率
+
+
{attendanceRate}%
-
缺勤率
-
- {absenceRate}%
-
+
+
+ 缺勤率
+
+
{absenceRate}%
diff --git a/src/pages/PersonalProfile/index.css b/src/pages/PersonalProfile/index.css
index c8d91fa..d780243 100644
--- a/src/pages/PersonalProfile/index.css
+++ b/src/pages/PersonalProfile/index.css
@@ -19,23 +19,37 @@
margin-top: 20px;
.unified-profile-left {
- width: 360px;
+ width: 373px;
height: 100%;
+ margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.unified-profile-rank {
- height: 385px;
+ height: 420px;
margin-right: 0;
}
}
.unified-profile-right {
- width: 744px;
- height: 781px;
- border-radius: 8px;
- background-color: #fff;
+ flex: 1;
+ height: 100%;
+ border-radius: 16px;
+ background-color: #e8f6ff;
+ position: relative;
+ border: 2px solid #fff;
+
+ &::after {
+ content: "";
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 100%;
+ height: 100px;
+ background-image: url("@/assets/images/PersonalProfile/unified_profile_right_bg.png");
+ background-size: 100% 100%;
+ }
}
}
diff --git a/src/pages/PersonalProfile/index.jsx b/src/pages/PersonalProfile/index.jsx
index 0928da1..76a5e30 100644
--- a/src/pages/PersonalProfile/index.jsx
+++ b/src/pages/PersonalProfile/index.jsx
@@ -1,7 +1,7 @@
import { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import ProfileCard from "./components/ProfileCard";
-import Rank from "@/components/Rank";
+import ClassRank from "@/components/ClassRank";
import StageProgress from "@/components/StageProgress";
import StudyStudes from "./components/StudyStudes";
import { updateStudentInfo } from "@/store/slices/studentSlice";
@@ -26,13 +26,7 @@ const PersonalProfile = () => {
// 更新Redux中的学生信息
const studentInfo = {
...data.studentInfo,
- realName: data.studentInfo.name,
- studentNo: data.studentInfo.studentId,
- mbtiType: data.studentInfo.mbti || 'ENFJ',
- myRank: {
- ...data.ranking.myRank,
- score: data.studentInfo.credits,
- },
+ myRank: data.ranking.myRank,
classInfo: data.ranking.classInfo,
};
@@ -58,7 +52,7 @@ const PersonalProfile = () => {
+ ) : ( + student.studentName?.charAt(0) || "?" + )} +
+ ) : (
+ 
-