添加主页拉取逻辑，改善主页结构，加入简易的媒体查询

src/index/index.css

@@ -15,24 +15,36 @@
   right: 40px;
   bottom: 20px;
 }
-.message {
-  width: calc(50% - 60px);
-  margin-top: 30px;
+/* 这里的卡片和分栏结构就比较接近bootstrap了，可惜视觉做的太古板，如果愿意的话改成Material Design就更好了 */
+.split-lg > .card {
+  width: 440px;
+  flex-shrink: 0;
+  margin: 0 5px;
 }
-
-.container {
-  display: flex;
-  width: 1000px;
-  margin: 0 auto;
-  justify-content: space-between;
-}
-.cut-line {
-  display: flex;
-  height: 1px;
-  width: 100%;
-  background-color: #e6e6e6;
-}
-.little-title {
+.card-header {
   padding: .75em .5em;
   font-size: 18px;
+  border-bottom: 1px solid #e6e6e6;
+}
+.card-center {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.card-body {
+  padding: 10px;
+}
+
+.split-lg {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 980px) {
+  .split-lg > .card {
+    width: 100%;
+    margin-bottom: 20px;
+  }
 }