first commit
This commit is contained in:
555
layouts/common.styl
Normal file
555
layouts/common.styl
Normal file
@ -0,0 +1,555 @@
|
||||
*
|
||||
margin 0
|
||||
padding 0
|
||||
|
||||
body, html
|
||||
color #2e2f30
|
||||
letter-spacing 0.5px
|
||||
font-family 'Source Sans Pro', 'Playfair Display', PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, Arial, sans-serif
|
||||
height 100%
|
||||
width 100%
|
||||
background-color #fff
|
||||
|
||||
#__nuxt, .content
|
||||
width 100%
|
||||
height 100%
|
||||
max-width 1040px
|
||||
margin 0 auto
|
||||
position relative
|
||||
box-sizing border-box
|
||||
|
||||
a, a:visited
|
||||
color #333333
|
||||
|
||||
a:focus, a:hover
|
||||
color #cd0216
|
||||
|
||||
a, a:focus, a:hover, a:visited
|
||||
text-decoration none
|
||||
|
||||
/* Opera Fix */
|
||||
body:before
|
||||
content ''
|
||||
height 100%
|
||||
float left
|
||||
width 0
|
||||
margin-top -32767px
|
||||
|
||||
footer
|
||||
text-align center
|
||||
position relative
|
||||
margin-top -35px
|
||||
height 35px
|
||||
clear both
|
||||
font-size 9px
|
||||
margin-bottom 5px
|
||||
|
||||
.footer
|
||||
padding-top 10px
|
||||
|
||||
.page-enter-active, .page-leave-active
|
||||
transition opacity 0.5s
|
||||
|
||||
.page-enter, .page-leave-active
|
||||
opacity 0
|
||||
|
||||
.container
|
||||
min-height 100%
|
||||
margin 0 auto
|
||||
|
||||
.articelAbstractContent p, .articelAbstractContent h1, .articelAbstractContent h2, .articelAbstractContent h3, .articelAbstractContent h4, .articelAbstractContent h5, .articelAbstractContent h6, .articelContent p, .articelContent h1, .articelContent h2, .articelContent h3, .articelContent h4, .articelContent h5, .articelContent h6
|
||||
margin-top 1em
|
||||
|
||||
.articelAbstractContent, .articelContent
|
||||
word-wrap break-word
|
||||
|
||||
img
|
||||
max-width 100%
|
||||
display block
|
||||
vertical-align middle
|
||||
margin auto
|
||||
width auto
|
||||
height auto
|
||||
|
||||
ul, ol
|
||||
margin-left 60px
|
||||
|
||||
// 点击滑动到顶部那个按钮的样式
|
||||
.scroll-top
|
||||
transition all 0.4s ease-in-out
|
||||
width 25px
|
||||
height 25px
|
||||
line-height 25px
|
||||
text-align center
|
||||
opacity 0.6
|
||||
background-color #000000
|
||||
color #ffffff
|
||||
position fixed
|
||||
right 8px
|
||||
bottom 8px
|
||||
z-index 999
|
||||
padding 4px
|
||||
|
||||
i
|
||||
color #fff
|
||||
|
||||
.articleImgs
|
||||
overflow hidden
|
||||
|
||||
position relative
|
||||
img
|
||||
width 100%
|
||||
cursor pointer
|
||||
|
||||
.Info
|
||||
background-color #fff
|
||||
box-shadow 0 0 2px 1px rgba(0, 0, 0, 0.06), 0 1px 5px rgba(0, 0, 0, 0.1)
|
||||
margin-bottom 50px
|
||||
text-align center
|
||||
padding 40px
|
||||
font-size responsive
|
||||
font-weight 300
|
||||
|
||||
.btn-footer
|
||||
margin-top 50px
|
||||
font-size 12px
|
||||
color #cccccc
|
||||
float left
|
||||
|
||||
i
|
||||
margin 10px
|
||||
|
||||
.btn-next
|
||||
float right
|
||||
|
||||
.btn-disable
|
||||
color #dfdede !important
|
||||
|
||||
footer .footer
|
||||
color #a2a2a2
|
||||
text-align left
|
||||
line-height 1.5
|
||||
margin 20px 0
|
||||
|
||||
.page-container
|
||||
width 100%
|
||||
height 100%
|
||||
|
||||
.page-container::after
|
||||
content ' '
|
||||
display block
|
||||
height 0
|
||||
visibility hidden
|
||||
clear both
|
||||
|
||||
#LeftMenu
|
||||
overflow-y auto
|
||||
overflow-x hidden
|
||||
display block
|
||||
background-color #fff
|
||||
height 100%
|
||||
width 295px
|
||||
float left
|
||||
|
||||
#rightContent
|
||||
margin-left 300px
|
||||
padding 0 50px
|
||||
height 100%
|
||||
|
||||
.header
|
||||
display none
|
||||
|
||||
.articleList
|
||||
border-bottom 1px solid #F0F0F0
|
||||
margin-bottom 30px
|
||||
|
||||
::-webkit-input-placeholder
|
||||
font-weight 300
|
||||
|
||||
::-moz-placeholder /* firefox 19+ */
|
||||
font-weight 300
|
||||
|
||||
/* firefox 19+ */
|
||||
:-ms-input-placeholder /* ie */
|
||||
font-weight 300
|
||||
|
||||
/* ie */
|
||||
input:-moz-placeholder
|
||||
font-weight 300
|
||||
|
||||
#leftcontent
|
||||
color #777777
|
||||
opacity 1
|
||||
height 100%
|
||||
padding 0 40px
|
||||
box-sizing border-box
|
||||
width 295px
|
||||
visibility visible
|
||||
-webkit-transition opacity 0.24s ease-in-out
|
||||
-moz-transition opacity 0.24s ease-in-out
|
||||
transition opacity 0.24s ease-in-out
|
||||
|
||||
#wrap
|
||||
min-height 100%
|
||||
|
||||
#leftMain
|
||||
overflow auto
|
||||
|
||||
.title
|
||||
text-align center
|
||||
font-weight 300
|
||||
color #000000
|
||||
margin-top 40px
|
||||
|
||||
.widget
|
||||
margin-bottom 10px
|
||||
|
||||
.widgetTitle
|
||||
font-size 18px
|
||||
line-height 100%
|
||||
text-align center
|
||||
padding 10px 0 6px 0
|
||||
margin 0 0 30px 0
|
||||
position relative
|
||||
border 0
|
||||
outline 0
|
||||
vertical-align baseline
|
||||
box-sizing border-box
|
||||
|
||||
label
|
||||
color #333333
|
||||
font-weight 300
|
||||
background-color #fff
|
||||
display inline-block
|
||||
padding 5px 10px
|
||||
position relative
|
||||
z-index 1
|
||||
margin 0
|
||||
font-size 100%
|
||||
font-family inherit
|
||||
vertical-align baseline
|
||||
box-sizing border-box
|
||||
|
||||
.widgetTitle:after
|
||||
height 1px
|
||||
content ''
|
||||
margin-top 2px
|
||||
border-top 1px solid #aaa
|
||||
position absolute
|
||||
top 50%
|
||||
left 0
|
||||
right 0
|
||||
border-top 1px solid #aaaaaa
|
||||
|
||||
.avatar
|
||||
margin-bottom 40px
|
||||
|
||||
> img
|
||||
width 100%
|
||||
|
||||
.aboutMe
|
||||
font-size 9px
|
||||
line-height 1.5
|
||||
margin-top 10px
|
||||
|
||||
.social
|
||||
margin 15px 5px
|
||||
height 20px
|
||||
font-size 12px
|
||||
font-weight 300
|
||||
|
||||
.social-info-box
|
||||
border 1px solid #d0d0d0
|
||||
width 100%
|
||||
height 30px
|
||||
line-height 30px
|
||||
text-align center
|
||||
font-size 14px
|
||||
margin-bottom 20px
|
||||
|
||||
ul
|
||||
height 30px
|
||||
list-style none
|
||||
|
||||
> li:first-child
|
||||
font-size 14px
|
||||
margin-top -1px
|
||||
margin-left 0
|
||||
|
||||
> li
|
||||
a
|
||||
color #948d8d
|
||||
|
||||
a:hover
|
||||
color #cd0216
|
||||
|
||||
color #948d8d
|
||||
float left
|
||||
height 30px
|
||||
margin-left 11px
|
||||
cursor pointer
|
||||
|
||||
> li:hover
|
||||
color #cd0216
|
||||
|
||||
.navication
|
||||
margin-bottom 40px
|
||||
font-size 15px
|
||||
font-weight 300
|
||||
top 25px
|
||||
width 215px
|
||||
|
||||
ul
|
||||
margin-left 20px
|
||||
list-style circle
|
||||
|
||||
> li
|
||||
margin-left 11px
|
||||
line-height 1.8
|
||||
|
||||
.search-box
|
||||
border 1px solid #cccccc
|
||||
margin-top 30px
|
||||
padding 8px
|
||||
position relative
|
||||
color #cccccc
|
||||
|
||||
.search
|
||||
border none
|
||||
border-right solid 1px #ccc
|
||||
width 160px
|
||||
|
||||
.fa-search
|
||||
position absolute
|
||||
top 11px
|
||||
right 13px
|
||||
cursor pointer
|
||||
|
||||
.fa-search:hover
|
||||
color #cd0216
|
||||
|
||||
.comment
|
||||
font-size 12px
|
||||
font-weight 300
|
||||
margin-bottom 40px
|
||||
overflow hidden
|
||||
|
||||
ul > li
|
||||
width 100%
|
||||
line-height 140%
|
||||
margin-bottom 15px
|
||||
padding-bottom 15px
|
||||
border-bottom 1px solid #f0f0f0
|
||||
|
||||
ul > li:last-child
|
||||
margin-bottom 0
|
||||
padding-bottom 0
|
||||
border-bottom none
|
||||
|
||||
.meta
|
||||
margin-top 10px
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
text-overflow ellipsis
|
||||
|
||||
.posts
|
||||
margin-bottom 40px
|
||||
|
||||
ul > li
|
||||
width 100%
|
||||
line-height 140%
|
||||
margin-bottom 15px
|
||||
padding-bottom 15px
|
||||
border-bottom 1px solid #f0f0f0
|
||||
|
||||
ul > li:last-child
|
||||
margin-bottom 0
|
||||
padding-bottom 0
|
||||
border-bottom none
|
||||
|
||||
.thumbnail
|
||||
width 60px
|
||||
float left
|
||||
padding-top 3px
|
||||
|
||||
> img
|
||||
max-width 100%
|
||||
height auto
|
||||
|
||||
.detail
|
||||
margin-left 70px
|
||||
font-weight 300
|
||||
font-size 12px
|
||||
|
||||
.tags
|
||||
margin-bottom 500px
|
||||
|
||||
.tagcloud
|
||||
width 100%
|
||||
|
||||
a
|
||||
display inline-block
|
||||
font-size 12px !important
|
||||
font-weight 400
|
||||
line-height 1
|
||||
text-transform uppercase
|
||||
margin 0 5px 10px 0
|
||||
padding 5px
|
||||
border 1px solid #c0c0c0
|
||||
color #666666
|
||||
|
||||
&:hover
|
||||
color #00897b
|
||||
|
||||
// 文章列表
|
||||
.pageList
|
||||
.articleList
|
||||
background-color #fff
|
||||
margin-top 30px
|
||||
|
||||
.articleImgs
|
||||
width 100%
|
||||
|
||||
img
|
||||
width 100%
|
||||
|
||||
.articleAbstract
|
||||
padding 50px 10px
|
||||
|
||||
pre
|
||||
text-align 0.16rem
|
||||
overflow-x auto
|
||||
line-height 1
|
||||
|
||||
code
|
||||
padding 16px
|
||||
|
||||
code
|
||||
color #24292e
|
||||
background-color rgba(27, 31, 35, 0.05)
|
||||
border-radius 3px
|
||||
font-size 85%
|
||||
padding 2px 5px
|
||||
|
||||
.articleTitle
|
||||
text-align center
|
||||
font-size 24px
|
||||
|
||||
.articalMeta
|
||||
text-align center
|
||||
padding 20px 0
|
||||
font-size 12px
|
||||
color #a1887f
|
||||
|
||||
ul
|
||||
list-style none
|
||||
padding-right 20px
|
||||
|
||||
> li
|
||||
display inline-block
|
||||
margin-left 20px
|
||||
line-height 2
|
||||
|
||||
> i
|
||||
margin-right 8px
|
||||
|
||||
> span a
|
||||
color #a1887f
|
||||
margin-left 10px
|
||||
|
||||
a span
|
||||
color #a1887f
|
||||
|
||||
> span a:first-child
|
||||
margin-left 0
|
||||
|
||||
> li :first-child
|
||||
margin-left 0
|
||||
|
||||
.articelAbstractContent
|
||||
margin-top 20px
|
||||
line-height 2
|
||||
font-weight 300
|
||||
font-size responsive
|
||||
|
||||
.readMore
|
||||
text-align center
|
||||
margin 50px auto 20px auto
|
||||
|
||||
.readMoreBtn
|
||||
padding 10px
|
||||
border 1px solid #795548
|
||||
color #795548
|
||||
|
||||
&:hover
|
||||
color #cd0216
|
||||
border 1px solid #cd0216
|
||||
|
||||
.mobileToc
|
||||
transition all 0.4s ease-in-out
|
||||
width 25px
|
||||
height 25px
|
||||
line-height 25px
|
||||
text-align center
|
||||
font-size 9px
|
||||
opacity 0.6
|
||||
background-color #000000
|
||||
color #ffffff
|
||||
position fixed
|
||||
right 8px
|
||||
bottom 38px
|
||||
z-index 999
|
||||
padding 4px
|
||||
|
||||
@media (max-width: 768px)
|
||||
.header
|
||||
position fixed
|
||||
z-index 999999
|
||||
width 100%
|
||||
display block
|
||||
box-sizing border-box
|
||||
top 0
|
||||
height 70px
|
||||
background-color #fff
|
||||
padding 5px 20px
|
||||
|
||||
.title
|
||||
text-align right
|
||||
color #505153
|
||||
font-weight 300
|
||||
line-height 60px
|
||||
font-size 35px
|
||||
margin 0
|
||||
|
||||
.svg
|
||||
display block
|
||||
float left
|
||||
line-height 60px
|
||||
padding-top 6px
|
||||
cursor pointer
|
||||
|
||||
#leftBackgroundColor, #LeftMenu
|
||||
display none
|
||||
|
||||
#rightContent
|
||||
margin-left 0
|
||||
padding 0 20px
|
||||
|
||||
.pageList
|
||||
.articleList
|
||||
margin-top 50px
|
||||
|
||||
.articleAbstract
|
||||
padding 20px
|
||||
|
||||
blockquote
|
||||
margin-top 10px
|
||||
margin-bottom 10px
|
||||
padding-left 10px
|
||||
padding-right 10px
|
||||
border-left 3px solid #ccc
|
||||
background-color #f1f1f1
|
||||
|
||||
.articelContent
|
||||
a
|
||||
color #de8787
|
||||
72
layouts/default.vue
Normal file
72
layouts/default.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template lang="pug">
|
||||
.content
|
||||
#loading.allSpinner
|
||||
.spinner
|
||||
.bounce1
|
||||
.bounce2
|
||||
.bounce3
|
||||
.container
|
||||
header
|
||||
.header
|
||||
.svg(@click='showLeftMenu')
|
||||
svg(style='width: 25px; height:25px', viewBox='0 0 1024 1024', version='1.1', xmlns='http://www.w3.org/2000/svg', width='200', height='200')
|
||||
path(d='M192 482l640 0 0 64-640 0 0-64Z')
|
||||
path(d='M192 290l640 0 0 64-640 0 0-64Z')
|
||||
path(d='M192 674l640 0 0 64-640 0 0-64Z')
|
||||
nuxt-link(to='/')
|
||||
h1.title
|
||||
| 轶哥博客
|
||||
.page-container
|
||||
#LeftMenu(:style="'display: '+ showLeftMenuValue + ';' + isPhone")
|
||||
LeftContent
|
||||
#rightContent
|
||||
nuxt
|
||||
Footer
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftContent from '~/components/LeftContent'
|
||||
import Footer from '~/components/Footer'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LeftContent,
|
||||
Footer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showLeftMenuValue: 'block',
|
||||
isPhone: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const phoneStyle = 'height: 100%; position: fixed; top: 70px; background-color: #fff; z-index:9999; overflow: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch;'
|
||||
if (document.body.clientWidth > 768) {
|
||||
this.showLeftMenuValue = 'block'
|
||||
this.isPhone = ''
|
||||
} else {
|
||||
this.showLeftMenuValue = 'none'
|
||||
this.isPhone = phoneStyle
|
||||
}
|
||||
|
||||
window.onresize = () => {
|
||||
if (document.body.clientWidth > 768) {
|
||||
this.showLeftMenuValue = 'block'
|
||||
this.isPhone = ''
|
||||
} else {
|
||||
this.showLeftMenuValue = 'none'
|
||||
this.isPhone = phoneStyle
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLeftMenu() {
|
||||
if (this.showLeftMenuValue !== 'block') {
|
||||
this.showLeftMenuValue = 'block'
|
||||
} else {
|
||||
this.showLeftMenuValue = 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
55
layouts/error.vue
Normal file
55
layouts/error.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template lang="pug">
|
||||
section.container
|
||||
.message
|
||||
h1.title
|
||||
| {{ error.statusCode }}
|
||||
h2.info
|
||||
| {{ error.message }}
|
||||
nuxt-link(to='/', v-if='error.statusCode === 404')
|
||||
.button
|
||||
| 返回首页
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
layout: 'errorTheme',
|
||||
props: {
|
||||
error: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
statusCode: 500,
|
||||
message: '未知错误，请稍后再试'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
padding 20px
|
||||
|
||||
.message
|
||||
max-width 400px
|
||||
background-color #fff
|
||||
padding 20px
|
||||
box-shadow 0 1px 3px rgba(0, 0, 0, 0.13)
|
||||
margin auto
|
||||
|
||||
.title
|
||||
margin-top 15px
|
||||
font-size 5em
|
||||
|
||||
.info
|
||||
font-weight 300
|
||||
color #9aabb1
|
||||
margin 0
|
||||
|
||||
.button
|
||||
display block
|
||||
padding 10px
|
||||
margin 80px auto 10px auto
|
||||
text-align center
|
||||
</style>
|
||||
9
layouts/errorTheme.vue
Normal file
9
layouts/errorTheme.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template lang="pug">
|
||||
.content
|
||||
.container
|
||||
.page-container
|
||||
nuxt
|
||||
footer
|
||||
.footer
|
||||
| Copyright © 2018 WangYi. All Rights Reserved.
|
||||
</template>
|
||||
Reference in New Issue
Block a user