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
position fixed
right 8px
bottom 38px
bottom 42px
z-index 999
padding 4px
@media (max-width: 768px)
@media (max-width 768px)
.header
position fixed
z-index 999999

446
pages/post/_id.vue
View File

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