成绩

Signed-off-by: jxtxzzw <jxtxzzw@126.com>

assets/data-sample/exam.json

+[
+  {
+    "name": "高考",
+    "sections": [
+      "语文",
+      "数学",
+      "英语",
+      "加试（化学）"
+    ],
+    "scores": [
+      104,
+      124,
+      128,
+      136
+    ],
+    "totals": [
+      150,
+      150,
+      150,
+      150
+    ]
+  },
+  {
+    "name": "中考",
+    "sections": [
+      "语文",
+      "数学",
+      "英语",
+      "物理",
+      "化学",
+      "体育"
+    ],
+    "scores": [
+      135,
+      145,
+      143.5,
+      85,
+      56,
+      28
+    ],
+    "totals": [
+      150,
+      150,
+      150,
+      150,
+      90,
+      60,
+      30
+    ]
+  },
+  {
+    "name": "TOEFL",
+    "sections": [
+      "Reading",
+      "Listening",
+      "Speaking",
+      "Writing"
+    ],
+    "scores": [
+      28,
+      27,
+      23,
+      28
+    ],
+    "totals": [
+      30,
+      30,
+      30,
+      30
+    ]
+  }
+]

assets/lang/en.json

@@ -178,5 +178,9 @@
     "cluster": "There are {count} records here",
     "date": "Arrived on {date} ",
     "name": "Arrived at {name}"
+  },
+  "exam": {
+    "total": "Total",
+    "sum": "Sum"
   }
 }

assets/lang/zh.json

@@ -178,5 +178,9 @@
     "cluster": "这里有 {count} 条记录",
     "date": "于 {date} ",
     "name": "到达 {name}"
+  },
+  "exam": {
+    "total": "满分",
+    "sum": "总分"
   }
 }

assets/reader.js

@@ -29,3 +29,4 @@ export const microblog = sortByDate(
 export const introduction = require('./data/introduction.json')
 export const food = require('./data/food.json')
 export const footprint = require('./data/footprint.json')
+export const exam = require('./data/exam.json')

components/Navigation.vue

@@ -42,7 +42,7 @@
           <Icon type="md-school" />
           {{ $t('navigation.skill') }}
         </template>
-        <MenuItem name="exam" to="reserved">
+        <MenuItem name="exam" to="exam">
           {{ $t('navigation.exam') }}
         </MenuItem>
         <MenuItem name="certificate" to="certificate">

pages/exam.vue

+<template>
+  <div>
+    <Row v-for="item in exam" :key="item.name">
+      <i-col>
+        <Card>
+          <p slot="title">
+            {{ item.name }}
+          </p>
+          <div>
+            <i-circle
+              v-for="(section, index) in item.sections"
+              :key="section"
+              :percent="
+                (parseFloat(item.scores[index]) /
+                  parseFloat(item.totals[index])) *
+                100
+              "
+              dashboard
+              stroke-color="#2D8CF0"
+            >
+              <div class="demo-Circle-custom">
+                <h1>
+                  {{ item.scores[index] }}
+                </h1>
+                <p>
+                  {{ section }}
+                </p>
+              </div>
+              <span>
+                {{ $t('exam.total') }}
+                <i>
+                  {{ item.totals[index] }}
+                </i>
+              </span>
+            </i-circle>
+            <i-circle
+              key="sum"
+              :percent="
+                (parseFloat(sum(item.scores)) / parseFloat(sum(item.totals))) *
+                100
+              "
+              dashboard
+              stroke-color="#5cb85c"
+            >
+              <div class="demo-Circle-custom">
+                <h1>
+                  {{ sum(item.scores) }}
+                </h1>
+                <p>
+                  {{ $t('exam.sum') }}
+                </p>
+              </div>
+              <span>
+                {{ $t('exam.total') }}
+                <i>
+                  {{ sum(item.totals) }}
+                </i>
+              </span>
+            </i-circle>
+          </div>
+        </Card>
+      </i-col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import { exam } from 'assets/reader'
+export default {
+  name: 'Exam',
+  data() {
+    return {
+      exam,
+    }
+  },
+  methods: {
+    sum(arr) {
+      let sum = 0
+      for (const x of arr) {
+        sum += parseFloat(x)
+      }
+      return sum
+    },
+  },
+}
+</script>