修改：文章界面样式
This commit is contained in:
jmal
parent
70d10901bf
commit
1eb8a7b1dd
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -6,13 +6,30 @@
|
||||
<al-back-top></al-back-top>
|
||||
|
||||
<div id="top" style="display: block;" class="animateIn">
|
||||
<div class="navigation animated fadeIn fast delay-1s">
|
||||
<div class="navbar animated fadeIn fast delay-1s">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand text-brand">JMAL'S</a>
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item dropdown"></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav side-toolbar-list">
|
||||
<li class="nav-item">
|
||||
<a id="nav-side-toolbar-github" href="https://github.com/jamebal" title="Github" target="_blank">fff<i class="fa fa-github"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <a href="/public/articles"><svg-icon id="home-icon" class="icon-home" icon-class="home" ></svg-icon></a>-->
|
||||
<!-- <div id="play-icon" title="Play/Pause" class="iconfont icon-play"></div>-->
|
||||
<!-- <h3 class="subtitle" style="display: block;">{{pageTitle}}</h3>-->
|
||||
</div>
|
||||
<div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
|
||||
</div>
|
||||
@ -27,7 +44,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-wrapper">
|
||||
<el-main class="l_main">
|
||||
<el-main id="main_body" class="l_main">
|
||||
<mavon-editor
|
||||
ref="md"
|
||||
v-if="!showList"
|
||||
@ -124,6 +141,19 @@
|
||||
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])
|
||||
|
||||
// 动态打字效果
|
||||
this.dynamicTyping()
|
||||
|
||||
@ -132,15 +162,23 @@
|
||||
this.pageTitle = hTag.innerText
|
||||
}
|
||||
|
||||
let a = $('.el-main').html().match(/<h1.*?<\/h1>|<h2.*?<\/h2>|<h3.*?<\/h3>|<h4.*?<\/h4>/g);
|
||||
let a = $('.el-main').html().match(/<h1.*?<\/h1>|<h2.*?<\/h2>|<h3.*?<\/h3>|<h4.*?<\/h4>|<h5.*?<\/h5>|<h6.*?<\/h6>/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] = '<li first>' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||
a[i] = '<li first class="h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||
}else if (a[i].indexOf('h2') !== -1) {
|
||||
a[i] = '<li class="pl">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
|
||||
a[i] = '<li class="pl h-2">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
|
||||
}else if (a[i].indexOf('h3') !== -1) {
|
||||
a[i] = '<li class="pl h-3">' + a[i].replace(/<h3>|<\/h3>/g, '') + '</li>'
|
||||
}else if (a[i].indexOf('h4') !== -1) {
|
||||
a[i] = '<li class="pl h-4">' + a[i].replace(/<h4>|<\/h4>/g, '') + '</li>'
|
||||
}else if (a[i].indexOf('h5') !== -1) {
|
||||
a[i] = '<li class="pl h-5">' + a[i].replace(/<h5>|<\/h5>/g, '') + '</li>'
|
||||
}else if (a[i].indexOf('h6') !== -1) {
|
||||
a[i] = '<li class="pl h-6">' + a[i].replace(/<h6>|<\/h6>/g, '') + '</li>'
|
||||
} else {
|
||||
a[i] = '<li>' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<section class="meta">
|
||||
<div class="meta" id="header-meta">
|
||||
<h2 class="title">
|
||||
<a :href="$route.path+'/article?mark='+article.id" @click="clearCooike">{{article.name}}</a>
|
||||
<a :href="$route.path+'/article?mark='+article.id">{{article.name}}</a>
|
||||
</h2>
|
||||
<div class="new-meta-box">
|
||||
<div class="new-meta-item author">
|
||||
@ -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
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user