日常开发

src/api/module/ranking.ts

@@ -15,5 +15,13 @@ export default {
       method: 'get',
       data: data
     });
+  },
+
+  sunshineRunRanking: (data: any) => {
+    return req({
+      url: '/v2/sunlight/rankdata/list',
+      method: 'get',
+      data: data
+    });
   }
 };

src/views/sunshineRun/index.vue

@@ -47,9 +47,11 @@
             <ul>
               <li v-for="(item, index) in reportList" :key="index">
                 <div class="left">
-                  <div class="pai" :class="{ 'pai1': item.rank == 1, 'pai2': item.rank == 2, 'pai3': item.rank == 3 }">
-                    {{ item.rank }}</div>
-                  <div class="pic"><img :src="item.face_pic || item.logo_url || item.student_icon_url" /></div>
+                  <div class="pai"
+                    :class="{ 'pai1': item.rankid == 1, 'pai2': item.rankid == 2, 'pai3': item.rankid == 3 }">
+                    <div>{{ item.rankid }}</div>
+                  </div>
+                  <div class="pic"><img :src="item.icon" /></div>
                   <div class="txt">
                     <div>
                       <div class="name">{{ item.student_name }}</div>
@@ -58,7 +60,7 @@
                   </div>
                 </div>
                 <div class="right">
-                  <div class="score">{{ item.result }}
+                  <div class="score">{{ item.run_distance }}
                   </div>
                   <div class="unit">{{ unit }}</div>
                 </div>
@@ -190,9 +192,9 @@ const getStudentList = () => {
     page: studentPage.value.current,
     per_page: studentPage.value.size,
   };
-  proxy?.$http.ranking.studentRanking(params).then((res: any) => {
+  proxy?.$http.ranking.sunshineRunRanking(params).then((res: any) => {
     if (res.status == 200) {
-      let list: any = res.data;
+      let list: any = res.sunlight_rank_data;
       reportList.value = list;
       getPages(res.total);
     }
@@ -411,8 +413,8 @@ onBeforeUnmount(() => {
 
         .testList {
           width: 100%;
-          height: calc(100vh - 1vw - 5vh - 10vh);
-          border-radius: 12px;
+          height: calc(100vh - 1vw - 10vh - 5vh);
+          border-radius: 2vh;
           overflow-x: hidden;
           overflow-y: scroll;
           background: linear-gradient(170deg, #276066 -13%, #09111B 87%);
@@ -443,16 +445,16 @@ onBeforeUnmount(() => {
           ul {
             display: flex;
             flex-wrap: wrap;
-            padding: 2vh 1vh 0px 1vh;
-            
+            padding: 1.6vh 0.8vh 0px 0.8vh;
+
             li {
               position: relative;
-              width: calc((100% / 7) - 2vh);
-              height: calc(((100vh - 1vw - 5vh - 10vh - 2vh) / 5) - 2vh);
-              margin: 0px 1vh 2vh 1vh;
+              width: calc((100% / 7) - 1.6vh);
+              height: calc(((100vh - 1vw - 10vh - 5vh - 1.6vh) / 5) - 1.6vh);
+              margin: 0px 0.8vh 1.6vh 0.8vh;
               box-sizing: border-box;
-              border: 2px solid #ffffff;
-              border-radius: 2vh;
+              border: 1px solid #ffffff;
+              border-radius: 1.6vh;
               overflow: hidden;
               display: flex;
               align-items: center;
@@ -517,7 +519,7 @@ onBeforeUnmount(() => {
 
         .reportList {
           width: 100%;
-          border-radius: 12px;
+          border-radius: 2vh;
           overflow: hidden;
           background: radial-gradient(90% 90% at 50% 100%, #38869E 0%, #38869E 50%, #17323D 100%);
           box-sizing: border-box;
@@ -534,7 +536,7 @@ onBeforeUnmount(() => {
             li {
               height: calc(100% / 8);
               border-bottom: 1px solid #48677E;
-              padding: 0px 10%;
+              padding: 0px 5%;
               display: flex;
               justify-content: space-between;
               align-items: center;
@@ -551,13 +553,24 @@ onBeforeUnmount(() => {
                 width: 70%;
 
                 .pai {
-                  width: 40px;
-                  height: 30px;
+                  width: 2.5vw;
+                  height: 2vw;
+                  line-height: 1;
                   text-align: center;
                   color: #F9F9F9;
                   font-size: 1.2vw;
                   font-family: 'Saira-ExtraBold';
-                  margin-right: 10px;
+                  margin-right: 5%;
+                  flex-shrink: 0;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                }
+
+                .pai1,
+                .pai2,
+                .pai3 {
+                  align-items: end;
                 }
 
                 .pai1 {
@@ -585,7 +598,7 @@ onBeforeUnmount(() => {
                   overflow: hidden;
                   box-sizing: border-box;
                   border: 1px solid rgba(255, 255, 255, 0.5);
-                  margin-right: 13px;
+                  margin-right: 5%;
                   flex-shrink: 0;
 
                   img {
@@ -615,14 +628,14 @@ onBeforeUnmount(() => {
 
                 .score {
                   color: #ffffff;
-                  font-size: 1vw;
+                  font-size: 1.2vw;
                   font-style: italic;
                   display: inline-block;
                 }
 
                 .unit {
                   color: #ffffff;
-                  font-size: 0.7vw;
+                  font-size: 0.8vw;
                   margin-left: 2px;
                   font-family: 'Saira-ExtraBold';
                   display: inline-block;