生活

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

assets/data-sample/life.json

+[
+    {
+        "event": "取得驾照",
+        "date": "2020-09-01",
+        "content": "买了房子？拿了驾照？生活中的大事……"
+    }
+]

assets/lang/en.json

@@ -33,7 +33,8 @@
     "wish": "Wish",
     "moment": "Moment",
     "microblog": "MicroBlog",
-    "income": "Income"
+    "income": "Income",
+    "life": "Life"
   },
   "certificate": {
     "specialization": "Part of {specialization} Specialization",
@@ -188,5 +189,8 @@
   "exam": {
     "total": "Total",
     "sum": "Sum"
+  },
+  "life": {
+    "event": "Event"
   }
 }

assets/lang/zh.json

@@ -33,7 +33,8 @@
     "wish": "愿望",
     "moment": "时刻",
     "microblog": "轻博客",
-    "income": "收入"
+    "income": "收入",
+    "life": "生活"
   },
   "certificate": {
     "specialization": "属于{specialization}专项课程",
@@ -188,5 +189,8 @@
   "exam": {
     "total": "满分",
     "sum": "总分"
+  },
+  "life": {
+    "event": "事件"
   }
 }

assets/reader.js

@@ -18,6 +18,7 @@ export const honor = sortByDate(
   filenameToSrc(require('./data/honor.json'), setting.src.honor)
 )
 export const study = sortByDate(require('./data/study.json'))
+export const life = sortByDate(require('./data/life.json'))
 export const work = sortByDate(require('./data/work.json'))
 export const project = sortByDate(
   filenameToSrc(require('./data/project.json'), setting.src.project)

components/Navigation.vue

@@ -36,6 +36,9 @@
         <MenuItem name="publication" to="reserved">
           {{ $t('navigation.publication') }}
         </MenuItem>
+        <MenuItem name="life" to="life">
+          {{ $t('navigation.life') }}
+        </MenuItem>
       </Submenu>
       <Submenu name="skill">
         <template slot="title">

pages/life.vue

+<template>
+  <div>
+    <Timeline>
+      <TimelineItem v-for="item in life" :key="item.event" color="green">
+        <Icon slot="dot" type="ios-trophy"></Icon>
+        <p class="event">
+          {{ item.event }}
+        </p>
+        <p class="date">
+          <span>{{ item.date }}</span>
+        </p>
+        <div v-if="item.content">
+          <p v-for="c in item.content.split('\n')" :key="c" class="content">
+            {{ c }}
+          </p>
+        </div>
+      </TimelineItem>
+    </Timeline>
+  </div>
+</template>
+
+<script>
+import { life } from 'assets/reader'
+export default {
+  name: 'Life',
+  data() {
+    return {
+      life,
+    }
+  },
+}
+</script>
+
+<style scoped>
+.event {
+  color: #2d8cf0;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.date {
+  padding-left: 12px;
+  margin-top: 6px;
+  font-weight: bold;
+}
+
+.content {
+  color: #b6c3d7;
+  padding-left: 12px;
+  margin-top: 6px;
+  font-size: 12px;
+}
+</style>