完成业绩部分的布局。

code/web/task_schedule/src/views/DesktopArchievement.vue

@@ -17,8 +17,8 @@
             </div>
             <div class="archievement-wrapper">
                 <div class="total-archievement-rate-wrapper">
-                    <ArchievementCompleteRateComponent indicator="续保完成率" percentage=65 />
-                    <ArchievementCompleteRateComponent indicator="车非完成率" percentage=66 />
+                    <ArchievementCompleteRateComponent indicator="续保完成率" percentage=95 />
+                    <ArchievementCompleteRateComponent indicator="车非完成率" percentage=95 />
                 </div>
                 <div class="total-archievement-charts-wrapper">
                     <ArchievementChart total_archievement="435220" :chart_data="ui.chartData" />
@@ -26,6 +26,7 @@
             </div>
             <div class="reward-wrapper">
                 <HonorListComponent month="二" leading-reward="王炜" advance-reward="王炜" />
+                <DishonorListComponent month="二" :dishonorPersons="ui.dishonorPersons" />
             </div>
         </div>
         <div class="right-wrapper">
@@ -42,6 +43,7 @@ import { ElMessage } from "element-plus";
 import ArchievementChart from "@/components/ArchievementChartComponent.vue";
 import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
 import HonorListComponent from "@/components/HonorListComponent.vue";
+import DishonorListComponent from "@/components/DishonorListComponent.vue";
 
 export default {
     name: "DesktopArchievement",
@@ -49,6 +51,7 @@ export default {
         ArchievementChart,
         ArchievementCompleteRateComponent,
         HonorListComponent,
+        DishonorListComponent,
     },
     setup()
     {
@@ -56,7 +59,8 @@ export default {
         const staffInfo = loadStaffInfo();
         const ui = reactive({
             chartData: [200, 230, 224, 218, 135, 147, 260, 800,],
-            totalArchievement: 456778,
+            totalArchievement: 120000000,
+            dishonorPersons: ["张三", "李四",],
         });
 
         const getTotalArchievement = computed(() =>
@@ -100,11 +104,6 @@ export default {
     display: flex;
     justify-content: end;
     align-items: stretch;
-
-    div {
-        // border: 1px solid red;
-        box-sizing: border-box;
-    }
 }
 
 .left-wrapper {
@@ -198,6 +197,14 @@ export default {
         //奖励部分
         // height: 280px;
         padding: 15px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        >*+* {
+            margin-left: 15px;
+        }
     }
 }
 
@@ -216,4 +223,9 @@ body {
             $color-bg-05,
             $color-bg-05);
 }
+
+div {
+    // border: 1px solid red;
+    box-sizing: border-box;
+}
 </style>