From c5ec212353dd6008419035a0e9fa94c37408009f Mon Sep 17 00:00:00 2001 From: jmal Date: Fri, 23 Oct 2020 18:05:42 +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 --- package.json | 2 +- src/main.js | 4 +- src/styles/article.scss | 133 +++++++++++++++++++++++++++++ src/styles/markdown.scss | 29 ++++--- src/views/markdown/index.vue | 10 ++- src/views/public/article/index.vue | 80 ++++++++++------- 6 files changed, 211 insertions(+), 47 deletions(-) create mode 100644 src/styles/article.scss diff --git a/package.json b/package.json index 36c04fa..e3318b7 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ }, "dependencies": { "@moefe/vue-aplayer": "^2.0.0-beta.5", - "ant-design-vue": "^1.6.2", + "ant-design-vue": "^1.6.5", "axios": "0.18.1", "clipboard": "^2.0.6", "cropperjs": "^1.5.6", diff --git a/src/main.js b/src/main.js index cbb0350..9b3c533 100644 --- a/src/main.js +++ b/src/main.js @@ -19,8 +19,8 @@ import { Popup,Search, Button, Cell, CellGroup, Image, List, PullRefresh, SwipeC // ant-design-vue -// import { Tree } from 'ant-design-vue'; -// Vue.use(Tree) +import { Affix } from 'ant-design-vue'; +Vue.use(Affix) import contentmenu from 'v-contextmenu' import 'v-contextmenu/dist/index.css' diff --git a/src/styles/article.scss b/src/styles/article.scss new file mode 100644 index 0000000..cbd50f3 --- /dev/null +++ b/src/styles/article.scss @@ -0,0 +1,133 @@ +/deep/ .el-backtop { + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(1px); + background-color: rgba(255,255,255,0.5); + color: #272936; +} +.article-header { + height: 640px; + min-height: 12.5px; + position: relative; + display: table; + text-align: center; + overflow: hidden; + color: #fff; + width: -webkit-calc(100% - -0.0625rem); + width: calc(100% - -0.0625rem); + -webkit-transition: 1s ease background-color; + -moz-transition: 1s ease background-color; + -ms-transition: 1s ease background-color; + -o-transition: 1s ease background-color; + transition: 1s ease background-color; + .article-background { + display: block; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + position: absolute; + left: 0; + top: 0; + overflow: hidden; + opacity: 1; + -webkit-transition: 1s ease opacity; + -moz-transition: 1s ease opacity; + -ms-transition: 1s ease opacity; + -o-transition: 1s ease opacity; + transition: 1s ease opacity; + } +} + +.inner { + display: table-cell; + position: relative; + z-index: 10; + width: 100%; + left: -1px; + vertical-align: middle; +} + +.blog-title { + font-size: 2.5rem; + line-height: 1.5; + margin-bottom: .75rem; +} + +@media not all, screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all { + .blog-description.font-mono { + font-family: Consolas,Menlo,Monaco,"lucida console","Liberation Mono","Courier New","andale mono",monospaceX,monospace,sans-serif; + font-size: 1.1125rem; + } +} + +.typed-cursor { + animation: typedjsBlink 0.7s infinite; + -webkit-animation: typedjsBlink 0.7s infinite; + animation: typedjsBlink 0.7s infinite; +} + +@keyframes typedjsBlink { + 50% { + opacity: 0.0; + } +} + +/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 screen and (max-width: 759px) { + .blog-title { + font-size: 1.75rem; + font-weight: 400; + margin-bottom: .5rem; + } +} + +@media (min-width: 768px){ + .article-header .inner { + padding-top: 3.75rem; + } + .container-fluid { + max-width: 720px; + } +} diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss index eb6ff40..9c7bb70 100644 --- a/src/styles/markdown.scss +++ b/src/styles/markdown.scss @@ -34,7 +34,7 @@ width: 100%; position: fixed; top: 0; - z-index: 10; + z-index: 891; display: none; /* border-bottom: 1px solid #201c29; */ -webkit-transition: all 350ms ease-in-out; @@ -117,10 +117,18 @@ /deep/ .v-note-wrapper { position: unset; + .show { + border-radius: 1rem; + } + .v-note-panel { + border-radius: 1rem; + } } + .l_main { - padding: 70px 16px 16px; + padding: 0 16px 16px; + margin-top: -80px; } .l_main { @@ -170,13 +178,9 @@ -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; + margin-top: 67px; 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; @@ -185,7 +189,8 @@ position: sticky; top: 0; z-index: 1; - box-shadow: -4px -9px 20px #000; + -webkit-box-shadow: 0px -14px 20px #000; + box-shadow: 0px -14px 20px #000; -webkit-backdrop-filter: saturate(360%) blur(8px); backdrop-filter: saturate(360%) blur(8px); background-color: rgba(255,255,255,0.72); @@ -263,9 +268,9 @@ flex-direction: column; } /deep/ .right-menu .toc-header { - padding: calc(16px - 2px); + padding: calc(11px - 2px); color: #2196f3; - font-size: 1.2rem; + font-size: 1rem; } /deep/ .right-menu .toc-header span{ margin-left: 10px; @@ -320,7 +325,7 @@ cursor: pointer; padding-right: 16px; font-weight: normal; - line-height: 40px; + line-height: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -384,7 +389,7 @@ } /deep/ .markdown-body { - + border-radius: 0.5rem; blockquote { padding: 0.8em 1em; color: #656565; diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue index 4fbdb78..a6d4e65 100644 --- a/src/views/markdown/index.vue +++ b/src/views/markdown/index.vue @@ -35,8 +35,13 @@ :with-header="false">

更多设置

-

文章标题：

- +

文章封面：

+ +
@@ -75,6 +80,7 @@ }).then((res) => { this.content = res.data.contentText this.filename = res.data.name.split('.md')[0] + this.markdownCover = res.data.cover this.storageLocation = res.data.path }) } diff --git a/src/views/public/article/index.vue b/src/views/public/article/index.vue index 950eb1d..ef65a1a 100644 --- a/src/views/public/article/index.vue +++ b/src/views/public/article/index.vue @@ -6,14 +6,26 @@
-
- -
-

