fe / yohobuywap-node · Commits

Go to a project

Authored by zhangxiaoru
Commit ff5493b91c025211aa26bc8432bd82c4da043352 1 parent 3e3a3990

favorite

Inline Side-by-side
Showing 6 changed files with 110 additions and 110 deletions
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 8
9 const favoriteModel = require('../models/favorite'); 9 const favoriteModel = require('../models/favorite');
10 10
11 -const favorite = (req, res, next) => { 11 +const favorite = (req, res) => {
12 12
13 // favoriteModel.getfavoriteData(uid, page, limit).then((result) => { 13 // favoriteModel.getfavoriteData(uid, page, limit).then((result) => {
14 14
@@ -20,7 +20,7 @@ const favorite = (req, res, next) => { @@ -20,7 +20,7 @@ const favorite = (req, res, next) => {
20 productUrl: 'm.yohobuy.com', 20 productUrl: 'm.yohobuy.com',
21 brandUrl: 'm.yohobuy.com' 21 brandUrl: 'm.yohobuy.com'
22 } 22 }
23 - }) 23 + });
24 }; 24 };
25 25
26 let favProduct = (req, res, next) => { 26 let favProduct = (req, res, next) => {
@@ -32,7 +32,7 @@ let favProduct = (req, res, next) => { @@ -32,7 +32,7 @@ let favProduct = (req, res, next) => {
32 res.render('favorite/favorite-product', { 32 res.render('favorite/favorite-product', {
33 layout: false, 33 layout: false,
34 hasFavProduct: result 34 hasFavProduct: result
35 - }) 35 + });
36 }).catch(next); 36 }).catch(next);
37 }; 37 };
38 38
@@ -45,7 +45,7 @@ let favfavBrand = (req, res, next) => { @@ -45,7 +45,7 @@ let favfavBrand = (req, res, next) => {
45 res.render('favorite/favorite-brand', { 45 res.render('favorite/favorite-brand', {
46 layout: false, 46 layout: false,
47 hasFavBrand: result 47 hasFavBrand: result
48 - }) 48 + });
49 }).catch(next); 49 }).catch(next);
50 }; 50 };
51 51
@@ -64,4 +64,4 @@ module.exports = { @@ -64,4 +64,4 @@ module.exports = {
64 favProduct, 64 favProduct,
65 favfavBrand, 65 favfavBrand,
66 favoriteDelete 66 favoriteDelete
67 -}  
  67 +};
@@ -8,7 +8,8 @@ @@ -8,7 +8,8 @@
8 8
9 const logger = global.yoho.logger; 9 const logger = global.yoho.logger;
10 const api = global.yoho.API; 10 const api = global.yoho.API;
11 -const serviceAPI = global.yoho.ServiceAPI; 11 +
  12 +// const serviceAPI = global.yoho.ServiceAPI;
