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

import { Avatar } from "@arco-design/web-react";
import { useSelector } from "react-redux";
import "./index.css";

const ProfileCard = () => {
  const studentInfo = useSelector((state) => state.student.studentInfo);

  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">
            {studentInfo?.realName || "-"}
          </span>
          <p className="profile-card-user-name-student-id">
            学号： {studentInfo?.studentNo || "-"}
          </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">
            {studentInfo?.myRank?.score || "-"}
          </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">
            {studentInfo?.myRank?.rank || "-"}
          </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">
            {studentInfo?.mbtiType || "-"}
          </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">
            {studentInfo?.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">
            {studentInfo?.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">
            {studentInfo?.className || "-"}
          </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">
            {studentInfo?.stageName || "-"}
          </span>
        </li>
      </ul>
    </div>
  );
};

export default ProfileCard;