yige/blog-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修复CSS问题

Browse Source
This commit is contained in:
yi-ge 2020-07-12 16:32:48 +08:00
parent 6ad10cd450
commit 7e61d738cf
2 changed files with 226 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layouts/common.styl
View File

@ -500,11 +500,11 @@ input:-moz-placeholder
color #ffffff color #ffffff
position fixed position fixed
right 8px right 8px
bottom 38px bottom 42px
z-index 999 z-index 999
padding 4px padding 4px
@media (max-width: 768px) @media (max-width 768px)
.header .header
position fixed position fixed
z-index 999999 z-index 999999

446
pages/post/_id.vue
View File

@ -1,5 +1,5 @@
<template lang="pug"> <template lang="pug">
div .postPage
article.articleDetails article.articleDetails
.articleTitle .articleTitle
| {{ articels.post_title }} | {{ articels.post_title }}
@ -453,283 +453,285 @@ export default {
} }
</script> </script>
<style lang="stylus" socped> <style lang="stylus">
.articleDetails .postPage
margin-top 30px .articleDetails
background-color #fff margin-top 30px
padding 50px 10px background-color #fff
padding 50px 10px
.articleTitle .articleTitle
text-align center text-align center
font-size 24px font-size 24px
.articalMeta .articalMeta
text-align center text-align center
padding 20px 0 padding 20px 0
font-size 12px font-size 12px
color #a1887f color #a1887f
ul ul
list-style none list-style none
padding-right 20px padding-right 20px
> li > li
display inline-block display inline-block
margin-left 20px margin-left 20px
line-height 2 line-height 2
> i > i
margin-right 8px margin-right 8px
> span a > span a
color #a1887f color #a1887f
margin-left 10px margin-left 10px
a span a span
color #a1887f color #a1887f
> span a:first-child > span a:first-child
margin-left 0
> li :first-child
margin-left 0 margin-left 0
> li :first-child .articelContent
margin-left 0 margin-top 20px
margin-bottom 30px
line-height 2
font-weight 300
font-size responsive
.articelContent pre
margin-top 20px text-align 0.16rem
margin-bottom 30px overflow-x auto
line-height 2 line-height 1
font-weight 300
font-size responsive
pre code
text-align 0.16rem padding 16px
overflow-x auto
line-height 1
code code
padding 16px color #24292e
background-color rgba(27, 31, 35, 0.05)
border-radius 3px
font-size 85%
padding 2px 5px
code .comment
color #24292e width 100%
background-color rgba(27, 31, 35, 0.05) margin-top 60px
border-radius 3px
font-size 85%
padding 2px 5px
.comment .comment-title
width 100% color #777
margin-top 60px margin-bottom 30px
.comment-title .comment-item
color #777 margin-top 10px
margin-bottom 30px padding 10px 8px
.comment-item .comment-avatar
margin-top 10px float left
padding 10px 8px margin-top 3px
.comment-avatar img
float left border-radius 50%
margin-top 3px width 40px
border-style none
img
border-radius 50%
width 40px
border-style none
cursor pointer
box-sizing border-box
margin 0
.comment-area
margin-left 50px
.comment-author, .comment-info
font-size 10px
.comment-author
color #a1887f
.comment-info
color #777
.reply
color #a1887f
cursor pointer cursor pointer
user-select none box-sizing border-box
margin-left 10px margin 0
.comment-userinfo .comment-area
margin-left 5px margin-left 50px
padding 10px 5px
.comment-avatar .comment-author, .comment-info
float left font-size 10px
margin-top 3px
img .comment-author
border-radius 50% color #a1887f
width 60px
border-style none .comment-info
color #777
.reply
color #a1887f
cursor pointer
user-select none
margin-left 10px
.comment-userinfo
margin-left 5px
padding 10px 5px
.comment-avatar
float left
margin-top 3px
img
border-radius 50%
width 60px
border-style none
cursor pointer
box-sizing border-box
margin 0
.comment-nickname
color #a1887f
margin-left 80px
height 70px
line-height 70px
#editor
margin-top 10px
margin-bottom 10px
.comment-reply-commit
margin 10px 0 10px 50px
.comment-default-commit
margin-top 125px
.comment-default-commit, .comment-reply-commit
position relative
.login
position absolute
left 0
top 0
width 100%
height 100%
text-align center
line-height 1
margin auto
z-index 99
cursor pointer cursor pointer
box-sizing border-box user-select none
margin 0
.comment-nickname img
color #a1887f margin-top 70px
margin-left 80px
height 70px
line-height 70px
#editor .login:hover
margin-top 10px background-color #fff
margin-bottom 10px
.comment-reply-commit .login:before
margin 10px 0 10px 50px content ''
position absolute
background rgba(0, 0, 0, 0.1)
top 0
left 0
width 100%
height 100%
filter blur(5px)
z-index 9
.comment-default-commit #editor-reply
margin-top 125px margin 0
.comment-default-commit, .comment-reply-commit .btnFooter
position relative font-size 12px
margin-top 25px
.login i
position absolute margin 10px
left 0
top 0
width 100%
height 100%
text-align center
line-height 1
margin auto
z-index 99
cursor pointer
user-select none
img .btnPrevt
margin-top 70px float left
.login:hover .btnNext
background-color #fff float right
.login:before footer .footer
content '' color #cccccc
position absolute text-align left
background rgba(0, 0, 0, 0.1) line-height 1.5
top 0 margin 20px 0
left 0
width 100%
height 100%
filter blur(5px)
z-index 9
#editor-reply .anchor-fix
margin 0 display block
height 70px /* same height as header */
margin-top -70px /* same height as header */
visibility hidden
.btnFooter .articelRightToc
font-size 12px position fixed
margin-top 25px width 15%
top 0
right 0
overflow-y auto
background-color #000
padding 10px
box-shadow 0 0 8px #000
z-index 999999
i .articelToc
margin 10px width 100%
.btnPrevt .articelToc, .articelRightToc
float left color #bbb
user-select none
.btnNext .articelTitle
float right font-weight 400
margin-bottom 10px
footer .footer .articelTocList
color #cccccc
text-align left
line-height 1.5
margin 20px 0
.anchor-fix
display block
height 70px /* same height as header */
margin-top -70px /* same height as header */
visibility hidden
.articelRightToc
position fixed
width 15%
top 0
right 0
overflow-y auto
background-color #000
padding 10px
box-shadow 0 0 8px #000
z-index 999999
.articelToc
width 100%
.articelToc, .articelRightToc
color #bbb color #bbb
user-select none
.articelTitle a
font-weight 400
margin-bottom 10px
.articelTocList
color #bbb color #bbb
a &:visited
color #bbb color #bbb
&:visited &:hover
color #bbb color #d01c2e
&:hover ol.toc, ol.toc ol
color #d01c2e counter-reset toc
list-style none
ol.toc, ol.toc ol ol li
counter-reset toc counter-increment toc
list-style none
ol li .toc li:before
counter-increment toc content counters(toc, '.') ' '
.toc li:before ol
content counters(toc, '.') ' ' margin-left 20px
ol li
margin-left 20px font-weight 400
li ol
font-weight 400 margin-left 20px
ol li
margin-left 20px font-weight 300
li .tools
font-weight 300 margin-top 80px
margin-bottom 10px
text-align center
user-select none
.tools .reward
margin-top 80px margin 15px 0
margin-bottom 10px border 1px solid #888
text-align center padding 5px 10px
user-select none display inline-block
color #888
font-weight 300
cursor pointer
margin auto
.reward .vditor--fullscreen
margin 15px 0 z-index 9999999
border 1px solid #888
padding 5px 10px
display inline-block
color #888
font-weight 300
cursor pointer
margin auto
.vditor--fullscreen @media (max-width: 768px)
z-index 9999999 .postPage
.articleDetails
@media (max-width: 768px) padding 20px
.articleDetails margin-top 50px
padding 20px
margin-top 50px
.articelRightToc .articelRightToc
position fixed position fixed