修改markdown显示
This commit is contained in:
jmal
parent
c7969607b8
commit
fe1409a619
@ -1,3 +1,106 @@
|
||||
/deep/:root {
|
||||
--font-color: #000;
|
||||
--night-font-color: #ddd;
|
||||
--primary: #b2fefa;
|
||||
--secondary: #0ed2f7;
|
||||
--dark: #0052d4;
|
||||
--gradient-light: #5d9eea;
|
||||
--gradient-middle: #0f27b5;
|
||||
--gradient-dark: #100e17;
|
||||
--code-gradient-light: #cff0ff;
|
||||
--code-gradient-dark: #afcafd;
|
||||
--maxwidth: 1284px;
|
||||
}
|
||||
.scrollbar {
|
||||
position: fixed;
|
||||
height: 3px;
|
||||
width: 10px;
|
||||
top: 50px;
|
||||
background-color: #50bcb6;
|
||||
-webkit-transition: width 0.5s ease;
|
||||
-moz-transition: width 0.5s ease;
|
||||
transition: width 0.5s ease;
|
||||
z-index: 11;
|
||||
}
|
||||
.gradient-bg-rev {
|
||||
background: #b2fefa !important;
|
||||
background: -webkit-linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important;
|
||||
background: linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important;
|
||||
}
|
||||
/deep/ #top {
|
||||
line-height: 2;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
/* border-bottom: 1px solid #201c29; */
|
||||
-webkit-transition: all 350ms ease-in-out;
|
||||
transition: all 350ms ease-in-out;
|
||||
-webkit-box-shadow: 0 0 30px #000;
|
||||
box-shadow: 0 0 30px #000;
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: rgba(255,255,255,0.72);
|
||||
.bar {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: #b2fefa !important;
|
||||
background: -webkit-linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important;
|
||||
background: linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important;
|
||||
z-index: -1;
|
||||
width: 50%;
|
||||
-webkit-transition: width 0.5s ease-in-out;
|
||||
-moz-transition: width 0.5s ease-in-out;
|
||||
transition: width 0.5s ease-in-out;
|
||||
opacity: 0.25;
|
||||
}
|
||||
.icon-home {
|
||||
top: 14px;
|
||||
}
|
||||
.icon-home {
|
||||
-webkit-background-size: 20px 20px;
|
||||
-moz-background-size: 20px 20px;
|
||||
background-size: 20px 20px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.subtitle {
|
||||
background: #b2fefa !important;
|
||||
background: -webkit-linear-gradient(to right, #000000, #4a4a4a, #000000) !important;
|
||||
background: linear-gradient(to right, #000000, #4a4a4a, #000000) !important;
|
||||
-webkit-background-clip: text !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
-webkit-box-decoration-break: clone !important;
|
||||
box-decoration-break: clone !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 14px;
|
||||
margin-top: 12px;
|
||||
display: none;
|
||||
transition: display 400ms ease-in-out;
|
||||
max-width: 50%;
|
||||
max-height: 30px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.animateIn {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
.animateOut {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
/deep/ .right-bj {
|
||||
//top: 70px;
|
||||
@ -7,7 +110,7 @@
|
||||
//border-radius: 5px;
|
||||
//box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
|
||||
width: 285px;
|
||||
float: right;
|
||||
//float: right;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -4,6 +4,16 @@
|
||||
<al-loading v-if="isLoading"></al-loading>
|
||||
</transition>
|
||||
<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">
|
||||
<svg-icon id="home-icon" class="icon-home" icon-class="tab-folder" ></svg-icon>
|
||||
<div id="play-icon" title="Play/Pause" class="iconfont icon-play"></div>
|
||||
<h3 class="subtitle" style="display: block;">深入理解JVM</h3>
|
||||
</div>
|
||||
<div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
|
||||
</div>
|
||||
<div class="body-wrapper">
|
||||
<el-main class="l_main">
|
||||
<mavon-editor
|
||||
@ -52,7 +62,8 @@
|
||||
content:'',
|
||||
html:'',
|
||||
titleList: [],
|
||||
tocMaxHeight: 500
|
||||
tocMaxHeight: 500,
|
||||
befterScrollTop: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -60,10 +71,13 @@
|
||||
this.getMarkDown()
|
||||
this.showList = false
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
onScroll() {
|
||||
// console.log(document.documentElement.scrollTop)
|
||||
console.log("befterScrollTop")
|
||||
// let befterScrollTop = document.documentElement.scrollTop;
|
||||
// console.log("befterScrollTop",befterScrollTop)
|
||||
},
|
||||
getMarkDown() {
|
||||
markdownApi.getMarkdown({
|
||||
@ -92,7 +106,7 @@
|
||||
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 (a[i].indexOf('h1') === 1) {
|
||||
if (i ===0 && a[i].indexOf('h1') !== -1) {
|
||||
a[i] = '<li first>' + 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>'
|
||||
@ -107,13 +121,53 @@
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
a[i] = a[i].replace(/.*?#(.*)".*/g, '$1')
|
||||
}
|
||||
$(window).on("scroll",function () {
|
||||
|
||||
let beforeScrollTop = document.documentElement.scrollTop;
|
||||
let fn = fn || function (direction) {
|
||||
console.log(direction)
|
||||
// 判断是上滑显示,下滑隐藏
|
||||
if(direction === 'down'){
|
||||
$('#top').removeClass('animateIn')
|
||||
$('#top').addClass('animateOut')
|
||||
}
|
||||
if(direction === 'up'){
|
||||
$('#top').removeClass('animateOut')
|
||||
$('#top').addClass('animateIn')
|
||||
}
|
||||
};
|
||||
|
||||
$(window).on("scroll",function (event) {
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
// 判断是上滑还是下滑
|
||||
var afterScrollTop = document.documentElement.scrollTop;
|
||||
let delta = afterScrollTop - beforeScrollTop;
|
||||
beforeScrollTop = afterScrollTop;
|
||||
var scrollTop = $(this).scrollTop();
|
||||
var scrollHeight = $(document).height();
|
||||
var windowHeight = $(this).height();
|
||||
|
||||
var progress = (afterScrollTop/scrollHeight) * 100
|
||||
// 改变top bar 进度条
|
||||
document.querySelector(".scrollbar").style.width = progress +'%'
|
||||
|
||||
if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到底部执行事件
|
||||
fn('bottom');
|
||||
return;
|
||||
}
|
||||
if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
|
||||
fn('up');
|
||||
} else {
|
||||
if (Math.abs(delta) < 10) {
|
||||
return false;
|
||||
}
|
||||
fn(delta > 0 ? "down" : "up");
|
||||
}
|
||||
})
|
||||
|
||||
let $root = $('html, body');
|
||||
@ -136,11 +190,8 @@
|
||||
addCodeBtn();
|
||||
_this.isLoading = false
|
||||
},150)
|
||||
|
||||
})
|
||||
|
||||
// const doc = document.querySelector(".v-show-content");
|
||||
// document.addEventListener("scroll", _this.onScroll);
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user