diff --git a/src/permission.js b/src/permission.js
index 1655609..3914d97 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login','/public/p','/share'] // no redirect whitelist
+const whiteList = ['/login','/public/articles','/public/article','/share'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   // start progress bar
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
new file mode 100644
index 0000000..3bde072
--- /dev/null
+++ b/src/styles/markdown.scss
@@ -0,0 +1,210 @@
+/deep/ .right-bj {
+  //top: 70px;
+  //background: rgba(255, 255, 255, 0.8);
+  //z-index: 1;
+  transition: all .5s;
+  //border-radius: 5px;
+  //box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
+  width: 285px;
+  float: right;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/deep/ .slimScrollDiv {
+  border-right: 1px solid #e8e8e8;
+  -webkit-transition: all .5s;
+  transition: all .5s;
+  border-radius: 5px;
+  -webkit-box-shadow: rgba(0,0,0,0.1) 0 2px 12px 0;
+  box-shadow: rgba(0,0,0,0.1) 0 2px 12px 0;
+  width: 285px;
+  top: 70px;
+  //bottom: 20px;
+  overflow: auto;
+  float: right;
+  position: fixed;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 768px){
+  /deep/ .right-bj {
+    width: 240px;
+  }
+  /deep/ .slimScrollDiv {
+    position: fixed;
+    max-height: 1000px;
+    width: calc(100% - 2 * 16px);
+    top: 64px;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);
+    visibility: hidden;
+    transform: scale(0,0);
+    transform-origin: right top;
+  }
+}
+
+@media only screen and (min-width: 768px){
+  /deep/ .right-bj {
+    width: 240px;
+  }
+  /deep/ .slimScrollDiv {
+    width: 240px;
+  }
+}
+
+@media only screen and (min-width: 992px){
+  /deep/ .right-bj {
+    width: 240px;
+  }
+  /deep/ .slimScrollDiv {
+    width: 240px;
+  }
+}
+
+@media only screen and (min-width: 1200px){
+  /deep/ .right-bj {
+    width: 240px;
+  }
+  /deep/ .slimScrollDiv {
+    width: 240px;
+  }
+}
+
+@media only screen and (min-width: 1920px){
+  /deep/ .right-bj {
+    width: 285px;
+  }
+  /deep/ .slimScrollDiv {
+    width: 285px;
+  }
+}
+
+/deep/ li {
+  list-style: none;
+}
+
+/deep/ .slimScrollBar {
+  background: rgba(0, 0, 0, 0.3) !important;
+}
+/deep/ .right-menu {
+  width: 100%!important;
+  display: flex;
+  flex-direction: column;
+}
+/deep/ .right-menu .toc-header {
+  padding: calc(16px - 2px);
+  color: #2196f3;
+  font-size: 1.2rem;
+}
+/deep/ .right-menu .toc-header span{
+  margin-left: 10px;
+}
+
+/deep/ .right-menu > div {
+  display: block;
+}
+/deep/ .right-menu > div ul {
+  display: block;
+}
+/deep/ .right-menu > div .menu li {
+  line-height: 40px;
+  padding-left: 40px;
+  margin-top: 4px;
+  margin-bottom: 8px;
+  padding-right: 16px;
+  color: #777;
+  position: relative;
+}
+/deep/ .right-menu > div .menu li a {
+  color: #777;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+/deep/ .right-menu > div .menu li:hover a {
+  color: #13C2C2;
+}
+/deep/ .right-menu > div .menu li.current-menu-item {
+  background: #e6f7ff;
+}
+/deep/ .right-menu > div .menu li.current-menu-item a {
+  color: #13C2C2;
+}
+/deep/ .right-menu > div .menu li.current-menu-item:before {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 2px;
+  background: #13C2C2;
+  height: 100%;
+}
+/deep/ .right-menu > div.titleList {
+  position: relative;
+}
+/deep/ .right-menu > div.titleList li {
+  margin-bottom: 4px;
+  cursor: pointer;
+  padding-right: 16px;
+  font-weight: normal;
+  line-height: 40px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-left: 20px;
+  position: relative;
+  transition: all 0.2s;
+}
+/deep/ .right-menu > div.titleList li a {
+  display: block;
+  transition: all 0.2s;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 14px;
+  color: #333;
+}
+/deep/ .right-menu > div.titleList li.active a {
+  color: #13C2C2;
+}
+/deep/ .right-menu > div.titleList li:hover a {
+  color: #13C2C2;
+}
+/deep/ .right-menu > div.titleList .pl {
+  padding-left: 35px;
+}
+/deep/ .right-menu > div.titleList .pl a {
+  font-size: 13px;
+  color: #777;
+}
+/deep/ .right-menu > div.titleList .j-bj {
+  background: #adccf3;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 0;
+  width: 100%;
+  z-index: -1;
+  transition: all 0.2s;
+}
+/deep/ .right-menu > div.titleList .j-bj:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 2.5px;
+  background: #0070fd;
+  height: 100%;
+}
+/deep/ .right-menu > div a {
+  color: #444;
+  font-size: 15px;
+}
diff --git a/src/views/public/article/index.vue b/src/views/public/article/index.vue
index 4c9aaf5..77f2122 100644
--- a/src/views/public/article/index.vue
+++ b/src/views/public/article/index.vue
@@ -1,11 +1,8 @@
 <template>
   <div v-wechat-title="pageTitle">
     <al-back-top></al-back-top>
