From 8c342b10a0f50dbfb72b8160ac9f2f3e7986d146 Mon Sep 17 00:00:00 2001
From: KQL <apple@appledeMac-Pro.local>
Date: Wed, 3 Sep 2025 09:52:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0=E7=BC=BA=E5=A4=B1?=
 =?UTF-8?q?=E7=9A=84ClassRank=E7=BB=84=E4=BB=B6CSS=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 解决克隆仓库后ClassRank组件报错的问题
- 添加src/components/ClassRank/index.css到版本控制
---
 src/components/ClassRank/index.css | 221 +++++++++++++++++++++++++++++
 1 file changed, 221 insertions(+)
 create mode 100644 src/components/ClassRank/index.css

diff --git a/src/components/ClassRank/index.css b/src/components/ClassRank/index.css
new file mode 100644
index 0000000..a54f21f
--- /dev/null
+++ b/src/components/ClassRank/index.css
@@ -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;
+      }
+    }
+  }
+}