日常开发

src/utils/animate.ts

@@ -49,6 +49,11 @@ const hand = {
   enter: animatePrefix + 'animate__fadeInDownBig'
 };
 
+const sunshineRun = {
+  enter: animatePrefix + 'animate__fadeInBottomRight',
+  leave: animatePrefix + 'animate__fadeOutBottomLeft'
+};
+
 export default {
   mask,
   dialog,
@@ -58,5 +63,6 @@ export default {
   report,
   run,
   error,
-  hand
+  hand,
+  sunshineRun
 };

src/views/sunshineRun/index.vue

@@ -22,15 +22,19 @@
           </div>
           <div class="testList">
             <ul>
-              <li>
-                <img src="@/assets/images/common/logo.png" />
-                <div class="con">
-                  <div class="name">我是测试</div>
-                  <div class="score">
-                    99999<span>{{ unit }}</span>
+              <TransitionGroup :enter-active-class="proxy?.animate.sunshineRun.enter"
+                :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 v-else src="@/assets/images/test/profilePicture.png" />
+                  <div class="con">
+                    <div class="name">{{ item.student_name }}</div>
+                    <div class="score">
+                      {{ item.score }}<span>{{ unit }}</span>
+                    </div>
                   </div>
-                </div>
-              </li>
+                </li>
+              </TransitionGroup>
             </ul>
           </div>
         </div>
@@ -74,19 +78,23 @@ const myInfo: any = localStorage.getItem("userInfo");
 const data = reactive<any>({
   timerManager: {},//计时器管理
   userInfo: {},//用户信息
+  testList: [],//测试列表
   reportList: [],//排行榜
   date: "",//当前时间
   unit: "",//单位
   screen: true,//全屏控制
+  key: 1
 });
 
 const {
   timerManager,
   userInfo,
+  testList,
   reportList,
   date,
   unit,
-  screen
+  screen,
+  key
 } = toRefs(data);
 
 /**
@@ -181,6 +189,19 @@ onBeforeMount(() => {
   }
   //单位
   unit.value = "M";
+  setInterval(() => {
+    key.value++;
+    let obj = {
+      face_pic: "",
+      student_id: key.value,
+      student_name: key.value + "测试一",
+      score: "99999"
+    }
+    testList.value.push(obj)
+  }, 100)
+  // setInterval(() => {
+  //   testList.value.shift()
+  // }, 3000)
 })
 
 onMounted(() => {
@@ -300,15 +321,35 @@ onBeforeUnmount(() => {
 
         .testList {
           width: 100%;
-          height: 100%;
+          height: calc(100vh - 1.5vw - 1vw - 35px - 45px);
           border-radius: 12px;
-          overflow: hidden;
+          overflow-x: hidden;
+          overflow-y: scroll;
           background: linear-gradient(170deg, #276066 -13%, #09111B 87%);
           box-sizing: border-box;
           border: 1px solid #FFFFFF;
           box-shadow: 0px 0px 6px 2px rgba(255, 255, 255, 0.5);
           border-top-left-radius: 0px;
 
+          &::-webkit-scrollbar {
+            width: 0px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            border-width: 2px;
+            border-radius: 4px;
+            border-style: dashed;
+            border-color: transparent;
+            background-color: rgba(26, 62, 78, 0.9);
+            background-clip: padding-box;
+          }
+
+          &::-webkit-scrollbar-button:hover {
+            border-radius: 6px;
+            background: rgba(26, 62, 78, 1);
+          }
+
+
           ul {
             display: flex;
             flex-wrap: wrap;