12 const camelCase = global.yoho.camelCase; 13 const camelCase = global.yoho.camelCase;
13 const _ = require('lodash'); 14 const _ = require('lodash');
14 const config = global.yoho.config; 15 const config = global.yoho.config;
@@ -37,22 +38,22 @@ const favProduct = (uid, page, limit) => { @@ -37,22 +38,22 @@ const favProduct = (uid, page, limit) => {
37 } 38 }
38 39
39 if (page <= list.data.pageTotal) { 40 if (page <= list.data.pageTotal) {
40 - let hasFavProduct = [];  
41 41
42 _.forEach(list.data.productList, function(val) { 42 _.forEach(list.data.productList, function(val) {
43 let obj = {}; 43 let obj = {};
  44 +
44 // if (empty(val.productSkn)) { 45 // if (empty(val.productSkn)) {
45 // continue; 46 // continue;
46 // } 47 // }
47 48
48 if (val.goodsId && val.cnAlphabet) { 49 if (val.goodsId && val.cnAlphabet) {
49 - obj =_.assign (obj, { 50 + obj = _.assign(obj, {
50 link: config.siteUrl + '/product/list/pro_' + 51 link: config.siteUrl + '/product/list/pro_' +
51 val.productId + '_' + val.goodsId + '/' + 52 val.productId + '_' + val.goodsId + '/' +
52 val.cnAlphabet + '.html' 53 val.cnAlphabet + '.html'
53 }); 54 });
54 } else { 55 } else {
55 - obj =_.assign (obj, { 56 + obj = _.assign(obj, {
56 link: '' 57 link: ''
57 }); 58 });
58 } 59 }
@@ -126,18 +127,19 @@ const favfavBrand = (uid, page, limit) => { @@ -126,18 +127,19 @@ const favfavBrand = (uid, page, limit) => {
126 let list = camelCase(result); 127 let list = camelCase(result);
127 128
128 if (page > 1 && list === []) { 129 if (page > 1 && list === []) {
129 - resu.end = true; 130 + hasFavBrand.push({
  131 + end: true
  132 + });
130 return; 133 return;
131 } 134 }
132 135
133 if (page <= list.data.pageTotal) { 136 if (page <= list.data.pageTotal) {
134 - let brand = [];  
135 137
136 _.forEach(list.data.brandList, function(val) { 138 _.forEach(list.data.brandList, function(val) {
137 let obj = { 139 let obj = {
138 productList: [] 140 productList: []
139 }; 141 };
140 - let brandPro = []; 142 +
141 // if (empty(val.productSkn)) { 143 // if (empty(val.productSkn)) {
142 // continue; 144 // continue;
143 // } 145 // }
@@ -146,12 +148,12 @@ const favfavBrand = (uid, page, limit) => { @@ -146,12 +148,12 @@ const favfavBrand = (uid, page, limit) => {
146 link: helpers.urlFormat('/product/index/brand', { 148 link: helpers.urlFormat('/product/index/brand', {
147 shop_id: val.shopId 149 shop_id: val.shopId
148 }) 150 })
149 - }) 151 + });
150 } else { 152 } else {
151 obj = _.assign(obj, { 153 obj = _.assign(obj, {
152 link: helpers.urlFormat('', {}, val.brandDomain) 154 link: helpers.urlFormat('', {}, val.brandDomain)
153 155
154 - }) 156 + });
155 } 157 }
156 158
157 obj = _.assign(obj, { 159 obj = _.assign(obj, {
@@ -164,22 +166,23 @@ const favfavBrand = (uid, page, limit) => { @@ -164,22 +166,23 @@ const favfavBrand = (uid, page, limit) => {
164 166
165 _.forEach(val.newProduct, function(data) { 167 _.forEach(val.newProduct, function(data) {
166 obj.productList.push({ 168 obj.productList.push({
167 - link: '/product/pro_' + data.productId + '_' + data.goods[0].id + '/' + data.cnAlphabet + '.html', 169 + link: '/product/pro_' + data.productId + '_' +
  170 + data.goods[0].id + '/' + data.cnAlphabet + '.html',
168 imgUrl: data.defaultImages, 171 imgUrl: data.defaultImages,
169 price: '¥' + data.marketPrice 172 price: '¥' + data.marketPrice
170 - }) 173 + });
171 174
172 if (data.marketPrice > data.salesPrice) { 175 if (data.marketPrice > data.salesPrice) {
173 obj.productList.push({ 176 obj.productList.push({
174 discount: '¥' + data.salesPrice 177 discount: '¥' + data.salesPrice
175 - }) 178 + });
176 } 179 }
177 - }) 180 + });
178 181
179 hasFavBrand.push(obj); 182 hasFavBrand.push(obj);
180 }); 183 });
181 184
182 - console.log(hasFavBrand) 185 + // console.log(hasFavBrand);
183 return hasFavBrand; 186 return hasFavBrand;
184 } else { 187 } else {
185 hasFavBrand.push({ 188 hasFavBrand.push({
@@ -191,7 +194,7 @@ const favfavBrand = (uid, page, limit) => { @@ -191,7 +194,7 @@ const favfavBrand = (uid, page, limit) => {
191 logger.error('收藏品牌 cood 不是 200'); 194 logger.error('收藏品牌 cood 不是 200');
192 } 195 }
193 }); 196 });
194 -} 197 +};
195 198
196 const favoriteDelete = (uid, type, favId) => { 199 const favoriteDelete = (uid, type, favId) => {
197 200
@@ -200,8 +203,8 @@ const favoriteDelete = (uid, type, favId) => { @@ -200,8 +203,8 @@ const favoriteDelete = (uid, type, favId) => {
200 uid: uid, 203 uid: uid,
201 type: type, 204 type: type,
202 fav_id: favId 205 fav_id: favId
203 - })  
204 -} 206 + });
  207 +};
205 208
206 module.exports = { 209 module.exports = {
207 favProduct, 210 favProduct,
@@ -15,16 +15,16 @@ const favorite = require(`${cRoot}/favorite`); @@ -15,16 +15,16 @@ const favorite = require(`${cRoot}/favorite`);
15 // 查看二维码 15 // 查看二维码
16 router.get('/QRcode/:id', personalController.QRcode); 16 router.get('/QRcode/:id', personalController.QRcode);
17 17
18 -//我的收藏 18 +// 我的收藏
19 router.get('/favorite', favorite.favorite); 19 router.get('/favorite', favorite.favorite);
20 20
21 -//收藏的商品 21 +// 收藏的商品
22 router.get('/favProduct', favorite.favProduct); 22 router.get('/favProduct', favorite.favProduct);
23 23
24 -//收藏的品牌 24 +// 收藏的品牌
25 router.get('/favBrand', favorite.favfavBrand); 25 router.get('/favBrand', favorite.favfavBrand);
26 26
27 -//取消收藏 27 +// 取消收藏
28 router.post('/favoriteDel', favorite.favoriteDelete); 28 router.post('/favoriteDel', favorite.favoriteDelete);
29 29
30 module.exports = router; 30 module.exports = router;
@@ -23,10 +23,10 @@ var $navLi = $('#fav-tab > li'), @@ -23,10 +23,10 @@ var $navLi = $('#fav-tab > li'),
23 $favProductList = $('.fav-product-list'), 23 $favProductList = $('.fav-product-list'),
24 $favBrandList = $('.fav-brand-swiper-wrapper'), 24 $favBrandList = $('.fav-brand-swiper-wrapper'),
25 pageId = 1, 25 pageId = 1,
26 - brandPageId = 1, //收藏品牌的当前页数 26 + brandPageId = 1, // 收藏品牌的当前页数
27 lockId = true, 27 lockId = true,
28 - brandLockId = true, //收藏品牌是否可下拉加载更多  
29 - brandTab = false; //当前是否停留在收藏品牌页 28 + brandLockId = true, // 收藏品牌是否可下拉加载更多
  29 + brandTab = false; // 当前是否停留在收藏品牌页
30 30
31 require('../common'); 31 require('../common');
32 32
@@ -38,7 +38,7 @@ function showFavTab(index) { @@ -38,7 +38,7 @@ function showFavTab(index) {
38 $favContainer.eq(index).addClass('show'); 38 $favContainer.eq(index).addClass('show');
39 } 39 }
40 40
41 -//初始化swiper 41 +// 初始化swiper
42 function initSwiper(data) { 42 function initSwiper(data) {
43 var i, 43 var i,
44 idStrReg = /container-(\d+)['"]{1}/gi, 44 idStrReg = /container-(\d+)['"]{1}/gi,
@@ -47,10 +47,10 @@ function initSwiper(data) { @@ -47,10 +47,10 @@ function initSwiper(data) {
47 idArrLen = idArr.length, 47 idArrLen = idArr.length,
48 containerId; 48 containerId;
49 49
50 - //$swiperList = $('.swiper-container'); 50 + // $swiperList = $('.swiper-container');
51 for (i = 0; i < idArrLen; i++) { 51 for (i = 0; i < idArrLen; i++) {
52 52
53 - /*id = $swiperList.eq(i).attr('data-id'); 53 + /* id = $swiperList.eq(i).attr('data-id');
54 54
55 if (!!swiperObj[id]) { 55 if (!!swiperObj[id]) {
56 swiperObj[id].destroy(true, true); 56 swiperObj[id].destroy(true, true);
@@ -97,11 +97,11 @@ function loadData($parent, url, page) { @@ -97,11 +97,11 @@ function loadData($parent, url, page) {
97 window.rePosFooter(); 97 window.rePosFooter();
98 } else if (data === 'end') { 98 } else if (data === 'end') {
99 99
100 - //处理data等于end时如果loadingMask存在且没有hide样式的情况 100 + // 处理data等于end时如果loadingMask存在且没有hide样式的情况
101 if ($loadingMask && !$loadingMask.hasClass('hide')) { 101 if ($loadingMask && !$loadingMask.hasClass('hide')) {
102 $loadingMask.addClass('hide'); 102 $loadingMask.addClass('hide');
103 103
104 - //$parent.closest('.fav-type').find('.fav-null-box').removeClass('hide'); 104 + // $parent.closest('.fav-type').find('.fav-null-box').removeClass('hide');
105 } 105 }
106 106
107 $parent.closest('.fav-type').find('.fav-load-background') 107 $parent.closest('.fav-type').find('.fav-load-background')
@@ -113,14 +113,14 @@ function loadData($parent, url, page) { @@ -113,14 +113,14 @@ function loadData($parent, url, page) {
113 } else if (data.length > 10) { 113 } else if (data.length > 10) {
114 $parent.append(data); 114 $parent.append(data);
115 115
116 - //如果有数据loadingMask会被remove掉 116 + // 如果有数据loadingMask会被remove掉
117 $loadingMask.remove(); 117 $loadingMask.remove();
118 if (url === 'favBrand') { 118 if (url === 'favBrand') {
119 - initSwiper(data);//如果是收藏品牌需要初始化swiper 119 + initSwiper(data);// 如果是收藏品牌需要初始化swiper
120 120
121 - brandLockId = false;//请求成功后解锁品牌收藏page++ 121 + brandLockId = false;// 请求成功后解锁品牌收藏page++
122 } else { 122 } else {
123 - lockId = false;//请求成功后解锁商品收藏page++ 123 + lockId = false;// 请求成功后解锁商品收藏page++
124 } 124 }
125 } 125 }
126 window.rePosFooter(); 126 window.rePosFooter();
@@ -170,7 +170,7 @@ favTabHammer.on('tap', function(e) { @@ -170,7 +170,7 @@ favTabHammer.on('tap', function(e) {
170 170
171 }); 171 });
172 172
173 -//删除收藏的商品 173 +// 删除收藏的商品
174 favContentHammer = new Hammer(document.getElementById('fav-content')); 174 favContentHammer = new Hammer(document.getElementById('fav-content'));
175 175
176 favContentHammer.on('tap', function(e) { 176 favContentHammer.on('tap', function(e) {
@@ -218,7 +218,7 @@ favContentHammer.on('tap', function(e) { @@ -218,7 +218,7 @@ favContentHammer.on('tap', function(e) {
218 } 218 }
219 }).fail(function() { 219 }).fail(function() {
220 220
221 - //TODO 221 + // TODO
222 222
223 diaLog.showDialog({ 223 diaLog.showDialog({
224 autoHide: true, 224 autoHide: true,
@@ -230,7 +230,7 @@ favContentHammer.on('tap', function(e) { @@ -230,7 +230,7 @@ favContentHammer.on('tap', function(e) {
230 230
231 function scrollHandler() { 231 function scrollHandler() {
232 232
233 - //距离底部未1/4列表高度+底部高度的时候加载更多 233 + // 距离底部未1/4列表高度+底部高度的时候加载更多
234 if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $favBrandList.height() - footerH) { 234 if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $favBrandList.height() - footerH) {
235 if (brandTab) { 235 if (brandTab) {
236 $brandLoadMore.filter('.hide').removeClass('hide'); 236 $brandLoadMore.filter('.hide').removeClass('hide');
@@ -252,7 +252,7 @@ function scrollHandler() { @@ -252,7 +252,7 @@ function scrollHandler() {
252 } 252 }
253 } 253 }
254 254
255 -//srcoll to load more 255 +// srcoll to load more
256 $(window).scroll(scrollHandler); 256 $(window).scroll(scrollHandler);
257 257
258 $(document).on('touchend', '.swiper-header', function() { 258 $(document).on('touchend', '.swiper-header', function() {
@@ -59,9 +59,9 @@ @@ -59,9 +59,9 @@
59 display: block; 59 display: block;
60 width: 188px; 60 width: 188px;
61 height: 171px; 61 height: 171px;
62 - /*background: resolve("me/fav/fav-null.png");*/ 62 + background: resolve("me/fav/fav-null.png");
63 background-size: 100% 100%; 63 background-size: 100% 100%;
64 - margin: 0 auto 45px auto; 64 + margin: 0 auto 45px;
65 } 65 }
66 } 66 }
67 67
@@ -69,13 +69,14 @@ @@ -69,13 +69,14 @@
69 width: 472px; 69 width: 472px;
70 height: 88px; 70 height: 88px;
71 line-height: 88px; 71 line-height: 88px;
72 - margin: 80px auto 0 auto; 72 + margin: 80px auto 0;
73 background: #444; 73 background: #444;
74 text-align: center; 74 text-align: center;
75 color: #fff; 75 color: #fff;
76 display: block; 76 display: block;
77 font-size: 26px; 77 font-size: 26px;
78 - border-radius:.2rem; 78 + border-radius: 0.2rem;
  79 + }
79 } 80 }
80 81
81 .fav-product-list { 82 .fav-product-list {
@@ -113,13 +114,11 @@ @@ -113,13 +114,11 @@
113 114
114 h2 { 115 h2 {
115 width: 430px; 116 width: 430px;
116 - /*white-space: nowrap;  
117 - overflow: hidden;*/ 117 + white-space: nowrap;
  118 + overflow: hidden;
118 text-overflow: ellipsis; 119 text-overflow: ellipsis;
119 } 120 }
120 121
121 - .fav-price {  
122 -  
123 .new-price { 122 .new-price {
124 color: #d1021c; 123 color: #d1021c;
125 } 124 }
@@ -129,47 +128,24 @@ @@ -129,47 +128,24 @@
129 margin-left: 15px; 128 margin-left: 15px;
130 color: #b0b0b0; 129 color: #b0b0b0;
131 } 130 }
132 - }  
133 131
134 .save-price { 132 .save-price {
135 -  
136 position: absolute; 133 position: absolute;
137 bottom: 20px; 134 bottom: 20px;
138 left: 0; 135 left: 0;
139 width: 100%; 136 width: 100%;
140 min-height: 24px; 137 min-height: 24px;
141 138
142 - &.save-price-number {  
143 - text-indent: 42px;  
144 - color: #b0b0b0;  
145 - padding-top: 3px;  
146 -  
147 - &:before {  
148 - content: '';  
149 - display: block;  
150 - /*background: url("/me/fav/save-price.png");*/  
151 - width: 32px;  
152 - height: 32px;  
153 -  
154 - position: absolute;  
155 - top: 50%;  
156 - left: 0;  
157 - margin-top: -16px;  
158 -  
159 - }  
160 - span {  
161 - margin-left: 15px;  
162 - }  
163 .del-fav { 139 .del-fav {
164 text-indent: 0; 140 text-indent: 0;
165 margin-left: 0; 141 margin-left: 0;
166 } 142 }
167 - }  
168 143
169 span { 144 span {
170 color: #d1021c; 145 color: #d1021c;
  146 + }
171 147
172 - &.sell-out { 148 + .sell-out {
173 padding: 5px 18px; 149 padding: 5px 18px;
174 color: #fffefe; 150 color: #fffefe;
175 border-radius: 20px; 151 border-radius: 20px;
@@ -177,7 +153,7 @@ @@ -177,7 +153,7 @@
177 font-size: 22px; 153 font-size: 22px;
178 } 154 }
179 155
180 - &.del-fav { 156 + .del-fav {
181 width: 2rem; 157 width: 2rem;
182 height: 1.5rem; 158 height: 1.5rem;
183 line-height: 1.5rem; 159 line-height: 1.5rem;
@@ -186,16 +162,36 @@ @@ -186,16 +162,36 @@
186 margin-top: -0.75rem; 162 margin-top: -0.75rem;
187 right: 0; 163 right: 0;
188 color: #999; 164 color: #999;
189 -  
190 padding-right: 0.75rem; 165 padding-right: 0.75rem;
191 text-align: right; 166 text-align: right;
  167 + }
  168 + }
  169 +
  170 + .save-price-number {
  171 + text-indent: 42px;
  172 + color: #b0b0b0;
  173 + padding-top: 3px;
  174 +
  175 + &:before {
  176 + content: '';
  177 + display: block;
  178 + background: url("/me/fav/save-price.png");
  179 + width: 32px;
  180 + height: 32px;
  181 +
  182 + position: absolute;
  183 + top: 50%;
  184 + left: 0;
  185 + margin-top: -16px;
192 186
193 } 187 }
  188 + span {
  189 + margin-left: 15px;
194 } 190 }
195 } 191 }
196 } 192 }
197 } 193 }
198 - /*品牌收藏*/ 194 +
199 .fav-brand-swiper { 195 .fav-brand-swiper {
200 border-top: 1px solid #e0e0e0; 196 border-top: 1px solid #e0e0e0;
201 border-bottom: 28px solid #f0f0f0; 197 border-bottom: 28px solid #f0f0f0;
@@ -224,15 +220,23 @@ @@ -224,15 +220,23 @@
224 width: 100%; 220 width: 100%;
225 box-sizing: border-box; 221 box-sizing: border-box;
226 222
227 - .swiper-logo {  
228 - height: 100%;  
229 - display: inline-block;  
230 - float: left;  
231 - margin-right: 45px; 223 + .fav-more {
  224 + width: 2.5rem;
  225 + height: 2.5rem;
  226 + position: absolute;
  227 + top: 0;
  228 + right: 0;
232 229
233 - > img {  
234 - max-height: 100%;  
235 - vertical-align: middle; 230 + &:after {
  231 + width: 18px;
  232 + height: 29px;
  233 + background: url("/me/fav/fav-more.png");
  234 + position: absolute;
  235 + top: 50%;
  236 + right: 30px;
  237 + margin-top: -15px;
  238 + content: '';
  239 + }
236 } 240 }
237 } 241 }
238 242
@@ -265,25 +269,19 @@ @@ -265,25 +269,19 @@
265 } 269 }
266 } 270 }
267 } 271 }
268 - .fav-more {  
269 - width: 2.5rem;  
270 - height: 2.5rem;  
271 - position: absolute;  
272 - top: 0;  
273 - right: 0;  
274 272
275 - &:after {  
276 - width: 18px;  
277 - height: 29px;  
278 - background: url("/me/fav/fav-more.png");  
279 - position: absolute;  
280 - top: 50%;  
281 - right: 30px;  
282 - margin-top: -15px;  
283 - content: '';  
284 - } 273 + .swiper-logo {
  274 + height: 100%;
  275 + display: block;
  276 + float: left;
  277 + margin-right: 45px;
  278 +
  279 + > img {
  280 + max-height: 100%;
  281 + vertical-align: middle;
285 } 282 }
286 } 283 }
  284 +
