zhuyijun/vuepress-theme-reco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(vuepress-theme-reco): show blog info on the mobile terminal

Browse Source
This commit is contained in:
reco_luan 2020-07-19 11:36:07 +08:00
parent e025a610b3
commit 7ddbb8d65d
1 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/vuepress-theme-reco/components/HomeBlog.vue
View File

@ -4,13 +4,20 @@
<div <div
class="mask" class="mask"
:style="{ :style="{
background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`}"></div> background: `
url(${$frontmatter.bgImage ?
$withBase($frontmatter.bgImage) :
require('../images/home-bg.jpg')}) center/cover no-repeat
`
}"
></div>
<ModuleTransition> <ModuleTransition>
<img <img
v-if="recoShowModule && $frontmatter.heroImage" v-if="recoShowModule && $frontmatter.heroImage"
:style="heroImageStyle || {}" :style="heroImageStyle || {}"
:src="$withBase($frontmatter.heroImage)" :src="$withBase($frontmatter.heroImage)"
alt="hero"> alt="hero"
/>
</ModuleTransition> </ModuleTransition>
<ModuleTransition delay="0.04"> <ModuleTransition delay="0.04">
<h1 v-if="recoShowModule && $frontmatter.heroText !== null"> <h1 v-if="recoShowModule && $frontmatter.heroText !== null">
@ -219,20 +226,22 @@ export default {
} }
} }
.info-wrapper { .info-wrapper {
position: -webkit-sticky; position -webkit-sticky;
position: sticky; position sticky;
top: 70px; top 70px
overflow hidden
transition all .3s transition all .3s
margin-left 15px; margin-top 15px
margin-left 15px
flex 0 0 300px flex 0 0 300px
height auto; height auto
box-shadow var(--box-shadow); box-shadow var(--box-shadow)
border-radius $borderRadius border-radius $borderRadius
box-sizing border-box box-sizing border-box
padding 0 15px padding 0 15px
background var(--background-color) background var(--background-color)
&:hover { &:hover {
box-shadow: var(--box-shadow-hover); box-shadow var(--box-shadow-hover)
} }
h4 { h4 {
color var(--text-color) color var(--text-color)
@ -301,8 +310,16 @@ export default {
} }
} }
.home-blog-wrapper { .home-blog-wrapper {
display block!important
.blog-list {
width auto
}
.info-wrapper { .info-wrapper {
display none!important // display none!important
margin-left 0
.personal-info-wrapper {
display none
}
} }
} }
} }
@ -341,8 +358,16 @@ export default {
} }
.home-blog-wrapper { .home-blog-wrapper {
display block!important
.blog-list {
width auto
}
.info-wrapper { .info-wrapper {
display none!important // display none!important
margin-left 0
.personal-info-wrapper {
display none
}
} }
} }
} }