修改：文章界面样式
This commit is contained in:
jmal
parent
59286b69d7
commit
c5ec212353
@ -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",
|
||||
|
||||
@ -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'
|
||||
|
||||
133
src/styles/article.scss
Normal file
133
src/styles/article.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -35,8 +35,13 @@
|
||||
:with-header="false">
|
||||
<div class="more-setting">
|
||||
<h2>更多设置</h2>
|
||||
<p class="mark-setting-label">文章标题：</p>
|
||||
<el-input class="articles-title" type="textarea" placeholder="输入图片URL" v-model="markdownCover"/>
|
||||
<p class="mark-setting-label">文章封面：</p>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 8}"
|
||||
placeholder="输入图片URL"
|
||||
v-model="markdownCover">
|
||||
</el-input>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
@ -6,14 +6,26 @@
|
||||
<al-back-top></al-back-top>
|
||||
|
||||
<div id="top" style="display: block;" class="animateIn">
|
||||
<div class="bar" style="width: 0;"></div>
|
||||
<div class="navigation animated fadeIn fast delay-1s">
|
||||
<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 class="container-fluid">
|
||||
<a class="navbar-brand text-brand">JMAL'S</a>
|
||||
</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>
|
||||
<div class="article-header">
|
||||
<div class="article-background" :style="{backgroundImage: `url(${file.cover})`}"></div>
|
||||
<div class="inner">
|
||||
<div class="blog-title"><span id="article-title">{{pageTitle}}</span><span class="typed-cursor">_</span></div>
|
||||
<div class="blog-description font-mono">
|
||||
<a itemprop="name" href="https://www.jmal.top/author/1/" rel="author">{{file.username}}</a>
|
||||
· {{file.uploadDate}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-wrapper">
|
||||
<el-main class="l_main">
|
||||
<mavon-editor
|
||||
@ -29,20 +41,22 @@
|
||||
</el-main>
|
||||
|
||||
<div v-show="titleList.length > 0" class="right-bj">
|
||||
<div class="slimScrollDiv">
|
||||
<div class="right-menu" :style="{maxHeight:maxMenuHeight+'px'}">
|
||||
<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>
|
||||
<a-affix>
|
||||
<div class="slimScrollDiv">
|
||||
<div class="right-menu" :style="{maxHeight:maxMenuHeight+'px'}">
|
||||
<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: 30px; top: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-affix>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="clearfix">
|
||||
<div class="copyright"><p><a href="http://blog.jmal.top">Copyright © 2020 jmal</a></p></div>
|
||||
<div class="copyright"><p><a href="/articles">Copyright © 2020 jmal</a></p></div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
@ -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";
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user