83 lines
3.1 KiB
React
83 lines
3.1 KiB
React
|
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;
|