From 730049e93d76087595117b729b590d71da6f261a Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Mon, 9 Mar 2020 23:27:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9markdown=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/permission.js                  |  2 +-
 src/styles/markdown.scss           | 90 +++++++++++++++++++++---------
 src/views/public/article/index.vue | 78 ++++++++++++--------------
 3 files changed, 101 insertions(+), 69 deletions(-)

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
index 85c9ae3..3bde072 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@@ -1,36 +1,88 @@
+/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 {
-    right: 0;
-    width: 0;
+    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 {
-    right: 0;
-    width: 0;
+    width: 240px;
+  }
+  /deep/ .slimScrollDiv {
+    width: 240px;
   }
 }
 
 @media only screen and (min-width: 992px){
   /deep/ .right-bj {
-    right: 0;
-    width: 0;
-}
+    width: 240px;
+  }
+  /deep/ .slimScrollDiv {
+    width: 240px;
+  }
 }
 
 @media only screen and (min-width: 1200px){
   /deep/ .right-bj {
-    right: 0%;
-    width: 18%;
+    width: 240px;
+  }
+  /deep/ .slimScrollDiv {
+    width: 240px;
   }
 }
 
 @media only screen and (min-width: 1920px){
   /deep/ .right-bj {
-    right: 7%;
-    width: 15%;
+    width: 285px;
+  }
+  /deep/ .slimScrollDiv {
+    width: 285px;
   }
 }
 
@@ -38,25 +90,13 @@
   list-style: none;
 }
 
-/deep/ .right-bj {
-  position: fixed;
-  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) 0px 2px 12px 0px;
-}
-/deep/ .slimScrollDiv {
-  width: 100%!important;
-  border-right: 1px solid #e8e8e8;
-  //margin-top: 104px;
-}
 /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);
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%;
     }
   }