完整的教务系统前端项目 - 包含所有修复和9月份数据

src/pages/Dashboard/components/StudyStatus/index.css

@@ -0,0 +1,88 @@
+.module-study-status-wrapper {
+  width: 373px;
+  height: 420px;
+  border-radius: 16px;
+  border: 1px solid #fff;
+  overflow: hidden;
+  flex-shrink: 0;
+  background-size: 150% 120%;
+  background-position: 50% 30%;
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: #e8f6ff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+
+  &::after {
+    content: "";
+    width: 180px;
+    height: 110px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-image: url("@/assets/images/Dashboard/StudyStatus/study-status_bg.png");
+    background-size: 100% 100%;
+  }
+
+  .module-study-status-title {
+    height: 30px;
+    width: 100%;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 30px;
+    color: #262626;
+    margin-bottom: 20px;
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    .title-icon {
+      width: 24px;
+      height: 24px;
+      margin-right: 10px;
+    }
+  }
+
+  .module-study-status-progress {
+    width: 214px;
+    height: 214px;
+    margin: 30px;
+    background-color: antiquewhite;
+  }
+
+  .progress-chart {
+    width: 214px;
+    height: 214px;
+  }
+  .progress-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    .progress-text {
+      text-align: center;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      margin-top: 20px;
+      color: #616065;
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: -20px;
+        transform: translateY(-50%);
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        border: 3px solid #0275f2;
+      }
+    }
+  }
+}

src/pages/Dashboard/components/StudyStatus/index.jsx

@@ -0,0 +1,19 @@
+import EchartsProgress from "@/components/EchartsProgress";
+import IconFont from "@/components/IconFont";
+import "./index.css";
+
+const StudyStatus = ({ progress = 0 }) => {
+  return (
+    <div className="module-study-status-wrapper">
+      <p className="module-study-status-title">
+        <IconFont className="title-icon" src="recuUY5mDawm4e" />
+        <span>学习情况</span>
+      </p>
+      <div className="progress-container">
+        <EchartsProgress percent={progress || 0} strokeWidth={20} />
+      </div>
+    </div>
+  );
+};
+
+export default StudyStatus;