fix: Optimize style

reco_luan · reco_luan · commit 4ed1917c32c1 · 2019-12-19T23:31:41.000+08:00
1. searchbox
2. pagation
3. add personal info at siderbar
diff --git a/components/HomeBlog.vue b/components/HomeBlog.vue
@@ -47,19 +47,7 @@
             @getCurrentPage="getCurrentPage" />
         </div>
         <div class="info-wrapper">
-          <img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
-          <h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
-          <div class="num">
-            <div>
-              <h3>{{$recoPosts.length}}</h3>
-              <h6>文章</h6>
-            </div>
-            <div>
-              <h3>{{$tags.list.length}}</h3>
-              <h6>标签</h6>
-            </div>
-          </div>
-          <hr>
+          <PersonalInfo/>
           <h4><i class="iconfont reco-category"></i> 分类</h4>
           <ul class="category-wrapper">
             <li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
@@ -90,12 +78,13 @@ import FriendLink from '@theme/components/FriendLink'
 import NoteAbstract from '@theme/components/NoteAbstract'
 import pagination from '@theme/mixins/pagination'
 import ModuleTransition from '@theme/components/ModuleTransition'
+import PersonalInfo from '@theme/components/PersonalInfo'
 import { getOneColor } from '@theme/helpers/other'
 import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
   mixins: [pagination, moduleTransitonMixin],
-  components: { NoteAbstract, TagList, FriendLink, ModuleTransition },
+  components: { NoteAbstract, TagList, FriendLink, ModuleTransition, PersonalInfo },
   data () {
     return {
       recoShow: false,
@@ -248,39 +237,6 @@ export default {
       &:hover {
         box-shadow: var(--box-shadow-hover);
       }
-      .personal-img {
-        display block
-        margin 2rem auto
-        width 8rem
-        height 8rem
-        border-radius 50%
-      }
-      .name {
-        text-align center
-        color var(--text-color)
-      }
-      .num {
-        display flex
-        margin 0 auto 1rem
-        width 80%
-        > div {
-          text-align center
-          flex auto
-          &:first-child {
-            border-right 1px solid #333
-          }
-          h3 {
-            line-height auto
-            margin 0 0 .6rem
-            color var(--text-color)
-          }
-          h6 {
-            line-height auto
-            color var(--text-color)
-            margin 0
-          }
-        }
-      }
       h4 {
         color var(--text-color)
       }
diff --git a/components/Navbar.vue b/components/Navbar.vue
@@ -115,10 +115,10 @@ $navbar-horizontal-padding = 1.5rem
     right $navbar-horizontal-padding
     top $navbar-vertical-padding
     display flex
+    background-color var(--background-color)
     .search-box
       flex: 0 0 auto
       vertical-align top
-      margin-right 1rem
 
 @media (max-width: $MQMobile)
   .navbar
diff --git a/components/PersonalInfo.vue b/components/PersonalInfo.vue
@@ -0,0 +1,55 @@
+<template>
+<div class="personal-info-wrapper">
+  <img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
+  <h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
+  <div class="num">
+    <div>
+      <h3>{{$recoPosts.length}}</h3>
+      <h6>文章</h6>
+    </div>
+    <div>
+      <h3>{{$tags.list.length}}</h3>
+      <h6>标签</h6>
+    </div>
+  </div>
+  <hr>
+</div>  
+</template>
+
+<style lang="stylus" scoped>
+.personal-info-wrapper {
+  .personal-img {
+    display block
+    margin 2rem auto
+    width 8rem
+    height 8rem
+    border-radius 50%
+  }
+  .name {
+    text-align center
+    color var(--text-color)
+  }
+  .num {
+    display flex
+    margin 0 auto 1rem
+    width 80%
+    > div {
+      text-align center
+      flex auto
+      &:first-child {
+        border-right 1px solid #333
+      }
+      h3 {
+        line-height auto
+        margin 0 0 .6rem
+        color var(--text-color)
+      }
+      h6 {
+        line-height auto
+        color var(--text-color)
+        margin 0
+      }
+    }
+  }
+}
+</style>
diff --git a/components/SearchBox.vue b/components/SearchBox.vue
@@ -221,6 +221,7 @@ export default {
     height 2rem
 @media (max-width: $MQNarrow) and (min-width: $MQMobile)
   .search-box
+    margin-right 0
     .suggestions
       left 0
 @media (max-width: $MQMobile)
diff --git a/components/Sidebar.vue b/components/Sidebar.vue
@@ -1,5 +1,6 @@
 <template>
   <aside class="sidebar">
+    <PersonalInfo/>
     <NavLinks/>
     <slot name="top"/>
     <SidebarLinks :depth="0" :items="items"/>
@@ -9,19 +10,22 @@
 
 <script>
 import SidebarLinks from '@theme/components/SidebarLinks'
+import PersonalInfo from '@theme/components/PersonalInfo'
 import NavLinks from '@theme/components/NavLinks'
 
 export default {
   name: 'Sidebar',
 
-  components: { SidebarLinks, NavLinks },
+  components: { SidebarLinks, NavLinks, PersonalInfo },
 
   props: ['items']
 }
 </script>
 
 <style lang="stylus">
 .sidebar
+  .personal-info-wrapper
+    display none
   ul
     padding 0
     margin 0
@@ -50,6 +54,8 @@ export default {
 
 @media (max-width: $MQMobile)
   .sidebar
+    .personal-info-wrapper
+      display block
     .nav-links
       display block
       .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
diff --git a/layouts/Category.vue b/layouts/Category.vue
@@ -31,7 +31,6 @@
       <!-- 分页 -->
       <ModuleTransition delay="0.16">
         <pagation
-          v-show="recoShowModule"
           class="pagation"
           :total="posts.length"
           :currentPage="currentPage"
diff --git a/layouts/Tag.vue b/layouts/Tag.vue
@@ -24,7 +24,6 @@
       <!-- 分页 -->
       <ModuleTransition delay="0.16">
         <pagation
-          v-show="recoShowModule"
           class="pagation"
           :total="posts.length"
           :currentPage="currentPage"
diff --git a/layouts/Tags.vue b/layouts/Tags.vue
@@ -23,7 +23,6 @@
       <!-- 分页 -->
       <ModuleTransition delay="0.16">
         <pagation
-          v-show="recoShowModule"
           class="pagation"
           :total="$recoPosts.length"
           :currentPage="currentPage"
diff --git a/layouts/TimeLines.vue b/layouts/TimeLines.vue
@@ -71,6 +71,7 @@ export default {
     position: absolute;
     top: 14px;
     left: 0;
+    z-index: -1;
     margin-left: -2px;
     width: 4px;
     height: 100%;
@@ -84,7 +85,7 @@ export default {
       content: " ";
       position: absolute;
       z-index 2;
-      left: -19px;
+      left: -20px;
       top: 50%;
       margin-left: -4px;
       margin-top: -4px;
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
   "_from": "vuepress-theme-reco@0.2.1",
   "_resolved": "http://registry.npm.taobao.org/vuepress-theme-reco/download/vuepress-theme-reco-0.2.1.tgz",
   "dependencies": {
-    "@vuepress-reco/vuepress-plugin-back-to-top": "1.0.7",
+    "@vuepress-reco/vuepress-plugin-back-to-top": "1.0.8",
     "@vuepress-reco/vuepress-plugin-extract-code": "1.0.3",
     "@vuepress-reco/vuepress-plugin-loading-page": "1.0.5",
     "@vuepress-reco/vuepress-plugin-pagation": "1.0.6",
