Skip to content

Commit 40a49c1

Browse files
fxss5201fxss5201
committed
添加 about 页面
1 parent ad22497 commit 40a49c1

File tree

10 files changed

+172
-13
lines changed

10 files changed

+172
-13
lines changed

‎src/components/AsideAuthor.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="author clearfix">
3+
<div class="item">
4+
<div class="title">原创</div>
5+
<div class="number">10</div>
6+
</div>
7+
<div class="item">
8+
<div class="title">转载</div>
9+
<div class="number">10</div>
10+
</div>
11+
<div class="item">
12+
<div class="title">翻译</div>
13+
<div class="number">10</div>
14+
</div>
15+
<div class="item">
16+
<div class="title">views</div>
17+
<div class="number">10</div>
18+
</div>
19+
<div class="item">
20+
<div class="title">star</div>
21+
<div class="number">10</div>
22+
</div>
23+
</div>
24+
</template>
25+
26+
<script>
27+
export default {
28+
name: 'AsideAuthor'
29+
}
30+
</script>
31+
32+
<style lang="scss" scoped>
33+
@import './../style/components/aside-author.scss';
34+
</style>

‎src/components/listArticle.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
<script>
2424
export default {
25-
25+
name: 'ListArticle'
2626
}
2727
</script>
2828

‎src/components/prevAndNext.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<script>
99
export default {
10-
name: 'prevAndNext'
10+
name: 'PrevAndNext'
1111
}
1212
</script>
1313

‎src/style/components/aside-author.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@import './../common.scss';
2+
3+
.author {
4+
padding: 10px 0;
5+
display: flex;
6+
align-items: center;
7+
justify-content: space-between;
8+
.item {
9+
.title {
10+
color: $--color-info;
11+
}
12+
.number {
13+
text-align: center;
14+
color: $--color-primary;
15+
font-weight: 700;
16+
}
17+
}
18+
}

‎src/style/components/aside-card.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import './../common.scss';
22

33
.box-card {
4-
margin-bottom: 15px;
54
.box-card_item {
65
line-height: 26px;
76
.box-card_item-link {

‎src/style/views/home.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
.home,
44
.list,
5-
.detail {
5+
.detail,
6+
.about {
67
width: $page-width;
78
margin: 0 auto;
89
}
@@ -22,4 +23,8 @@
2223
padding: 30px 0;
2324
text-align: center;
2425
}
26+
}
27+
28+
.box-card + .box-card {
29+
margin-top: 15px;
2530
}

‎src/views/About.vue

Lines changed: 107 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,114 @@
11
<template>
2-
<div class="about">
3-
<h1>This is an about page</h1>
4-
</div>
2+
<el-container class="about">
3+
<el-aside width="268px">
4+
<el-collapse v-model="activeName" accordion>
5+
<el-collapse-item name="1">
6+
<template slot="title">
7+
<el-avatar class="author-img" size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
8+
<span class="author-name ellipsis">樊小书生樊小书生樊小书生樊小书生樊小书生樊小书生樊小书生</span>
9+
</template>
10+
<aside-author></aside-author>
11+
<aside-card
12+
:cardType="1"
13+
title="最新文章"></aside-card>
14+
<aside-card
15+
:cardType="2"
16+
title="博客专栏"></aside-card>
17+
</el-collapse-item>
18+
<el-collapse-item name="2">
19+
<template slot="title">
20+
<el-avatar class="author-img" size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
21+
<span class="author-name ellipsis">樊小书生2</span>
22+
</template>
23+
<aside-author></aside-author>
24+
<aside-card
25+
:cardType="1"
26+
title="最新文章"></aside-card>
27+
<aside-card
28+
:cardType="2"
29+
title="博客专栏"></aside-card>
30+
</el-collapse-item>
31+
</el-collapse>
32+
</el-aside>
33+
<el-main class="content">
34+
<div class="content-header clearfix">
35+
<el-checkbox v-model="justOriginal">仅看原创</el-checkbox>
36+
<div class="content-header_select fr">
37+
<span>文章排序：</span>
38+
<el-select v-model="headerSelectValue" placeholder="请选择">
39+
<el-option
40+
v-for="item in headerSelect"
41+
:key="item.value"
42+
:label="item.label"
43+
:value="item.value">
44+
</el-option>
45+
</el-select>
46+
</div>
47+
</div>
48+
<div class="content-list">
49+
<list-article></list-article>
50+
<list-article></list-article>
51+
<list-article></list-article>
52+
<list-article></list-article>
53+
<list-article></list-article>
54+
<list-article></list-article>
55+
<list-article></list-article>
56+
<list-article></list-article>
57+
<list-article></list-article>
58+
<list-article></list-article>
59+
<list-article></list-article>
60+
</div>
61+
<div class="content-footer">
62+
<el-pagination
63+
background
64+
layout="prev, pager, next"
65+
:total="1000">
66+
</el-pagination>
67+
</div>
68+
</el-main>
69+
</el-container>
570
</template>
671

772
<script>
73+
import AsideAuthor from './../components/AsideAuthor.vue'
74+
import AsideCard from './../components/AsideCard.vue'
75+
import ListArticle from './../components/ListArticle.vue'
76+
877
export default {
9-
name: 'about'
78+
name: 'about',
79+
data () {
80+
return {
81+
activeName: '1',
82+
justOriginal: false,
83+
headerSelectValue: '0',
84+
headerSelect: [
85+
{
86+
value: '0',
87+
label: '默认'
88+
}, {
89+
value: '1',
90+
label: '按访问量'
91+
}, {
92+
value: '2',
93+
label: '按点赞数'
94+
}
95+
]
96+
}
97+
},
98+
components: {
99+
AsideCard,
100+
ListArticle,
101+
AsideAuthor
102+
}
10103
}
11104
</script>
105+
106+
<style scoped lang="scss">
107+
@import './../style/views/home.scss';
108+
.author-img {
109+
min-width: 28px;
110+
}
111+
.author-name {
112+
margin-left: 10px;
113+
}
114+
</style>

‎src/views/Detail.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939

4040
<script>
4141
import AsideCard from './../components/AsideCard.vue'
42-
import prevAndNext from './../components/prevAndNext.vue'
42+
import prevAndNext from './../components/PrevAndNext.vue'
4343
import 'highlight.js/scss/default.scss'
4444
import 'highlight.js/styles/vs2015.css'
4545
import hljs from 'highlight.js/lib/highlight'

‎src/views/Home.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555

5656
<script>
5757
import AsideCard from './../components/AsideCard.vue'
58-
import listArticle from './../components/listArticle.vue'
58+
import ListArticle from './../components/ListArticle.vue'
5959
6060
export default {
6161
name: 'home',
@@ -79,7 +79,7 @@ export default {
7979
},
8080
components: {
8181
AsideCard,
82-
listArticle
82+
ListArticle
8383
}
8484
}
8585
</script>

‎src/views/List.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646

4747
<script>
4848
import AsideCard from './../components/AsideCard.vue'
49-
import listArticle from './../components/listArticle.vue'
49+
import ListArticle from './../components/ListArticle.vue'
5050
5151
export default {
5252
name: 'list',
@@ -70,7 +70,7 @@ export default {
7070
},
7171
components: {
7272
AsideCard,
73-
listArticle
73+
ListArticle
7474
}
7575
}
7676
</script>

0 commit comments

Comments
 (0)