83 lines
3.3 KiB
JavaScript
83 lines
3.3 KiB
JavaScript
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;
|