cate-resources.vue
1.84 KB
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
<template>
<div class='cate-resource'>
<ul>
<li class='width50' style='
background:url(http://img11.static.yhbimg.com/brandLogo/2015/08/04/18/01a6f1a7600ab044d1577dd6c357298fb3.png?imageMogr2/thumbnail/150x150/extent/150x150/background/d2hpdGU=/position/center/quality/80);background-size:100% 100%;background-repeat:no-repeat;'>
<div>上衣</div>
</li>
<li class='width50' style='
background:url(http://img11.static.yhbimg.com/brandLogo/2015/08/04/18/01a6f1a7600ab044d1577dd6c357298fb3.png?imageMogr2/thumbnail/150x150/extent/150x150/background/d2hpdGU=/position/center/quality/80);background-size:100% 100%;background-repeat:no-repeat;'>
<div>上衣</div>
</li>
<li class='width100' style='
background:url(http://img10.static.yhbimg.com/yhb-img01/2016/07/22/15/014c3887f1320bf024a8bbc01fef5d2a1a.png?imageView2/2/w/750/h/365);background-size:100% 100%;background-repeat:no-repeat;'>
<div>全部分类</div>
</li>
</ul>
</div>
</template>
<style>
.cate-resource {
width: 100%;
ul,
li {
margin: 0;
padding: 0;
}
li {
float: left;
text-align: center;
color: #fff;
font-size: 60px;
cursor: pointer;
img {
width: 100%;
}
div {
margin-top: 50px;
}
}
.width25,
.width50,
.width100 {
width: 25%;
height: 200px;
overflow: hidden;
img {
height: 200px;
}
}
.width50 {
width: 50%;
}
.width100 {
width: 100%;
height: 360px;
img {
height: 360px;
}
div {
margin-top: 120px;
}
}
}
</style>
<script>
</script>