blob: 3164048365a460e6aa42d948406807e75563c939 (
plain)
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
|
#banner{
margin-bottom: 30px;
position: relative;
height: 300px;
@include user-select(none);
.image{
width: 1120px;
position: absolute;
left: 40px;
height: 100%;
overflow: hidden;
background: #000;
.wrap{
position: absolute;
left: 0;
height: 100%;
}
img{
height: 100%;
position: absolute;
&:first-child{
display: block;
}
}
}
.loading, .error{
width: 1200px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
color: #fff;
&:before{
position: absolute;
top: 50%;
margin-top: -20px;
width: 100%;
text-align: center;
font: 40px/1 $symbol;
}
div{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
margin-top: 40px;
}
}
.loading{
&:before{
content: "P";
}
}
.error{
&:before{
content: "'";
}
}
.prev, .next{
position: absolute;
height: 100%;
width: 35px;
background: $black;
cursor: pointer;
&:before{
position: absolute;
top: 50%;
font: 20px/1 $symbol;
color: #fff;
margin-top: -10px;
}
&:hover{
background: #000;
}
}
.prev{
left: 0;
&:before{
content: "<";
left: 10px;
}
}
.next{
right: 0;
&:before{
content: ">";
right: 10px;
}
}
.dots{
position: absolute;
bottom: -40px;
right: 0;
z-index: 1;
li{
display: inline-block;
margin-left: 10px;
background: $black;
cursor: pointer;
overflow: hidden;
position: relative;
@include square(10px);
&.current, &:hover{
background: $main;
}
}
}
}
|
