Skip to content

Commit d2ed236

Browse files
cadecodecadecode
committed
[Chore]优化组件和页面
1. 列表卡片组件化 2. 时间显示效果去 0
1 parent 4e9c030 commit d2ed236

File tree

5 files changed

+75
-84
lines changed

5 files changed

+75
-84
lines changed

‎components/Cards.vue

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<el-row class="cards-container">
3+
<el-col :xs="24" :sm="12" :md="8" v-for="(item, index) in pages" :index="index">
4+
<div class="cards-item-wrapper">
5+
<el-card class="cards-item" shadow="always" :body-style="{ padding: '0px' }">
6+
<div class="cards-item-cover" :style="`background-image: url(${item.cover});`"></div>
7+
<div class="cards-item-desc">{{item.desc}}</div>
8+
<div class="cards-item-pined" v-if="item.pined">
9+
<i class="el-icon-s-flag" />
10+
</div>
11+
<router-link :to="item.path">
12+
<div class="cards-item-title">
13+
{{item.title}}
14+
</div>
15+
<div class="cards-item-meta">
16+
<div class="cards-item-date">
17+
<i class="el-icon-edit-outline" />
18+
{{item.date}}
19+
</div>
20+
<div class="cards-item-tag">
21+
<i class="el-icon-paperclip" />
22+
{{item.tag}}
23+
</div>
24+
</div>
25+
</router-link>
26+
</el-card>
27+
</div>
28+
</el-col>
29+
</el-row>
30+
</template>
31+
32+
<script>
33+
export default {
34+
name: "Cards",
35+
props: ['pages']
36+
}
37+
</script>
38+

‎layouts/Index.vue

