Authored by zhangxiaoru

editorial

@@ -16,7 +16,7 @@ const index = (req, res, next) => { @@ -16,7 +16,7 @@ const index = (req, res, next) => {
16 // let gender = req.query.brand || 1; 16 // let gender = req.query.brand || 1;
17 17
18 editorialModel.getIndexData(type, pageNum, limit).then((result) => { 18 editorialModel.getIndexData(type, pageNum, limit).then((result) => {
19 - console.log(); 19 +
20 res.display('index', { 20 res.display('index', {
21 module: 'editorial', 21 module: 'editorial',
22 page: 'index', 22 page: 'index',
@@ -26,7 +26,7 @@ const index = (req, res, next) => { @@ -26,7 +26,7 @@ const index = (req, res, next) => {
26 { 26 {
27 link: '/editorial?type=0', 27 link: '/editorial?type=0',
28 pathTitle: '首页', 28 pathTitle: '首页',
29 - name: 'MEN首页' 29 + name: 'MEN首页'
30 }, 30 },
31 { 31 {
32 pathTitle: '资讯', 32 pathTitle: '资讯',
@@ -34,7 +34,7 @@ const index = (req, res, next) => { @@ -34,7 +34,7 @@ const index = (req, res, next) => {
34 } 34 }
35 ], 35 ],
36 msgTypes: result.msgTypes, 36 msgTypes: result.msgTypes,
37 - msg: result.msg.list.artList, 37 + msg: result.msg.tabs,
38 paginationOpts: { 38 paginationOpts: {
39 page: pageNum, // current page: http://host/?page=2 39 page: pageNum, // current page: http://host/?page=2
40 limit: 20, // per_page records' number 40 limit: 20, // per_page records' number
@@ -58,12 +58,13 @@ const index = (req, res, next) => { @@ -58,12 +58,13 @@ const index = (req, res, next) => {
58 const list = (req, res) => { 58 const list = (req, res) => {
59 let pageNum = req.query.page || 1; 59 let pageNum = req.query.page || 1;
60 let limit = req.query.limit || 20; 60 let limit = req.query.limit || 20;
61 - let tag = req.params.tag || '暗黑';  
62 - let authorId = req.params.authorId || 0; 61 + let tag = req.query.query;
  62 + let authorId = req.query.authorId;
63 63
64 // let curChannel = getChannelData(req.channel, req.query.query); 64 // let curChannel = getChannelData(req.channel, req.query.query);
65 65
66 editorialModel.getListData(pageNum, limit, tag, authorId).then((result) => { 66 editorialModel.getListData(pageNum, limit, tag, authorId).then((result) => {
  67 +
67 res.display('list', { 68 res.display('list', {
68 module: 'editorial', 69 module: 'editorial',
69 page: 'list', 70 page: 'list',
@@ -85,8 +86,8 @@ const list = (req, res) => { @@ -85,8 +86,8 @@ const list = (req, res) => {
85 name: req.query.query 86 name: req.query.query
86 } 87 }
87 ], 88 ],
88 - pathTitle: req.query.query,  
89 - msg: result.list.artList, 89 + pathTitle: req.query.query || result.authorName,
  90 + msg: result.tabs,
90 paginationOpts: { 91 paginationOpts: {
91 page: pageNum, // current page: http://host/?page=2 92 page: pageNum, // current page: http://host/?page=2
92 limit: 20, // per_page records' number 93 limit: 20, // per_page records' number
@@ -103,7 +104,7 @@ const list = (req, res) => { @@ -103,7 +104,7 @@ const list = (req, res) => {
103 }; 104 };
104 105
105 const detail = (req, res, next) => { 106 const detail = (req, res, next) => {
106 - let id = req.params.id || 52571; 107 + let id = req.params.id;
107 108
108 editorialModel.getDetailData(id).then((result) => { 109 editorialModel.getDetailData(id).then((result) => {
109 res.display('detail', { 110 res.display('detail', {
@@ -128,7 +129,7 @@ const detail = (req, res, next) => { @@ -128,7 +129,7 @@ const detail = (req, res, next) => {
128 } 129 }
129 ], 130 ],
130 header: result.head, 131 header: result.head,
131 - content: result.content, 132 + content: result.content.contents,
132 tags: result.tags, 133 tags: result.tags,
133 userInfo: result.head, 134 userInfo: result.head,
134 comment: result.comment, 135 comment: result.comment,
@@ -137,56 +138,10 @@ const detail = (req, res, next) => { @@ -137,56 +138,10 @@ const detail = (req, res, next) => {
137 nextChapter: '来来来,让我们好好聊聊', 138 nextChapter: '来来来,让我们好好聊聊',
138 lastChapter: '除了黑白灰' 139 lastChapter: '除了黑白灰'
139 }, 140 },
140 -  
141 - // content: {  
142 - // goods: [  
143 - // {  
144 - // img: 'http://placehold.it/274x366',  
145 - // link: '',  
146 - // name: 'Fred Perry Bomber jacket',  
147 - // price: '1015.00'  
148 - // }  
149 - // ]  
150 - // },  
151 - // relatedGoods: {  
152 - // relatedTitle: '推荐搭配',  
153 - // goods: [  
154 - // {  
155 - // img: 'http://placehold.it/274x366',  
156 - // link: '',  
157 - // name: 'Fred Perry Bomber jacket',  
158 - // price: '1015.00'  
159 - // }  
160 - //  
161 - // ]  
162 - // }  
163 - // },  
164 - // brands: [  
165 - // {  
166 - // url: 'http://placehold.it/274x366',  
167 - // thumb: 'wed',  
168 - // name: 'Fred Perry'  
169 - // },  
170 - // {  
171 - // url: 'http://placehold.it/274x366',  
172 - // thumb: 'wed',  
173 - // name: 'Fred Perry'  
174 - // },  
175 - // {  
176 - // url: 'http://placehold.it/274x366',  
177 - // thumb: 'wed',  
178 - // name: 'Fred Perry'  
179 - // },  
180 - // {  
181 - // url: 'http://placehold.it/274x366',  
182 - // thumb: 'wed',  
183 - // name: 'Fred Perry'  
184 - // }  
185 - // ],  
186 share: { 141 share: {
187 - shareImg: 'hjchsk',  
188 - shareDesc: 'wjhdfwe',  
189 - weixinUrl: 'www.baidu.com' 142 + shareImg: result.content.shareImg,
  143 + shareDesc: result.head.title,
  144 + weixinUrl: req.originalUrl
190 } 145 }
191 146
192 147
@@ -202,7 +157,7 @@ const detail = (req, res, next) => { @@ -202,7 +157,7 @@ const detail = (req, res, next) => {
202 157
203 let setCollect = (req, res, next) => { 158 let setCollect = (req, res, next) => {
204 let uid = req.user.uid; 159 let uid = req.user.uid;
205 - let id = req.params.id || 52571; 160 + let id = req.params.id;
206 161
207 editorialModel.setCollect(id, uid).then((result) => { 162 editorialModel.setCollect(id, uid).then((result) => {
208 res.json(result); 163 res.json(result);
@@ -211,7 +166,7 @@ let setCollect = (req, res, next) => { @@ -211,7 +166,7 @@ let setCollect = (req, res, next) => {
211 166
212 let cancelCollect = (req, res, next) => { 167 let cancelCollect = (req, res, next) => {
213 let uid = req.user.uid; 168 let uid = req.user.uid;
214 - let id = req.params.id || 52571; 169 + let id = req.params.id;
215 170
216 editorialModel.setCollect(id, uid).then((result) => { 171 editorialModel.setCollect(id, uid).then((result) => {
217 res.json(result); 172 res.json(result);
@@ -221,7 +176,7 @@ let cancelCollect = (req, res, next) => { @@ -221,7 +176,7 @@ let cancelCollect = (req, res, next) => {
221 // 点赞 176 // 点赞
222 let setPraise = (req, res, next) => { 177 let setPraise = (req, res, next) => {
223 let udid = req.user.uid; 178 let udid = req.user.uid;
224 - let id = req.params.id || 52571; 179 + let id = req.params.id;
225 180
226 editorialModel.setPraise(id, udid).then((result) => { 181 editorialModel.setPraise(id, udid).then((result) => {
227 res.json(result); 182 res.json(result);
@@ -230,7 +185,7 @@ let setPraise = (req, res, next) => { @@ -230,7 +185,7 @@ let setPraise = (req, res, next) => {
230 185
231 let cancelPraise = (req, res, next) => { 186 let cancelPraise = (req, res, next) => {
232 let udid = req.user.uid; 187 let udid = req.user.uid;
233 - let id = req.params.id || 52571; 188 + let id = req.params.id;
234 189
235 editorialModel.cancelPraise(id, udid).then((result) => { 190 editorialModel.cancelPraise(id, udid).then((result) => {
236 res.json(result); 191 res.json(result);
@@ -239,7 +194,7 @@ let cancelPraise = (req, res, next) => { @@ -239,7 +194,7 @@ let cancelPraise = (req, res, next) => {
239 194
240 let addComment = (req, res, next) => { 195 let addComment = (req, res, next) => {
241 let uid = req.user.uid; 196 let uid = req.user.uid;
242 - let id = req.params.id || 52571; 197 + let id = req.params.id;
243 let content = req.body.content; 198 let content = req.body.content;
244 199
245 editorialModel.setCollect(id, uid, content).then((result) => { 200 editorialModel.setCollect(id, uid, content).then((result) => {
@@ -33,7 +33,17 @@ const _processListData = (list) => { @@ -33,7 +33,17 @@ const _processListData = (list) => {
33 list = list || []; 33 list = list || [];
34 list = camelCase(list); 34 list = camelCase(list);
35 35
36 - _.forEach(list.list.artList, (data) => { 36 + let listData = {
  37 + tabs: []
  38 + };
  39 +
  40 + _.forEach(list.list.artList, (data, index) => {
  41 + if (index === 0) {
  42 + listData = _.assign(listData, {
  43 + authorName: data.author.name
  44 + });
  45 + }
  46 +
37 data.publishTime = data.publishTime.replace(/年|月/g, '/'); 47 data.publishTime = data.publishTime.replace(/年|月/g, '/');
38 data.publishTime = data.publishTime.replace(/日/g, ''); 48 data.publishTime = data.publishTime.replace(/日/g, '');
39 49
@@ -44,8 +54,9 @@ const _processListData = (list) => { @@ -44,8 +54,9 @@ const _processListData = (list) => {
44 } 54 }
45 55
46 }); 56 });
47 -  
48 - return list; 57 + listData.tabs = list.list.artList;
  58 +
  59 + return listData;
49 }; 60 };
50 61
51 const _getResources = (type) => { 62 const _getResources = (type) => {
@@ -87,12 +98,20 @@ const getIndexData = (type, pageNum, limit) => { @@ -87,12 +98,20 @@ const getIndexData = (type, pageNum, limit) => {
87 }; 98 };
88 99
89 const getListData = (pageNum, limit, tag, authorId) => { 100 const getListData = (pageNum, limit, tag, authorId) => {
90 - return serviceAPI.get('guang/api/*/article/getList', { 101 + let param = {
91 page: pageNum, 102 page: pageNum,
92 - limit: limit,  
93 - tag: tag,  
94 - author_id: authorId  
95 - }).then((result) => { 103 + limit: limit
  104 + };
  105 +
  106 + if (tag) {
  107 + param.tag = tag;
  108 + }
  109 +
  110 + if (authorId) {
  111 + param.author_id = authorId;
  112 + }
  113 +
  114 + return serviceAPI.get('guang/api/*/article/getList', param).then((result) => {
96 if (result && result.code === 200) { 115 if (result && result.code === 200) {
97 return _processListData(result.data); 116 return _processListData(result.data);
98 } else { 117 } else {
@@ -103,7 +122,6 @@ const getListData = (pageNum, limit, tag, authorId) => { @@ -103,7 +122,6 @@ const getListData = (pageNum, limit, tag, authorId) => {
103 }; 122 };
104 123
105 // 详情页 124 // 详情页
106 -  
107 const _getAuthorData = (id) => { 125 const _getAuthorData = (id) => {
108 126
109 return serviceAPI.get('/guang/service/*/author/getAuthor', { 127 return serviceAPI.get('/guang/service/*/author/getAuthor', {
@@ -150,14 +168,15 @@ const _processHeadData = (list) => { @@ -150,14 +168,15 @@ const _processHeadData = (list) => {
150 time: data.publishTime, 168 time: data.publishTime,
151 isLike: data.isPraise, 169 isLike: data.isPraise,
152 isFavor: data.isFavor, 170 isFavor: data.isFavor,
153 - likeNum: data.praiseNum 171 + likeNum: data.praiseNum,
154 }; 172 };
155 173
156 } 174 }
157 175
158 if (index === 1) { 176 if (index === 1) {
159 newData.headData = _.assign(newData.headData, { 177 newData.headData = _.assign(newData.headData, {
160 - authorId: data.authorId 178 + authorId: data.authorId,
  179 + authorUrl: `/editorial/list/?authorId=${data.authorId}`
161 }); 180 });
162 181
163 _.forEach(data.tags, function(value) { 182 _.forEach(data.tags, function(value) {
@@ -185,7 +204,6 @@ const _processHeadData = (list) => { @@ -185,7 +204,6 @@ const _processHeadData = (list) => {
185 let data = yield _getAuthorData(id); 204 let data = yield _getAuthorData(id);
186 205
187 newData.headData = _.assign(newData.headData, { 206 newData.headData = _.assign(newData.headData, {
188 - authorUrl: data.url,  
189 avatar: data.avatar, 207 avatar: data.avatar,
190 name: data.name 208 name: data.name
191 }); 209 });
@@ -194,65 +212,36 @@ const _processHeadData = (list) => { @@ -194,65 +212,36 @@ const _processHeadData = (list) => {
194 })(); 212 })();
195 }; 213 };
196 214
197 -// const _getGoodsSort = (skn) => {  
198 -// return api.get('', {  
199 -// product_skn: 51137901,  
200 -// method: 'h5.product.data'  
201 -// }).then((result) => {  
202 -// if (result && result.code === 200) {  
203 -// console.log(result)  
204 -// return result;  
205 -// } else {  
206 -// logger.error('数据返回 code 不是 200');  
207 -// return {};  
208 -// }  
209 -// });  
210 -// };  
211 -  
212 const _processContentData = (list) => { 215 const _processContentData = (list) => {
213 -  
214 list = list || []; 216 list = list || [];
215 list = camelCase(list); 217 list = camelCase(list);
216 218
217 - _.forEach(list, function(data) {  
218 - if (data.text) {  
219 - data.text.data.text = data.text.data.text.replace(/<.*?>/ig, '');  
220 - }  
221 -  
222 -  
223 - // if (data.goods) {  
224 -  
225 - // console.log(data.goods)  
226 - // _.forEach(data.goods, function(data, index) { 219 + let contentData = {
  220 + contents: []
  221 + };
227 222
228 - // console.log(index)  
229 - // _.forEach(data, function(value) {  
230 - // // console.log(value)  
231 - // // // _getGoodsSort(value.id); 223 + _.forEach(list, function(value) {
232 224
233 - // });  
234 - // });  
235 -  
236 - // } 225 + if (value.singleImage) {
  226 + _.forEach(value.singleImage.data, function(data, index) {
  227 + if (index === 0) {
  228 + contentData = _.assign(contentData, {
  229 + shareImg: data.src
  230 + })
  231 + }
237 232
  233 + });
  234 + return false;
  235 + }
  236 +
238 }); 237 });
239 - return list;  
240 -  
241 -};  
242 -  
243 -// // const _processCommentsData = (list) => {  
244 -// // list = list || [];  
245 -// // list = camelCase(list);  
246 -  
247 -// // //let commentNum = list.list.length;  
248 -  
249 -  
250 238
251 -// // console.log(list)  
252 -// // } 239 + contentData.contents = list;
253 240
  241 + return contentData;
  242 +}
254 243
255 -// // head数据 244 +// head数据
256 const _getHeadData = (id) => { 245 const _getHeadData = (id) => {
257 return serviceAPI.get('/guang/api/*/article/getArticleBaseInfo', { 246 return serviceAPI.get('/guang/api/*/article/getArticleBaseInfo', {
258 id: id 247 id: id
@@ -316,7 +305,7 @@ const _getRelateBrand = (id) => { @@ -316,7 +305,7 @@ const _getRelateBrand = (id) => {
316 if (result && result.code === 200) { 305 if (result && result.code === 200) {
317 return camelCase(result.data); 306 return camelCase(result.data);
318 } else { 307 } else {
319 - logger.error('相关文章数据返回 code 不是 200'); 308 + logger.error('相关品牌返回 code 不是 200');
320 return {}; 309 return {};
321 } 310 }
322 }); 311 });
@@ -37,12 +37,12 @@ @@ -37,12 +37,12 @@
37 {{# text}} 37 {{# text}}
38 <div class="article-text block"> 38 <div class="article-text block">
39 {{# data}} 39 {{# data}}
40 - <p>{{text}}</p> 40 + <p>{{{text}}}</p>
41 {{/ data}} 41 {{/ data}}
42 </div> 42 </div>
43 {{/ text}} 43 {{/ text}}
44 44
45 - {{# goodsGroup}} 45 + {{!-- {{# goodsGroup}}
46 <div class="related-reco"> 46 <div class="related-reco">
47 <div class="article-title"> 47 <div class="article-title">
48 <div class="title-line"></div> 48 <div class="title-line"></div>
@@ -71,7 +71,7 @@ @@ -71,7 +71,7 @@
71 {{/ goods}} 71 {{/ goods}}
72 </div> 72 </div>
73 </div> 73 </div>
74 - {{/ relatedGoods}} 74 + {{/ relatedGoods}} --}}
75 {{/ content}} 75 {{/ content}}
76 76
77 {{#if brands}} 77 {{#if brands}}
@@ -122,7 +122,7 @@ @@ -122,7 +122,7 @@
122 122
123 <div class="article-tag"> 123 <div class="article-tag">
124 <i class="tag-icon iconfont">&#xe648;</i> 124 <i class="tag-icon iconfont">&#xe648;</i>
125 - <ul> 125 + <ul id="tags">
126 {{# tags}} 126 {{# tags}}
127 <li> 127 <li>
128 <a href="{{url}}" target="_blank">{{name}}</a> 128 <a href="{{url}}" target="_blank">{{name}}</a>
@@ -85,34 +85,41 @@ $('#collect-btn').click(function() { @@ -85,34 +85,41 @@ $('#collect-btn').click(function() {
85 id: articleId 85 id: articleId
86 } 86 }
87 }).then(function(data) { 87 }).then(function(data) {
  88 + if (data.code === 200) {
  89 + new _alert('收藏成功').show();
  90 + $this.toggleClass('collected');
  91 + } else {
  92 + new _alert(data.message).show();
  93 + }
88 94
89 - switch (data.code) {  
90 -  
91 - // case 401:  
92 95
93 - // // 防止从已有col的页面再次进行跳转后出错的情况  
94 - // if (/\?col=(1|0)/.test(location.href)) {  
95 - // hrefUrl = location.href.replace(/\?col=(1|0)/, '?col=' + col);  
96 - // } else {  
97 - // hrefUrl = location.href + '?col=' + col;  
98 - // }  
99 - // location.href = '//www.yohobuy.com/signin.html?refer=' + encodeURI(hrefUrl);  
100 - // break;  
101 - case 400:  
102 - new _alert(data.message).show();  
103 - break;  
104 - case 200:  
105 - if (/\?col=(1|0)/.test(location.href)) {  
106 -  
107 - // 如果页面url中含有col,为了防止页面刷新时收藏或者取消收藏会根据col来的问题,进行页面跳转拿掉参数  
108 - location.href = location.href.replace(/\?col=(1|0)/, '');  
109 - } else {  
110 - $this.toggleClass('collected');  
111 - }  
112 - break;  
113 - default:  
114 - break;  
115 - } 96 + // switch (data.code) {
  97 +
  98 + // // case 401:
  99 +
  100 + // // // 防止从已有col的页面再次进行跳转后出错的情况
  101 + // // if (/\?col=(1|0)/.test(location.href)) {
  102 + // // hrefUrl = location.href.replace(/\?col=(1|0)/, '?col=' + col);
  103 + // // } else {
  104 + // // hrefUrl = location.href + '?col=' + col;
  105 + // // }
  106 + // // location.href = '//www.yohobuy.com/signin.html?refer=' + encodeURI(hrefUrl);
  107 + // // break;
  108 + // case 400:
  109 + // new _alert(data.message).show();
  110 + // break;
  111 + // case 200:
  112 + // if (/\?col=(1|0)/.test(location.href)) {
  113 +
  114 + // // 如果页面url中含有col,为了防止页面刷新时收藏或者取消收藏会根据col来的问题,进行页面跳转拿掉参数
  115 + // location.href = location.href.replace(/\?col=(1|0)/, '');
  116 + // } else {
  117 + // $this.toggleClass('collected');
  118 + // }
  119 + // break;
  120 + // default:
  121 + // break;
  122 + // }
116 collecting = false; 123 collecting = false;
117 }); 124 });
118 }).bind('mouseenter mouseleave', function() { 125 }).bind('mouseenter mouseleave', function() {
@@ -148,28 +155,16 @@ function comment() { @@ -148,28 +155,16 @@ function comment() {
148 }, 155 },
149 type: 'post', 156 type: 'post',
150 success: function(data) { 157 success: function(data) {
151 - switch (data.code) {  
152 -  
153 - // case 401:  
154 - // locating = true;  
155 - // location.href = '//www.yohobuy.com/signin.html?refer=' +  
156 - // window.escape(location.href + '#comment-info');  
157 - // break;  
158 - case 400:  
159 - new _alert(data.message).show();  
160 - break;  
161 - case 200:  
162 - if (data.data) {  
163 - $commentList.html(data.data.content);  
164 - $commentNum.html(data.data.count);  
165 - showComment();  
166 -  
167 - // clear comment-text  
168 - $('#comment-info').val('').keyup();  
169 - }  
170 - break;  
171 - default:  
172 - break; 158 +
  159 + if (data.code === 200) {
  160 + $commentList.html(data.data.content);
  161 + $commentNum.html(data.data.count);
  162 + showComment();
  163 +
  164 + // clear comment-text
  165 + $('#comment-info').val('').keyup();
  166 + } else {
  167 + new _alert(data.message).show();
173 } 168 }
174 commenting = false; 169 commenting = false;
175 } 170 }
@@ -212,3 +207,7 @@ $('#comment-info').keyup(function() { @@ -212,3 +207,7 @@ $('#comment-info').keyup(function() {
212 207
213 // init 208 // init
214 $('#comment-info').trigger('keyup'); 209 $('#comment-info').trigger('keyup');
  210 +
  211 +if (($('#tags').find('li').length) === 0) {
  212 + $('.article-tag').hide();
  213 +}
@@ -48,15 +48,6 @@ $('.editorial-index-page').on('click', '.like-icon', function() { @@ -48,15 +48,6 @@ $('.editorial-index-page').on('click', '.like-icon', function() {
48 new _alert(data.message).show(); 48 new _alert(data.message).show();
49 } 49 }
50 50
51 - // if (data.code === 200) {  
52 - // if (data.data * 1 === 0) {  
53 - // $this.next('b').addClass('num-0').children('.num').html('0'); // 隐藏数字显示  
54 - // } else {  
55 - // console.log(data.data)  
56 - // $this.next('b').removeClass('num-0').children('.num').html(data.data);  
57 - // }  
58 - // }  
59 - // prising = false;  
60 }); 51 });
61 }).on('mouseenter mouseleave', '.like-icon', function() { 52 }).on('mouseenter mouseleave', '.like-icon', function() {
62 $(this).closest('.like').toggleClass('hover'); 53 $(this).closest('.like').toggleClass('hover');
@@ -31,9 +31,7 @@ $('.editorial-list-page').on('click', '.like-icon', function() { @@ -31,9 +31,7 @@ $('.editorial-list-page').on('click', '.like-icon', function() {
31 if (data.code === 200) { 31 if (data.code === 200) {
32 $this.toggleClass('liked'); 32 $this.toggleClass('liked');
33 $this.next('b').removeClass('num-0').children('.num').html(data.data); 33 $this.next('b').removeClass('num-0').children('.num').html(data.data);
34 - }  
35 -  
36 - if (data.code === 500) { 34 + }else {
37 new _alert(data.message).show(); 35 new _alert(data.message).show();
38 } 36 }
39 37
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 height: 50px; 3 height: 50px;
4 line-height: 50px; 4 line-height: 50px;
5 color: #666; 5 color: #666;
  6 + overflow: hidden;
6 7
7 a { 8 a {
8 text-decoration: none; 9 text-decoration: none;
@@ -218,9 +218,7 @@ @@ -218,9 +218,7 @@
218 i { 218 i {
219 opacity: 1; 219 opacity: 1;
220 } 220 }
221 - span {  
222 - display: none;  
223 - } 221 +
224 .cancel-collect { 222 .cancel-collect {
225 display: inline; 223 display: inline;
226 } 224 }