阳光跑开发

src/views/sunshineRun/index.vue

@@ -6,7 +6,7 @@
           <img v-if="userInfo?.logo_url" :src="userInfo.logo_url" />
           <img v-else src="@/assets/images/common/logo.png" />
         </div>
-        <div class="sunshineRun-title"><img src="@/assets/images/common/logo.png" /></div>
+        <div class="sunshineRun-title"><img src="@/assets/images/sunshineRun/title.png" /></div>
         <div class="toolList">
           <div class="li">{{ date }}</div>
           <div class="li btn screen" :class="{ 'on': screen, 'off': !screen }" @click="getFullScreen"></div>
@@ -26,7 +26,8 @@
                 :leave-active-class="proxy?.animate.sunshineRun.leave">
                 <li v-for="(item, index) in testList" :key="item.student_id">
                   <img v-if="item.student_id && (item.face_pic || item.logo_url)"
-                    :src="item.face_pic || item.logo_url" /><img class="noPic" v-else src="@/assets/images/common/noImg.png" />
+                    :src="item.face_pic || item.logo_url" /><img class="noPic" v-else
+                    src="@/assets/images/common/noImg.png" />
                   <div class="con">
                     <div class="name">{{ item.student_name }}</div>
                     <div class="score">
@@ -216,7 +217,7 @@ onBeforeUnmount(() => {
 .sunshineRun {
   width: 100%;
   height: 100%;
-  padding: 1.5vw 0 1vw 0;
+  padding: 0 0 1vw 0;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -227,7 +228,7 @@ onBeforeUnmount(() => {
     padding: 0px 1vw;
 
     .sunshineRun-top-center {
-      height: 45px;
+      height: 100px;
       position: relative;
       display: flex;
       justify-content: center;
@@ -235,7 +236,7 @@ onBeforeUnmount(() => {
       .logo {
         position: absolute;
         left: 0;
-        top: 0;
+        top: 25px;
 
         img {
           height: 28px;
@@ -246,26 +247,27 @@ onBeforeUnmount(() => {
         display: inline-block;
 
         img {
-          height: 45px;
+          height: 140px;
         }
       }
 
       .toolList {
         position: absolute;
         right: 0;
-        top: 0;
-        color: #09111B;
-        font-size: 14px;
+        top: 25px;
+        color: #EFEFEF;
+        font-size: 18px;
         display: flex;
         align-items: center;
-
+        text-shadow: 1px 1px 1px #a3a3a3;
+        
         .li {
           margin-left: 25px;
         }
 
         .btn {
-          width: 14px;
-          height: 14px;
+          width: 18px;
+          height: 18px;
           display: block;
           cursor: pointer;
           background-position: center;
@@ -300,6 +302,7 @@ onBeforeUnmount(() => {
         height: 35px;
         line-height: 35px;
         font-size: 22px;
+        color: #1A293A;
         padding: 0px 25px;
         letter-spacing: 3px;
         border-top-left-radius: 12px;
@@ -322,7 +325,7 @@ onBeforeUnmount(() => {
 
         .testList {
           width: 100%;
-          height: calc(100vh - 1.5vw - 1vw - 35px - 45px);
+          height: calc(100vh - 1vw - 35px - 100px);
           border-radius: 12px;
           overflow-x: hidden;
           overflow-y: scroll;
@@ -359,7 +362,7 @@ onBeforeUnmount(() => {
             li {
               position: relative;
               width: calc((100% / 7) - 10px);
-              height: calc(((100vh - 1.5vw - 1vw - 35px - 45px - 10px) / 5) - 10px);
+              height: calc(((100vh - 1vw - 35px - 100px - 10px) / 5) - 10px);
               margin: 0px 5px 10px 5px;
               box-sizing: border-box;
               border: 2px solid #ffffff;
@@ -368,11 +371,13 @@ onBeforeUnmount(() => {
               display: flex;
               align-items: center;
               justify-content: center;
+
               img {
                 width: 100%;
                 height: 100%;
               }
-              .noPic{
+
+              .noPic {
                 width: auto;
                 height: auto;
                 max-width: 60% !important;