保存进度！

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

@@ -19,6 +19,9 @@
                 <span>指标落后入营坐席</span>
             </div>
         </div>
+        <div class="telsaler-list-wrapper">
+            <span>开发中……</span>
+        </div>
     </div>
 </template>
 
@@ -46,6 +49,8 @@ export default {
 
 <style scoped lang="scss">
 .dishonorlist-wrapper {
+    display: flex;
+    flex-direction: column;
     height: 240px;
     width: 360px;
     border-radius: 5px;
@@ -55,10 +60,16 @@ export default {
 
     padding: 10px;
 
+    >*+* {
+        margin-top: 10px;
+    }
+
     .banner-wrapper {
         display: flex;
         justify-content: center;
         align-items: stretch;
+        height: 65px;
+        flex-grow: 0;
 
         img {
             // width: 70px;
@@ -80,4 +91,24 @@ export default {
         }
     }
 }
+
+.telsaler-list-wrapper {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span {
+        display: block;
+        text-align: center;
+        color: rgb(101, 140, 194);
+        margin-top: 0px;
+
+        font: {
+            size: 2rem;
+            family: "FZ-ZHUOHEI";
+            weight: 100;
+        }
+    }
+}
 </style>

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

@@ -9,39 +9,18 @@
 -->
 <template>
     <div class="honorlist-wrapper">
-        <span class="title">“90俱乐部”标杆坐席</span>
+        <div class="banner-wrapper">
-        <div class="reward-wrapper">
+            <img
-            <div class="leading-reward-wrapper">
+                src="@/assets/img/ranking/medal.png"
-                <div class="banner-wrapper">
+                alt=""
-                    <img
+            >
-                        src="@/assets/img/ranking/medal.png"
+            <div class="title-wrapper">
-                        alt="领跑奖"
+                <span>“90俱乐部”标杆坐席</span>
-                    >
-                    <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">
-                    <img
-                        src="@/assets/img/ranking/copper_medal.png"
-                        alt="飞跃奖"
-                    >
-                    <span>飞跃奖</span>
-                </div>
-                <div class="gainer-wrapper">
-                    <span
-                        v-for="gainer in ui.advanceReward"
-                        :key="gainer"
-                    >{{ gainer }}</span>
-                </div>
             </div>
         </div>
+        <div class="telsaler-list-wrapper">
+            <span>开发中……</span>
+        </div>
     </div>
 </template>
 
@@ -81,6 +60,8 @@ export default {
 
 <style scoped lang="scss">
 .honorlist-wrapper {
+    display: flex;
+    flex-direction: column;
     height: 240px;
     width: 360px;
     border-radius: 5px;
@@ -93,80 +74,54 @@ export default {
     >*+* {
         margin-top: 10px;
     }
+}
 
-    .title {
+.banner-wrapper {
-        display: block;
+    display: flex;
-        text-align: center;
+    justify-content: center;
+    align-items: center;
+    height: 65px;
+    flex-grow: 0;
 
-        font: {
+    img {
-            family: "FZ-ZHUOHEI";
+        width: 65px;
-            size: 1.6rem;
+        height: 65px;
-        }
-
-        color: rgb(245, 178, 11);
     }
 
-    .reward-wrapper {
+    .title-wrapper {
-        width: 100%;
-
-        display: flex;
-        justify-content: center;
-        align-items: stretch;
-
-        >*+* {
-            margin-left: 10px;
-        }
-
-        .leading-reward-wrapper {
-            width: 165px;
-            height: 100%;
-            display: none;
-        }
-
-        .advance-reward-wrapper {
-            width: 165px;
-            height: 100%;
-            display: none;
-        }
 
         span {
             display: block;
-
-            margin-top: 5px;
-
             text-align: center;
-                color: #fff;
+            color: rgb(245, 178, 11);
+            margin-top: 0px;
 
-                font: {
+            font: {
-                    size: 2rem;
+                size: 1.65rem;
-                    family: "FZ-ZHUOHEI";
+                family: "FZ-ZHUOHEI";
-                    weight: 100;
+                weight: 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;
-                margin-top: 0px;
-
-                font: {
-                    size: 1.5rem;
-                    family: "FZ-ZHUOHEI";
-                    weight: 100;
-                }
             }
         }
     }
 }
+
+.telsaler-list-wrapper {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span {
+            display: block;
+            text-align: center;
+            color: rgb(101, 140, 194);
+            margin-top: 0px;
+
+            font: {
+                size: 2rem;
+                family: "FZ-ZHUOHEI";
+                weight: 100;
+            }
+        }
+}
 </style>

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

@@ -42,7 +42,7 @@
                 align="center"
             >
                 <template #default="ranking">
-                    <span class="rankinglist-index">{{ ranking.row.appraiseValue }}</span>
+                    <span class="rankinglist-index">{{ ranking.row.appraiseValue }}%</span>
                 </template>
             </el-table-column>
         </el-table>