样式修改

src/views/sunshineRun/index.vue

@@ -47,7 +47,8 @@
             <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="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="txt">
                     <div>
@@ -313,7 +314,7 @@ onBeforeUnmount(() => {
     padding: 0px 1vw;
 
     .sunshineRun-top-center {
-      height: 100px;
+      height: 10vh;
       position: relative;
       display: flex;
       justify-content: center;
@@ -321,10 +322,10 @@ onBeforeUnmount(() => {
       .logo {
         position: absolute;
         left: 0;
-        top: 25px;
+        top: 2vh;
 
         img {
-          height: 28px;
+          height: 5vh;
         }
       }
 
@@ -332,32 +333,32 @@ onBeforeUnmount(() => {
         display: inline-block;
 
         img {
-          height: 140px;
+          height: 15vh;
         }
       }
 
       .toolList {
         position: absolute;
         right: 0;
-        top: 25px;
+        top: 2vh;
         color: #EFEFEF;
-        font-size: 18px;
+        font-size: 2.5vh;
         display: flex;
         align-items: center;
         text-shadow: 1px 1px 1px #a3a3a3;
 
         .li {
-          margin-left: 25px;
+          margin-left: 2vw;
         }
 
         .btn {
-          width: 18px;
-          height: 18px;
+          width: 3vh;
+          height: 3vh;
           display: block;
-          cursor: pointer;
           background-position: center;
           background-repeat: no-repeat;
           background-size: 100% auto;
+          cursor: pointer;
         }
 
         .closeBtn {
@@ -384,14 +385,14 @@ onBeforeUnmount(() => {
       display: flex;
 
       .title {
-        height: 35px;
-        line-height: 35px;
-        font-size: 22px;
+        height: 5vh;
+        line-height: 5vh;
+        font-size: 3vh;
         color: #1A293A;
-        padding: 0px 25px;
+        padding: 0px 2vw;
         letter-spacing: 3px;
-        border-top-left-radius: 12px;
-        border-top-right-radius: 12px;
+        border-top-left-radius: 2vh;
+        border-top-right-radius: 2vh;
         background: radial-gradient(374% 336% at 36% 50%, #FFFFFF 0%, #07FFE7 100%);
         box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
       }