{{pageTitle}}

+
+ JMAL'S +
+ + +
+
+
+
+
{{pageTitle}}_
+
+ + · {{file.uploadDate}} +
+
+
-
-
-
-
目录
-
-
-
+ +
+
+
+
目录
+
+
+
+
-
+
@@ -57,6 +71,7 @@ components: { AlBackTop, AlLoading }, data() { return { + file: {}, isLoading: true, pageTitle: "文章", showList: true, @@ -67,7 +82,8 @@ titleList: [], tocMaxHeight: 500, befterScrollTop: 0, - maxMenuHeight: document.documentElement.clientHeight - 155 + maxMenuHeight: document.documentElement.clientHeight - 155, + top: 70 } }, mounted() { @@ -84,24 +100,33 @@ onScroll() { // let befterScrollTop = document.documentElement.scrollTop; }, + dynamicTyping() { + let divTyping = document.getElementById('article-title') + let i = 0,timer = 0,str = this.pageTitle + function typing () { + if (i <= str.length) { + divTyping.innerHTML = str.slice(0, i++) + timer = setTimeout(typing, 100) + } else { + // 结束打字 + clearTimeout(timer) + } + } + typing() + }, getMarkDown() { markdownApi.getMarkdown({ mark: this.$route.query.mark }).then((res) => { + this.file = res.data const filename = res.data.name this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1) this.content = res.data.contentText - // setTimeout(function () { - // // 刷新界面 回到上次滚动条的位置 - // if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) { - // const arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置 - // document.documentElement.scrollTop = parseInt(arr[1]); - // document.body.scrollTop = parseInt(arr[1]); - // } - // },10) - this.$nextTick(()=>{ // DOM更新之后获取子元素 + // 动态打字效果 + this.dynamicTyping() + const hTag = document.querySelector("h1"); if(hTag){ this.pageTitle = hTag.innerText @@ -145,7 +170,7 @@ for (let i = 0; i < a.length; i++) { if ($(window).scrollTop() > $('#' + a[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) { $('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active'); - $('.j-bj').css('top', i * 44) + $('.j-bj').css('top', i * 34) } } @@ -214,10 +239,5 @@ @import "src/styles/index"; @import "src/styles/markdown"; @import "src/styles/articles"; - /deep/ .el-backtop { - -webkit-backdrop-filter: saturate(180%) blur(20px); - backdrop-filter: saturate(180%) blur(1px); - background-color: rgba(255,255,255,0.5); - color: #272936; - } + @import "src/styles/article";