fe / yohobuywap-node · Commits

Go to a project

Authored by ccbikai
Commit 4778de64e1f7953e79440dcea6c907156ed2f817 2 parents f9af51d3 20f7897d

Merge branch 'hotfix/star'

Inline Side-by-side
Showing 9 changed files with 300 additions and 169 deletions
@@ -57,7 +57,7 @@ const _processIndexData = (dataList) => { @@ -57,7 +57,7 @@ const _processIndexData = (dataList) => {
57 if (list.ads) { 57 if (list.ads) {
58 _.forEach(list.ads.data, (data) => { 58 _.forEach(list.ads.data, (data) => {
59 formatData.ads.push({ 59 formatData.ads.push({
60 - src: data.src + '/q/80', 60 + src: data.src.replace('imageView', 'imageView2'),
61 url: data.url 61 url: data.url
62 }); 62 });
63 }); 63 });
@@ -65,7 +65,7 @@ const _processIndexData = (dataList) => { @@ -65,7 +65,7 @@ const _processIndexData = (dataList) => {
65 65
66 // 首页明星文章数据处理 66 // 首页明星文章数据处理
67 if (list.list) { 67 if (list.list) {
68 - _.forEach(list.list, (data) => { 68 + _.forEach(list.list, (data, index) => {
69 const avatar = { 69 const avatar = {
70 tags: [] 70 tags: []
71 }; 71 };
@@ -74,7 +74,11 @@ const _processIndexData = (dataList) => { @@ -74,7 +74,11 @@ const _processIndexData = (dataList) => {
74 avatar.isSwiper = true; 74 avatar.isSwiper = true;
75 } 75 }
76 76
77 - _.forEach(data.ext.tags, (tags) => { 77 + _.forEach(data.ext.tags, (tags, i) => {
  78 + if (i >= 1) {
  79 + return;
  80 + }
  81 +
78 avatar.tags.push({ 82 avatar.tags.push({
79 avatarUrl: `/guang/star/detail?tag=${tags.tagName}&openby:yohobuy＝{"action":"go.h5","params":{"id":"","share":"","shareparam":{},"islogin":"N","type":0,"updateflag":"N","url":"http://m.yohobuy.com/guang/star/detail","param":{"tag":"${tags.tagName}"}}}`, // eslint-disable-line 83 avatarUrl: `/guang/star/detail?tag=${tags.tagName}&openby:yohobuy＝{"action":"go.h5","params":{"id":"","share":"","shareparam":{},"islogin":"N","type":0,"updateflag":"N","url":"http://m.yohobuy.com/guang/star/detail","param":{"tag":"${tags.tagName}"}}}`, // eslint-disable-line
80 cover: tags.cover ? (tags.cover + '?imageView2/2/w/104/h/104/q/80') : tags.cover, 84 cover: tags.cover ? (tags.cover + '?imageView2/2/w/104/h/104/q/80') : tags.cover,
@@ -82,7 +86,12 @@ const _processIndexData = (dataList) => { @@ -82,7 +86,12 @@ const _processIndexData = (dataList) => {
82 }); 86 });
83 }); 87 });
84 88
  89 + if (formatData.articles.length > 10) {
  90 + return;
  91 + }
  92 +
85 formatData.articles.push(_.merge({ 93 formatData.articles.push(_.merge({
  94 + noLazy: index < 2,
86 id: data.id, 95 id: data.id,
87 url: data.url, 96 url: data.url,
88 title: data.title, 97 title: data.title,
@@ -97,10 +106,11 @@ const _processIndexData = (dataList) => { @@ -97,10 +106,11 @@ const _processIndexData = (dataList) => {
97 106
98 // 首页明星头像数据处理 107 // 首页明星头像数据处理
99 if (list.tags) { 108 if (list.tags) {
100 - _.forEach(list.tags, (data) => { 109 + _.forEach(list.tags, (data, index) => {
101 let url = `/guang/star/detail?tag=${data.tagName}&openby:yohobuy＝{"action":"go.h5","params":{"id":"","share":"","shareparam":{},"islogin":"N","type":0,"updateflag":"N","url":"http://m.yohobuy.com/guang/star/detail","param":{"tag":"${data.tagName}"}}}`; // eslint-disable-line 110 let url = `/guang/star/detail?tag=${data.tagName}&openby:yohobuy＝{"action":"go.h5","params":{"id":"","share":"","shareparam":{},"islogin":"N","type":0,"updateflag":"N","url":"http://m.yohobuy.com/guang/star/detail","param":{"tag":"${data.tagName}"}}}`; // eslint-disable-line
102 111
103 formatData.starAvatar.push({ 112 formatData.starAvatar.push({
  113 + // noLazy: index < 5,
104 url: url, 114 url: url,
105 cover: data.cover ? (data.cover + '?imageView2/2/w/180/h/180/q/80') : data.cover 115 cover: data.cover ? (data.cover + '?imageView2/2/w/180/h/180/q/80') : data.cover
106 }); 116 });
@@ -136,7 +146,7 @@ const _processGuangData = (list, flag) => { @@ -136,7 +146,7 @@ const _processGuangData = (list, flag) => {
136 146
137 // data.src += '/q/80'; 147 // data.src += '/q/80';
138 148
139 - if (key < 4) { 149 + if (key < 2) {
140 data.islazy = true; 150 data.islazy = true;
141 } 151 }
142 152
@@ -11,7 +11,13 @@ @@ -11,7 +11,13 @@
11 <ul class="clearfix swiper-wrapper"> 11 <ul class="clearfix swiper-wrapper">
12 {{# starAvatar}} 12 {{# starAvatar}}
13 <li class="swiper-slide"> 13 <li class="swiper-slide">
14 - <a href='{{url}}' style="background-image: url({{image cover 180 180}})" class="star"></a> 14 + {{#if noLazy}}
  15 + <a href='{{url}}' class="star" style="background: url('{{image cover 180 180}}')">
  16 + </a>
  17 + {{else}}
  18 + <a href='{{url}}' class="star swiper-lazy" data-background="{{image cover 180 180}}">
  19 + </a>
  20 + {{/if}}
15 </li> 21 </li>
16 {{/ starAvatar}} 22 {{/ starAvatar}}
17 </ul> 23 </ul>
@@ -22,7 +28,27 @@ @@ -22,7 +28,27 @@
22 {{#each articles}} 28 {{#each articles}}
23 <li data-id="{{id}}"> 29 <li data-id="{{id}}">
24 <div class="star-avatar"> 30 <div class="star-avatar">
25 - {{#if isSwiper}} 31 + <div class="avatar-wrap avatar-num-{{tags.length}}">
  32 + {{# tags}}
  33 + <a href="{{avatarUrl}}">
  34 + {{#if ../noLazy}}
  35 + <img src="{{image cover 100 100}}" class="rank-avatar" ></img>
  36 + {{else}}
  37 + <img data-original="{{image cover 100 100}}" class="rank-avatar lazy" ></img>
  38 + {{/if}}
  39 + <p class="name">{{tagName}}</p>
  40 + </a>
  41 + {{/ tags}}
  42 + {{# tags}}
  43 + {{#if @first}}
  44 + <a href="{{avatarUrl}}">
  45 + <img data-original="{{image cover 100 100}}" class="rank-avatar lazy" ></img>
  46 + <p class="name">{{tagName}}</p>
  47 + </a>
  48 + {{/if}}
  49 + {{/ tags}}
  50 + </div>
  51 + {{!-- {{#if isSwiper}}
26 <div class="article-avatar-swiper"> 52 <div class="article-avatar-swiper">
27 <ul class="clearfix swiper-wrapper"> 53 <ul class="clearfix swiper-wrapper">
28 {{#each tags}} 54 {{#each tags}}
@@ -42,7 +68,7 @@ @@ -42,7 +68,7 @@
42 <p class="name">{{tagName}}</p> 68 <p class="name">{{tagName}}</p>
43 </a> 69 </a>
44 {{/ tags}} 70 {{/ tags}}
45 - {{/if}} 71 + {{/if}} --}}
46 </div> 72 </div>
47 <a class="star-article" href='{{url}}'> 73 <a class="star-article" href='{{url}}'>
48 <i class="article-arrow"></i> 74 <i class="article-arrow"></i>
@@ -50,7 +76,11 @@ @@ -50,7 +76,11 @@
50 <div class="artice-cont"> 76 <div class="artice-cont">
51 <p>{{articeTxt}}</p> 77 <p>{{articeTxt}}</p>
52 <div class="artice-imgs-area"> 78 <div class="artice-imgs-area">
  79 + {{#if noLazy}}
  80 + <img src="{{image src 266 266}}" />
  81 + {{else}}
53 <img data-original="{{image src 266 266}}" class="lazy" /> 82 <img data-original="{{image src 266 266}}" class="lazy" />
  83 + {{/if}}
54 84
55 {{!-- <ul class="artice-imgs"> 85 {{!-- <ul class="artice-imgs">
56 {{#each articeImg}} 86 {{#each articeImg}}
@@ -16,8 +16,8 @@ module.exports = { @@ -16,8 +16,8 @@ module.exports = {
16 domains: { 16 domains: {
17 // api: 'http://devapi.yoho.cn:58078/', 17 // api: 'http://devapi.yoho.cn:58078/',
18 // service: 'http://devservice.yoho.cn:58077/' 18 // service: 'http://devservice.yoho.cn:58077/'
19 - api: 'http://api-test3.yohops.com:9999/',  
20 - service: 'http://service-test3.yohops.com:9999/', 19 + api: 'http://api.yoho.cn/',
  20 + service: 'http://service.yoho.cn/',
21 liveApi: 'http://testapi.live.yohops.com:9999/' 21 liveApi: 'http://testapi.live.yohops.com:9999/'
22 }, 22 },
23 subDomains: { 23 subDomains: {
1 'use strict'; 1 'use strict';
2 2
3 const fs = require('fs'); 3 const fs = require('fs');
4 -let devHost = 'localhost'; 4 +let devHost = '127.0.0.1';
5 5
6 fs.readFile('.devhost', (err, buf)=> { 6 fs.readFile('.devhost', (err, buf)=> {
7 if (!err) { 7 if (!err) {
@@ -6,18 +6,12 @@ @@ -6,18 +6,12 @@
6 6
7 var $ = require('yoho-jquery'), 7 var $ = require('yoho-jquery'),
8 Swiper = require('yoho-swiper'), 8 Swiper = require('yoho-swiper'),
9 - tip = require('../plugin/tip'),  
10 - lazyLoad = require('yoho-jquery-lazyload'),  
11 - ellipsis = require('yoho-mlellipsis'),  
12 loading = require('../plugin/loading'), 9 loading = require('../plugin/loading'),
13 PullRefresh = require('../plugin/pull-refresh'); 10 PullRefresh = require('../plugin/pull-refresh');
14 11
15 var $window = $(window), 12 var $window = $(window),
16 stopLoading = false, 13 stopLoading = false,
17 $mainContent = $('.main-content'), 14 $mainContent = $('.main-content'),
18 - $headTab = $('.head-tab'),  
19 - headTabH = $headTab.height(),  
20 - scrollH = $(window).height() - headTabH,  
21 $loadingTip = $('.loading-tip'), 15 $loadingTip = $('.loading-tip'),
22 u = navigator.userAgent, 16 u = navigator.userAgent,
23 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 17 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
@@ -32,8 +26,8 @@ var $window = $(window), @@ -32,8 +26,8 @@ var $window = $(window),
32 var mySwiper; 26 var mySwiper;
33 */ 27 */
34 28
35 -var avatarKey, bannerLen, res, avatarSwiper, avatarSwiperClone, getIndexHtml,  
36 - $avatarClone, $starArticle, $avatarWrap, starIScroll; 29 +var avatarKey, bannerLen, res, avatarSwiper, avatarSwiperClone, getIndexHtml, bannerSwiper,
  30 + $avatarClone, $avatarWrap, starIScroll;
37 31
38 var swiperNum = $('.avatar-wrap .swiper-slide').width() / 2; 32 var swiperNum = $('.avatar-wrap .swiper-slide').width() / 2;
39 33
@@ -42,39 +36,36 @@ if ($window.width() === 375 && isiOS) { @@ -42,39 +36,36 @@ if ($window.width() === 375 && isiOS) {
42 } 36 }
43 37
44 require('../common'); 38 require('../common');
45 -  
46 -lazyLoad($('img.lazy'));  
47 -ellipsis.init(); 39 +require('yoho-jquery-lazyload');
48 40
49 $window.on('mousewheel', false); 41 $window.on('mousewheel', false);
  42 +$('#yoho-header, .head-tab').on('touchmove', function() {
  43 + return false;
  44 +});
50 45
51 // 限制标题字数 46 // 限制标题字数
52 -function txtLimit(dom, item1, item2) {  
53 - var $title = dom.find(item1),  
54 - $cont = dom.find(item2);  
55 -  
56 - $title[0].mlellipsis(2);  
57 - $cont[0].mlellipsis(3);  
58 -}  
59 -  
60 -// 设置默认头像  
61 -function setAvatar($userAvatar) {  
62 - var myImage = new Image(),  
63 - avatar = '';  
64 -  
65 - // 部分老用户没有头像，显示默认头像  
66 - avatar = $userAvatar.data('avatar');  
67 -  
68 - myImage.onload = function() {  
69 - $userAvatar.css('background-image', 'url(' + avatar + ')');  
70 - };  
71 -  
72 - if (avatar) {  
73 - myImage.src = avatar;  
74 - } else {  
75 - $userAvatar.addClass('default-avater');  
76 - }  
77 -} 47 +// function txtLimit() {
  48 +//
  49 +// }
  50 +
  51 +// // 设置默认头像
  52 +// function setAvatar($userAvatar) {
  53 +// var myImage = new Image(),
  54 +// avatar = '';
  55 +//
  56 +// // 部分老用户没有头像，显示默认头像
  57 +// avatar = $userAvatar.data('avatar');
  58 +//
  59 +// // myImage.onload = function() {
  60 +// // $userAvatar.css('background-image', 'url(' + avatar + ')');
  61 +// // };
  62 +// //
  63 +// // if (avatar) {
  64 +// // myImage.src = avatar;
  65 +// // } else {
  66 +// // $userAvatar.addClass('default-avater');
  67 +// // }
  68 +// }
78 69
79 70
80 // 明星头像点击居中显示或跳转 71 // 明星头像点击居中显示或跳转
@@ -98,14 +89,18 @@ function bindAvatar(dom) { @@ -98,14 +89,18 @@ function bindAvatar(dom) {
98 } 89 }
99 90
100 function setIndexAction() { 91 function setIndexAction() {
101 - $('.avatar').each(function(key, item) {  
102 - $(item).addClass('avatar-' + key);  
103 - }); 92 + // $('.avatar').each(function(key, item) {
  93 + // $(item).addClass('avatar-' + key);
  94 + // });
104 95
105 // 明星头像 swiper 初始化 96 // 明星头像 swiper 初始化
106 if (bannerLen > 1) { 97 if (bannerLen > 1) {
107 - avatarSwiper = new Swiper('.avatar-1', {  
108 - loop: true, 98 + console.log(Math.floor($avatarWrap.find('.swiper-slide').length / 2));
  99 + avatarSwiper = new Swiper($avatarWrap.find('.avatar-swiper')[0], {
  100 + lazyLoading: true,
  101 + lazyLoadingInPrevNextAmount: 3,
  102 +
  103 + // loop: true,
109 initialSlide: 2, 104 initialSlide: 2,
110 centeredSlides: true, 105 centeredSlides: true,
111 slidesPerView: 'auto', 106 slidesPerView: 'auto',
@@ -115,7 +110,7 @@ function setIndexAction() { @@ -115,7 +110,7 @@ function setIndexAction() {
115 watchSlidesProgress: true, 110 watchSlidesProgress: true,
116 watchSlidesVisibility: true, 111 watchSlidesVisibility: true,
117 onInit: function() { 112 onInit: function() {
118 - $('.avatar-1 li').on('click', function() { 113 + $avatarWrap.on('click', 'li', function() {
119 res = bindAvatar($(this)); 114 res = bindAvatar($(this));
120 return res; 115 return res;
121 }); 116 });
@@ -124,19 +119,19 @@ function setIndexAction() { @@ -124,19 +119,19 @@ function setIndexAction() {
124 } 119 }
125 120
126 // 明星动态头像左右滑动 121 // 明星动态头像左右滑动
127 - if ($('.article-avatar-swiper').find('li').length > 1) {  
128 - new Swiper('.article-avatar-swiper', {  
129 - initialSlide: 0,  
130 - lazyLoading: true,  
131 - lazyLoadingInPrevNext: true,  
132 - loop: true,  
133 - autoplay: 5000  
134 - });  
135 - } 122 + // if ($('.article-avatar-swiper').find('li').length > 1) {
  123 + // new Swiper('.article-avatar-swiper', {
  124 + // initialSlide: 0,
  125 + // lazyLoading: true,
  126 + // lazyLoadingInPrevNext: true,
  127 + // loop: true,
  128 + // autoplay: 5000
  129 + // });
  130 + // }
136 131
137 // banner swiper 初始化 132 // banner swiper 初始化
138 if ($('.banner-swiper').find('li').length > 1) { 133 if ($('.banner-swiper').find('li').length > 1) {
139 - new Swiper('.banner-swiper', { 134 + bannerSwiper = new Swiper('.banner-swiper', {
140 lazyLoading: true, 135 lazyLoading: true,
141 lazyLoadingInPrevNext: true, 136 lazyLoadingInPrevNext: true,
142 loop: true, 137 loop: true,
@@ -148,25 +143,20 @@ function setIndexAction() { @@ -148,25 +143,20 @@ function setIndexAction() {
148 }); 143 });
149 } 144 }
150 145
151 - if ($('.star-info').find('li').length > 0) {  
152 - $starArticle.each(function(key, item) {  
153 - txtLimit($(item), '.article-title', 'p');  
154 -  
155 - // articleImgAction($(item), key);  
156 - });  
157 - }  
158 -  
159 - $('.rank-avatar').each(function(key, item) {  
160 - setAvatar($(item));  
161 - });  
162 -  
163 - $('#yoho-header, .head-tab').on('touchmove', function() {  
164 - return false;  
165 - }); 146 + // if ($('.star-info').find('li').length > 0) {
  147 + // $starArticle.each(function(key, item) {
  148 + // txtLimit($(item), '.article-title', 'p');
  149 + //
  150 + // // articleImgAction($(item), key);
  151 + // });
  152 + // }
  153 +
  154 + // $('.rank-avatar').each(function(key, item) {
  155 + // setAvatar($(item));
  156 + // });
166 } 157 }
167 158
168 function initAction() { 159 function initAction() {
169 - $starArticle = $('.star-article');  
170 $avatarWrap = $('.avatar-wrap'); 160 $avatarWrap = $('.avatar-wrap');
171 bannerLen = $('.avatar-wrap').find('.swiper-slide').length; 161 bannerLen = $('.avatar-wrap').find('.swiper-slide').length;
172 162
@@ -178,16 +168,14 @@ function initAction() { @@ -178,16 +168,14 @@ function initAction() {
178 168
179 $avatarClone = $('.avatar-clone'); 169 $avatarClone = $('.avatar-clone');
180 170
181 - // 限制标题字数  
182 - $('.cont-area').each(function() {  
183 - txtLimit($(this), '.title', '.cont-txt'); 171 + $('img.lazy').lazyload({
  172 + effect: 'fadeIn'
184 }); 173 });
185 174
186 - lazyLoad($('img.lazy'));  
187 -  
188 setIndexAction(); 175 setIndexAction();
189 } 176 }
190 177
  178 +initAction();
191 179
192 // 首页数据请求 180 // 首页数据请求
193 getIndexHtml = function() { 181 getIndexHtml = function() {
@@ -195,33 +183,27 @@ getIndexHtml = function() { @@ -195,33 +183,27 @@ getIndexHtml = function() {
195 $.ajax({ 183 $.ajax({
196 url: '/guang/star/getIndexHtml', 184 url: '/guang/star/getIndexHtml',
197 dataType: 'html', 185 dataType: 'html',
198 - success: function(data) {  
199 - stopLoading = false;  
200 -  
201 - if (data) {  
202 - if (avatarSwiperClone) {  
203 - avatarSwiperClone.destroy(true, true);  
204 - avatarSwiperClone = '';  
205 - }  
206 -  
207 - $mainContent.html(data);  
208 -  
209 - initAction(); 186 + })
  187 + .done(function(data) {
  188 + if (data) {
  189 + if (avatarSwiperClone) {
  190 + avatarSwiperClone.destroy(true, true);
  191 + avatarSwiperClone = null;
210 } 192 }
211 193
212 - loading.hideLoadingMask();  
213 - },  
214 - error: function() {  
215 - tip.show('网络断开连接了~'); 194 + $mainContent.html(data);
  195 +
  196 + initAction();
216 } 197 }
  198 + })
  199 + .always(function() {
  200 + stopLoading = false;
  201 + loading.hideLoadingMask();
217 }); 202 });
218 }; 203 };
219 204
220 -initAction();  
221 -  
222 // 下拉刷新，上拉加载 205 // 下拉刷新，上拉加载
223 starIScroll = new PullRefresh('.star-main', { 206 starIScroll = new PullRefresh('.star-main', {
224 - height: scrollH,  
225 pullDown: function() { 207 pullDown: function() {
226 if (!stopLoading) { 208 if (!stopLoading) {
227 stopLoading = true; 209 stopLoading = true;
@@ -232,58 +214,66 @@ starIScroll = new PullRefresh('.star-main', { @@ -232,58 +214,66 @@ starIScroll = new PullRefresh('.star-main', {
232 214
233 starIScroll.iScroll.on('scrollStart', function() { 215 starIScroll.iScroll.on('scrollStart', function() {
234 // 下拉 216 // 下拉
235 - if (this.directionY === -1) {  
236 - $loadingTip.slideDown();  
237 - }  
238 -}); 217 + // if (this.directionY === -1) {
  218 + // $loadingTip.slideDown();
  219 + // }
239 220
240 -starIScroll.iScroll.on('scroll', function() {  
241 - if (this.directionY !== -1) {  
242 - starIScroll.iScroll.refresh();  
243 - }  
244 -  
245 - if ($avatarWrap.offset().top <= headTabH) {  
246 - $avatarClone.show();  
247 -  
248 - if (!avatarSwiperClone) {  
249 - avatarSwiperClone = new Swiper('.avatar-0', {  
250 - loop: true,  
251 - initialSlide: $('.avatar-1').find('.swiper-slide-active').index() % bannerLen,  
252 - centeredSlides: true,  
253 - slidesPerView: 'auto',  
254 - loopedSlides: bannerLen,  
255 - spaceBetween: 10,  
256 - slidesOffsetBefore: -swiperNum,  
257 - watchSlidesProgress: true,  
258 - watchSlidesVisibility: true,  
259 - onInit: function() {  
260 - $('.avatar-0 li').on('click', function() {  
261 - res = bindAvatar($(this));  
262 - return res;  
263 - });  
264 - }  
265 - });  
266 -  
267 - avatarSwiperClone.params.control = avatarSwiper;  
268 - avatarSwiper.params.control = avatarSwiperClone;  
269 - }  
270 - }  
271 -  
272 - if ($avatarWrap.offset().top > $('.avatar-1')[0].scrollHeight) {  
273 - $avatarClone.hide();  
274 - } 221 + bannerSwiper && bannerSwiper.startAutoplay();
275 }); 222 });
276 223
  224 +// starIScroll.iScroll.on('scroll', function() {
  225 +// var avatarOffsetT;
  226 +//
  227 +// if (this.directionY !== -1) {
  228 +// setTimeout(function() {
  229 +// starIScroll.iScroll.refresh();
  230 +// }, 0);
  231 +// }
  232 +//
  233 +// avatarOffsetT = $avatarWrap[0].offsetTop;
  234 +//
  235 +// if (-this.y >= avatarOffsetT) {
  236 +// $avatarClone.show();
  237 +//
  238 +// if (!avatarSwiperClone) {
  239 +// avatarSwiperClone = new Swiper($avatarClone[0], {
  240 +// loop: true,
  241 +// initialSlide: $avatarWrap.find('.swiper-slide-active').index() % bannerLen,
  242 +// centeredSlides: true,
  243 +// slidesPerView: 'auto',
  244 +// loopedSlides: bannerLen,
  245 +// spaceBetween: 10,
  246 +// slidesOffsetBefore: -swiperNum,
  247 +// watchSlidesProgress: true,
  248 +// watchSlidesVisibility: true,
  249 +// onInit: function() {
  250 +// $avatarClone.find('li').on('click', function() {
  251 +// res = bindAvatar($(this));
  252 +// return res;
  253 +// });
  254 +// }
  255 +// });
  256 +//
  257 +// avatarSwiperClone.params.control = avatarSwiper;
  258 +// avatarSwiper.params.control = avatarSwiperClone;
  259 +// }
  260 +// } else {
  261 +// $avatarClone.hide();
  262 +// }
  263 +// });
  264 +
277 starIScroll.iScroll.on('scrollEnd', function() { 265 starIScroll.iScroll.on('scrollEnd', function() {
278 - $loadingTip.slideUp();  
279 -}); 266 + // $loadingTip.slideUp();
280 267
281 -$('img').on('load', function() {  
282 - starIScroll && starIScroll.iScroll.refresh(); 268 + bannerSwiper && bannerSwiper.stopAutoplay();
283 }); 269 });
284 270
285 window.setCookie('guangStarUid', window.queryString.uid); 271 window.setCookie('guangStarUid', window.queryString.uid);
286 272
  273 +// $('img').on('load', function() {
  274 +// starIScroll && starIScroll.iScroll.refresh();
  275 +// });
  276 +
287 // 明星动态文章图片相关操作 277 // 明星动态文章图片相关操作
288 /* 278 /*
289 function articleImgAction(dom, key) { 279 function articleImgAction(dom, key) {
@@ -29,14 +29,10 @@ function PullRefresh(seclector, options) { @@ -29,14 +29,10 @@ function PullRefresh(seclector, options) {
29 return; 29 return;
30 } 30 }
31 31
32 - if (options.height) {  
33 - $em.height(options.height);  
34 - }  
35 -  
36 - this.iScroll = new IScroll($em.get(0), { 32 + this.iScroll = new IScroll($em.get(0), $.extend({
37 click: true, 33 click: true,
38 probeType: 3 34 probeType: 3
39 - }); 35 + }, options));
40 36
41 this.iScroll.on('scrollStart', function() { 37 this.iScroll.on('scrollStart', function() {
42 if (this.y === 0) { 38 if (this.y === 0) {
@@ -44,7 +40,6 @@ function PullRefresh(seclector, options) { @@ -44,7 +40,6 @@ function PullRefresh(seclector, options) {
44 } 40 }
45 41
46 pullStart = this.y; 42 pullStart = this.y;
47 - $window.trigger('scroll');  
48 }); 43 });
49 44
50 this.iScroll.on('scrollEnd', function() { 45 this.iScroll.on('scrollEnd', function() {
  1 +@keyframes avatar2 {
  2 + 0% {
  3 + transform: translate3d(0, 0, 0);
  4 + }
  5 +
  6 + 25% {
  7 + transform: translate3d(0, 0, 0);
  8 + }
  9 +
  10 + 40% {
  11 + transform: translate3d(-120px, 0, 0);
  12 + }
  13 +
  14 + 75% {
  15 + transform: translate3d(-120px, 0, 0);
  16 + }
  17 +
  18 + 90% {
  19 + transform: translate3d(-240px, 0, 0);
  20 + }
  21 +
  22 + 90.0001% {
  23 + transform: translate3d(0, 0, 0);
  24 + }
  25 +}
  26 +
  27 +@keyframes avatar3 {
  28 + 0% {
  29 + transform: translate3d(0, 0, 0);
  30 + }
  31 +
  32 + 27% {
  33 + transform: translate3d(0, 0, 0);
  34 + }
  35 +
  36 + 35% {
  37 + transform: translate3d(-120px, 0, 0);
  38 + }
  39 +
  40 + 59% {
  41 + transform: translate3d(-120px, 0, 0);
  42 + }
  43 +
  44 + 67% {
  45 + transform: translate3d(-240px, 0, 0);
  46 + }
  47 +
  48 + 91% {
  49 + transform: translate3d(-240px, 0, 0);
  50 + }
  51 +
  52 + 99% {
  53 + transform: translate3d(-360px, 0, 0);
  54 + }
  55 +
  56 + 99.00001% {
  57 + transform: translate3d(0, 0, 0);
  58 + }
  59 +}
  1 +@import "avatar";
1 @import "star"; 2 @import "star";
2 @import "special"; 3 @import "special";
3 @import "collocation"; 4 @import "collocation";
@@ -23,10 +23,19 @@ @@ -23,10 +23,19 @@
23 font-weight: bold; 23 font-weight: bold;
24 } 24 }
25 25
  26 + .lazy {
  27 + opacity: 0.1;
  28 +
  29 + &[src^="http"],
  30 + &[src^="//"] {
  31 + opacity: 1;
  32 + }
  33 + }
  34 +
26 .head-tab { 35 .head-tab {
27 position: fixed; 36 position: fixed;
28 top: 0; 37 top: 0;
29 - width: 100%; 38 + width: 640px;
30 height: 88px; 39 height: 88px;
31 background: #000; 40 background: #000;
32 z-index: 3; 41 z-index: 3;
@@ -122,7 +131,13 @@ @@ -122,7 +131,13 @@
122 } 131 }
123 132
124 .star-main { 133 .star-main {
125 - margin-top: 88px; 134 + margin: 88px 0;
  135 + position: absolute;
  136 + left: 0;
  137 + top: 0;
  138 + bottom: 0;
  139 + right: 0;
  140 + height: calc(100vh - 88px);
126 } 141 }
127 142
128 .avatar-swiper { 143 .avatar-swiper {
@@ -146,6 +161,7 @@ @@ -146,6 +161,7 @@
146 height: 110px; 161 height: 110px;
147 margin-top: 36px; 162 margin-top: 36px;
148 background: #000; 163 background: #000;
  164 + transition: all 400ms;
149 165
150 a { 166 a {
151 border-radius: 5px; 167 border-radius: 5px;
@@ -173,16 +189,36 @@ @@ -173,16 +189,36 @@
173 li { 189 li {
174 float: left; 190 float: left;
175 margin-bottom: 30px; 191 margin-bottom: 30px;
  192 + padding-left: 10px;
176 } 193 }
177 } 194 }
178 195
179 .star-avatar { 196 .star-avatar {
180 - width: 134px;  
181 - padding-left: 30px; 197 + width: 120px;
  198 + margin-right: 20px;
182 box-sizing: border-box; 199 box-sizing: border-box;
183 float: left; 200 float: left;
184 overflow: hidden; 201 overflow: hidden;
185 202
  203 + .avatar-wrap {
  204 + white-space: nowrap;
  205 + font-size: 0;
  206 +
  207 + &.avatar-num-2 {
  208 + animation: avatar2 10s infinite;
  209 + }
  210 +
  211 + &.avatar-num-3 {
  212 + animation: avatar3 15s infinite;
  213 + }
  214 + }
  215 +
  216 + a {
  217 + display: inline-block;
  218 + padding: 8px;
  219 + width: 120px;
  220 + }
  221 +
186 .article-avatar-swiper { 222 .article-avatar-swiper {
187 width: 104px; 223 width: 104px;
188 overflow: hidden; 224 overflow: hidden;
@@ -192,7 +228,7 @@ @@ -192,7 +228,7 @@
192 width: 104px; 228 width: 104px;
193 height: 104px; 229 height: 104px;
194 border-radius: 50%; 230 border-radius: 50%;
195 - float: left; 231 + margin: 0 auto;
196 } 232 }
197 233
198 .name { 234 .name {
@@ -216,7 +252,6 @@ @@ -216,7 +252,6 @@
216 float: left; 252 float: left;
217 padding: 20px 30px; 253 padding: 20px 30px;
218 box-sizing: border-box; 254 box-sizing: border-box;
219 - margin-left: 18px;  
220 255
221 .article-arrow { 256 .article-arrow {
222 position: absolute; 257 position: absolute;
@@ -231,8 +266,14 @@ @@ -231,8 +266,14 @@
231 .article-title { 266 .article-title {
232 font-size: 28px; 267 font-size: 28px;
233 line-height: 38px; 268 line-height: 38px;
  269 + height: 76px;
234 color: #fff; 270 color: #fff;
235 - word-wrap: break-word; 271 + text-overflow: ellipsis;
  272 + overflow: hidden;
  273 + word-break: break-all;
  274 + display: -webkit-box;
  275 + -webkit-box-orient: vertical;
  276 + -webkit-line-clamp: 2;
236 } 277 }
237 278
238 .artice-cont { 279 .artice-cont {
@@ -247,13 +288,19 @@ @@ -247,13 +288,19 @@
247 } 288 }
248 289
249 .artice-imgs-area { 290 .artice-imgs-area {
250 - width: 100%; 291 + position: relative;
  292 + display: table;
  293 + margin: 10px 0;
  294 + width: 266px;
  295 + height: 266px;
251 overflow: hidden; 296 overflow: hidden;
252 297
253 img { 298 img {
254 - width: 266px;  
255 - float: left;  
256 - margin: 25px 0; 299 + position: absolute;
  300 + width: 100%;
  301 + left: 0;
  302 + top: 50%;
  303 + transform: translateY(-50%);
257 } 304 }
258 } 305 }
259 306
@@ -294,7 +341,7 @@ @@ -294,7 +341,7 @@
294 .pic-icon { 341 .pic-icon {
295 width: 19px; 342 width: 19px;
296 height: 15px; 343 height: 15px;
297 - background: url('/guang/star/img.png') no-repeat; 344 + background: url("/guang/star/img.png") no-repeat;
298 background-size: contain; 345 background-size: contain;
299 display: inline-block; 346 display: inline-block;
300 margin: 6px 4px 0 8px; 347 margin: 6px 4px 0 8px;
@@ -394,16 +441,15 @@ @@ -394,16 +441,15 @@
394 } 441 }
395 442
396 .default-avater { 443 .default-avater {
397 - background-image: resolve('guang/star/user-avatar.png'); 444 + background-image: resolve("guang/star/user-avatar.png");
398 } 445 }
399 446
400 .loading-tip { 447 .loading-tip {
401 position: absolute; 448 position: absolute;
402 - top: 0; 449 + top: 88px;
403 left: 50%; 450 left: 50%;
404 transform: translate(-50%, 0); 451 transform: translate(-50%, 0);
405 padding: 30px 0; 452 padding: 30px 0;
406 - display: none;  
407 text-align: center; 453 text-align: center;
408 color: #ccc; 454 color: #ccc;
409 font-size: 18px; 455 font-size: 18px;