Skip to content

Commit 29b9165

Browse files
author
许浩东
committed
移动端适配
1 parent c0f4943 commit 29b9165

29 files changed

+855
-592
lines changed

‎config/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ module.exports = {
77
index: path.resolve(__dirname, '../dist/index.html'),
88
assetsRoot: path.resolve(__dirname, '../dist'),
99
assetsSubDirectory: 'static',
10-
assetsPublicPath: './',
10+
assetsPublicPath: '/',
1111
productionSourceMap: true,
1212
// Gzip off by default as many popular static hosts such as
1313
// Surge or Netlify already gzip all static assets for you.

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
56
<title>vue-blog</title>
67
<link rel='shortcut icon' type='image/x-icon' href='static/favicon.ico'/>
78
</head>

‎server/api/article.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ router.get('/api/someArticles', (req, res) => {
9898
res.send(articles)
9999
})
100100
} else if (key === 'title') { // 根据标题的部分内容来搜索文章
101-
db.Article.find({title: re})
101+
db.Article.find({title: re, isPublish: true})
102102
.sort({date: -1}).limit(4).skip(skip).exec()
103103
.then((articles) => {
104104
res.send(articles)

‎src/App.vue

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app">
3-
<fire-canvas></fire-canvas>
3+
<fire-canvas class="fire"></fire-canvas>
44
<router-view></router-view>
55
</div>
66
</template>
@@ -42,7 +42,15 @@ export default {
4242
margin: 0;
4343
padding: 0;
4444
overflow: hidden;
45-
height: 100%;
45+
min-height: 100%;
4646
width: 100%;
4747
}
48+
@media screen and (max-width: 440px) {
49+
.fire {
50+
display: none;
51+
}
52+
#app {
53+
background: #000;
54+
}
55+
}
4856
</style>

‎src/assets/css/common.scss

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,52 @@
22
margin: 0;
33
padding: 0;
44
}
5+
html {
6+
height: 100%;
7+
font-size: 16px;
8+
}
59
body {
10+
height: 100%;
611
font-family: "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
712
}
813
a {
914
text-decoration: none;
1015
color: rgb(129, 216, 208);
1116
}
1217
button {
13-
width: 110px;
14-
height: 40px;
18+
height: 2.5rem;
1519
border: none;
1620
outline: none;
17-
color: #ffffff;
18-
background: darkturquoise;
19-
margin-top: 30px;
20-
padding-left: 7px;
21+
color: #00193a;
22+
background: rgb(129, 216, 208);
23+
margin-top: 1.875rem;
24+
padding-left: 0.4375rem;
2125
cursor: pointer;
22-
border-radius: 4px;
26+
border-radius: 0.25rem;
2327
transition: 0.5s;
24-
font-size: 14px;
28+
font-size: 0.875rem;
2529
span {
2630
display: inline-block;
27-
height: 40px;
28-
line-height: 40px;
31+
height: 2.5rem;
32+
line-height: 2.5rem;
2933
position: relative;
3034
transition: 0.5s;
3135
}
3236
&:hover span {
33-
padding-right: 10px;
37+
padding-right: 0.625rem;
3438
transition: 0.5s;
3539
}
3640
span:after {
3741
content: '\00bb';
3842
opacity: 0;
3943
transition: 0.5s;
40-
font-size: 20px;
44+
font-size: 1.25rem;
4145
position: relative;
4246
right: 0;
4347
}
4448
&:hover span:after{
4549
opacity: 1;
46-
right: -8px;
50+
right: -0.5rem;
4751
}
4852
}
4953
.hashTitle {
@@ -54,3 +58,30 @@ h1, h2, h3, h4, h5, h6 {
5458
}
5559

5660

61+
@media screen and (max-width: 400px) {
62+
html {font-size: 20px;}
63+
}
64+
@media screen and (max-width: 380px) {
65+
html {font-size: 19px;}
66+
}
67+
@media screen and (max-width: 360px) {
68+
html {font-size: 18px;}
69+
}
70+
@media screen and (max-width: 340px) {
71+
html {font-size: 17px;}
72+
}
73+
@media screen and (max-width: 320px) {
74+
html {font-size: 16px;}
75+
}
76+
//@media screen and (min-width: 440px) {
77+
// html {font-size: 18px;}
78+
//}
79+
//
80+
//@media screen and (min-width: 480px) {
81+
// html {font-size: 17px;}
82+
//}
83+
//
84+
//@media screen and (min-width: 640px) {
85+
// html {font-size: 16px;}
86+
//}
87+

‎src/assets/css/marked.scss

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
blockquote {
2-
margin-top: 20px;
3-
border-left: 3px solid darkturquoise;
4-
padding: 0 10px;
2+
margin-top: 1.25rem;
3+
border-left: 0.1875rem solid darkturquoise;
4+
padding: 0 0.625rem;
55
background: rgba(204, 204, 204, 0.5);
66
}
77
ul, ol{
88
margin-top: 0;
9-
padding-left: 20px;
10-
line-height: 18px;
9+
padding-left: 1.25rem;
10+
line-height: 1.125rem;
1111
}
1212
code {
1313
color: rgb(147, 240, 216);
1414
background: rgb(71, 73,73);
1515
font-family: Consolas;
16-
padding: 0 5px;
17-
white-space: pre-wrap;
18-
border-radius: 5px;
16+
padding: 0 0.3125rem;
17+
border-radius: 0.3125rem;
18+
overflow-x: auto;
1919
}
2020
hr {
21-
margin: 10px 0 0;
21+
margin: 0.625rem 0 0;
2222
}
2323
pre {
24-
padding: 10px 10px;
24+
padding: 0.625rem 0.625rem;
2525
background: rgb(71, 73,73);
26-
border-radius: 5px;
26+
border-radius: 0.3125rem;
27+
overflow-x: auto;
2728
}
2829
h1, h2, h3, h4, h5, h6 {
29-
margin-bottom: 10px;
30+
margin-bottom: 0.625rem;
3031
}

‎src/assets/css/normalize.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
*/
1111

1212
html {
13-
line-height: 1.15; /* 1 */
1413
-ms-text-size-adjust: 100%; /* 2 */
1514
-webkit-text-size-adjust: 100%; /* 2 */
1615
}

‎src/components/back/account.vue

Lines changed: 20 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -82,75 +82,63 @@ export default {
8282
<style lang="scss" rel="stylesheet/scss" scoped>
8383
.account {
8484
position: relative;
85-
margin: 80px auto 0;
86-
width: calc(100% - 100px);
87-
height: 400px;
85+
margin: 5rem auto 0;
86+
height: 25rem;
8887
p.icon {
89-
width: calc(100% - 100px);
88+
width: calc(100% - 6.25rem);
9089
text-align: center;
91-
margin: 0 auto 100px;
90+
margin: 0 auto 6.25rem;
9291
.icon-icon69 {
93-
font-size: 60px;
92+
font-size: 3.75rem;
9493
color: darkturquoise;
9594
}
9695
}
9796
div {
98-
width: 300px;
97+
width: 18.75rem;
9998
margin: 0 auto;
10099
position: relative;
101100
i {
102101
color: deepskyblue;
103-
font-size: 30px;
102+
font-size: 1.875rem;
104103
display: block;
105104
position: absolute;
106105
top: 0;
107-
left: 20px;
106+
left: 1.25rem;
108107
transition: 0.5s;
109108
}
110109
}
111110
input {
112-
width: 200px;
113-
height: 30px;
111+
width: 12.5rem;
112+
height: 1.875rem;
114113
display: block;
115-
margin-top: 40px;
116-
margin-bottom: 20px;
117-
margin-left: 70px;
114+
margin-top: 2.5rem;
115+
margin-bottom: 1.25rem;
116+
margin-left: 4.375rem;
118117
outline: none;
119118
border: none;
120-
border-bottom: 3px solid #fc8c84;
119+
border-bottom: 0.1875rem solid #fc8c84;
121120
background: transparent;
122121
color: #fff;
123-
font-size: 16px;
124-
padding-left: 10px;
122+
font-size: 1rem;
123+
padding-left: 0.625rem;
125124
&:focus + i {
126125
color: #ffc520;
127126
}
128127
}
129128
button {
130-
width: 200px;
129+
width: 12.5rem;
131130
position: absolute;
132131
bottom: 0;
133132
left: 50%;
134-
margin-left: -80px;
133+
margin-left: -5rem;
134+
background: deepskyblue;
135135
}
136136
}
137137
p{
138138
text-align: center;
139-
height: 16px;
139+
height: 1rem;
140140
color: royalblue;
141141
}
142-
/*#btn_place {*/
143-
/*width: 100%;*/
144-
/*position: absolute;*/
145-
/*bottom: -45px;*/
146-
/*button {*/
147-
/*margin-top: 0;*/
148-
/*}*/
149-
/*}*/
150-
/*.button_1 {*/
151-
/*margin-left: 30px;*/
152-
/*margin-right: 40px;*/
153-
/*}*/
154142
.fade-leave-active {
155143
transition: opacity .5s
156144
}

0 commit comments

Comments
 (0)