Complete About page.

src/views/system/About.vue

@@ -3,17 +3,38 @@
     <a-row>
       <a-col :span="24">
         <a-card :bordered="false">
-          <!-- 简介 -->
-          <h2>简介</h2>
-          <p>Halo [ˈheɪloʊ]，意为光环。当然，你也可以当成拼音读(哈喽)。</p>
-          <p>轻快，简洁，功能强大，使用 Java 开发的博客系统。</p>
-          <h2>环境信息</h2>
-          <p>版本：1.0</p>
-          <p>数据库：MySql</p>
-          <p>开发语言：Java</p>
-          <!-- 关于我们 -->
-          <h2>开发者</h2>
-          <div>
+
+          <a-list itemLayout="horizontal">
+            <a-list-item>
+              <a-list-item-meta>
+                <h3 slot="title">
+                  环境信息
+                </h3>
+                <template slot="description">
+                  <ul>
+                    <li>版本：1.0</li>
+                    <li>数据库：h2databse</li>
+                    <li>运行时长：2小时45分钟</li>
+                  </ul>
+                  <a
+                    href="https://docs.halo.run"
+                    target="_blank"
+                  >用户文档
+                    <a-icon type="link" /></a>&nbsp;
+                  <a
+                    href="https://bbs.halo.run"
+                    target="_blank"
+                  >问题反馈
+                    <a-icon type="link" /></a>&nbsp;
+                </template>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta>
+                <h3 slot="title">
+                  开发者
+                </h3>
+                <template slot="description">
                   <a-tooltip
                     placement="top"
                     v-for="(item,index) in developers"
@@ -21,26 +42,32 @@
                     :key="index"
                   >
                     <a-avatar
-                :size="60"
+                      size="large"
                       :src="item.avatar"
+                      :style="{ marginRight: '10px' }"
                     />
                   </a-tooltip>
-          </div>
-          <!-- 发展历程 -->
-          <h2>时间轴</h2>
+                </template>
+              </a-list-item-meta>
+            </a-list-item>
+
+            <a-list-item>
+              <a-list-item-meta>
+                <h3 slot="title">
+                  时间轴
+                </h3>
+                <template slot="description">
                   <a-timeline>
-            <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
-            <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
-            <a-timeline-item color="red">
-              <a-icon
-                slot="dot"
-                type="clock-circle-o"
-                style="fontSize: '16px'"
-              />
-              Technical testing 2015-09-01
-            </a-timeline-item>
-            <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
+                    <a-timeline-item>...</a-timeline-item>
+                    <a-timeline-item
+                      v-for="(item, index) in steps"
+                      :key="index"
+                    >{{ item.date }} {{ item.content }}</a-timeline-item>
                   </a-timeline>
+                </template>
+              </a-list-item-meta>
+            </a-list-item>
+          </a-list>
         </a-card>
       </a-col>
     </a-row>
@@ -54,17 +81,67 @@ export default {
       developers: [
         {
           name: 'Ryan Wang',
-          avatar: 'https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm'
+          avatar: 'https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm',
+          website: 'https://ryanc.cc',
+          github: 'https://github.com/ruibaby'
         },
         {
           name: 'John Niang',
-          avatar: 'https://johnniang.me/imgs/avatar.png'
+          avatar: 'https://johnniang.me/imgs/avatar.png',
+          website: 'https://johnniang.me',
+          github: 'https://github.com/johnniang'
+        }
+      ],
+      steps: [
+        {
+          date: '2019-??-??',
+          content: '1.0 正式版发布'
+        },
+        {
+          date: '2019-05-03',
+          content: 'Star 数达到 3300'
+        },
+        {
+          date: '2019-01-30',
+          content: 'John Niang 加入开发'
+        },
+        {
+          date: '2018-10-18',
+          content: '构建镜像到 Docker hub'
+        },
+        {
+          date: '2018-09-22',
+          content: 'Star 数达到 800'
+        },
+        {
+          date: '2018-05-02',
+          content: '第一条 Issue'
+        },
+        {
+          date: '2018-05-01',
+          content: 'Star 数达到 100'
+        },
+        {
+          date: '2018-04-29',
+          content: '第一个 Pull request'
+        },
+        {
+          date: '2018-04-28',
+          content: '正式开源'
+        },
+        {
+          date: '2018-03-21',
+          content: '确定命名为 Halo，并上传到 Github'
         }
       ]
     }
   }
 }
 </script>
-
-<style scoped>
+<style lang="less" scope>
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 </style>