init

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

@@ -0,0 +1,82 @@
+import { Avatar } from "@arco-design/web-react";
+import { mockData } from "@/data/mockData";
+import "./index.css";
+
+const ProfileCard = () => {
+  const { profile } = mockData;
+
+  return (
+    <div className="profile-card-wrapper">
+      <div className="profile-card-user-info">
+        <Avatar className="profile-card-user-avatar">
+          <img
+            alt="avatar"
+            src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
+          />
+        </Avatar>
+        <div className="profile-card-user-name">
+          <span className="profile-card-user-name-text">{profile.name}</span>
+          <p className="profile-card-user-name-student-id">
+            学号： {profile.studentId}
+          </p>
+        </div>
+      </div>
+      <ul className="profile-card-achievement-info">
+        <li className="profile-card-achievement-info-item">
+          <span className="profile-card-achievement-info-item-title">学分</span>
+          <span className="profile-card-achievement-info-item-text">
+            {profile?.badges?.credits}
+          </span>
+        </li>
+        <li className="profile-card-achievement-info-item">
+          <span className="profile-card-achievement-info-item-title">
+            班级排名
+          </span>
+          <span className="profile-card-achievement-info-item-text">
+            {profile?.badges?.classRank}
+          </span>
+        </li>
+        <li className="profile-card-achievement-info-item">
+          <span className="profile-card-achievement-info-item-title">MBTI</span>
+          <span className="profile-card-achievement-info-item-text">
+            {profile?.badges?.mbti}
+          </span>
+        </li>
+      </ul>
+      <ul className="profile-card-class-info">
+        <li className="profile-card-class-info-item">
+          <i className="profile-card-class-info-item-icon icon-school" />
+          <span className="profile-card-class-info-item-title">学校</span>
+          <span className="profile-card-class-info-item-text">
+            {profile?.school}
+          </span>
+        </li>
+        <li className="profile-card-class-info-item">
+          <i className="profile-card-class-info-item-icon icon-major" />
+          <span className="profile-card-class-info-item-title">专业</span>
+          <span className="profile-card-class-info-item-text">
+            {profile?.major}
+          </span>
+        </li>
+        <li className="profile-card-class-info-item">
+          <i className="profile-card-class-info-item-icon icon-location" />
+          <span className="profile-card-class-info-item-title">
+            就业管家课程
+          </span>
+          <span className="profile-card-class-info-item-text">
+            {profile?.course}
+          </span>
+        </li>
+        <li className="profile-card-class-info-item">
+          <i className="profile-card-class-info-item-icon icon-course" />
+          <span className="profile-card-class-info-item-title">垂直方向</span>
+          <span className="profile-card-class-info-item-text">
+            {profile?.course}
+          </span>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default ProfileCard;