Skip to content

Commit 03e9d4e

Browse files
kouchaokouchao
committed
优化 首页展示
1 parent 7110130 commit 03e9d4e

File tree

4 files changed

+186
-40
lines changed

4 files changed

+186
-40
lines changed

‎package-lock.json

Lines changed: 11 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"dependencies": {
1010
"@fortawesome/fontawesome-free": "^5.2.0",
1111
"async-validator": "^1.8.5",
12+
"axios": "^0.18.0",
1213
"vue": "^2.5.17",
1314
"vue-router": "^3.0.1",
1415
"vuex": "^3.0.1"

‎src/App.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@
4848
<lay-menu :default-openeds="[0]">
4949
<lay-menu-item :index="0">
5050
<template slot="title">
51-
<span>开发测试</span>
51+
<span>快速开始</span>
5252
</template>
53-
<lay-menu-child-item title="dev" :to="{name: 'home'}"></lay-menu-child-item>
54-
<lay-menu-child-item title="about" :to="{name: 'about'}"></lay-menu-child-item>
53+
<lay-menu-child-item title="首页" :to="{name: 'home'}"></lay-menu-child-item>
54+
<!--<lay-menu-child-item title="about" :to="{name: 'about'}"></lay-menu-child-item>-->
5555
</lay-menu-item>
5656
<lay-menu-item :index="1">
5757
<template slot="title">

‎src/views/Home.vue

Lines changed: 171 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,199 @@
11
<template>
2-
<div>
3-
<h1>当前展示的页面为开发中 可能存在严重bug 请点击其他模块预览</h1>
2+
<div class="site-anim" style="text-align: center;padding-top: 50px;">
43

4+
<img width="300" src="http://cos.jskou.com/vue-layui-logo.png" alt=""/>
5+
<h1 style="font-size: 50px; margin: 10px">vue-layui</h1>
6+
<h2 style="font-size: 30px; margin: 10px 10px 30px; color: #666">一个基于layui样式的vue组件库</h2>
7+
<div style="display: flex; align-items: center;justify-content: center">
8+
<a href="https://github.com/kouchao/vue-layui" class="demo-github" target="_blank">
9+
<i class="fab fa-github"></i>
10+
<span>github</span>
11+
</a>
512

13+
<a href="https://github.com/kouchao/vue-layui" class="demo-github" target="_blank">
14+
<i class="layui-icon layui-icon-rate-solid"></i>
15+
<span>star {{star}}</span>
16+
</a>
17+
</div>
618

19+
<div class="demo-introduce">
20+
<div class="demo-box">
21+
<div class="demo-box-title">还不是很完美</div>
22+
<div>
23+
<p>他还是一个demo级别的组件库</p>
24+
<p>正在一步步的走向健壮</p>
25+
<p>还需要努力</p>
26+
<p>当然这也需要时间</p>
27+
</div>
28+
</div>
29+
<div class="demo-box">
30+
<div class="demo-box-title">关注的人也很少</div>
31+
<div>
32+
<p>可能关注的人其实并没有</p>
33+
<p>可以看到只有{{star}}Star</p>
34+
<p>但是这并不重要</p>
35+
<p>会越来越多越来越好</p>
36+
</div>
37+
</div>
38+
<div class="demo-box">
39+
<div class="demo-box-title">一个人的开发</div>
40+
<div>
41+
<p>需要更多地人来帮助</p>
42+
<p>只有短暂的下班时间</p>
43+
<p>能力虽然不大</p>
44+
<p>好在大家都在一起加油</p>
45+
</div>
46+
</div>
47+
</div>
748

849

9-
<!--layui-tabs-->
10-
<!--<layui-tabs>-->
11-
<!--<layui-tab-pane name="tab1">tab1</layui-tab-pane>-->
12-
<!--<layui-tab-pane name="tab2">tab2</layui-tab-pane>-->
13-
<!--</layui-tabs>-->
14-
</div>
50+
<!--layui-tabs-->
51+
<!--<layui-tabs>-->
52+
<!--<layui-tab-pane name="tab1">tab1</layui-tab-pane>-->
53+
<!--<layui-tab-pane name="tab2">tab2</layui-tab-pane>-->
54+
<!--</layui-tabs>-->
55+
</div>
1556
</template>
1657

1758
<script>
59+
import axios from 'axios'
60+
1861
export default {
1962
name: 'app',
2063
data: function () {
2164
return {
22-
radio: 1,
23-
input: 'test',
24-
checkbox: ['1', '4', '7'],
25-
select: [{
26-
id: '00001',
27-
text: '选项1'
28-
},
29-
{
30-
id: '00002',
31-
text: '选项2'
32-
},
33-
{
34-
id: '00003',
35-
text: '选项3'
36-
},
37-
{
38-
id: '00004',
39-
text: '选项4'
40-
}],
41-
selectValue: '00003',
42-
selectOpen: false,
43-
textarea: '1231223'
65+
star: 0
4466
}
4567
},
4668
created: function () {
4769
this.testLayui()
70+
this.getStar()
4871
},
4972
methods: {
73+
async getStar() {
74+
75+
const {data} = await axios('https://api.github.com/repos/kouchao/vue-layui')
76+
this.star = data.stargazers_count
77+
},
5078
selectChange: function (val) {
5179
console.log(`change: val=${val}`)
5280
}
5381
}
5482
}
5583
</script>
5684

57-
<style>
85+
<style scoped>
86+
87+
.demo-introduce {
88+
border-bottom: 1px solid #eaecef;
89+
border-top: 1px solid #eaecef;
90+
padding: 20px 0;
91+
display: flex;
92+
width: 900px;
93+
margin: 30px auto 0;
94+
}
95+
96+
.demo-box {
97+
width: 240px;
98+
padding: 0 30px;
99+
}
100+
101+
.demo-box-title {
102+
font-size: 18px;
103+
margin-bottom: 5px;
104+
}
105+
106+
.demo-github {
107+
padding: 5px 10px;
108+
border: 1px solid #eee;
109+
display: flex;
110+
justify-content: center;
111+
112+
}
113+
114+
.demo-github + .demo-github {
115+
margin-left: 10px;
116+
}
117+
118+
.demo-github span {
119+
padding-left: 10px;
120+
}
121+
122+
@-webkit-keyframes site-zfj {
123+
0% {
124+
opacity: 1;
125+
-webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
126+
}
127+
10% {
128+
opacity: 0.8;
129+
-webkit-transform: translate3d(-100px, 0px, 0) rotate(10deg) scale(0.7);
130+
}
131+
35% {
132+
opacity: 0.6;
133+
-webkit-transform: translate3d(100px, 0px, 0) rotate(30deg) scale(0.4);
134+
}
135+
50% {
136+
opacity: 0.4;
137+
-webkit-transform: translate3d(0, 0, 0) rotate(360deg) scale(0);
138+
}
139+
80% {
140+
opacity: 0.2;
141+
-webkit-transform: translate3d(0, 0, 0) rotate(720deg) scale(1);
142+
}
143+
90% {
144+
opacity: 0.1;
145+
-webkit-transform: translate3d(0, 0, 0) rotate(3600deg) scale(6);
146+
}
147+
100% {
148+
opacity: 1;
149+
-webkit-transform: translate3d(0, 0, 0) rotate(3600deg) scale(1);
150+
}
151+
}
152+
153+
@keyframes site {
154+
0% {
155+
opacity: 1;
156+
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
157+
}
158+
10% {
159+
opacity: 0.8;
160+
transform: translate3d(-100px, 0px, 0) rotate(10deg) scale(0.7);
161+
}
162+
35% {
163+
opacity: 0.6;
164+
transform: translate3d(100px, 0px, 0) rotate(30deg) scale(0.4);
165+
}
166+
50% {
167+
opacity: 0.4;
168+
transform: translate3d(0, 0, 0) rotate(360deg) scale(0);
169+
}
170+
80% {
171+
opacity: 0.2;
172+
transform: translate3d(0, 0, 0) rotate(720deg) scale(1);
173+
}
174+
90% {
175+
opacity: 0.1;
176+
transform: translate3d(0, 0, 0) rotate(3600deg) scale(6);
177+
}
178+
100% {
179+
opacity: 1;
180+
transform: translate3d(0, 0, 0) rotate(3600deg) scale(1);
181+
}
182+
}
183+
184+
.site-anim img {
185+
-webkit-animation-name: site;
186+
animation-name: site;
187+
-webkit-animation-duration: 5s;
188+
animation-duration: 5s;
189+
-webkit-animation-timing-function: linear;
190+
animation-timing-function: linear;
191+
}
192+
193+
i {
194+
font-size: 16px;
195+
font-style: normal;
196+
-webkit-font-smoothing: antialiased;
197+
}
58198
59199
</style>

0 commit comments

Comments
 (0)