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

fix(vuepress-theme-reco): style in timeline page

Browse Source
This commit is contained in:
reco_luan 2020-04-05 00:02:12 +08:00
parent dc22819216
commit f5e7dfe484
7 changed files with 177 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -133,7 +133,6 @@ export default {
mounted () { mounted () {
this.recoShow = true this.recoShow = true
this._setPage(this._getStoragePage()) this._setPage(this._getStoragePage())
console.log(this)
}, },
methods: { methods: {
// 获取当前页码 // 获取当前页码

8
packages/vuepress-theme-reco/layouts/404.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="theme-container" v-if="!noFoundPageByTencent"> <section class="theme-container" v-if="!noFoundPageByTencent">
<div class="content"> <article class="content">
<h1>404</h1> <h1>404</h1>
<blockquote>{{ getMsg() }}</blockquote> <blockquote>{{ getMsg() }}</blockquote>
<router-link to="/">Take me home.</router-link> <router-link to="/">Take me home.</router-link>
</div> </article>
</div> </section>
</template> </template>
<script> <script>

71
packages/vuepress-theme-reco/layouts/Category.vue
View File

@ -1,43 +1,40 @@
<template> <template>
<div class="categories-wrapper"> <Common class="categories-wrapper" :sidebar="false" :isComment="false">
<!-- 公共布局 --> <!-- 分类集合 -->
<Common :sidebar="false" :isComment="false"> <ModuleTransition>
<!-- 分类集合 --> <ul v-show="recoShowModule" class="category-wrapper">
<ModuleTransition> <li
<ul v-show="recoShowModule" class="category-wrapper"> class="category-item"
<li :class="title == item.name ? 'active': ''"
class="category-item" v-for="(item, index) in this.$categories.list"
:class="title == item.name ? 'active': ''" :key="index">
v-for="(item, index) in this.$categories.list" <router-link :to="item.path">
:key="index"> <span class="category-name">{{ item.name }}</span>
<router-link :to="item.path"> <span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
<span class="category-name">{{ item.name }}</span> </router-link>
<span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span> </li>
</router-link> </ul>
</li> </ModuleTransition>
</ul>
</ModuleTransition>
<!-- 博客列表 --> <!-- 博客列表 -->
<ModuleTransition delay="0.08"> <ModuleTransition delay="0.08">
<note-abstract <note-abstract
v-show="recoShowModule" v-show="recoShowModule"
class="list" class="list"
:data="posts" :data="posts"
:currentPage="currentPage" :currentPage="currentPage"
@currentTag="getCurrentTag"></note-abstract> @currentTag="getCurrentTag"></note-abstract>
</ModuleTransition> </ModuleTransition>
<!-- 分页 --> <!-- 分页 -->
<ModuleTransition delay="0.16"> <ModuleTransition delay="0.16">
<pagation <pagation
class="pagation" class="pagation"
:total="posts.length" :total="posts.length"
:currentPage="currentPage" :currentPage="currentPage"
@getCurrentPage="getCurrentPage"></pagation> @getCurrentPage="getCurrentPage"></pagation>
</ModuleTransition> </ModuleTransition>
</Common> </Common>
</div>
</template> </template>
<script> <script>

12
packages/vuepress-theme-reco/layouts/Layout.vue
View File

@ -1,11 +1,9 @@
<template> <template>
<div> <Common>
<Common> <component v-if="$frontmatter.home" :is="homeCom"/>
<component v-if="$frontmatter.home" :is="homeCom"/> <Page v-else :sidebar-items="sidebarItems"/>
<Page v-else :sidebar-items="sidebarItems"/> <Footer v-if="$frontmatter.home" class="footer" />
<Footer v-if="$frontmatter.home" class="footer" /> </Common>
</Common>
</div>
</template> </template>
<script> <script>

58
packages/vuepress-theme-reco/layouts/Tag.vue
View File

@ -1,36 +1,34 @@
<template> <template>
<div class="tag-wrapper"> <!-- 公共布局 -->
<!-- 公共布局 --> <Common class="tag-wrapper" :sidebar="false" :isComment="false">
<Common :sidebar="false" :isComment="false"> <!-- 标签集合 -->
<!-- 标签集合 --> <ModuleTransition>
<ModuleTransition> <TagList
<TagList v-show="recoShowModule"
v-show="recoShowModule" class="tags"
class="tags" :currentTag="$currentTags.key"
:currentTag="$currentTags.key" @getCurrentTag="tagClick"></TagList>
@getCurrentTag="tagClick"></TagList> </ModuleTransition>
</ModuleTransition>
<!-- 博客列表 --> <!-- 博客列表 -->
<ModuleTransition delay="0.08"> <ModuleTransition delay="0.08">
<note-abstract <note-abstract
v-show="recoShowModule" v-show="recoShowModule"
class="list" class="list"
:data="posts" :data="posts"
:currentPage="currentPage" :currentPage="currentPage"
@currentTag="$currentTags.key"></note-abstract> @currentTag="$currentTags.key"></note-abstract>
</ModuleTransition> </ModuleTransition>
<!-- 分页 --> <!-- 分页 -->
<ModuleTransition delay="0.16"> <ModuleTransition delay="0.16">
<pagation <pagation
class="pagation" class="pagation"
:total="posts.length" :total="posts.length"
:currentPage="currentPage" :currentPage="currentPage"
@getCurrentPage="getCurrentPage"></pagation> @getCurrentPage="getCurrentPage"></pagation>
</ModuleTransition> </ModuleTransition>
</Common> </Common>
</div>
</template> </template>
<script> <script>

56
packages/vuepress-theme-reco/layouts/Tags.vue
View File

@ -1,35 +1,33 @@
<template> <template>
<div class="tags-wrapper"> <Common class="tags-wrapper" :sidebar="false" :isComment="false">
<Common :sidebar="false" :isComment="false"> <!-- 标签集合 -->
<!-- 标签集合 --> <ModuleTransition>
<ModuleTransition> <TagList
<TagList v-show="recoShowModule"
v-show="recoShowModule" :currentTag="currentTag"
:currentTag="currentTag" @getCurrentTag="tagClick"></TagList>
@getCurrentTag="tagClick"></TagList> </ModuleTransition>
</ModuleTransition>
<!-- 博客列表 --> <!-- 博客列表 -->
<ModuleTransition delay="0.08"> <ModuleTransition delay="0.08">
<note-abstract <note-abstract
v-show="recoShowModule" v-show="recoShowModule"
class="list" class="list"
:data="$recoPosts" :data="$recoPosts"
:currentPage="currentPage" :currentPage="currentPage"
:currentTag="currentTag" :currentTag="currentTag"
@currentTag="getCurrentTag"></note-abstract> @currentTag="getCurrentTag"></note-abstract>
</ModuleTransition> </ModuleTransition>
<!-- 分页 --> <!-- 分页 -->
<ModuleTransition delay="0.16"> <ModuleTransition delay="0.16">
<pagation <pagation
class="pagation" class="pagation"
:total="$recoPosts.length" :total="$recoPosts.length"
:currentPage="currentPage" :currentPage="currentPage"
@getCurrentPage="getCurrentPage"></pagation> @getCurrentPage="getCurrentPage"></pagation>
</ModuleTransition> </ModuleTransition>
</Common> </Common>
</div>
</template> </template>
<script> <script>

159
packages/vuepress-theme-reco/layouts/TimeLines.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div> <Common class="timeline-wrapper" :sidebar="false" :isComment="false">
<Common :sidebar="false" :isComment="false"> <ul class="timeline-content">
<ul class="timeline-wrapper">
<ModuleTransition > <ModuleTransition >
<li v-show="recoShowModule" class="desc">Yesterday Once More!</li> <li v-show="recoShowModule" class="desc">Yesterday Once More!</li>
</ModuleTransition> </ModuleTransition>
@ -21,8 +20,6 @@
</ModuleTransition> </ModuleTransition>
</ul> </ul>
</Common> </Common>
</div>
</template> </template>
<script> <script>
@ -61,93 +58,95 @@ export default {
@require '../styles/wrapper.styl' @require '../styles/wrapper.styl'
.timeline-wrapper .timeline-wrapper
box-sizing border-box
max-width: 740px; max-width: 740px;
margin: 8rem auto 4rem; margin: 0 auto;
position relative padding: 4.6rem 2.5rem 0;
list-style none .timeline-content
&::after { box-sizing border-box
content: " "; position relative
position: absolute; list-style none
top: 14px; &::after {
left: 0;
z-index: -1;
margin-left: -2px;
width: 4px;
height: 100%;
background: var(--border-color);
}
.desc, .year {
position: relative;
color var(--text-color);
font-size 16px
&:before {
content: " "; content: " ";
position: absolute; position: absolute;
z-index 2; top: 14px;
left: -20px; left: 0;
top: 50%; z-index: -1;
margin-left: -4px; margin-left: -2px;
margin-top: -4px; width: 4px;
width: 8px; height: 100%;
height: 8px; background: var(--border-color);
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 50%;
} }
} .desc, .year {
.year { position: relative;
margin: 80px 0 0px; color var(--text-color);
color var(--text-color); font-size 16px
font-weight: 700; &:before {
font-size 26px content: " ";
} position: absolute;
.year-wrapper { z-index 2;
padding-left 0!important left: -20px;
li { top: 50%;
display flex margin-left: -4px;
padding 30px 0 10px margin-top: -4px;
list-style none width: 8px;
border-bottom: 1px dashed var(--border-color); height: 8px;
position relative background: var(--background-color);
&:hover { border: 1px solid var(--border-color);
border-radius: 50%;
}
}
.year {
margin: 80px 0 0px;
color var(--text-color);
font-weight: 700;
font-size 26px
}
.year-wrapper {
padding-left 0!important
li {
display flex
padding 30px 0 10px
list-style none
border-bottom: 1px dashed var(--border-color);
position relative
&:hover {
.date {
color $accentColor
&::before {
background $accentColor
}
}
.title {
color $accentColor
}
}
.date { .date {
color $accentColor width 40px
line-height 30px
color var(--text-color-sub)
font-size 12px
&::before { &::before {
background $accentColor content: " ";
position: absolute;
left: -19px;
top: 41px;
width: 6px;
height: 6px;
margin-left: -4px;
background: var(--background-color);
border-radius: 50%;
border: 1px solid var(--border-color);
z-index 2
} }
} }
.title { .title {
color $accentColor line-height 30px
color var(--text-color-sub)
font-size 16px
cursor pointer
} }
} }
.date {
width 40px
line-height 30px
color var(--text-color-sub)
font-size 12px
&::before {
content: " ";
position: absolute;
left: -19px;
top: 41px;
width: 6px;
height: 6px;
margin-left: -4px;
background: var(--background-color);
border-radius: 50%;
border: 1px solid var(--border-color);
z-index 2
}
}
.title {
line-height 30px
color var(--text-color-sub)
font-size 16px
cursor pointer
}
} }
}
@media (max-width: $MQMobile) @media (max-width: $MQMobile)
.timeline-wrapper .timeline-wrapper
margin: 0 1.2rem; margin: 0 1.2rem;