feat: add color for countdown

Signed-off-by: Dup4 <lyuzhi.pan@gmail.com>
xcpcio · Nov 3, 2023 · 108b4fe · 108b4fe
1 parent 3b2814d
commit 108b4fe
Showing 1 changed file with 33 additions and 6 deletions.
diff --git a/packages/apps/board/src/components/Countdown.vue b/packages/apps/board/src/components/Countdown.vue
@@ -38,7 +38,7 @@ onUnmounted(() => {
 
 <template>
   <div
-    class="bg-[#323443]"
+    class="background"
     text-gray-200
     w-screen
     h-screen
@@ -68,37 +68,64 @@ onUnmounted(() => {
         items-center justify-center
       >
         <div
-          mt-16
+          mt-20
           text-6xl
         >
           {{ contest.name }}
         </div>
 
         <div
-          mt-12
+          mt-16
           text-6xl
+          :class="[contest.getContestState(now).toString()]"
         >
           {{ contest.getContestState(now) }}
         </div>
 
         <div
-          mt-12
+          mt-16
           class="text-[360px]"
+          :class="[contest.getContestState(now).toString()]"
         >
           <div
             v-if="contest.getContestState(now) === ContestState.PENDING"
-            text-blue-500
           >
             {{ contest.getContestPendingTime(now) }}
           </div>
 
           <div
             v-else
           >
-            {{ contest.getContestRemainingTime(now) }}
+            {{ contest.getContestElapsedTime(now) }}
           </div>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.background {
+  background-color: #333443;
+}
+
+.PENDING {
+  color: #3bb4f2;
+}
+
+.RUNNING {
+  color: rgb(94, 185, 94);
+}
+
+.FROZEN {
+  color: #dd514c;
+}
+
+.FINISHED {
+  color: #0e90d2;
+}
+
+.PAUSED {
+  color: #3bb4f2;
+}
+</style>