完成业绩部分的布局。

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

@@ -0,0 +1,75 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-08 18:32:13
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/components/DishonorListComponent.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+    <div class="dishonorlist-wrapper">
+        <div class="banner-wrapper">
+            <img src="@/assets/img/ranking/stop.png" alt="">
+            <div class="title-wrapper">
+                <span>"消7灭6"突围战</span>
+                <span>二月入营坐席</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "DishonorListComponent",
+    props: {
+        month: {
+            type: String,
+            require: true,
+        },
+        dishonorPersons: {
+            type: Array,
+            require: true,
+        },
+    },
+    setup() { },
+};
+</script>
+
+<style scoped lang="scss">
+.dishonorlist-wrapper {
+    height: 240px;
+    width: 360px;
+    border-radius: 5px;
+
+    background-color: $color-honorlist-bg;
+    backdrop-filter: blur(10px);
+
+    padding: 10px;
+
+    .banner-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: stretch;
+
+        img {
+            // width: 70px;
+            height: 60px;
+        }
+
+        span {
+            display: block;
+            width: 100%;
+            text-align: center;
+
+            font: {
+                family: "fz-zhuohei";
+                size: 1.7rem;
+                weight: 100;
+            }
+
+            color: #fff;
+        }
+    }
+}
+</style>

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

@@ -10,6 +10,20 @@
 <template>
     <div class="honorlist-wrapper">
         <span class="title">“90俱乐部”{{ $props.month }}月入围坐席</span>
+        <div class="reward-wrapper">
+            <div class="leading-reward-wrapper">
+                <div class="banner-wrapper">
+                    <img src="@/assets/img/ranking/medal.png" alt="领跑奖">
+                    <span>领跑奖</span>
+                </div>
+            </div>
+            <div class="advance-reward-wrapper">
+                <div class="banner-wrapper">
+                    <img src="@/assets/img/ranking/copper_medal.png" alt="飞跃奖">
+                    <span>飞跃奖</span>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -46,10 +60,10 @@ export default {
     background-color: $color-honorlist-bg;
     backdrop-filter: blur(10px);
 
-    padding: 15px;
+    padding: 10px;
 
     >*+* {
-        margin-top: 15px;
+        margin-top: 10px;
     }
 
     .title {
@@ -63,5 +77,52 @@ export default {
 
         color: goldenrod;
     }
+
+    .reward-wrapper {
+        width: 100%;
+
+        display: flex;
+        justify-content: center;
+        align-items: stretch;
+
+        >*+* {
+            margin-left: 10px;
+        }
+
+        .leading-reward-wrapper {
+            width: 165px;
+            height: 100%;
+
+
+        }
+
+        .advance-reward-wrapper {
+            width: 165px;
+            height: 100%;
+        }
+
+        .banner-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            img {
+                width: 30px;
+                height: 30px;
+            }
+
+            span {
+                display: inline-block;
+                text-align: center;
+                color: #fff;
+
+                font: {
+                    size: 1.5rem;
+                    family: "FZ-ZHUOHEI";
+                    weight: 100;
+                }
+            }
+        }
+    }
 }
 </style>