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

fix: 添加缺失的ClassRank组件CSS文件

Browse Source 
- 解决克隆仓库后ClassRank组件报错的问题
- 添加src/components/ClassRank/index.css到版本控制
This commit is contained in:
KQL
2025-09-03 09:52:43 +08:00
parent e636748a3a
commit 8c342b10a0
1 changed files with 221 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;
}
}
}
}