From 1eb8a7b1dd3fdb5b5599d736f44293d89e0fcd4e Mon Sep 17 00:00:00 2001 From: jmal Date: Sun, 25 Oct 2020 13:23:00 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E6=96=87=E7=AB=A0?= =?UTF-8?q?=E7=95=8C=E9=9D=A2=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/article.scss | 57 ++++-------- src/styles/markdown.scss | 134 +++++++++++++++++++++++++++- src/views/public/article/index.vue | 54 +++++++++-- src/views/public/articles/index.vue | 14 +-- 4 files changed, 195 insertions(+), 64 deletions(-) diff --git a/src/styles/article.scss b/src/styles/article.scss index a62f21e..b1fb57b 100644 --- a/src/styles/article.scss +++ b/src/styles/article.scss @@ -74,45 +74,9 @@ } } -/deep/ .navigation { - padding: .75rem 1rem; - position: fixed; - display: flex; - color: rgba(0,0,0,0.9); - font-family: 'Mirages Custom', 'Merriweather', 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'Segoe UI Emoji', 'Segoe UI Symbol', Helvetica, Arial, sans-serif; - .container-fluid { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; - width: 100%; - padding-right: 1rem; - padding-left: 1rem; - margin-right: auto; - margin-left: auto; - } - .navbar-brand { - display: inline-block; - padding: 0; - margin-right: 1rem; - font-size: 1.25rem; - font-weight: 700; - line-height: 1.5; - white-space: nowrap; - max-width: 180px; - overflow: hidden; - text-overflow: ellipsis; - } - .navbar-brand.text-brand { - padding-top: 0.3125rem; - padding-bottom: 0.3125rem; - } - a { - color: rgba(0,0,0,0.9); +@media (min-width: 576px) { + .navbar>.container-fluid { + max-width: 540px; } } @@ -128,7 +92,20 @@ .article-header .inner { padding-top: 3.75rem; } - .container-fluid { + .navbar>.container-fluid { max-width: 720px; } } + +@media (min-width: 992px) { + .navbar>.container-fluid { + max-width: 960px; + } +} + +@media (min-width: 1210px) { + .navbar>.container-fluid { + max-width: 1170px; + } +} + diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss index 9c7bb70..05cdf86 100644 --- a/src/styles/markdown.scss +++ b/src/styles/markdown.scss @@ -12,10 +12,11 @@ --maxwidth: 1284px; } .scrollbar { + margin-top: .75rem; + margin-left: -1rem; position: fixed; height: 3px; width: 10px; - top: 50px; background-color: #50bcb6; -webkit-transition: width 0.5s ease; -moz-transition: width 0.5s ease; @@ -28,8 +29,8 @@ background: linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important; } /deep/ #top { + padding: .75rem 1rem; line-height: 2; - height: 50px; text-align: center; width: 100%; position: fixed; @@ -44,6 +45,99 @@ -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); background-color: rgba(255,255,255,0.72); + + .navbar { + display: flex; + color: rgba(0,0,0,0.9); + font-family: 'Mirages Custom', 'Merriweather', 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'Segoe UI Emoji', 'Segoe UI Symbol', Helvetica, Arial, sans-serif; + .container-fluid { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; + padding-right: 1rem; + padding-left: 1rem; + margin-right: auto; + margin-left: auto; + + .mr-auto { + margin-right: auto !important; + } + + .navbar-nav { + display: -ms-flexbox; + display: flex !important; + flex-direction: row; + padding-left: 0; + margin-bottom: 0; + list-style: none; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + .nav-item { + margin: 0 10px; + } + .side-toolbar-list { + text-align: center; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + li a { + display: inline-block; + height: 2.5rem; + width: 2.5rem; + line-height: 2.5rem; + border-radius: 100%; + font-size: .75rem; + background: #2c2a2a; + color: #ccc; + vertical-align: middle; + -webkit-transition: 0.3s ease all; + -moz-transition: 0.3s ease all; + -ms-transition: 0.3s ease all; + -o-transition: 0.3s ease all; + transition: 0.3s ease all; + } + } + } + + .navbar-collapse { + display: flex !important; + flex-basis: auto; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-align: center; + align-items: center; + line-height: 2; + } + + } + .navbar-brand { + display: inline-block; + padding: 0; + margin-right: 1rem; + font-size: 1.25rem; + font-weight: 700; + line-height: 1.5; + white-space: nowrap; + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + } + .navbar-brand.text-brand { + padding-top: 0.3125rem; + padding-bottom: 0.3125rem; + } + a { + color: rgba(0,0,0,0.9); + } + } + .bar { position: absolute; height: 100%; @@ -123,6 +217,14 @@ .v-note-panel { border-radius: 1rem; } + .note-update-date { + padding: 0.75rem; + border-left: 0.35rem solid; + border-radius: 0.25rem; + margin: 1.5rem 0; + border-color: #0052d4; + background: linear-gradient(to right, #5d9eea, #afcafd); + } } @@ -348,8 +450,32 @@ /deep/ .right-menu > div.titleList li:hover a { color: #13C2C2; } -/deep/ .right-menu > div.titleList .pl { - padding-left: 35px; +/deep/ .right-menu > div.titleList { + .h-1 { + padding-left: 10px; + font-size: 1.3rem; + } + .h-2 { + padding-left: 20px; + font-size: 1.25rem; + } + .h-3 { + padding-left: 30px; + font-size: 1.125rem; + } + .h-4 { + padding-left: 40px; + font-size: 0.95rem; + } + .h-5 { + padding-left: 50px; + font-size: 0.875rem; + } + .h-6 { + padding-left: 60px; + font-size: .85em; + color: #6a737d; + } } /deep/ .right-menu > div.titleList .pl a { font-size: 13px; diff --git a/src/views/public/article/index.vue b/src/views/public/article/index.vue index 8b44d63..88523f5 100644 --- a/src/views/public/article/index.vue +++ b/src/views/public/article/index.vue @@ -6,13 +6,30 @@
-
+
JMAL'S +
+ + + +
- - -
@@ -27,7 +44,7 @@
- + { // DOM更新之后获取子元素 + let main = document.querySelector('.v-show-content.scroll-style.scroll-style-border-radius') + let p = document.createElement("p") + // let p = "

\n" + + // " \n" + + // " 本文最后更新于：2020年9月16日 上午\n" + + // " \n" + + // "

" + p.className = "note-update-date" + p.innerText = `本文最后更新于：${this.file.updateDate}` + // main.insertAdjacentHTML('beforebegin', '复制代码'); + // main.childNodes[0].insertAdjacentHTML('beforebegin', '

') + main.insertBefore(p , main.childNodes[0]) + // 动态打字效果 this.dynamicTyping() @@ -132,15 +162,23 @@ this.pageTitle = hTag.innerText } - let a = $('.el-main').html().match(/|||/g); + let a = $('.el-main').html().match(/|||||/g); if(a && a.length >0 ){ a = a.splice(a.length/2,a.length) for (let i = 0; i < a.length; i++) { a[i] = a[i].replace(/id="/g, 'href="#') if (i ===0 && a[i].indexOf('h1') !== -1) { - a[i] = '
  • ' + a[i].replace(/

    |<\/h1>/g, '') + '

    • ' + a[i] = '
  • ' + a[i].replace(/

    |<\/h1>/g, '') + '

    • ' }else if (a[i].indexOf('h2') !== -1) { - a[i] = '
  • ' + a[i].replace(/

    |<\/h2>/g, '') + '

    • ' + a[i] = '
  • ' + a[i].replace(/

    |<\/h2>/g, '') + '

    • ' + }else if (a[i].indexOf('h3') !== -1) { + a[i] = '
  • ' + a[i].replace(/

    |<\/h3>/g, '') + '

    • ' + }else if (a[i].indexOf('h4') !== -1) { + a[i] = '
  • ' + a[i].replace(/

    |<\/h4>/g, '') + '

    • ' + }else if (a[i].indexOf('h5') !== -1) { + a[i] = '
  • ' + a[i].replace(/
    |<\/h5>/g, '') + '
    • ' + }else if (a[i].indexOf('h6') !== -1) { + a[i] = '
  • ' + a[i].replace(/
    |<\/h6>/g, '') + '
    • ' } else { a[i] = '
  • ' + a[i].replace(/

    |<\/h1>/g, '') + '

    • ' } diff --git a/src/views/public/articles/index.vue b/src/views/public/articles/index.vue index cfd2544..9847728 100644 --- a/src/views/public/articles/index.vue +++ b/src/views/public/articles/index.vue @@ -35,7 +35,7 @@

    - {{article.name}} + {{article.name}}

    @@ -222,17 +222,6 @@ } }, methods: { - clearCooike() { - // let name = "scrollTop" - // var exp = new Date(); - // exp.setTime(exp.getTime() - 1); - // var cval=getCookie(name); - // if(cval!=null){ - // document.cookie= name + "="+cval+";expires="+exp.toGMTString(); - // } - document.cookie = "scrollTop=" + scrollPos - alert(document.cookie) - }, getCookie (name){ var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) @@ -245,6 +234,7 @@ getMarkDown() { markdownApi.getMarkdown().then((res) => { this.articleList = res.data + console.log(this.articleList) this.$nextTick(() => { this.isLoading = false })