feat: add yber security record

and fix home-blog style

Author: reco_luan

components/Footer.vue

@@ -6,7 +6,7 @@
     </span>
     <span v-if="$themeConfig.record">
       <i class="iconfont reco-beian"></i>
-      <a>{{ $themeConfig.record }}</a>
+      <a :href="$themeConfig.recordLink || '#'">{{ $themeConfig.record }}</a>
     </span>
     <span>
       <i class="iconfont reco-copyright"></i>
@@ -21,6 +21,10 @@
       <i class="iconfont reco-eye"></i>
       <AccessNumber idVal="/" />
     </span>
+    <p class="cyber-security" v-if="$themeConfig.cyberSecurityRecord">
+      <img src="https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png" alt="">
+      <a :href="$themeConfig.cyberSecurityLink || '#'">{{ $themeConfig.cyberSecurityRecord }}</a>
+    </p>
   </div>
 </template>
 
@@ -36,16 +40,30 @@ export default {
 
 <style lang="stylus" scoped>
   .footer-wrapper {
-    padding: 2.5rem;
+    padding: 1.5rem 2.5rem;
     border-top: 1px solid var(--border-color);
     text-align: center;
     color: lighten($textColor, 25%);
+    a {
+      font-size 14px
+    }
     > span {
       margin-left 1rem
       > i {
         margin-right .5rem
       }
     }
+    .cyber-security {
+      img {
+        margin-right .5rem
+        width 20px
+        height 20px
+        vertical-align middle
+      }
+      a {
+        vertical-align middle
+      }
+    }
   }
 
 @media (max-width: $MQMobile) {

components/HomeBlog.vue

@@ -213,14 +213,14 @@ export default {
     align-items: flex-start;
     margin 20px auto 0
     max-width 1126px
-    .abstract-wrapper {
-      .abstract-item:last-child {
-        margin-bottom: 0px;
-      }
-    }
     .blog-list {
       flex auto
-      width 100%
+      width 0
+      .abstract-wrapper {
+        .abstract-item:last-child {
+          margin-bottom: 0px;
+        }
+      }
     }
     .info-wrapper {
       position: -webkit-sticky;