Skip to content

Commit b94f3b9

Browse files
programmermarkprogrammermark
committed
add:为blogvue天界了小说页面和组件，同时修复了一些样式问题
1 parent 022cac5 commit b94f3b9

File tree

16 files changed

+722
-40
lines changed

16 files changed

+722
-40
lines changed

‎blog/components/Author.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Icon from "../components/Icon"
55
import '../public/style/components/author.css'
66

77
const Author = (props)=>{
8+
console.log(props)
89

910
return (
1011
<div className="author-container">
@@ -20,10 +21,10 @@ const Author = (props)=>{
2021
<p className="count">{props.userInfo.articleCount}</p>
2122
<p className="title">文章</p>
2223
</div>
23-
{/* <div className="info-item">
24-
<p className="count">{novelCount}</p>
24+
<div className="info-item">
25+
<p className="count">{props.userInfo.novelCount}</p>
2526
<p className="title">小说</p>
26-
</div> */}
27+
</div>
2728
<div className="info-item">
2829
<p className="count">{props.userInfo.talkCount}</p>
2930
<p className="title">说说</p>

‎blog/components/Menu.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const myMenu = (props) => {
2020
}, [])
2121

2222
return (
23-
<Menu mode="horizontal" defaultSelectedKeys={[currentNav]} selectedKeys={[currentNav]}>
23+
<Menu className="menu-width" mode="horizontal" defaultSelectedKeys={[currentNav]} selectedKeys={[currentNav]}>
2424
{ navs.map(item => {
2525
return (
2626
<Menu.Item className="menu-item" key={item.type}>

‎blog/public/style/components/articletype.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.type-wrapper {
22
margin: 1rem 0 1rem 0;
3-
padding: .8rem .4rem;
3+
padding: .4rem .4rem;
44
background-color: #ffffff;
55
border-radius: .4rem;
66
}
@@ -15,7 +15,7 @@
1515
color: #333333;
1616
height: 2rem;
1717
line-height: 2rem;
18-
margin: 0 .5rem;
18+
margin: .5rem .5rem;
1919
padding: 0rem 1rem;
2020
background-color: #ffffff;
2121
border: 1px solid #55b2ff;

‎blog/public/style/components/menu.css

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,3 @@
1-
.menu-container {
2-
padding: 4rem 0;
3-
}
4-
5-
.menu-container .menu-item {
6-
display: block;
7-
color: #555555;
8-
font-size: 1.1rem;
9-
height: 50px;
10-
line-height: 50px;
11-
padding: 0 1rem 0 1.5rem;
12-
}
13-
.menu-container .menu-item:hover {
14-
background-color: #e6f7ff;
15-
}
16-
.menu-container .menu-item .name {
17-
padding-left: .5rem;
1+
.menu-widt {
2+
min-width: 400px;
183
}

‎blogvue/src/components/ArticleItem.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,6 @@
3737
</template>
3838

3939
<script>
40-
// import marked from 'marked'
41-
// import hljs from "highlight.js";
42-
// import 'highlight.js/styles/monokai-sublime.css';
4340
import { formatDate } from '../assets/js/tools'
4441
import Icon from './Icon'
4542
@@ -173,5 +170,4 @@ export default {
173170
box-sizing: border-box;
174171
}
175172
}
176-
177173
</style>

‎blogvue/src/components/ArticleItemDetail.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@
3333
</template>
3434

3535
<script>
36-
// import marked from 'marked'
37-
// import hljs from 'highlight.js'
38-
// import 'highlight.js/styles/monokai-sublime.css'
3936
import Comment from './Comment'
4037
import Icon from './Icon'
4138
import { formatTime } from '../assets/js/tools'

‎blogvue/src/components/ArticleType.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default {
4545
<style lang="scss" scoped>
4646
.type-wrapper {
4747
margin: 1rem 0 1rem 0;
48-
padding: .8rem .4rem;
48+
padding: .4rem .4rem;
4949
background-color: #ffffff;
5050
border-radius: .4rem;
5151
.title {

‎blogvue/src/components/Author.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
<p class="count">{{userInfo.articleCount}}</p>
1111
<p class="title">文章</p>
1212
</div>
13-
<!-- <div class="info-item">
14-
<p class="count">{{novelCount}}</p>
13+
<div class="info-item">
14+
<p class="count">{{userInfo.novelCount}}</p>
1515
<p class="title">小说</p>
16-
</div> -->
16+
</div>
1717
<div class="info-item">
1818
<p class="count">{{userInfo.talkCount}}</p>
1919
<p class="title">说说</p>

‎blogvue/src/components/ChapterDetailed.vue

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<template>
2+
<div class="article-detailed">
3+
<div class="title">{{chapter.title}}</div>
4+
<div class="sub-info">
5+
<div class="item">
6+
<c-icon type="icon-book" />
7+
<span class="text">{{chapter.novelName}}</span>
8+
</div>
9+
<div class="item">
10+
<c-icon type="icon-antd-user" />
11+
<span class="text">{{chapter.authorName}}</span>
12+
</div>
13+
<div class="item">
14+
<c-icon type="icon-clock" />
15+
<span class="text">{{formatTime(chapter.updateTime * 1000, 'yyyy-MM-dd')}}</span>
16+
</div>
17+
<div class="item" v-if="chapter.viewCount > 0">
18+
<c-icon type="icon-antd-fire" />
19+
<span class="text">{{chapter.viewCount}}</span>
20+
</div>
21+
</div>
22+
<div
23+
class="article-content"
24+
v-html="marked(chapter.content)"></div>
25+
<div class='pager'>
26+
<div class='item' v-if="chapter.preId">
27+
<router-link class='item-text' :to="`/chapterdetail?id=${chapter.preId}`">
28+
上一章
29+
</router-link>
30+
</div>
31+
<div class='item'>
32+
<router-link class='item-text' :to="`/noveldetail?id=${chapter.novelId}`">
33+
目录
34+
</router-link>
35+
</div>
36+
<div class='item' v-if="chapter.nextId">
37+
<router-link class='item-text' :to="`/chapterdetail?id=${chapter.nextId}`">
38+
下一章
39+
</router-link>
40+
</div>
41+
</div>
42+
<div class="comment-wrapper">
43+
<div class="divider">评论</div>
44+
<c-comment type="novel" :id="chapter.id" />
45+
</div>
46+
</div>
47+
</template>
48+
49+
<script>
50+
import Comment from '@/components/Comment'
51+
import Icon from './Icon'
52+
import { formatTime } from '../assets/js/tools'
53+
54+
const renderer = new marked.Renderer()
55+
marked.setOptions({
56+
renderer: renderer,
57+
gfm: true,
58+
pedantic: false,
59+
sanitize: false,
60+
tables: true,
61+
breaks: true,
62+
smartLists: true,
63+
smartypants: false,
64+
highlight: function(code){
65+
return hljs.highlightAuto(code).value;
66+
}
67+
})
68+
69+
export default {
70+
components: {
71+
'c-comment': Comment,
72+
'c-icon': Icon
73+
},
74+
props: {
75+
chapter: {
76+
type: Object,
77+
required: true
78+
}
79+
},
80+
methods: {
81+
formatTime,
82+
marked
83+
},
84+
}
85+
</script>
86+
87+
<style lang="scss" scoped>
88+
.article-detailed {
89+
background-color: #fff;
90+
margin-top: 1rem;
91+
padding: 1rem;
92+
text-align: center;
93+
.title {
94+
font-size: 1.4rem;
95+
color: #333333;
96+
padding: .5rem 0;
97+
}
98+
.sub-info {
99+
display: flex;
100+
justify-content: center;
101+
padding: 1rem 0;
102+
.reprint {
103+
color: #74cf59;
104+
margin-right: 2rem;
105+
padding: .25rem .5rem;
106+
background-color: #eaf9e3;
107+
}
108+
.orginal {
109+
color: #ca0c16;
110+
background-color: #f9ecec;
111+
}
112+
.item {
113+
font-size: 1rem;
114+
color: #999999;
115+
padding-right: 2rem;
116+
.text {
117+
font-size: .9rem;
118+
margin-left: .5rem;
119+
}
120+
}
121+
}
122+
.article-content {
123+
text-align: left;
124+
padding: 1rem;
125+
font-size: 1rem;
126+
& /deep/ img {
127+
width: 100%;
128+
padding: 1rem 0;
129+
}
130+
}
131+
.pager {
132+
display: flex;
133+
align-items: center;
134+
margin: 1rem 0 2rem;
135+
padding: .5rem 0;
136+
.item {
137+
flex: 1;
138+
margin: 0 .5rem;
139+
padding: .5rem 0;
140+
background-color: #eaeaea;
141+
border-radius: .25rem;
142+
.item-text {
143+
padding: .5rem 1rem;
144+
font-size: 1.2rem;
145+
color: #333333 !important;
146+
}
147+
}
148+
}
149+
.comment-wrapper {
150+
.divider {
151+
font-size: 1rem;
152+
color: #999999;
153+
margin: 1rem .5rem;
154+
padding: .5rem 0;
155+
border-bottom: 1px solid #dddddd;
156+
letter-spacing: .5rem;
157+
}
158+
}
159+
/* 美化markdown */
160+
& /deep/ pre{
161+
display: block;
162+
background-color: #283646;
163+
padding: .5rem !important;
164+
overflow-y: auto;
165+
font-weight: 300;
166+
font-family: Menlo, monospace;
167+
border-radius: .3rem;
168+
}
169+
& /deep/ pre > code{
170+
border:0px !important;
171+
background-color: #283646 !important;
172+
color:#FFF;
173+
}
174+
& /deep/ code {
175+
color: #c7254e;
176+
background-color: #f9f2f4;
177+
border-radius: 4px;
178+
font-size: 12px;
179+
padding-left: 5px;
180+
padding-right: 5px;
181+
margin: 0px 3px;
182+
width: calc(100% - 10px);
183+
box-sizing: border-box;
184+
}
185+
}
186+
</style>

0 commit comments

Comments
 (0)