打分页面

src/views/contest/ScoringSettlement.vue

@@ -1,13 +1,87 @@
 <template>
-  <div>打分结算</div>
+  <div class="taskContainer">
+    <el-card class="father">
+      <div style="margin-bottom:10px;font-size: 22px;font-weight: bolder;height: 34px;text-align: center;line-height: 34px;">打分汇总</div>
+      <el-tree
+        :data="taskDta"
+        node-key="id"
+        default-expand-all
+        :props="defaultProps"
+        :expand-on-click-node="false"
+        style="margin-bottom:50px"
+      >
+        <span slot-scope="{ node, data }" class="custom-tree-node">
+          <span>{{ node.label }}</span>
+          <div style="display: flex; justify-content: space-between;">
+            <div style="width:80px;"> 总分:{{ data.fullscore }} </div>
+            <div style="width:80px;">得分:{{ data.score }}</div>
+          </div>
+        </span>
+      </el-tree>
+      <div class="son">
+        <el-button type="primary" size="medium" @click="confirm">确认</el-button>
+      </div>
+    </el-card>
+  </div>
 </template>
 
 <script>
+import { finishContestExercise} from '@/api/contest';
+
 export default {
-    name: 'ScoringSettlement'
+    name:'ScoringSettlement',
+    data() {
+        return {
+            taskDta:[],
+            defaultProps: {
+                children: 'child',
+                label: 'name'
+            }
+        };
+    },
+    created() {
+        finishContestExercise().then((res) => {
+            this.taskDta = res.data.node;
+        }).catch(error => {
+            this.$message.error(error.message);
+        });
+    },
+
+    methods: {
+        confirm() {
+            this.$confirm('是否确认？', this.$t('tip.hint'), {
+                confirmButtonText: '确认',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$router.push('/contest/list');
+            });
+        }
+    }
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .taskContainer{
+		width: 50%;
+		margin: 10px auto;
+		.custom-tree-node {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 16px;
+			padding-right: 20px;
+		}
+		.father{
+			position: relative;
+			.son{
+				position: absolute;
+				bottom: 10px;
+				left: 50%;
+				transform: translateX(-50%);
+			}
+		}
+  }
 
 </style>