保存进度！

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

@@ -9,18 +9,16 @@
 -->
 <template>
     <div class="caller-archievment-wrapper">
+        <h1>{{ CallerName }}</h1>
         <table>
             <tr>
-                <td>坐席名称</td><td>{{ CallerName }}</td>
+                <th>当月保费</th><td>{{ PresentMonthPremium }}&nbsp;万元</td>
             </tr>
             <tr>
-                <td>车险保费</td><td>{{ PresentMonthPremium }}&nbsp;万元</td>
+                <th>车非渗透率</th><td>{{ props.attachingRate }}%</td>
             </tr>
             <tr>
-                <td>车非渗透率</td><td>{{ ui.attachingRate }}%</td>
-            </tr>
-            <tr>
-                <td>续保率</td><td>{{ ui.renewalRate }}%</td>
+                <th>续保率</th><td>{{ props.renewalRate }}%</td>
             </tr>
         </table>
     </div>
@@ -48,6 +46,16 @@ export default {
             require: true,
             default: (): number => 0,
         },
+        attachingRate: {
+            type: String,
+            require: true,
+            default: (): string => "0.0",
+        },
+        renewalRate: {
+            type: String,
+            require: true,
+            default: (): string => "0.0",
+        },
     },
     setup( props )
     {
@@ -72,6 +80,7 @@ export default {
             CallerName,
             PresentMonthPremium,
             ui,
+            props,
         };
     },
 };
@@ -79,6 +88,79 @@ export default {
 <style scoped lang="scss">
 .caller-archievment-wrapper
 {
-    width: 100%;
+    width: 300px;
+    height: 120px;
+
+    border-radius: 5px;
+
+    margin-bottom: 30px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    background-color: #fff;
+    color: #4f4f4f;
+    font-size: 15px;
+
+    h1 {
+        background-color: #fecb96;
+        width: 100%;
+        text-align: center;
+        border-radius: 5px 5px 0px 0px;
+        margin: 0px;
+        padding: 5px 0px;
+
+        color: #da3703;
+
+        font: {
+            size: 1.2rem;
+            weight: 100;
+            family: "FZ-ZHUOHEI";
+        }
+    }
+
+    table {
+        border-collapse: collapse;
+        border-radius: 0px 0px 5px 5px;
+        width: 100%;
+
+        margin-top: 5px;
+
+        background-color: #ffffff;
+
+        font: {
+            size: 14px;
+        }
+
+        th,td {
+            padding: 9px;
+            border-bottom: 1.5px solid #ebeef5;
+        }
+
+        th {
+            width: 5.2rem;
+            text-align: right;
+        }
+
+        th.caller-name {
+            text-align: center;
+            background-color: yellow;
+        }
+
+        td {
+            text-align: left;
+        }
+
+        tr:nth-child(even) {
+            background-color: #f5f6f7;
+        }
+
+        tr:last-child td,th {
+            border-bottom: none;
+        }
+    }
 }
+
 </style>