-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindexx.html
111 lines (104 loc) · 3.65 KB
/
indexx.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<title>挨踢路透社</title>
<link href="http://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
html, body, .column {
position: relative;
height: 100%;
}
a{
text-decoration: none;
}
#app {
position: relative;
height: 100%;
}
#app .content {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content h2 {
text-align: center;
font-size: 60px;
}
.content h2 a {
color: rgba(255, 255, 255, 100);
}
.content h2 a:hover {
color: rgba(255, 255, 255, 250);
}
.content h4 {
text-align: center;
color: #fff;
font-size: 18px;
font-weight: normal;
}
</style>
</head>
<body>
<div id="app">
<section class="column" v-for='(item, index) in textInfo' :style="{backgroundColor: bgColor[index%5]}">
<div class="content">
<h2>
<a :href="item.link">{{item.title}}</a>
</h2>
<h4>{{item.subTitle}}</h4>
</div>
</section>
</div>
<script src="http://cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script type="text/javascript">
var textInfo = [
{
title: '挨踢路透社前端月刊',
subTitle: '好的文章是难以发现的，优秀的博文是难以挖掘的',
link: 'http://www.itlutoushe.com/fe-study-tutorial/papers/paper.html',
lists: []
},
{
title: '挨踢路透社前端 wiki',
subTitle: '海纳百川有容乃大，壁立千仞无欲则刚',
link: 'http://www.itlutoushe.com/fe-study-tutorial/wiki/',
lists: []
},
{
title: '挨踢路透社知乎专栏',
subTitle: '设计、产品、技术',
link: 'https://zhuanlan.zhihu.com/future-fe',
lists: []
},
{
title: '挨踢路透社前端入门教程',
subTitle: '合抱之木，生于毫末；九层之台，起于垒土；千里之行，始于足下。',
link: false,
lists: [
{
text: '前端入门教程',
link: 'http://fe-primary-tutorial.itlutoushe.com/'
}
]
}
];
new Vue({
el: '#app',
data: function () {
return {
textInfo: textInfo,
bgColor: [
'rgba(206, 210, 217, 100)',
'#D9D6CE',
'#D4D9CE',
'#CED8D9',
'#CED2D9'
]
}
}
});
</script>
</body>
</html>