Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7b897ec

Browse files
feat: site introduction & solve some mobile issues
1 parent de0b17f commit 7b897ec

File tree

14 files changed

+349
-178
lines changed

14 files changed

+349
-178
lines changed

‎front/build/webpack.base.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ module.exports = {
4747
}
4848
},
4949
{
50-
test: /\.(gif|jpg|png|svg)\??.*$/,
50+
test: /\.(gif|jpg|png|svg|webp)\??.*$/,
5151
loader: 'url-loader',
5252
options: {
5353
limit: 10000,

‎front/src/components/splitLine/index.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ export default {
2121
hr {
2222
position: relative;
2323
margin: 40px 0;
24+
@include respond-to(xs) {
25+
margin: 20px 0;
26+
}
2427
@include themeify() {
2528
border: 2px dashed themed('color-hr-border');
2629
}

‎front/src/views/article/components/prevnext.vue‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<img :src="prevnext.prev.headerPic" alt="" />
1111
<div class="content__info">
1212
<div>上一篇</div>
13-
<div>{{ this.prevnext.prev.title }}</div>
13+
<divclass="info-title">{{ this.prevnext.prev.title }}</div>
1414
</div>
1515
</a>
1616
</div>
@@ -19,7 +19,7 @@
1919
<img :src="prevnext.next.headerPic" alt="" />
2020
<div class="content__info">
2121
<div>下一篇</div>
22-
<div>{{ this.prevnext.next.title }}</div>
22+
<divclass="info-title">{{ this.prevnext.next.title }}</div>
2323
</div>
2424
</a>
2525
</div>
@@ -69,6 +69,9 @@ export default {
6969
&__content {
7070
position: relative;
7171
height: 150px;
72+
@include respond-to(xs) {
73+
height: 100px;
74+
}
7275
@include flex-box-space;
7376
.content__prev,
7477
.content__next {
@@ -125,6 +128,13 @@ export default {
125128
flex-direction: column;
126129
justify-content: center;
127130
padding: 0 38px;
131+
.info-title {
132+
@include clamp(2);
133+
}
134+
135+
@include respond-to(xs) {
136+
padding: 0 12px;
137+
}
128138
@include themeify() {
129139
color: themed('color-title');
130140
}

‎front/src/views/article/components/share.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,14 @@ export default {
120120
@import '~@/style/index.scss';
121121
.share {
122122
@include flex-box-center;
123+
@include respond-to(xs) {
124+
flex-wrap: wrap;
125+
}
123126
&__tags {
124127
width: 60%;
128+
@include respond-to(xs) {
129+
width: 100%;
130+
}
125131
margin-right: 12px;
126132
> .tag {
127133
margin-right: 12px;
@@ -132,6 +138,10 @@ export default {
132138
display: flex;
133139
justify-content: flex-end;
134140
width: 40%;
141+
@include respond-to(xs) {
142+
width: 100%;
143+
justify-content: flex-start;
144+
}
135145
a {
136146
display: inline-block;
137147
width: 32px;

‎front/src/views/components/article-iterator.vue‎

Lines changed: 69 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
<template>
66
<div class="article-iterator">
77
<el-card class="article-iterator__item" v-for="(article, index) in articles" :key="index">
8-
<div class="article-iterator__item-content">
9-
<div class="article-iterator__item-pic">
8+
<div class="item-content">
9+
<div class="item-content__pic">
1010
<img :src="article.headerPic" alt="" />
1111
</div>
12-
<div class="article-iterator__item-info">
13-
<div class="article-iterator__item-link">
12+
<div class="item-content__info">
13+
<div class="item-content__link">
1414
<router-link :to="'/app/article/' + article.articleId">{{ article.title }}</router-link>
1515
</div>
16-
<div class="article-iterator__item-detail">
16+
<div class="item-content__detail">
1717
<span>
1818
<i class="el-icon-date"></i>
1919
发表时间 {{ article.createTime | formatDate }}
@@ -29,7 +29,7 @@
2929
点赞 {{ article.likeNum }}
3030
</span>
3131
</div>
32-
<div class="article-iterator__item-abstract">{{ article.abstract }}</div>
32+
<div class="item-content__abstract">{{ article.abstract }}</div>
3333
</div>
3434
</div>
3535
</el-card>
@@ -56,95 +56,87 @@ export default {
5656
.article-iterator {
5757
&__item {
5858
height: 280px;
59-
59+
@include respond-to(xs) {
60+
height: auto;
61+
}
6062
> .el-card__body {
6163
width: 100%;
6264
height: 100%;
6365
padding: 0;
6466
}
65-
&-pic {
66-
width: 45%;
67+
.item-content {
68+
display: flex;
69+
width: 100%;
6770
height: 100%;
68-
flex: 0 0 auto;
69-
img {
70-
width: 100%;
71+
@include respond-to(xs) {
72+
flex-direction: column;
73+
}
74+
&__pic {
75+
width: 45%;
7176
height: 100%;
72-
object-fit: cover;
77+
@include respond-to(xs) {
78+
width: 100%;
79+
height: 230px;
80+
}
81+
flex: 0 0 auto;
82+
img {
83+
width: 100%;
84+
height: 100%;
85+
object-fit: cover;
86+
}
7387
}
74-
}
75-
&-info {
76-
width: 55%;
77-
padding: 20px 30px;
78-
flex: 0 0 auto;
79-
display: flex;
80-
flex-direction: column;
81-
justify-content: center;
82-
}
83-
&-link {
84-
flex: 0 0 auto;
85-
@include clamp(2);
86-
}
87-
&-detail {
88-
@include themeify() {
89-
color: themed('color-home-article-detail');
88+
&__info {
89+
width: 55%;
90+
padding: 20px 30px;
91+
flex: 0 0 auto;
92+
display: flex;
93+
flex-direction: column;
94+
justify-content: center;
95+
@include respond-to(xs) {
96+
width: 100%;
97+
justify-content: normal;
98+
padding: 16px;
99+
}
90100
}
91-
font-size: 12px;
92-
padding: 12px 0;
93-
}
94-
&-abstract {
95-
line-height: 2;
96-
flex: 0 0 auto;
97-
@include clamp(2);
98-
}
99-
}
100-
101-
&__item-content {
102-
display: flex;
103-
width: 100%;
104-
height: 100%;
105-
a {
106-
font-size: 24px;
107-
line-height: 1.5;
108-
transition: all ease-in-out 0.25s;
109-
}
110-
a:hover {
111-
@include themeify() {
112-
color: themed('color-ele-primary');
101+
&__link {
102+
flex: 0 0 auto;
103+
@include clamp(2);
104+
a {
105+
font-size: 24px;
106+
line-height: 1.5;
107+
transition: all ease-in-out 0.25s;
108+
@include respond-to(xs) {
109+
font-size: 18px;
110+
}
111+
}
112+
a:hover {
113+
@include themeify() {
114+
color: themed('color-ele-primary');
115+
}
116+
}
117+
}
118+
&__detail {
119+
@include themeify() {
120+
color: themed('color-home-article-detail');
121+
}
122+
font-size: 12px;
123+
padding: 12px 0;
124+
}
125+
&__abstract {
126+
line-height: 2;
127+
flex: 0 0 auto;
128+
@include clamp(2);
113129
}
114130
}
115131
}
116-
117132
&__item:not(:first-child) {
118133
margin-top: 20px;
119134
}
120-
&__item:nth-child(even) .article-iterator__item-pic {
135+
&__item:nth-child(even) .item-content__pic {
121136
order: 1;
122-
}
123-
124-
@include respond-to(xs) {
125-
&__item {
126-
height: auto;
127-
&-pic {
128-
width: 100%;
129-
height: 230px;
130-
}
131-
&-info {
132-
width: 100%;
133-
justify-content: normal;
134-
padding: 16px;
135-
a {
136-
font-size: 18px;
137-
}
138-
}
139-
}
140-
&__item:nth-child(even) .article-iterator__item-pic {
137+
@include respond-to(xs) {
141138
order: 0;
142139
}
143140
}
144-
@include respond-to(xs) {
145-
&__item-content {
146-
flex-direction: column;
147-
}
148-
}
149141
}
150142
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /