From 3b33a34db390994378cd97824c65326425f1d245 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Sat, 27 Apr 2019 00:48:41 +0800
Subject: [PATCH] Refactor about page.

---
 src/views/system/About.vue | 109 +++++++++++++++++--------------------
 1 file changed, 51 insertions(+), 58 deletions(-)

diff --git a/src/views/system/About.vue b/src/views/system/About.vue
index 32b49d4a..8c7d2be1 100644
--- a/src/views/system/About.vue
+++ b/src/views/system/About.vue
@@ -1,50 +1,49 @@
 <template>
-  <div class="page-header-index-wide" style="padding:10px">
-    <div align="center">
-      <img src="../../assets/halo-logo.png" width="300px">
-    </div>
-    <!-- 简介 -->
-    <h2>简介</h2>
-    <p>Halo [ˈheɪloʊ]，意为光环。当然，你也可以当成拼音读(哈喽)。</p>
-    <p>轻快，简洁，功能强大，使用 Java 开发的博客系统。</p>
-    <h2>环境信息</h2>
-    <p>版本：1.0</p>
-    <p>数据库：MySql</p>
-    <p>开发语言：Java</p>
-    <!-- 关于我们 -->
-    <div class="aboutTitle">关于我们</div>
-    <div>
-      <a-row>
-        <a-col
-          :xs="8"
-          :md="6"
-          :lg="4"
-          :xl="4"
-          v-for="(dev,index) in devs"
-          :key="index">
-          <div class="head-Box">
-            <a-avatar :size="60" :src="dev.src"/>
-            <p>{{ dev.Name }}</p>
+  <div class="page-header-index-wide">
+    <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-tooltip
+              placement="top"
+              v-for="(item,index) in developers"
+              :title="item.name"
+              :key="index"
+            >
+              <a-avatar
+                :size="60"
+                :src="item.avatar"
+              />
+            </a-tooltip>
           </div>
-        </a-col>
-      </a-row>
-    </div>
-    <!-- 发展历程 -->
-    <div>
-      <h2>Halo的发展历程：</h2>
-      <a-timeline mode="alternate">
-        <a-timeline-item>Halo 0.1版本诞生啦</a-timeline-item>
-        <a-timeline-item color="green">啦啦啦啦</a-timeline-item>
-        <a-timeline-item>
-          <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>测试测手册
-        </a-timeline-item>
-        <a-timeline-item color="red">首席测试官测出bug了 2015-09-01</a-timeline-item>
-        <a-timeline-item>又出bug了</a-timeline-item>
-        <a-timeline-item>
-          <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;"/>Halo 1.0版本 2019-05-01
-        </a-timeline-item>
-      </a-timeline>
-    </div>
+          <!-- 发展历程 -->
+          <h2>时间轴</h2>
+          <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>
+        </a-card>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
@@ -52,10 +51,14 @@
 export default {
   data() {
     return {
-      devs: [
+      developers: [
         {
-          Name: '首席测试工程师',
-          src: 'https://q1.qlogo.cn/g?b=qq&nk=952396285&s=5'
+          name: 'Ryan Wang',
+          avatar: 'https://gravatar.loli.net/avatar/7cc7f29278071bd4dce995612d428834?s=256&d=mm'
+        },
+        {
+          name: 'John Niang',
+          avatar: 'https://johnniang.me/imgs/avatar.png'
         }
       ]
     }
@@ -64,14 +67,4 @@ export default {
 </script>
 
 <style scoped>
-.aboutTitle {
-  margin: 0px auto;
-  text-align: center;
-  font-size: 24px;
-}
-.head-Box {
-  text-align: center;
-  padding: 10px;
-  display: inline-block;
-}
 </style>