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 () {
this.recoShow = true
this._setPage(this._getStoragePage())
console.log(this)
},
methods: {
// 获取当前页码

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

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

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

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

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

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

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

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

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

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

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

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