完成光荣榜

code/web/task_schedule/src/components/HonorListComponent.vue

@@ -19,6 +19,12 @@
                     >
                     <span>领跑奖</span>
                 </div>
+                <div class="gainer-wrapper">
+                    <span
+                        v-for="gainer in ui.leadingReward"
+                        :key="gainer"
+                    >{{ gainer }}</span>
+                </div>
             </div>
             <div class="advance-reward-wrapper">
                 <div class="banner-wrapper">
@@ -28,12 +34,19 @@
                     >
                     <span>飞跃奖</span>
                 </div>
+                <div class="gainer-wrapper">
+                    <span
+                        v-for="gainer in ui.advanceReward"
+                        :key="gainer"
+                    >{{ gainer }}</span>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
-<script lang="ts">
+<script lang="js">
+import { reactive } from "vue";
 export default {
     name: "HonorListComponent",
     props: {
@@ -53,9 +66,15 @@ export default {
             default: () => ["",],
         },
     },
-    setup()
+    setup( props )
     {
-        return {};
+        const ui = reactive({
+            leadingReward: props.leadingReward,
+            advanceReward: props.advanceReward,
+        });
+
+        console.log( props );
+        return { ui, };
     },
 };
 </script>
@@ -109,6 +128,19 @@ export default {
             height: 100%;
         }
 
+        span {
+            display: block;
+
+            text-align: center;
+                color: #fff;
+
+                font: {
+                    size: 2rem;
+                    family: "FZ-ZHUOHEI";
+                    weight: 100;
+                }
+        }
+
         .banner-wrapper {
             display: flex;
             justify-content: center;