lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改：调整文章界面内容位置(有目录和无目录时不同)

Browse Source
This commit is contained in:
jmal 2020-10-26 11:04:16 +08:00
parent 767364e787
commit a6930d2062
3 changed files with 8 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/styles/markdown.scss
View File

@ -349,7 +349,7 @@
/deep/ .slimScrollDiv,.l_side {
transform: translateX(50px);
}
/deep/ .article_l_main {
/deep/ .article_l_main[content=show] {
transform: translateX(50px);
}
}
@ -358,7 +358,7 @@
/deep/ .slimScrollDiv,.l_side {
transform: translateX(80px);
}
/deep/ .article_l_main {
/deep/ .article_l_main[content=show] {
transform: translateX(80px);
}
}
@ -367,7 +367,7 @@
/deep/ .slimScrollDiv,.l_side {
transform: translateX(120px);
}
/deep/ .article_l_main {
/deep/ .article_l_main[content=show] {
transform: translateX(120px);
}
}

11
src/views/public/article/index.vue
View File

@ -44,7 +44,7 @@
</div>
</div>
<div class="body-wrapper">
<el-main id="main_body" class="l_main article_l_main">
<el-main id="main_body" :content="titleList.length > 0?'show':'hide'" class="l_main article_l_main">
<mavon-editor
ref="md"
v-if="!showList"
@ -139,18 +139,11 @@
this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
this.content = res.data.contentText
this.$nextTick(()=>{ // DOM更新之后获取子元素
// 在文章最前面添加更新时间
let main = document.querySelector('.v-show-content.scroll-style.scroll-style-border-radius')
let p = document.createElement("p")
// let p = "<p class=\"note note-info\">\n" +
// " \n" +
// " 本文最后更新于：2020年9月16日 上午\n" +
// " \n" +
// " </p>"
p.className = "note-update-date"
p.innerText = `本文最后更新于：${this.file.updateDate}`
// main.insertAdjacentHTML('beforebegin', '<b>复制代码</b>');
// main.childNodes[0].insertAdjacentHTML('beforebegin', '<p class="note note-info"></p>')
main.insertBefore(p , main.childNodes[0])
// 动态打字效果

5
src/views/public/articles/index.vue
View File

@ -20,8 +20,9 @@
</div>
</div>
<div class="backstretch">
<!-- <img src="~@/assets/img/widget-img1.jpg">-->
<img class="blog-background" src="https://images.unsplash.com/photo-1603378991000-2dda90e8563a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3200&q=80">
<!--<img src="~@/assets/img/widget-img1.jpg">-->
<img class="blog-background" src="https://images.unsplash.com/photo-1603378991000-2dda90e8563a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3200&q=80"
onerror="this.src='~@/assets/img/widget-img1.jpg'">
<!--<el-image :src="backImageSrc">-->
<!--</el-image>-->
</div>