-    <div class="content">
-      <el-row :gutter="0">
-        <el-col :xs="0" :sm="1" :md="4" :lg="5" :xl="6"><div style="color: white">c</div></el-col>
-        <el-col :xs="24" :sm="22" :md="16" :lg="14" :xl="12">
-          <el-main class="main-content">
+    <div class="body-wrapper">
+          <el-main class="l_main">
             <mavon-editor
               ref="md"
               v-if="!showList"
@@ -16,22 +13,19 @@
               defaultOpen="preview"
             />
           </el-main>
-        </el-col>
-        <el-col :xs="0" :sm="1" :md="4" :lg="5" :xl="6">
-        </el-col>
-      </el-row>
-      <div v-show="titleList.length > 0" class="right-bj">
-        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 662px;">
-          <div class="right-menu" id="inner-content-div" style="overflow: hidden; width: auto; height: 662px;">
-            <div class="toc-content">
-              <header class="toc-header"><svg-icon icon-class="contents"></svg-icon><span>目录</span></header>
-            </div>
-            <div class="j-titleList titleList">
-              <div class="j-bj" style="height: 40px; top: 0px;"></div>
+
+          <div v-show="titleList.length > 0" class="right-bj">
+            <div class="slimScrollDiv">
+              <div class="right-menu">
+                <div class="toc-content">
+                  <header class="toc-header"><svg-icon icon-class="contents"></svg-icon><span>目录</span></header>
+                </div>
+                <div class="j-titleList titleList">
+                  <div class="j-bj" style="height: 40px; top: 0;"></div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
     </div>
   </div>
 </template>
@@ -139,37 +133,35 @@
 <style lang="scss" scoped>
   @import "src/styles/markdown";
 
+  .body-wrapper {
+    position: relative;
+    display: flex;
+    width: 100%;
+    max-width: 1080px;
+    margin: 0 auto;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: stretch;
+  }
+
   /deep/ .v-note-wrapper {
     position: unset;
   }
 
-  @media only screen and (max-width: 768px){
-    .el-main {
-      padding: 20px 0px 20px 0px;
+  .l_main {
+    width: calc(100% - 1 * 285px);
+    float: left;
+  }
+
+  @media screen and (max-width: 1440px){
+    .l_main {
+      width: calc(100% - 1 * 240px);
     }
   }
 
-  @media only screen and (min-width: 768px){
-    .el-main {
-      padding: 20px;
-    }
-  }
-
-  @media only screen and (min-width: 992px){
-    .el-main {
-      padding: 20px;
-    }
-  }
-
-  @media only screen and (min-width: 1200px){
-    .el-main {
-      padding: 20px;
-    }
-  }
-
-  @media only screen and (min-width: 1920px){
-    .el-main {
-      padding: 20px;
+  @media screen and (max-width: 768px){
+    .l_main {
+      width: 100%;
     }
   }