Showing
3 changed files
with
49 additions
and
5 deletions
@@ -22,7 +22,27 @@ | @@ -22,7 +22,27 @@ | ||
22 | {{#each articles}} | 22 | {{#each articles}} |
23 | <li data-id="{{id}}"> | 23 | <li data-id="{{id}}"> |
24 | <div class="star-avatar"> | 24 | <div class="star-avatar"> |
25 | - {{#if isSwiper}} | 25 | + <div class="avatar-wrap"> |
26 | + {{# tags}} | ||
27 | + <a href="{{avatarUrl}}"> | ||
28 | + <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div> | ||
29 | + <p class="name">{{tagName}}1</p> | ||
30 | + </a> | ||
31 | + {{/ tags}} | ||
32 | + {{# tags}} | ||
33 | + <a href="{{avatarUrl}}"> | ||
34 | + <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div> | ||
35 | + <p class="name">{{tagName}}2</p> | ||
36 | + </a> | ||
37 | + {{/ tags}} | ||
38 | + {{# tags}} | ||
39 | + <a href="{{avatarUrl}}"> | ||
40 | + <div data-avatar="{{image cover 100 100}}" class="rank-avatar" ></div> | ||
41 | + <p class="name">{{tagName}}3</p> | ||
42 | + </a> | ||
43 | + {{/ tags}} | ||
44 | + </div> | ||
45 | + {{!-- {{#if isSwiper}} | ||
26 | <div class="article-avatar-swiper"> | 46 | <div class="article-avatar-swiper"> |
27 | <ul class="clearfix swiper-wrapper"> | 47 | <ul class="clearfix swiper-wrapper"> |
28 | {{#each tags}} | 48 | {{#each tags}} |
@@ -42,7 +62,7 @@ | @@ -42,7 +62,7 @@ | ||
42 | <p class="name">{{tagName}}</p> | 62 | <p class="name">{{tagName}}</p> |
43 | </a> | 63 | </a> |
44 | {{/ tags}} | 64 | {{/ tags}} |
45 | - {{/if}} | 65 | + {{/if}} --}} |
46 | </div> | 66 | </div> |
47 | <a class="star-article" href='{{url}}'> | 67 | <a class="star-article" href='{{url}}'> |
48 | <i class="article-arrow"></i> | 68 | <i class="article-arrow"></i> |
@@ -203,6 +203,7 @@ getIndexHtml = function() { | @@ -203,6 +203,7 @@ getIndexHtml = function() { | ||
203 | loading.hideLoadingMask(); | 203 | loading.hideLoadingMask(); |
204 | }, | 204 | }, |
205 | error: function() { | 205 | error: function() { |
206 | + loading.hideLoadingMask(); | ||
206 | tip.show('网络断开连接了~'); | 207 | tip.show('网络断开连接了~'); |
207 | } | 208 | } |
208 | }); | 209 | }); |
1 | +@keyframes avatar { | ||
2 | + 25% { | ||
3 | + transform: translate3d(0, 0, 0); | ||
4 | + } | ||
5 | + | ||
6 | + 50% { | ||
7 | + transform: translate3d(-120px, 0, 0); | ||
8 | + } | ||
9 | + | ||
10 | + 75% { | ||
11 | + transform: translate3d(-240px, 0, 0); | ||
12 | + } | ||
13 | +} | ||
14 | + | ||
1 | .star-page { | 15 | .star-page { |
2 | background: #333; | 16 | background: #333; |
3 | position: relative; | 17 | position: relative; |
@@ -182,16 +196,26 @@ | @@ -182,16 +196,26 @@ | ||
182 | li { | 196 | li { |
183 | float: left; | 197 | float: left; |
184 | margin-bottom: 30px; | 198 | margin-bottom: 30px; |
199 | + padding-left: 10px; | ||
185 | } | 200 | } |
186 | } | 201 | } |
187 | 202 | ||
188 | .star-avatar { | 203 | .star-avatar { |
189 | width: 134px; | 204 | width: 134px; |
190 | - padding-left: 30px; | ||
191 | box-sizing: border-box; | 205 | box-sizing: border-box; |
192 | float: left; | 206 | float: left; |
193 | overflow: hidden; | 207 | overflow: hidden; |
194 | 208 | ||
209 | + .avatar-wrap { | ||
210 | + white-space: nowrap; | ||
211 | + animation: avatar 6s infinite; | ||
212 | + } | ||
213 | + | ||
214 | + a { | ||
215 | + display: inline-block; | ||
216 | + padding: 8px; | ||
217 | + } | ||
218 | + | ||
195 | .article-avatar-swiper { | 219 | .article-avatar-swiper { |
196 | width: 104px; | 220 | width: 104px; |
197 | overflow: hidden; | 221 | overflow: hidden; |
@@ -201,7 +225,7 @@ | @@ -201,7 +225,7 @@ | ||
201 | width: 104px; | 225 | width: 104px; |
202 | height: 104px; | 226 | height: 104px; |
203 | border-radius: 50%; | 227 | border-radius: 50%; |
204 | - float: left; | 228 | + margin: 0 auto; |
205 | } | 229 | } |
206 | 230 | ||
207 | .name { | 231 | .name { |
@@ -225,7 +249,6 @@ | @@ -225,7 +249,6 @@ | ||
225 | float: left; | 249 | float: left; |
226 | padding: 20px 30px; | 250 | padding: 20px 30px; |
227 | box-sizing: border-box; | 251 | box-sizing: border-box; |
228 | - margin-left: 18px; | ||
229 | 252 | ||
230 | .article-arrow { | 253 | .article-arrow { |
231 | position: absolute; | 254 | position: absolute; |
-
Please register or login to post a comment