init

src/pages/PersonalProfile/components/ProfileCard/index.css

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