diff --git a/layouts/default.vue b/layouts/default.vue index fccca23..311330a 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -19,7 +19,7 @@ .page-container #LeftMenu(:style="'display: '+ showLeftMenuValue + ';' + isPhone") LeftContent - #rightContent + #rightContent(@click='showLeftMenu(false)') nuxt Footer v-dialog @@ -61,11 +61,11 @@ export default { } }, methods: { - showLeftMenu () { - if (this.showLeftMenuValue !== 'block') { - this.showLeftMenuValue = 'block' - } else { + showLeftMenu (show) { + if (this.showLeftMenuValue === 'block' || show === false) { this.showLeftMenuValue = 'none' + } else { + this.showLeftMenuValue = 'block' } } } diff --git a/pages/post/_id.vue b/pages/post/_id.vue index 2b89678..644d1cb 100644 --- a/pages/post/_id.vue +++ b/pages/post/_id.vue @@ -47,11 +47,15 @@ .comment-default-commit .login(v-if="!visitorToken", @click="login") img(src="https://cdn.wyr.me/imgs/GitHub-Login.png") - .comment-userinfo(v-else) - .comment-avatar - img(:src="'https://picsum.photos/100/100/?blur=1'") - .comment-nickname 张三 #editor + .comment-toolbar + .comment-no-userinfo(v-if="!visitorToken") 尚未登陆 + .comment-userinfo(v-else) + .comment-avatar + img(:src="'https://picsum.photos/100/100/?blur=1'") + .comment-nickname 张三 + .comment-logout 退出 + .comment-btn 发布 .comment-reply-commit(id="comment-reply-commit", v-show="replyID") .login(v-show="!visitorToken", @click="login") img(src="https://cdn.wyr.me/imgs/GitHub-Login.png") @@ -104,9 +108,9 @@ export default { }, mounted () { // 创建编辑器 + this.visitorToken = window.localStorage.visitorToken if (process.client) { if (!window.editorObj && window.Vditor) { - this.visitorToken = window.localStorage.visitorToken const upload = { accept: 'image/*, video/*, audio/*, text/*, application/*, .rar, .zip, .php, .pptx, .ppt, .doc, .docx, .txt, .xls, .xlsx', url: process.env.baseURL + '/visitor/file/upload', @@ -554,31 +558,108 @@ export default { user-select none margin-left 10px + .comment-no-userinfo + float left + font-size 12px + line-height 50px + margin-left 10px + .comment-userinfo - margin-left 5px - padding 10px 5px + width 200px + position relative + cursor pointer + user-select none + margin-top 10px + margin-left 10px + display inline-block + height 30px .comment-avatar - float left - margin-top 3px + position absolute + left 0 + top 0 + width 30px + height 30px + overflow hidden img border-radius 50% - width 60px + width 30px + height 30px border-style none - cursor pointer box-sizing border-box margin 0 .comment-nickname color #a1887f - margin-left 80px - height 70px - line-height 70px + margin-left 50px + height 30px + line-height 30px + font-size 12px + width 150px + overflow hidden + text-overflow ellipsis + white-space nowrap + + .comment-logout + width 51px + height 100% + line-height 30px + border 1px solid #586069 + font-size 12px + border-radius 2px + box-sizing border-box + display none + text-align center + + .comment-userinfo:hover + .comment-avatar, .comment-nickname + display none + + .comment-logout + display block + + .comment-userinfo:active + .comment-logout + background-color #586069 + color #fff #editor margin-top 10px - margin-bottom 10px + border-bottom-color #e6e5e5 + border-bottom-style dotted + border-bottom-left-radius 0 + border-bottom-right-radius 0 + + .comment-toolbar + width 100% + height 50px + flex-direction column + border 1px solid #d1d5da + border-radius 3px + box-sizing border-box + border-top none + border-top-left-radius 0 + border-top-right-radius 0 + color #586069 + + .comment-btn + color #586069 + float right + line-height 12px + margin-top 12px + margin-right 10px + padding 6px 12px + border 1px solid #586069 + box-sizing border-box + font-size 12px + cursor pointer + user-select none + border-radius 2px + + .comment-btn:active + background-color #586069 + color #fff .comment-reply-commit margin 10px 0 10px 50px @@ -648,6 +729,7 @@ export default { visibility hidden .articelRightToc + font-size 12px position fixed width 15% top 0 @@ -657,6 +739,9 @@ export default { padding 10px box-shadow 0 0 8px #000 z-index 999999 + padding-bottom 20px + min-width 240px + max-width 300px .articelToc width 100% @@ -687,6 +772,7 @@ export default { ol li counter-increment toc + margin-top 6px .toc li:before content counters(toc, '.') ' ' diff --git a/plugins/browser.js b/plugins/browser.js index 1f92d4e..50c5344 100644 --- a/plugins/browser.js +++ b/plugins/browser.js @@ -34,7 +34,7 @@ window.onload = function () { currentPosition > window.screen.availHeight ? top.style.display = 'block' : top.style.display = 'none' // 左部导航自动浮动 - if (currentPosition > floatTop) { + if (currentPosition > floatTop && document.body.clientWidth > 768) { document.getElementById('navication').style.position = 'fixed' } else { document.getElementById('navication').style.position = 'static'