Skip to content

Commit e929b73

Browse files
LonggerererLonggererer
committed
修改首页布局
1 parent c1201e6 commit e929b73

File tree

1 file changed

+233
-104
lines changed

1 file changed

+233
-104
lines changed

‎src/views/home/index.vue‎

Lines changed: 233 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,35 @@
11
<template>
2-
<div id="home" class="d-flex">
3-
<div class="preview">
4-
<img class="preview1-img" src="http://picstore.lliiooiill.cn/preview1.svg?123123" alt="">
5-
<img class="preview2-img" src="http://picstore.lliiooiill.cn/preview2.svg?12312313" alt="">
6-
</div>
7-
<div class="main-content">
8-
<div class="slogan d-flex flex-clo">
9-
<span class="slogan-1 title-xl">简洁易用，功能丰富的 WEB 编辑器</span>
10-
<span class="slogan-2 title-m">一个分享代码，共同学习的平台</span>
2+
<div id="home" class="d-flex flex-clo">
3+
<div class="introduce d-flex">
4+
<div class="preview">
5+
<img class="preview1-img" src="http://images.lliiooiill.cn/preview3.svg?1" alt="">
6+
<img class="preview2-img" src="http://images.lliiooiill.cn/preview2.svg" alt="">
7+
</div>
8+
<div class="main-content">
9+
<div class="slogan d-flex flex-clo">
10+
<span class="slogan-1 title-xl">简洁易用，功能丰富的 WEB 编辑器</span>
11+
<span class="slogan-2 title-m">一个分享代码，共同学习的平台</span>
12+
</div>
13+
<div class="btn-opt">
14+
<v-btn class="btn-create" x-large color="primary" @click="newWork">创建新实例</v-btn>
15+
<v-btn class="btn-offline" x-large outlined color="primary" @click="goToOffline">前往离线版</v-btn>
16+
</div>
1117
</div>
12-
<div class="btn-opt">
13-
<v-btn class="btn-create" x-large color="primary" @click="newWork">创建新实例</v-btn>
14-
<v-btn class="btn-offline" x-large outlined color="primary" @click="goToOffline">前往离线版</v-btn>
18+
</div>
19+
<div class="features">
20+
<div class="features-question">
21+
<span class="logo-text">JS Encoder</span>
22+
<span class="title-xl"> 能做什么？</span>
1523
</div>
24+
<ul class="features-list">
25+
<li v-for="(item, index) in featuresList" :key="index" class="d-flex flex-clo">
26+
<div>
27+
<i class="icon iconfont" :class="item.icon" :style="{color:item.color}"></i>
28+
<span class="feature-title">{{item.title}}</span>
29+
</div>
30+
<span class="feature-content">{{item.content}}</span>
31+
</li>
32+
</ul>
1633
</div>
1734
<login-verify></login-verify>
1835
</div>
@@ -23,7 +40,49 @@ import loginVerify from '@components/dialog/loginVerify'
2340
export default {
2441
name: 'Home',
2542
data() {
26-
return {}
43+
return {
44+
featuresList: [
45+
{
46+
icon: 'icon-yuncunchu',
47+
title: '云存储',
48+
content: '保存代码至云端，分享你的实例链接，让更多用户浏览你的作品。',
49+
color: '#1296db',
50+
},
51+
{
52+
icon: 'icon-daorudaochu',
53+
title: '导入导出',
54+
content: '可导入本地代码进行在线编辑，也可将编写好的代码导出至本地。',
55+
color: '#d81e06',
56+
},
57+
{
58+
icon: 'icon-gexinghuapeizhi',
59+
title: '个性化设置',
60+
content: '可针对你的编码习惯进行个性化，多样化的编码设置。',
61+
color: '#d4237a',
62+
},
63+
{
64+
icon: 'icon-bianma',
65+
title: '编码',
66+
content:
67+
'支持 HTML，CSS 和 JavaScript 以及它们 8 种预处理语言编译及高亮。',
68+
color: '#1890ff',
69+
},
70+
{
71+
icon: 'icon-markdown1',
72+
title: 'Markdown',
73+
content:
74+
'实时预览、同步滚动、编写文档更加顺畅；运用工具栏和丰富的快捷键，快速生成语法。',
75+
color: '#05104b',
76+
},
77+
{
78+
icon: 'icon-console1',
79+
title: 'Console',
80+
content:
81+
'模拟 Chrome 原生 Console, 支持多种类型的日志高亮显示；也可直接输入命令进行调试。',
82+
color: '#1afa29',
83+
},
84+
],
85+
}
2786
},
2887
methods: {
2988
newWork() {
@@ -42,139 +101,209 @@ export default {
42101
<style lang="scss" scoped>
43102
#home {
44103
position: relative;
45-
.preview {
46-
.preview1-img,
47-
.preview2-img {
48-
width: 460px;
49-
position: absolute;
50-
opacity: 0;
51-
}
52-
.preview1-img {
53-
top: 40%;
54-
right: 0;
55-
transform: translateY(-50%);
56-
box-shadow: $shadow-1;
57-
@include animation(fade-left, 0.3s, 0.3s, ease, forwards);
104+
.introduce {
105+
margin: 0 auto;
106+
width: 100%;
107+
position: relative;
108+
.preview {
109+
.preview1-img,
110+
.preview2-img {
111+
width: 460px;
112+
position: absolute;
113+
opacity: 0;
114+
}
115+
.preview1-img {
116+
top: 40%;
117+
right: 0;
118+
transform: translateY(-50%);
119+
box-shadow: $shadow-1;
120+
@include animation(fade-left, 0.3s, 0.3s, ease, forwards);
121+
}
122+
.preview2-img {
123+
top: 55%;
124+
right: 6%;
125+
box-shadow: $shadow-2;
126+
@include animation(fade-left, 0.3s, 0.5s, ease, forwards);
127+
}
58128
}
59-
.preview2-img {
60-
top: 55%;
61-
right: 6%;
62-
box-shadow: $shadow-2;
63-
@include animation(fade-left, 0.3s, 0.5s, ease, forwards);
129+
.main-content {
130+
margin: 200px 0 0 0;
131+
.slogan {
132+
margin-bottom: 100px;
133+
.slogan-1,
134+
.slogan-2 {
135+
opacity: 0;
136+
@include animation(fade-right, 0.3s, 0.3s, ease, forwards);
137+
}
138+
.slogan-1 {
139+
margin-bottom: 25px;
140+
}
141+
}
142+
.btn-opt {
143+
.btn-create,
144+
.btn-offline {
145+
opacity: 0;
146+
@include animation(fade-right, 0.3s, 0.5s, ease, forwards);
147+
}
148+
.btn-create {
149+
margin-right: 25px;
150+
}
151+
}
64152
}
65153
}
66-
.main-content {
67-
margin: 200px 0 0 180px;
68-
.slogan {
69-
margin-bottom: 100px;
70-
.slogan-1,
71-
.slogan-2 {
72-
opacity: 0;
73-
@include animation(fade-right, 0.3s, 0.3s, ease, forwards);
74-
}
75-
.slogan-1 {
76-
margin-bottom: 25px;
154+
.features {
155+
.features-question {
156+
margin: 0 auto;
157+
.logo-text {
158+
color: #1980ff;
159+
font-size: 48px;
77160
}
78161
}
79-
.btn-opt {
80-
.btn-create,
81-
.btn-offline {
82-
opacity: 0;
83-
@include animation(fade-right, 0.3s, 0.5s, ease, forwards);
162+
.features-list {
163+
display: grid;
164+
grid-gap: 100px 100px;
165+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
166+
margin: 0 auto;
167+
margin-top: 50px;
168+
padding: 50px 0 150px 0;
169+
.icon {
170+
font-size: 40px;
171+
text-shadow: 0 1px 3px $deep-6;
172+
}
173+
.feature-title {
174+
margin-left: 10px;
175+
font-size: 20px;
84176
}
85-
.btn-create {
86-
margin-right: 25px;
177+
.feature-content {
178+
color: $light-4;
179+
margin-top: 10px;
87180
}
88181
}
89182
}
90183
}
91184
@include Mobile {
92185
#home {
93-
min-height: calc(100vh - 70px);
94-
.main-content {
95-
width: 100%;
96-
margin: 50px 0 0 0;
97-
display: flex;
98-
flex-direction: column;
99-
align-items: center;
186+
.introduce {
187+
min-height: calc(100vh - 70px);
188+
.main-content {
189+
width: 100%;
190+
margin: 0;
191+
margin-top: 50px;
192+
display: flex;
193+
flex-direction: column;
194+
align-items: center;
195+
}
100196
}
101197
}
102198
}
103199
@include PC {
104200
#home {
105-
height: calc(100vh - 70px);
106-
min-height: 800px;
201+
.introduce {
202+
height: calc(100vh - 70px);
203+
min-height: 700px;
204+
max-width: 1150px;
205+
}
206+
.features {
207+
min-height: 80vh;
208+
.features-list,
209+
.features-question {
210+
max-width: 1150px;
211+
}
212+
}
107213
}
108214
}
109215
@include screenXS {
110216
#home {
111-
min-height: 800px;
112-
.preview {
113-
.preview1-img,
114-
.preview2-img {
115-
width: 85%;
116-
max-width: 350px;
117-
}
118-
.preview1-img {
119-
top: 40%;
120-
}
121-
.preview2-img {
122-
top: 45%;
217+
.introduce {
218+
min-height: 800px;
219+
.preview {
220+
.preview1-img,
221+
.preview2-img {
222+
width: 85%;
223+
max-width: 350px;
224+
}
225+
.preview1-img {
226+
top: 40%;
227+
}
228+
.preview2-img {
229+
top: 45%;
230+
}
123231
}
124-
}
125-
.main-content {
126-
.slogan {
127-
align-items: center;
128-
margin-bottom: 450px;
129-
font-weight: 600;
130-
.slogan-1 {
131-
font-size: 20px;
232+
.main-content {
233+
.slogan {
234+
align-items: center;
235+
margin-bottom: 450px;
236+
.slogan-1 {
237+
font-size: 24px;
238+
}
239+
}
240+
.btn-opt {
241+
width: 85%;
242+
display: flex;
243+
flex-direction: column;
244+
.btn-create {
245+
margin-right: 0;
246+
margin-bottom: 15px;
247+
}
132248
}
133249
}
134-
.btn-opt {
250+
}
251+
.features {
252+
margin-top: 100px;
253+
.features-list,
254+
.features-question {
135255
width: 85%;
136-
display: flex;
137-
flex-direction: column;
138-
.btn-create {
139-
margin-right: 0;
140-
margin-bottom: 15px;
141-
}
142256
}
143257
}
144258
}
145259
}
146260
@include screenSM {
147261
#home {
148-
min-height: 1vh;
149262
padding-bottom: 100px;
150-
.preview {
151-
.preview1-img,
152-
.preview2-img {
153-
width: 65%;
154-
max-width: 450px;
155-
}
156-
.preview1-img {
157-
top: 45%;
263+
.introduce {
264+
min-height: 100vh;
265+
.preview {
266+
.preview1-img,
267+
.preview2-img {
268+
width: 65%;
269+
max-width: 450px;
270+
}
271+
.preview1-img {
272+
top: 45%;
273+
}
274+
.preview2-img {
275+
top: 51%;
276+
}
158277
}
159-
.preview2-img {
160-
top: 51%;
278+
.main-content .slogan {
279+
margin-bottom: 80%;
161280
}
162281
}
163-
.main-content .slogan {
164-
margin-bottom: 80%;
282+
}
283+
.features {
284+
margin-top: 100px;
285+
.features-list,
286+
.features-question {
287+
width: 85%;
165288
}
166289
}
167290
}
168291
@include screenMD {
169292
#home {
170-
.preview {
171-
.preview1-img,
172-
.preview2-img {
173-
width: 350px;
293+
.introduce {
294+
.preview {
295+
.preview1-img,
296+
.preview2-img {
297+
width: 350px;
298+
}
299+
}
300+
.main-content {
301+
margin: 200px 0 0 50px;
174302
}
175303
}
176-
.main-content {
177-
margin: 200px 0 0 50px;
304+
.features-list,
305+
.features-question {
306+
width: 85%;
178307
}
179308
}
180309
}

0 commit comments

Comments
 (0)