开始编写获奖相关的界面

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

@@ -2,14 +2,55 @@
  * @Author: Kane
  * @Date: 2023-03-23 16:05:08
  * @LastEditors: Kane
- * @FilePath: /task_schedule/src/views/DataManagemant.vue
+ * @FilePath: /task_schedule/src/views/DataManagement.vue
  * @Description:
  *
  * Copyright (c) ${2022} by Kane, All Rights Reserved.
 -->
 <template>
-    <div>
+    <div class="wrapper">
-        数据管理
+        <div class="reward-wrapper">
+            <div class="reward-gainer-wrapper">
+                <el-divider content-position="left">
+                    90俱乐部
+                </el-divider>
+                <el-table
+                    border
+                    stripe
+                    style="width:100%;"
+                >
+                    <el-table-column type="selection" />
+                    <el-table-column
+                        label="坐席名称"
+                        align="center"
+                    />
+                    <el-table-column
+                        label="奖项名称"
+                        align="center"
+                    />
+                </el-table>
+            </div>
+            <div class="dishonor-wrapper">
+                <el-divider content-position="left">
+                    XXX
+                </el-divider>
+                <el-table
+                    border
+                    stripe
+                    style="width:100%;"
+                >
+                    <el-table-column type="selection" />
+                    <el-table-column
+                        label="坐席名称"
+                        align="center"
+                    />
+                    <el-table-column
+                        label="奖项名称"
+                        align="center"
+                    />
+                </el-table>
+            </div>
+        </div>
     </div>
 </template>
 <script lang="ts">
@@ -22,5 +63,54 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import "@/assets/css/public/_public.scss";
 
+.wrapper {
+    margin: 10px;
+    padding: 10px;
+
+    // background-color: #fff;
+    // border-radius: 5px;
+    // box-shadow: $box-shadow;
+
+    // &:hover {
+    //     box-shadow: $box-shadow-hover;
+    // }
+
+    min-width: 800px;
+
+    >*+* {
+        margin-top: 10px;
+    }
+}
+
+.reward-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    >div {
+        background-color: #fff;
+        border-radius: 5px;
+        box-shadow: $box-shadow;
+
+        padding: 10px;
+
+        &:hover {
+            box-shadow: $box-shadow-hover;
+        }
+    }
+
+    >*+* {
+        margin-left: 10px;
+    }
+}
+
+.reward-gainer-wrapper {
+    flex-grow: 1;
+}
+
+.dishonor-wrapper {
+    flex-grow: 1;
+}
 </style>