+6-31
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,7 @@
11
<template>
22
<div class="index-container">
33
<Notice v-if="pagination.currentPage === 1" />
4-
<el-row>
5-
<el-col :xs="24" :sm="12" :md="8" v-for="(item, index) in pages" :index="index">
6-
<div class="index-card-wrapper">
7-
<el-card class="index-card" shadow="always" :body-style="{ padding: '0px' }">
8-
<div class="index-card-cover" :style="`background-image: url(${item.cover});`"></div>
9-
<div class="index-card-desc">{{item.desc}}</div>
10-
<div class="index-card-pined" v-if="item.pined">
11-
<i class="el-icon-s-flag" />
12-
</div>
13-
<router-link :to="item.path">
14-
<div class="index-card-title">
15-
{{item.title}}
16-
</div>
17-
<div class="index-card-meta">
18-
<div class="index-card-date">
19-
<i class="el-icon-edit-outline" />
20-
{{item.date}}
21-
</div>
22-
<div class="index-card-tag">
23-
<i class="el-icon-paperclip" />
24-
{{item.tag}}
25-
</div>
26-
</div>
27-
</router-link>
28-
</el-card>
29-
</div>
30-
</el-col>
31-
</el-row>
4+
<Cards :pages="pages" />
325
<el-pagination class="index-pagination"
336
@current-change="handlePagination"
347
layout="prev, pager, next"
@@ -45,18 +18,20 @@
4518
import AllMixin from '../components/AllMixin'
4619
4720
import Notice from '../components/Notice'
21+
import Cards from '../components/Cards'
4822
4923
export default {
5024
name: "Index",
51-
mixins:[AllMixin],
25+
mixins: [AllMixin],
5226
data() {
5327
return {
5428
pages: [],
5529
pagination: {}
5630
}
5731
},
5832
components: {
59-
Notice
33+
Notice,
34+
Cards
6035
},
6136
methods: {
6237
handlePagination(num) {
@@ -72,7 +47,7 @@
7247
this.pages.push({
7348
cover: item.frontmatter.cover || `/cover/${matchedLength - matchedPages.indexOf(item)}.png`,
7449
title: item.frontmatter.title || 'No title',
75-
date: day(item.frontmatter.date || '1970/1/1').format('YYYY-MM-DD'),
50+
date: day(new Date(item.frontmatter.date || '1970/1/1')).format('YYYY-M-D'),
7651
desc: item.frontmatter.description || 'No description',
7752
tag: Array.isArray(item.frontmatter.tag) ? item.frontmatter.tag[0] : item.frontmatter.tag || 'No tag',
7853
pined: !!item.frontmatter.pined,

‎layouts/Tag.vue

+13-34
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,24 @@
11
<template>
22
<div class="tag-container">
3-
<p class="tag-name">
4-
<i class="el-icon-collection" />
5-
{{tagName}}
6-
</p>
7-
<el-row>
8-
<el-col :xs="24" :sm="12" :md="8" v-for="(item, index) in pages" :index="index">
9-
<div class="index-card-wrapper">
10-
<el-card class="index-card" shadow="always" :body-style="{ padding: '0px' }">
11-
<div class="index-card-cover" :style="`background-image: url(${item.cover});`"></div>
12-
<div class="index-card-desc">{{item.desc}}</div>
13-
<div class="index-card-pined" v-if="item.pined">
14-
<i class="el-icon-s-flag" />
15-
</div>
16-
<router-link :to="item.path">
17-
<div class="index-card-title">
18-
{{item.title}}
19-
</div>
20-
<div class="index-card-meta">
21-
<div class="index-card-date">
22-
<i class="el-icon-edit-outline" />
23-
{{item.date}}
24-
</div>
25-
<div class="index-card-tag">
26-
<i class="el-icon-paperclip" />
27-
{{item.tag}}
28-
</div>
29-
</div>
30-
</router-link>
31-
</el-card>
32-
</div>
33-
</el-col>
34-
</el-row>
3+
<p class="tag-name">
4+
<i class="el-icon-collection" />
5+
{{tagName}}
6+
</p>
7+
<Cards :pages="pages" />
358
</div>
369
</template>
3710

3811
<script>
3912
import AllMixin from '../components/AllMixin'
13+
14+
import Cards from '../components/Cards'
15+
4016
export default {
4117
name: "Tag",
42-
mixins:[AllMixin],
18+
mixins: [AllMixin],
19+
components:{
20+
Cards
21+
},
4322
data() {
4423
return {
4524
pages: [],
@@ -56,7 +35,7 @@
5635
this.pages.push({
5736
cover: item.frontmatter.cover || `/cover/${matchedLength - matchedPages.indexOf(item)}.png`,
5837
title: item.frontmatter.title || 'No title',
59-
date: day(item.frontmatter.date || '1970/1/1').format('YYYY-MM-DD'),
38+
date: day(new Date(item.frontmatter.date || '1970/1/1')).format('YYYY-M-D'),
6039
desc: item.frontmatter.description || 'No description',
6140
tag: Array.isArray(item.frontmatter.tag) ? item.frontmatter.tag[0] : item.frontmatter.tag || 'No tag',
6241
pined: !!item.frontmatter.pined,

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@cadecode/vuepress-theme-2zh",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "由 vuepress 驱动的静态博客主题",
55
"main": "index.js",
66
"scripts": {
@@ -31,7 +31,7 @@
3131
"@vuepress/plugin-medium-zoom": "^1.5.2",
3232
"@vuepress/plugin-search": "^1.5.2",
3333
"core-js": "^2.6.11",
34-
"dayjs": "1.8.30",
34+
"dayjs": "^1.8.31",
3535
"element-ui": "^2.13.2",
3636
"katex": "^0.12.0",
3737
"mermaid": "^8.6.2",

‎styles/main.styl

+16-17
Original file line numberDiff line numberDiff line change
@@ -81,39 +81,43 @@
8181
padding 20px
8282
max-width 1000px
8383

84+
.index-pagination
85+
margin 20px 0 10px
86+
background-color transparent
87+
text-align center
8488

85-
.index-card-wrapper
89+
// Cards.vue
90+
.cards-item-wrapper
8691
margin 0 auto
8792
padding 20px
8893
max-width 300px
8994

90-
91-
.index-card
95+
.cards-item
9296
position relative
9397
transition .3ms ease
9498

9599
&:hover
96100
box-shadow $minBoxShadow !important
97101

98-
.index-card-cover
102+
.cards-item-cover
99103
transform scale(1.1)
100104
filter blur(1px)
101105

102-
.index-card-desc
106+
.cards-item-desc
103107
padding-top 20px
104108
opacity 1
105109

106110
a
107111
color $mainText
108112

109-
.index-card-cover
113+
.cards-item-cover
110114
min-height 160px
111115
background-color $cardCoverBg
112116
background-position center center
113117
background-size cover
114118
transition .3s ease
115119

116-
.index-card-desc
120+
.cards-item-desc
117121
position absolute
118122
top 0
119123
opacity 0
@@ -125,7 +129,7 @@
125129
font-size 13px
126130
transition .3s ease
127131

128-
.index-card-pined
132+
.cards-item-pined
129133
position absolute
130134
top 10px
131135
right 0
@@ -136,14 +140,14 @@
136140
color #ffffff
137141
line-height 1
138142

139-
.index-card-title
143+
.cards-item-title
140144
position relative
141145
min-height 70px
142146
padding 10px 20px 0
143147
background-color #ffffff
144148
font-size 16px
145149

146-
.index-card-meta
150+
.cards-item-meta
147151
position relative
148152
padding 0 20px
149153
min-height 30px
@@ -152,25 +156,20 @@
152156
font-size 13px
153157
line-height 30px
154158

155-
.index-card-date
159+
.cards-item-date
156160
float left
157161
padding-right 10px
158162
width 50%
159163
text-align right
160164

161-
.index-card-tag
165+
.cards-item-tag
162166
float left
163167
overflow-x hidden
164168
padding-left 10px
165169
width 50%
166170
text-overflow ellipsis
167171
white-space nowrap
168172

169-
.index-pagination
170-
margin 20px 0 10px
171-
background-color transparent
172-
text-align center
173-
174173
// Search.vue
175174
.search-container
176175
padding 60px 20px 20px

0 commit comments

Comments
 (0)