Authored by ccbikai

明星小头像修改

@@ -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;