287 .swiper-container { 285 .swiper-container {
288 height: 365px; 286 height: 365px;
289 margin: 0 30px; 287 margin: 0 30px;
@@ -309,10 +307,12 @@ @@ -309,10 +307,12 @@
309 line-height: 65px; 307 line-height: 65px;
310 text-align: center; 308 text-align: center;
311 font-size: 22px; 309 font-size: 22px;
  310 + }
  311 + }
312 312
313 .price-discount { 313 .price-discount {
314 span { 314 span {
315 - color: #d1021c 315 + color: #d1021c;
316 } 316 }
317 b { 317 b {
318 color: #b0b0b0; 318 color: #b0b0b0;
@@ -323,11 +323,9 @@ @@ -323,11 +323,9 @@
323 } 323 }
324 } 324 }
325 } 325 }
326 - }  
327 - }  
328 - }  
329 326
330 - .fav-load-more,.fav-brand-load-more { 327 + .fav-load-more,
  328 + .fav-brand-load-more {
331 width: 100%; 329 width: 100%;
332 height: 2rem; 330 height: 2rem;
333 line-height: 2rem; 331 line-height: 2rem;
@@ -335,16 +333,15 @@ @@ -335,16 +333,15 @@
335 color: #444; 333 color: #444;
336 334
337 &.load-background { 335 &.load-background {
338 - /*background: resolve('loading.gif') center center no-repeat;*/ 336 + background: resolve('loading.gif') center center no-repeat;
339 background-size: auto 40%; 337 background-size: auto 40%;
340 } 338 }
341 } 339 }
342 .fav-content-loading { 340 .fav-content-loading {
343 width: 100%; 341 width: 100%;
344 height: 2rem; 342 height: 2rem;
345 - /*background: resolve('loading.gif') center center no-repeat;*/ 343 + background: resolve('loading.gif') center center no-repeat;
346 background-size: auto 40%; 344 background-size: auto 40%;
347 -  
348 position: absolute; 345 position: absolute;
349 top: 50%; 346 top: 50%;
350 left: 0; 347 left: 0;