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

Initial commit: 完整的教务系统前端项目

Browse Source
This commit is contained in:
KQL
2025-09-03 13:15:19 +08:00
commit 5da7626ad4
271 changed files with 107012 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
src/components/ClassRank/index.css Normal file
View File

@@ -0,0 +1,221 @@
.module-class-rank {
width: 373px;
height: 100%;
background-color: #fff7f1;
border-radius: 16px;
border: 1px solid #fff;
flex-shrink: 0;
box-sizing: border-box;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
overflow: hidden;
&::after {
content: "";
width: 180px;
height: 110px;
position: absolute;
right: 0;
top: 0;
background-image: url("@/assets/images/Rank/bg.png");
background-size: 100% 100%;
}
.module-class-rank-title {
height: 30px;
width: 100%;
font-size: 20px;
font-weight: 500;
line-height: 30px;
color: #262626;
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
.title-icon {
width: 24px;
height: 24px;
margin-right: 10px;
}
}
.module-class-rank-spin,
.empty-data {
margin: auto;
}
.module-class-rank-podium {
width: 333px;
height: 138px;
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
> li {
width: 88px;
border-radius: 8px;
position: relative;
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0)
);
.module-class-rank-podium-avatar {
position: absolute;
left: 50%;
top: -24px;
transform: translateX(-50%);
width: 48px;
height: 48px;
border: 1px solid;
position: relative;
&::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
width: 57px;
height: 16px;
background-size: 100% 100%;
}
}
.module-class-rank-podium-name {
color: #1d2129;
font-size: 14px;
position: absolute;
left: 50%;
top: 30px;
transform: translateX(-50%);
z-index: 10;
}
> i {
height: 27px;
background-size: 100% 100%;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
}
.module-class-rank-podium-item1 {
height: 98px;
&::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -40px;
width: 20px;
height: 20px;
background-image: url("@/assets/images/Rank/first_icon.png");
background-size: 100% 100%;
}
.module-class-rank-podium-avatar {
border-color: #ffc15b;
&::before {
background-image: url("@/assets/images/Rank/icon1.png");
}
}
}
.module-class-rank-podium-item2 {
height: 80px;
&::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -40px;
width: 20px;
height: 20px;
background-image: url("@/assets/images/Rank/second_icon.png");
background-size: 100% 100%;
}
.module-class-rank-podium-avatar {
border-color: #9ab9e3;
&::before {
background-image: url("@/assets/images/Rank/icon2.png");
}
}
}
.module-class-rank-podium-item3 {
height: 70px;
&::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -40px;
width: 20px;
height: 20px;
background-image: url("@/assets/images/Rank/third_icon.png");
background-size: 100% 100%;
}
.module-class-rank-podium-avatar {
border-color: #d7a770;
&::before {
background-image: url("@/assets/images/Rank/icon3.png");
}
}
}
}
.module-class-rank-list {
width: 333px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
.module-class-rank-list-item {
width: 100%;
height: 56px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-shrink: 0;
background-color: #fff;
border-radius: 8px;
box-sizing: border-box;
padding: 0 10px;
position: relative;
> em {
margin-left: 5px;
color: #86909c;
font-size: 20px;
font-family: "HarmonyOS_Sans_TC_Bold";
}
> p {
font-size: 14px;
height: 22px;
font-weight: 400;
line-height: 22px;
color: #1d2129;
margin-left: 16px;
text-align: left;
}
> span {
font-size: 14px;
font-weight: 400;
color: #86909c;
position: absolute;
right: 20px;
}
}
}
}

81
src/components/ClassRank/index.jsx Normal file
View File

@@ -0,0 +1,81 @@
import { Avatar, Spin, Empty } from "@arco-design/web-react";
import IconFont from "@/components/IconFont";
import "./index.css";
const positions = ["item2", "item1", "item3"];
const icons = ["icon2", "icon1", "icon3"];
const Rank = ({ className, data, loading }) => {
const rankings = data?.rankings?.slice(0, 6) || [];
// 安全处理领奖台学生，确保至少有3个位置
const podiumStudents = [
rankings[1] || null, // 第2名
rankings[0] || null, // 第1名
rankings[2] || null, // 第3名
];
const listStudents = rankings.slice(3);
return (
<div className={`module-class-rank ${className}`}>
<p className="module-class-rank-title">
<IconFont className="title-icon" src="recuUY5nNf7DWT" />
<span>班级排名</span>
</p>
{loading ? (
<Spin size={40} className="module-class-rank-spin" />
) : !data || !data?.rankings || data?.rankings?.length === 0 ? (
<Empty description="暂无排名数据" className="empty-data" />
) : (
<>
<ul className="module-class-rank-podium">
{podiumStudents.map((student, index) => {
return student ? (
<li
key={student.studentId}
className={`module-class-rank-podium-${positions[index]}`}
>
<Avatar className="module-class-rank-podium-avatar">
{student.avatar ? (
<img alt="avatar" src={student.avatar} />
) : (
student.studentName?.charAt(0) || "?"
)}
</Avatar>
<span className="module-class-rank-podium-name">
{student.studentName || "未知"}
</span>
<i className={`module-class-rank-podium-${icons[index]}`}></i>
</li>
) : (
<li
key={`empty-${index}`}
className={`module-class-rank-podium-${positions[index]} empty`}
>
<div className="module-class-rank-podium-placeholder">
<span>-</span>
</div>
</li>
);
})}
</ul>
<ul className="module-class-rank-list">
{listStudents.map((student, index) => (
<li
key={student.studentId}
className="module-class-rank-list-item"
>
<em className="module-class-rank-num">{index + 4}</em>
<p>{student.studentName || "未知"}</p>
<span>{student.score}分</span>
</li>
))}
</ul>
</>
)}
</div>
);
};
export default Rank;