diff --git a/README.zh-CN.md b/README.zh-CN.md
index a92e180d..c6f4604d 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -68,6 +68,7 @@
 - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
 - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
 - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+- [手摸手，带你用vue撸后台 系列五(v4.0新版本)](https://juejin.im/post/5c92ff94f265da6128275a85)
 - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
 - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
 - [手摸手，带你用合理的姿势使用 webpack4（上）](https://juejin.im/post/5b56909a518825195f499806)
diff --git a/src/components/Share/DropdownMenu.vue b/src/components/Share/DropdownMenu.vue
index ac29bde7..8ad8e56e 100644
--- a/src/components/Share/DropdownMenu.vue
+++ b/src/components/Share/DropdownMenu.vue
@@ -38,7 +38,7 @@ export default {
 </script>
 
 <style lang="scss" >
-$n: 8; //和items.length 相同
+$n: 9; //和items.length 相同
 $t: .1s;
 .share-dropdown-menu {
   width: 250px;
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 936e074c..29988026 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -49,3 +49,11 @@ export default {
 }
 </style>
 
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 15px;
+  }
+}
+</style>
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index 19b7a543..c64a073a 100644
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -149,6 +149,7 @@ export default {
         { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
         { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
         { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
+        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
         { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' }
       ]
     }
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index 4e05d03f..32f924c3 100644
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -19,6 +19,7 @@ export default {
         { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
         { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
         { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
+        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
         { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
         { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
         { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
diff --git a/src/views/profile/components/UserCard.vue b/src/views/profile/components/UserCard.vue
index a8d27513..c2ce1aa8 100644
--- a/src/views/profile/components/UserCard.vue
+++ b/src/views/profile/components/UserCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card>
+  <el-card style="margin-bottom:20px;">
     <div slot="header" class="clearfix">
       <span>About me</span>
     </div>
diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
index 8069a95c..87e4f94f 100644
--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -3,11 +3,11 @@
     <div v-if="user">
       <el-row :gutter="20">
 
-        <el-col :span="6">
+        <el-col :span="6" :xs="24">
           <user-card :user="user" />
         </el-col>
 
-        <el-col :span="18">
+        <el-col :span="18" :xs="24">
           <el-card>
             <el-tabs v-model="activeTab">
               <el-tab-pane label="Activity" name="activity">