init

src/pages/PersonalProfile/components/StudyStudes/index.jsx

@@ -0,0 +1,148 @@
+import * as echarts from "echarts";
+import StudyProgress from "../StudyProgress";
+import ScoreRingChart from "../ScoreRingChart";
+import AttendanceRingChart from "../AttendanceRingChart";
+import "./index.css";
+
+const ringData = [
+  {
+    value: 80,
+    name: "我的",
+    title: {
+      offsetCenter: ["-30%", "-90%"],
+    },
+    itemStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+        { offset: 0, color: "#2C7AFF" },
+        { offset: 1, color: "#00AEFF" },
+      ]),
+    },
+  }, // 外环
+  {
+    value: 60,
+    name: "班级",
+    title: {
+      offsetCenter: ["-60%", "-90%"],
+    },
+    itemStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+        { offset: 0, color: "#4564FF" },
+        { offset: 1, color: "#AB2CFF" },
+      ]),
+    },
+  }, // 中环
+];
+
+const attendanceData = [
+  {
+    name: "出勤率",
+    value: 22,
+    itemStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+        { offset: 0, color: "#2C7AFF" },
+        { offset: 1, color: "#00D5FF" },
+      ]),
+    },
+  },
+  { name: "缺勤率", value: 8, itemStyle: { color: "#FF9D2C" } },
+  // 可添加更多状态（如迟到、早退、缺勤等）
+];
+
+const StudyStudes = () => {
+  return (
+    <div className="study-studes-card-wrapper">
+      <p className="study-studes-card-title">学习情况</p>
+      <ul className="study-studes-card-list">
+        {/* 时长 */}
+        <li className="study-studes-card-study-info">
+          <div className="study-studes-card-time-wrapper">
+            <div className="study-studes-card-study-time-wrapper">
+              <p className="study-studes-card-study-info-title">
+                个人学习时长（h）
+              </p>
+              <p className="study-studes-card-study-time-line">
+                <i style={{ width: "70%" }}>
+                  <span>145</span>
+                </i>
+              </p>
+            </div>
+            <div className="study-studes-card-study-time-wrapper">
+              <p className="study-studes-card-study-info-title">
+                班级平均学习时长（h）
+              </p>
+              <p className="study-studes-card-study-time-line study-studes-card-study-time-line-class">
+                <i style={{ width: "80%" }}>
+                  <span>145</span>
+                </i>
+              </p>
+            </div>
+          </div>
+        </li>
+        {/* 进度 */}
+        <li className="study-studes-card-study-progress">
+          <StudyProgress
+            value={75}
+            className="study-studes-card-study-progress-chart"
+          />
+          <p className="study-studes-card-study-progress-title">
+            整体课程完成进度
+          </p>
+        </li>
+        {/* 课程整体完成情况 */}
+        <li className="study-studes-card-curriculum">
+          <ScoreRingChart
+            title={`整体课程\n完成情况`}
+            ringData={ringData}
+            className="study-studes-card-curriculum-chart"
+          />
+          <div className="study-studes-card-curriculum-info">
+            <p>班级平均进度</p>
+            <span className="study-studes-card-curriculum-info-span1">60%</span>
+          </div>
+          <div className="study-studes-card-curriculum-info">
+            <p>我的进度</p>
+            <span className="study-studes-card-curriculum-info-span2">60%</span>
+          </div>
+        </li>
+        {/* 课后作业完成情况 */}
+        <li className="study-studes-card-curriculum-homework study-studes-card-curriculum">
+          <ScoreRingChart
+            title={`课后作业\n完成情况`}
+            ringData={ringData}
+            className="study-studes-card-curriculum-chart"
+          />
+          <div className="study-studes-card-curriculum-info">
+            <p>班级平均进度</p>
+            <span className="study-studes-card-curriculum-info-span1">60%</span>
+          </div>
+          <div className="study-studes-card-curriculum-info">
+            <p>我的进度</p>
+            <span className="study-studes-card-curriculum-info-span2">60%</span>
+          </div>
+        </li>
+        {/* 考勤情况 */}
+        <li className="study-studes-card-curriculum">
+          <AttendanceRingChart
+            data={attendanceData}
+            centerContent={
+              <div className="study-studes-card-curriculum-chart-center-content">
+                考勤情况
+              </div>
+            }
+          />
+
+          <div className="study-studes-card-curriculum-info">
+            <p>出勤率</p>
+            <span className="study-studes-card-curriculum-info-span1">60%</span>
+          </div>
+          <div className="study-studes-card-curriculum-info">
+            <p>缺勤率</p>
+            <span className="study-studes-card-curriculum-info-span3">60%</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default StudyStudes;