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-11-12 18:05:16 +08:00
parent 85ded1cdbf
commit 8a47f2cdb6
15 changed files with 393 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -51,6 +51,7 @@
"v-contextmenu": "^2.9.0",
"v-viewer": "^1.5.1",
"vant": "2.5.0",
"vditor": "^3.6.1",
"viewerjs": "^1.5.0",
"vonic": "^1.1.3",
"vue": "2.6.10",

5
src/components/FileTree/DirTree.vue
View File

@ -4,6 +4,7 @@
<el-dialog
:title="selectTreeNode.showName"
:visible.sync="visible"
:append-to-body="appendToBody"
@close="clearTreeNode"
>
<el-tree
@ -38,6 +39,10 @@ import api from "@/api/file-api";
export default {
name: "DirTree",
props: {
appendToBody: {
type: Boolean,
default: false
},
currentDir: {
type: String,
default: '/'

2
src/components/Icon/Icon.vue
View File

@ -5,7 +5,7 @@
import { Icon } from 'ant-design-vue'
const IconFont = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2024484_acokdskxqbj.js'
scriptUrl: '//at.alicdn.com/t/font_2024484_3royfgdezl.js'
})
export default {

52
src/layout/components/Navbar.vue
View File

@ -5,47 +5,22 @@
<div class="right-content">
<!-- <div>-->
<!-- <el-menu class="el-menu-demo" mode="horizontal">-->
<!-- <el-menu-item index="1" href="/setting/manager-categories">-->
<!-- <router-link to="/setting/manager-cloud">-->
<!-- 网盘管理-->
<!-- </router-link>-->
<!-- </el-menu-item>-->
<!-- <el-submenu index="2">-->
<!-- <template slot="title">管理</template>-->
<!-- <el-menu-item index="2-0">-->
<!-- <router-link to="/setting/manager-blog">-->
<!-- <svg-icon icon-class="blogger"></svg-icon>-->
<!-- 博客管理-->
<!-- </router-link>-->
<!-- </el-menu-item>-->
<!-- <el-menu-item index="2-1">-->
<!-- <router-link to="/setting/manager-categories">-->
<!-- <svg-icon icon-class="leimupinleifenleileibie"></svg-icon>-->
<!-- 分类管理-->
<!-- </router-link>-->
<!-- </el-menu-item>-->
<!-- <el-menu-item index="2-2">-->
<!-- <svg-icon icon-class="biaoqian"></svg-icon>-->
<!-- 标签管理-->
<!-- </el-menu-item>-->
<!-- </el-submenu>-->
<!-- </el-menu>-->
<!-- </div>-->
<div class="right-username">{{username}}</div>
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<!--<img :src="avatar" class="user-avatar">-->
<el-avatar :src="imageUrl+avatar" icon="el-icon-user-solid"></el-avatar>
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/setting/user">
<el-dropdown-item>
<i class="el-icon-setting" />设置
<svg-icon icon-class="shezhi"></svg-icon>基本设置
</el-dropdown-item>
</router-link>
<router-link to="/setting/website/manager-blog">
<el-dropdown-item>
<svg-icon icon-class="wangzhan"></svg-icon>网站管理
</el-dropdown-item>
</router-link>
<!--<router-link to="/">-->
@ -57,7 +32,7 @@
<!--<el-dropdown-item>Github</el-dropdown-item>-->
<!--</a>-->
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">退出登录</span>
<svg-icon icon-class="tuichudenglu"></svg-icon>退出登录
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -151,7 +126,6 @@ export default {
.right-menu {
float: right;
height: 100%;
line-height: 50px;
&:focus {
outline: none;
@ -177,7 +151,7 @@ export default {
.avatar-container {
margin-right: 30px;
cursor: pointer;
.avatar-wrapper {
margin-top: 5px;
position: relative;
@ -190,7 +164,6 @@ export default {
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
@ -198,8 +171,14 @@ export default {
}
}
}
.avatar-container:hover {
background-color: #00000006;
}
}
}
/deep/ .user-dropdown {
top: 50px;
}
/deep/ .el-menu--horizontal {
padding: 0 15px;
.el-menu-item {
@ -211,4 +190,7 @@ export default {
line-height: 50px;
}
}
.el-dropdown-menu__item svg {
margin-right: 5px;
}
</style>

3
src/layout/components/Sidebar/SidebarItem.vue
View File

@ -6,6 +6,9 @@
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
</el-menu-item>
</app-link>
<el-menu-item v-if="onlyOneChild.path === '/setting/manager-users'">
<item title="sdf"/>
</el-menu-item>
</template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>

65
src/router/index.js
View File

@ -151,21 +151,6 @@ export const constantRoutes = [
}
]
},
// {
// path: '/setting/user',
// component: Layout,
// children: [
// {
// path: '',
// name: 'setting-user',
// component: () => import('@/views/setting/user/index'),
// meta: { title: '设置' },
// hidden: true
// }
// ]
// },
// {
// path: '/demo',
// component: Layout,
@ -182,6 +167,7 @@ export const constantRoutes = [
{
path: '/markdown',
component: Layout,
hidden: true,
children: [
{
path: 'editor',
@ -201,7 +187,7 @@ export const constantRoutes = [
name: 'article',
component: () => import('@/views/public/article/index'),
hidden: true,
meta: { keepAlive: true }
meta: { keepAlive: false }
}
]
},
@ -211,7 +197,7 @@ export const constantRoutes = [
children: [
{
path: `${document.location.protocol}//${window.location.host}/articles`,
meta: { title: '关联博客', icon: 'link', keepAlive: true }
meta: { title: '关联博客', icon: 'link', keepAlive: false }
}
]
},
@ -222,35 +208,61 @@ export const constantRoutes = [
{
path: '',
name: 'setting-user',
component: () => import('@/views/setting/user/index'),
component: () => import('@/views/setting/user/tabs/cusomerInfo'),
meta: { title: '个人信息' , icon: 'UserSettings'}
}
]
},
{
path: '/setting/manager-categories',
path: '/setting/manager-users',
component: Layout,
children: [
{
path: '',
name: 'manager-categories',
component: () => import('@/views/setting/articles/categoryManager'),
meta: { title: '分类管理', icon: 'leimupinleifenleileibie' }
name: 'manager-users',
component: () => import('@/views/setting/user/tabs/cusomerManager'),
meta: { title: '用户管理' , icon: 'huaban'}
}
]
},
{
path: '/setting/manager-blog',
path: '/setting/website',
component: Layout,
name: 'website',
meta: { title: '网站管理', icon: 'wangzhan'},
children: [
{
path: '',
path: 'manager-articles',
name: 'manager-articles',
component: () => import('@/views/setting/articles/articleManager'),
meta: { title: '文章管理' , icon: 'guanlizhuanjiawenzhang'}
},
{
path: 'manager-blog',
name: 'manager-blog',
component: () => import('@/views/setting/articles/blogManager'),
meta: { title: '博客管理' , icon: 'blogger'}
meta: { title: '外观设置' , icon: 'pifu'}
},
{
path: 'manager-categories',
name: 'manager-categories',
component: () => import('@/views/setting/articles/categoryManager'),
meta: { title: '分类管理', icon: 'fenlei' }
}
]
},
// {
// path: '/setting/manager-categories',
// component: Layout,
// children: [
// {
// path: '',
// name: 'manager-categories',
// component: () => import('@/views/setting/articles/categoryManager'),
// meta: { title: '分类管理', icon: 'leimupinleifenleileibie' }
// }
// ]
// },
{
path: '/setting/manager-cloud',
component: Layout,
@ -266,12 +278,13 @@ export const constantRoutes = [
{
path: '/articles',
component: Layout,
hidden: true,
children: [
{
path: '',
name: 'articles',
component: () => import('@/views/public/articles/index'),
meta: { title: '文档列表', icon: 'md-list', keepAlive: true }
meta: { title: '文档列表', icon: 'md-list', keepAlive: false }
}
]
},

13
src/styles/markdown.scss
View File

@ -212,16 +212,20 @@
}
}
.animateIn {
transform: translateY(0px);
//-webkit-transform: translateY(0px);
//transform: translateY(0px);
}
.animateOut {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.animateLeft {
-webkit-transform: translateX(-10rem);
transform: translateX(-10rem);
}
.animateRight {
-webkit-transform: translateX(0rem);
transform: translateX(0rem);
}
@ -567,6 +571,13 @@
border-radius: 8px;
}
.article-body {
padding: 20px 35px;
border-radius: 0.5rem;
background-color: #ffffff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
}
/deep/ .markdown-body {
border-radius: 0.5rem;
blockquote {

13
src/styles/sidebar.scss
View File

@ -75,25 +75,24 @@
margin: 2px 5px 2px 5px;
}
}
.el-menu-item.is-active {
color: #409EFF;
background-color: #d9d9d9 !important;
background-color: $menuHover !important;
border-radius: 4px;
margin: 2px 5px 2px 5px;
}
.is-active>.el-submenu__title {
color: $subMenuActiveText !important;
//color: $subMenuActiveText !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
margin: 2px 5px;
height: 42px;
line-height: 42px;
&:hover {
background-color: $subMenuHover !important;
border-radius: 4px;
}
}
}

4
src/styles/variables.scss
View File

@ -6,8 +6,8 @@ $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#f5f5f5;
$menuHover:#d9d9d9;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$subMenuBg:#f5f5f5;
$subMenuHover:#d9d9d9;
$sideBarWidth: 210px;

121
src/views/markdown/index.vue
View File

@ -1,37 +1,40 @@
<template>
<div v-wechat-title="'编辑'+filename">
<dir-tree ref="dirTree">
<dir-tree ref="dirTree" :append-to-body='true'>
<el-button slot="footer" size="small" type="primary" @click="confirmSelectDir">确 定</el-button>
</dir-tree>
<el-header>
<div class="header-item">
文章标题：
<el-input class="articles-title" placeholder="文章标题" v-model="filename"/>
<el-input v-if="!editStatus" class="articles-storage" placeholder="存储位置" v-model="storageLocation" :readonly="true" @click="selectDir">
<el-button slot="prepend" @click="selectDir">选择位置</el-button>
<el-input class="articles-title" placeholder="文章标题" v-model="filename" size="small"/>
<el-input v-if="!editStatus" class="articles-storage" placeholder="存储位置" size="small" v-model="storageLocation" :readonly="true" @focus="selectDir">
<el-button slot="prepend" size="small" @click="selectDir">保存位置</el-button>
</el-input>
<el-button type="primary" @click="moreSetting = true">更多设置</el-button>
<el-button v-if="!editStatus" class="release-button" type="primary" @click="add" :loading="adding">发布文章</el-button>
<el-button v-if="editStatus" class="release-button" type="primary" @click="update" :loading="updating">更新文章</el-button>
<el-button type="primary" @click="moreSetting = true" size="small">更多设置</el-button>
<el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="adding">发布文章</el-button>
<el-button v-if="editStatus" class="release-button" type="primary" size="small" @click="update" :loading="updating">更新文章</el-button>
<el-button v-if="!editStatus" class="release-button" type="warning" size="small" @click="add" :loading="adding">保存草稿</el-button>
</div>
</el-header>
<el-main>
<mavon-editor
v-model="content"
ref="md"
@change="change"
codeStyle="atelier-dune-dark"
:style="{'height': clientHeight+'px'}"
:imageFilter="imageFilter"
@save="save"
@imgAdd="$imgAdd"
@imgDel="$imgDel"
@fullScreen="fullScreen"
/>
<div id="vditor"></div>
<!-- <mavon-editor-->
<!-- v-model="content"-->
<!-- ref="md"-->
<!-- @change="change"-->
<!-- codeStyle="atelier-dune-dark"-->
<!-- :style="{'height': clientHeight+'px'}"-->
<!-- :imageFilter="imageFilter"-->
<!-- @save="save"-->
<!-- @imgAdd="$imgAdd"-->
<!-- @imgDel="$imgDel"-->
<!-- @fullScreen="fullScreen"-->
<!-- />-->
</el-main>
<el-drawer
:visible.sync="moreSetting"
:append-to-body='true'
:with-header="false">
<div class="more-setting">
<h2>更多设置</h2>
@ -52,9 +55,58 @@
import uploadApi from '@/api/file-api'
import DirTree from"@/components/FileTree/DirTree"
import fileConfig from '@/utils/file-config'
import Vditor from 'vditor'
import "vditor/src/assets/scss/index.scss"
let toolbar = [
'emoji',
'headings',
'bold',
'italic',
'strike',
'link',
'|',
'list',
'ordered-list',
'check',
'outdent',
'indent',
'|',
'quote',
'line',
'code',
'inline-code',
'insert-before',
'insert-after',
'|',
'upload',
'record',
'table',
'|',
'undo',
'redo',
'|',
'edit-mode',
'content-theme',
'code-theme',
'outline',
'preview',
{
name: 'more',
toolbar: [
'fullscreen',
'export',
'both',
'info',
'help',
],
}]
export default {
name: 'MarkdownEditor',
components: {
DirTree
DirTree, Vditor
},
data() {
return {
@ -62,7 +114,7 @@
content:"", // 输入的markdown
html:'', // 及时转的html
filename: '新建文档',
clientHeight: document.documentElement.clientHeight - 135,
clientHeight: document.documentElement.clientHeight - 210,
updating: false,
adding: false,
isFullScreen: false,
@ -70,9 +122,30 @@
selectLocationVisible: false,
moreSetting: false,
markdownCover: null,
contentEditor: '',
}
},
mounted() {
this.contentEditor = new Vditor('vditor', {
height: this.clientHeight,
toolbar,
toolbarConfig: {
pin: true,
},
preview: {
mode: 'both',
hljs: {
lineNumber: true
}
},
cache: {
enable: false,
},
after: () => {
this.contentEditor.setValue(this.content)
},
})
if(this.$route.query.id){
this.editStatus = true
markdownApi.getMarkdown({
@ -134,7 +207,7 @@
if(this.isFullScreen){
this.clientHeight = document.documentElement.clientHeight
}else{
this.clientHeight = document.documentElement.clientHeight - 135
this.clientHeight = document.documentElement.clientHeight - 210
}
},
save(){
@ -206,13 +279,13 @@
</script>
<style lang="scss" scoped>
/deep/ .el-main {
padding: 5px 20px 20px 20px;
padding: 30px 20px 20px 20px;
.v-note-wrapper {
z-index: 200;
}
}
/deep/ .el-header {
padding: 7.5px 20px 10px 20px;
height: 43px!important;
}
/deep/ .el-input-group {
width: unset;

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

@ -28,16 +28,17 @@
</div>
<div class="body-wrapper">
<el-main id="main_body" :content="titleList.length > 0?'show':'hide'" class="l_main article_l_main">
<mavon-editor
ref="md"
v-if="!showList"
v-model="content"
:subfield="false"
:boxShadow="true"
:toolbarsFlag="false"
codeStyle="atom-one-dark"
defaultOpen="preview"
/>
<div id="vditor" class="article-body"></div>
<!-- <mavon-editor-->
<!-- ref="md"-->
<!-- v-if="!showList"-->
<!-- v-model="content"-->
<!-- :subfield="false"-->
<!-- :boxShadow="true"-->
<!-- :toolbarsFlag="false"-->
<!-- codeStyle="atom-one-dark"-->
<!-- defaultOpen="preview"-->
<!-- />-->
</el-main>
<div v-show="titleList.length > 0" class="right-bj">
<a-affix>
@ -65,12 +66,14 @@
import AlLoading from "@/components/loading/AlLoading";
import AlBackTop from "@/components/backtop/AlBackTop";
import markdownApi from '@/api/markdown-api'
import {addCodeBtn} from '@/assets/js/mavon-line'
import $ from 'jquery'
import ArticleTop from "@/views/public/article/ArticleTop";
import {getSetting} from '@/api/user'
import SidebarNav from "@/views/public/article/SidebarNav";
import VditorPreview from 'vditor/dist/method.min'
import "vditor/src/assets/scss/index.scss"
export default {
components: {SidebarNav, ArticleTop, AlBackTop, AlLoading },
data() {
@ -90,6 +93,7 @@ export default {
maxMenuHeight: document.documentElement.clientHeight - 155,
top: 70,
isEditor : false,
contentEditor: '',
}
},
mounted() {
@ -151,13 +155,26 @@ export default {
const filename = res.data.name
this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
this.content = res.data.contentText
const that = this
VditorPreview.preview(document.getElementById('vditor'),
this.content,{
speech: {
enable: true,
},
anchor: 1,
after() {
that.renderAfter()
}
})
this.$nextTick(()=>{ // DOM更新之后获取子元素
// 在文章最前面添加更新时间
let main = document.querySelector('.v-show-content.scroll-style.scroll-style-border-radius')
let p = document.createElement("p")
p.className = "note-update-date"
p.innerText = `本文最后更新于：${this.file.updateDate}`
main.insertBefore(p , main.childNodes[0])
// // 在文章最前面添加更新时间
// let main = document.getElementById('vditor')
// let p = document.createElement("p")
// p.className = "note-update-date"
// p.innerText = `本文最后更新于：${this.file.updateDate}`
// main.insertBefore(p , main.childNodes[0])
// 动态打字效果
this.dynamicTyping()
@ -166,124 +183,126 @@ export default {
if(hTag){
this.pageTitle = hTag.innerText
}
})
this.isLoading = false
})
},
renderAfter(){
let headers = $('.article-body').find(":header")
let a = []
if(headers && headers.length >0 ){
const that = this
headers.each(function () {
const tagName = $(this).prop("tagName")
if(tagName === 'H3'){
let li = '<li class="pl h-3"><a href="#'+$(this).attr('id')+'">'+$(this).text()+'</a></li>'
a.push(li)
that.titleList.push(li)
}
})
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 class="h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
}else if (a[i].indexOf('h1') !== -1) {
a[i] = '<li first class="pl h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
}else if (a[i].indexOf('h2') !== -1) {
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>'
}
this.titleList.push(i)
// 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 class="h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
// }else if (a[i].indexOf('h1') !== -1) {
// a[i] = '<li first class="pl h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
// }else if (a[i].indexOf('h2') !== -1) {
// 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>'
// }
// this.titleList.push(i)
// }
$('.j-titleList').prepend(this.titleList)
// 获取id数组
for (let i = 0; i < a.length; i++) {
a[i] = a[i].replace(/.*?#(.*)".*/g, '$1')
}
let beforeScrollTop = document.documentElement.scrollTop;
let fn = fn || function (direction) {
// 判断是上滑显示,下滑隐藏
const top = $('#top')
const toogleNav = $('#toggle-nav')
const body = document.getElementById("body")
if(direction === 'down'){
top.removeClass('animateIn')
top.addClass('animateOut')
toogleNav.removeClass('animateRight')
toogleNav.addClass('animateLeft')
if(body.style.transform.length > 0) {
document.getElementById("sidebar-nav").style.transform = ''
body.style.transform = ''
document.getElementById("toggle-nav").style.transform = ''
}
$('.j-titleList').prepend(a)
}
if(direction === 'up'){
top.removeClass('animateOut')
top.addClass('animateIn')
toogleNav.removeClass('animateLeft')
toogleNav.addClass('animateRight')
}
};
//获取id数组
for (let i = 0; i < a.length; i++) {
a[i] = a[i].replace(/.*?#(.*)".*/g, '$1')
$(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 * 34)
}
let beforeScrollTop = document.documentElement.scrollTop;
let fn = fn || function (direction) {
// 判断是上滑显示,下滑隐藏
const top = $('#top')
const toogleNav = $('#toggle-nav')
const body = document.getElementById("body")
if(direction === 'down'){
top.removeClass('animateIn')
top.addClass('animateOut')
toogleNav.removeClass('animateRight')
toogleNav.addClass('animateLeft')
if(body.style.transform.length > 0) {
document.getElementById("sidebar-nav").style.transform = ''
body.style.transform = ''
document.getElementById("toggle-nav").style.transform = ''
}
}
if(direction === 'up'){
top.removeClass('animateOut')
top.addClass('animateIn')
toogleNav.removeClass('animateLeft')
toogleNav.addClass('animateRight')
}
};
$(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 * 34)
}
}
// 判断是上滑还是下滑
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 + document.body.clientHeight)/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');
$('.j-titleList li').on("click", function () {
let top = 70
if (typeof($(this).attr("first"))!=="undefined") {
// 点击第一个目录
top = 100
}
$root.animate({
scrollTop: $($.attr(this.querySelector("a"), 'href')).offset().top - top
}, 400)
return false
});
}
const _this = this
setTimeout(function () {
// 添加行数
const clientWidth = document.documentElement.clientWidth;
if(clientWidth > 425){
addCodeBtn();
// 判断是上滑还是下滑
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 + document.body.clientHeight)/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;
}
_this.isLoading = false
},150)
fn(delta > 0 ? "down" : "up");
}
})
})
}
let $root = $('html, body');
$('.j-titleList li').on("click", function () {
let top = 70
if (typeof($(this).attr("first"))!=="undefined") {
// 点击第一个目录
top = 100
}
$root.animate({
scrollTop: $($.attr(this.querySelector("a"), 'href')).offset().top - top
}, 400)
return false
});
}
},
},
destroyed() {
$(window).unbind("scroll")

48
src/views/setting/articles/articleManager.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="container" v-wechat-title="title">
<el-dialog title="新增文章" :fullscreen="true" :visible.sync="newArticleDialogVisible">
<markdown-editor></markdown-editor>
</el-dialog>
<el-card class="box-card">
<div class="box-card-header">
<div class="clearfix card-header-back">
<span>文章管理</span>
<el-button class="card-button" size="mini" type="primary" @click="newArticle">新建文章</el-button>
</div>
</div>
</el-card>
</div>
</template>
<script>
import MarkdownEditor from '@/views/markdown/index'
export default {
name: 'articleManager',
components: {
MarkdownEditor
},
data() {
return {
title: "文章管理",
newArticleDialogVisible: false,
}
},
computed: {},
mounted() {
if(this.$route.query.markdown){
this.newArticleDialogVisible = true
}
},
methods: {
newArticle() {
this.newArticleDialogVisible = true
this.$router.push({path:'/setting/website/manager-articles', query: {markdown: 'new'}})
}
}
}
</script>
<style lang="scss" scoped>
@import "src/styles/setting";
</style>

4
src/views/setting/articles/categoryManager.vue
View File

@ -93,13 +93,9 @@
<script>
import categoryApi from "@/api/category";
import CropperDialog from '@/components/Cropper/dialog'
export default {
name: 'categoryManager',
components: {
CropperDialog
},
data() {
return {
title: "分类管理",

12
src/views/setting/cloudManager.vue
View File

@ -1,8 +1,12 @@
<template>
<div class="app-container" v-wechat-title="title">
<el-card class="box-card">
同步网盘
<el-button type="primary" :loading="syncLoading" @click="sync"><i class="el-icon-upload el-icon--right"></i></el-button>
<div class="box-card-header">
<div class="clearfix card-header-back">
<span>同步网盘</span>
<el-button class="card-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i class="el-icon-upload el-icon--right"></i></el-button>
</div>
</div>
</el-card>
</div>
</template>
@ -32,6 +36,6 @@ export default {
}
</script>
<style scoped>
<style lang="scss" scoped>
@import "src/styles/setting";
</style>

20
src/views/setting/user/tabs/cusomerManager.vue
View File

@ -24,9 +24,13 @@
</el-form>
</el-dialog>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>用户列表</span>
<el-button class="card-button" type="text" @click="add">添加用户</el-button>
<div slot="header">
<div class="box-card-header">
<div class="clearfix card-header-back">
<span>用户列表</span>
<el-button class="card-button" size="mini" type="primary" @click="add()">添加用户</el-button>
</div>
</div>
</div>
<el-table
:data="userList"
@ -254,14 +258,6 @@
}
</script>
<!--<style src="@styles/cropper.css"></style>-->
<style lang="scss" scoped>
@import "src/styles/setting";
.card-button {
float: right;
padding: 3px 0;
}
.box-card {
max-width: 800px;
}
@import "src/styles/setting";
</style>