add: main page flag card

vidar-team · Feb 17, 2020 · 213ca0e · 213ca0e
1 parent 85cbcce
commit 213ca0e
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 6 deletions.
diff --git a/src/components/GameBox.vue b/src/components/GameBox.vue
@@ -7,7 +7,7 @@
                 <v-list-item-content>
                     <v-list-item-title v-text="gameBox.Title"/>
                     <v-list-item-subtitle>{{gameBox.IP}}:{{gameBox.Port}}</v-list-item-subtitle>
-                    <v-list-item-subtitle>{{gameBox.Score}} 分</v-list-item-subtitle>
+                    <v-list-item-subtitle>{{utils.FormatFloat(gameBox.Score)}} 分</v-list-item-subtitle>
                 </v-list-item-content>
 
                 <v-list-item-action>

diff --git a/src/components/Info.vue b/src/components/Info.vue
@@ -13,7 +13,7 @@
         <v-divider/>
         <v-card-actions>
             <v-list-item>
-                #{{ info.Rank }} / {{ info.Score }} 分
+                #{{ info.Rank }} / {{ utils.FormatFloat(info.Score) }} 分
             </v-list-item>
             <v-btn text/>
         </v-card-actions>

diff --git a/src/components/SubmitFlag.vue b/src/components/SubmitFlag.vue
@@ -0,0 +1,44 @@
+<template>
+    <v-card class="mx-auto">
+        <v-card-title>提交 Flag</v-card-title>
+        <v-card-text>
+            <h2>POST <code style="background-color: #1c1c1c">/flag</code></h2><br>
+            <p>Content-Type: application/json</p>
+            <p>Header:<pre>Authorization: {{info.Token}}</pre></p>
+            <p>Body:</p>
+            <code class="pa-3" style="width: 100%; background-color: #1c1c1c; color: rgba(255, 255, 255, 0.7);">{"flag": "your_flag_here"}</code>
+            <br><br>
+            <v-divider></v-divider>
+            <br>
+            <p>
+                <code class="pa-3" style="width: 100%; background-color: #1c1c1c; color: rgba(255, 255, 255, 0.7);">curl -X POST {{utils.baseURL}}/flag -H 'Authorization: {{info.Token}}' -d '{ "flag": "your_flag_here" }'</code>
+            </p>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+    export default {
+        name: "SubmitFlag",
+
+        data: () => ({
+            info: null
+        }),
+
+        mounted() {
+            this.getInfo()
+        },
+
+        methods:{
+            getInfo(){
+                this.utils.GET("/team/info").then(res => {
+                    this.info = res
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/utils.js b/src/utils.js
@@ -61,6 +61,10 @@ export default {
         })
     },
 
+    FormatFloat: (number) => {
+        return number.toFixed(2)
+    },
+
     FormatGoTime: (timeString) => {
         return new Date(timeString.split('+')[0].replace('T', ' '))
     },

diff --git a/src/views/Main.vue b/src/views/Main.vue
@@ -1,7 +1,5 @@
 <template>
     <v-container>
-
-
         <!-- 时间 -->
         <v-card class="mx-auto" max-width="600" color="transparent" flat>
             <Timer/>
@@ -12,6 +10,17 @@
                 <!-- 靶机信息 -->
                 <Info/>
             </v-col>
+            <v-col cols="12" md="8">
+                <v-card class="mx-auto">
+                    <v-card-title></v-card-title>
+                    <v-card-text>
+
+                    </v-card-text>
+                </v-card>
+
+                <br>
+                <SubmitFlag/>
+            </v-col>
         </v-row>
 
     </v-container>
@@ -20,10 +29,11 @@
 <script>
     import Timer from "../components/Timer";
     import Info from "../components/Info";
+    import SubmitFlag from "../components/SubmitFlag";
 
     export default {
         name: "Main",
-        components: {Info, Timer}
+        components: {SubmitFlag, Info, Timer}
     }
 </script>
 

diff --git a/src/views/Rank.vue b/src/views/Rank.vue
@@ -15,7 +15,7 @@
             <tr v-for="(item, key) in this.rankList" :key="item.ID">
                 <td>{{key + 1}}</td>
                 <td>{{item.TeamName}}</td>
-                <td>{{item.Score}}</td>
+                <td>{{utils.FormatFloat(item.Score)}}</td>
                 <td v-bind:key="index" v-for="(gameBox, index) in item.GameBoxStatus">
                     <v-icon color="green lighten-2" v-if="!gameBox.IsDown && !gameBox.IsAttacked">mdi-check-circle
                     </v-icon>