Duguay/teach_sys_Demo
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
前端人绝不为奴
2025-08-15 16:16:41 +08:00
commit 182abccc60
171 changed files with 26833 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/pages/PersonalProfile/components/ProfileCard/index.css Normal file
View File

@@ -0,0 +1,153 @@
.profile-card-wrapper {
width: 100%;
height: 374px;
border-radius: 8px;
background-image: url("@/assets/images/PersonalProfile/personal_profile_bg.png");
background-size: 100% 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
box-sizing: border-box;
padding: 16px;
.profile-card-user-info {
width: 100%;
height: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 10px;
.profile-card-user-avatar {
width: 60px;
height: 60px;
margin-right: 10px;
}
.profile-card-user-name {
width: 200px;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
.profile-card-user-name-text {
font-size: 20px;
font-weight: 600;
color: #1d2129;
margin-bottom: 5px;
position: relative;
&::after {
content: "";
position: absolute;
right: -25px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-image: url("@/assets/images/PersonalProfile/male_icon.png");
background-size: 100% 100%;
}
}
.profile-card-user-name-student-id {
font-size: 12px;
font-weight: 400;
color: #4e5969;
}
}
}
.profile-card-achievement-info {
width: 328px;
height: 47px;
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 10px;
.profile-card-achievement-info-item {
width: 80px;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
.profile-card-achievement-info-item-title {
font-size: 14px;
font-weight: 400;
color: #4e5969;
}
.profile-card-achievement-info-item-text {
font-size: 16px;
font-weight: 600;
color: #1d2129;
}
}
}
.profile-card-class-info {
width: 328px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
box-sizing: border-box;
padding: 10px;
border-radius: 8px;
border: 1px solid #ffffff;
background-color: rgba(255, 255, 255, 0.8);
/* 投影（box-shadow） */
box-shadow: 2px 2px 16.4px 0 rgba(103, 162, 247, 0.25);
.profile-card-class-info-item:last-child {
margin-bottom: 0;
}
.profile-card-class-info-item {
width: 100%;
height: 32px;
position: relative;
display: flex;
align-items: center;
margin-bottom: 10px;
.profile-card-class-info-item-icon {
position: absolute;
left: 0;
width: 32px;
height: 32px;
background-size: 100% 100%;
}
.icon-school {
background-image: url("@/assets/images/PersonalProfile/school_icon.png");
}
.icon-major {
background-image: url("@/assets/images/PersonalProfile/major_icon.png");
}
.icon-location {
background-image: url("@/assets/images/PersonalProfile/location_icon.png");
}
.icon-course {
background-image: url("@/assets/images/PersonalProfile/course_icon.png");
}
.profile-card-class-info-item-title {
font-size: 14px;
font-weight: 400;
color: #4e5969;
position: absolute;
left: 40px;
}
.profile-card-class-info-item-text {
font-size: 16px;
font-weight: 400;
color: #1d2129;
position: absolute;
right: 0px;
}
}
}
}

82
src/pages/PersonalProfile/components/ProfileCard/index.jsx Normal file
View File

@@ -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;