fe / yohobuywap-node · Commits

Go to a project

Authored by ccbikai(👎🏻🍜)
Commit 7fce7a610ccea25bba08c43f3892e95edf623d1f 2 parents 91d9184c 1e0cb98d

Merge remote-tracking branch 'origin/release/single' into release/5.1

Inline Side-by-side
Showing 11 changed files with 477 additions and 2 deletions
  1 +/**
  2 + * 单品日
  3 + * @author: wsl<shuiling.wang@yoho.cn>
  4 + * @date: 2016/10/17
  5 + */
  6 +'use strict';
  7 +const singleDayModel = require('../models/single-day');
  8 +const headerModel = require('../../../doraemon/models/header'); // 头部model
  9 +
  10 +const singleDay = (req, res) => {
  11 + res.render('single-day/single-day', {
  12 + module: 'activity',
  13 + page: 'single-day',
  14 + title: '超级单品日',
  15 + isApp: req.yoho.isApp,
  16 + width750: true,
  17 + pageHeader: headerModel.setNav({
  18 + navTitle: '超级单品日',
  19 + navBtn: false
  20 + }),
  21 + pageFooter: false
  22 + });
  23 +};
  24 +
  25 +const getSingleData = (req, res) => {
  26 + Promise.all([singleDayModel.getResourceData(), singleDayModel.getTabData()]).then((result) => {
  27 + res.json(result);
  28 + });
  29 +};
  30 +
  31 +const getProductData = (req, res) => {
  32 + singleDayModel.getProductData(req.query.tab_name).then(result => {
  33 + res.json(result);
  34 + });
  35 +};
  36 +
  37 +module.exports = {
  38 + singleDay,
  39 + getSingleData,
  40 + getProductData
  41 +};
  1 +/**
  2 + * 单品日
  3 + * @author: wsl<shuiling.wang@yoho.cn>
  4 + * @date: 2016/10/17
  5 + */
  6 +'use strict';
  7 +const utils = '../../../utils';
  8 +const logger = global.yoho.logger;
  9 +const serviceAPI = global.yoho.ServiceAPI;
  10 +const api = global.yoho.API;
  11 +const helpers = global.yoho.helpers;
  12 +const _ = require('lodash');
  13 +const resourcesProcess = require(`${utils}/resources-process`);
  14 +
  15 +const getResourceData = () => {
  16 + return serviceAPI.get('operations/api/v5/resource/get', {
  17 + content_code: 'c0acf0296a3c329678fb45da958d9951',
  18 + platform: 'iphone'
  19 + }, {
  20 + cache: true
  21 + }).then((result) => {
  22 + if (result && result.code === 200) {
  23 + return resourcesProcess(result.data);
  24 + } else {
  25 + logger.error('resource code no 200');
  26 + return [];
  27 + }
  28 + });
  29 +};
  30 +
  31 +const getProductData = (tabName) => {
  32 + return api.get('', {
  33 + method: 'app.product.singleDay',
  34 + tab_name: tabName
  35 + }, {
  36 + cache: true
  37 + }).then((result) => {
  38 + if (result && result.code === 200) {
  39 + result.data = result.data || [];
  40 +
  41 + _.forEach(result.data, (item) => {
  42 + item.url = helpers.urlFormat(`/product/pro_${item.productId}_${item.goodsId}/${item.cnAlphabet}.html`); // eslint-disable-line
  43 + item.url = helpers.appUrlFormat(item.url, 'go.productDetail', {
  44 + product_skn: item.productSkn
  45 + });
  46 + });
  47 + return result.data;
  48 + } else {
  49 + logger.error('get product data code no 200');
  50 + return [];
  51 + }
  52 + });
  53 +};
  54 +
  55 +
  56 +// 获取活动tab标签
  57 +const getTabData = () => {
  58 + return api.get('', {
  59 + method: 'app.product.singleDayTabNameList'
  60 + }, {
  61 + cache: true
  62 + }).then((result) => {
  63 + if (result && result.code === 200) {
  64 + return result.data || [];
  65 + } else {
  66 + logger.error('get tab data code no 200');
  67 + return [];
  68 + }
  69 + });
  70 +};
  71 +
  72 +module.exports = {
  73 + getResourceData,
  74 + getProductData,
  75 + getTabData
  76 +};
@@ -21,8 +21,11 @@ const auth = require('../../doraemon/middleware/auth'); @@ -21,8 +21,11 @@ const auth = require('../../doraemon/middleware/auth');
21 const vipDay = require(`${cRoot}/vipDay`); 21 const vipDay = require(`${cRoot}/vipDay`);
22 const vipDay1028 = require(`${cRoot}/vipDay10`); 22 const vipDay1028 = require(`${cRoot}/vipDay10`);
23 const market = require(`${cRoot}/market`); 23 const market = require(`${cRoot}/market`);
  24 +
24 const coin = require(`${cRoot}/coin`); 25 const coin = require(`${cRoot}/coin`);
25 const shopCollect = require(`${cRoot}/shopCollect`); 26 const shopCollect = require(`${cRoot}/shopCollect`);
  27 +
  28 +const singleDay = require(`${cRoot}/single-day`);
26 const share = require(`${cRoot}/share`); 29 const share = require(`${cRoot}/share`);
27 30
28 // routers 31 // routers
@@ -92,12 +95,16 @@ router.post('/vip-day/signin.json', vipDay.beforeIn, vipDay.signin); @@ -92,12 +95,16 @@ router.post('/vip-day/signin.json', vipDay.beforeIn, vipDay.signin);
92 router.post('/vip-day/msg/save.json', vipDay.beforeIn, vipDay.saveMsg); 95 router.post('/vip-day/msg/save.json', vipDay.beforeIn, vipDay.saveMsg);
93 router.get('/vip-day/msg/fetch.json', vipDay.fetchMsg); 96 router.get('/vip-day/msg/fetch.json', vipDay.fetchMsg);
94 97
95 -  
96 router.get('/coin/sendCoin', coin.sendCoin); 98 router.get('/coin/sendCoin', coin.sendCoin);
97 router.get('/shopCollect', shopCollect.shopIndex);// 店铺收藏 99 router.get('/shopCollect', shopCollect.shopIndex);// 店铺收藏
98 router.get('/shopList', shopCollect.shopList);// 店铺收藏列表 100 router.get('/shopList', shopCollect.shopList);// 店铺收藏列表
99 router.get('/shopNav', shopCollect.shopNav);// 店铺收藏导航 101 router.get('/shopNav', shopCollect.shopNav);// 店铺收藏导航
100 router.get('/shopfavStatus', shopCollect.shopFav);// 店铺收藏状态 102 router.get('/shopfavStatus', shopCollect.shopFav);// 店铺收藏状态
  103 +
  104 +router.get('/single-day', singleDay.singleDay);
  105 +router.get('/single-day/getSingleData', singleDay.getSingleData);
  106 +router.get('/single-day/getProductData', singleDay.getProductData);
  107 +
101 router.get('/share', share.getShareContent); 108 router.get('/share', share.getShareContent);
102 109
103 // 102828会员日 110 // 102828会员日
  1 +<div class="single-day-page yoho-page">
  2 + <div class="banner"></div>
  3 + <div class="swiper-tab"></div>
  4 +
  5 + <div class="product-list"></div>
  6 +</div>
  1 +/**
  2 + * 单品日
  3 + * @author: wsl<shuiling.wang@yoho.cn>
  4 + * @date: 2016/10/17
  5 + */
  6 +
  7 +var $ = require('yoho-jquery'),
  8 + Swiper = require('yoho-swiper'),
  9 + tip = require('../plugin/tip'),
  10 + loading = require('../plugin/loading'),
  11 + lazyload = require('yoho-jquery-lazyload'),
  12 + banner = require('../../template/resources/banner-top.hbs'),
  13 + tab = require('../../template/activity/single-day/tab.hbs'),
  14 + product = require('../../template/activity/single-day/product-list.hbs');
  15 +
  16 +var $productList = $('.product-list');
  17 +var getFlag = false;
  18 +
  19 +var getProductData = function(index, tabName) {
  20 + if (getFlag) {
  21 + return;
  22 + }
  23 + getFlag = true;
  24 + loading.showLoadingMask();
  25 + $.ajax({
  26 + type: 'GET',
  27 + url: '/activity/single-day/getProductData',
  28 + data: {
  29 + tab_name: tabName
  30 + },
  31 + success: function(data) {
  32 + var $productTab = $('.product-tab');
  33 +
  34 + if (data) {
  35 + $productTab.eq(index).append(product(data));
  36 + }
  37 +
  38 + $productTab.hide().eq(index).show();
  39 +
  40 + lazyload($('img.lazy'));
  41 + getFlag = false;
  42 + loading.hideLoadingMask();
  43 + },
  44 + error: function() {
  45 + tip.show('网络断开连接了~');
  46 + loading.hideLoadingMask();
  47 + getFlag = false;
  48 + }
  49 + });
  50 +};
  51 +
  52 +var tabName = function(index) {
  53 + return $('.swiper-tab li').eq(index).html();
  54 +};
  55 +
  56 +var getInitData = function() {
  57 + $.ajax({
  58 + type: 'GET',
  59 + url: '/activity/single-day/getSingleData',
  60 + success: function(data) {
  61 + var i = 0, $swiperTab, $productTab;
  62 + var tabNum = window.queryString.tabNum ? window.queryString.tabNum - 1 : 0;
  63 +
  64 + if (data[0]) {
  65 + $('.banner').append(banner(data[0][0]));
  66 +
  67 + if ($('.banner-swiper').find('li').size() > 1) {
  68 + new Swiper('.banner-swiper', {
  69 + lazyLoading: true,
  70 + lazyLoadingInPrevNext: true,
  71 + loop: true,
  72 + autoplay: 3000,
  73 + autoplayDisableOnInteraction: false,
  74 + paginationClickable: true,
  75 + slideElement: 'li',
  76 + pagination: '.banner-top .pagination-inner'
  77 + });
  78 + }
  79 + }
  80 +
  81 + if (data[1]) {
  82 + $('.swiper-tab').append(tab(data[1]));
  83 +
  84 + $swiperTab = $('.swiper-tab li');
  85 +
  86 + new Swiper('.swiper-tab', {
  87 + slidesPerView: 'auto'
  88 + });
  89 +
  90 + for (i; i < data[1].length; i++) {
  91 + $productList.append('<ul class="product-tab"></ul>');
  92 + }
  93 +
  94 + $productTab = $('.product-tab');
  95 +
  96 + getProductData(tabNum, tabName(tabNum));
  97 + $swiperTab.eq(tabNum).addClass('active');
  98 +
  99 + $swiperTab.on('click', function() {
  100 + var index = $(this).index();
  101 +
  102 + $swiperTab.removeClass('active').eq(index).addClass('active');
  103 +
  104 + if ($productTab.eq(index).find('li').length > 0) {
  105 + $productTab.hide().eq(index).show();
  106 + } else {
  107 + getProductData(index, tabName(index));
  108 + }
  109 + });
  110 + }
  111 +
  112 + loading.hideLoadingMask();
  113 + },
  114 + error: function() {
  115 + tip.show('网络断开连接了~');
  116 + }
  117 + });
  118 +};
  119 +
  120 +require('../common');
  121 +require('../common/share');
  122 +
  123 +$(function() {
  124 + loading.showLoadingMask();
  125 + getInitData();
  126 +});
@@ -83,7 +83,7 @@ if (qs && qs.share_id) { @@ -83,7 +83,7 @@ if (qs && qs.share_id) {
83 dataType: 'jsonp', 83 dataType: 'jsonp',
84 success: function(res) { 84 success: function(res) {
85 if (res && res.code === 200 && res.data) { 85 if (res && res.code === 200 && res.data) {
86 - shareData.desc = res.data.content; 86 + shareData.desc = res.data.content || res.data.title;
87 shareData.imgUrl = res.data.pic; 87 shareData.imgUrl = res.data.pic;
88 shareData.title = res.data.title; 88 shareData.title = res.data.title;
89 } 89 }
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 @import "student"; 4 @import "student";
5 @import "market/index"; 5 @import "market/index";
6 @import "shop-collect/shop-collect"; 6 @import "shop-collect/shop-collect";
  7 +@import "single-day";
7 8
8 .receive-coupon-page { 9 .receive-coupon-page {
9 * { 10 * {
@@ -11,16 +12,19 @@ @@ -11,16 +12,19 @@
11 padding: 0; 12 padding: 0;
12 font-size: 14px; 13 font-size: 14px;
13 } 14 }
  15 +
14 .bg-contain { 16 .bg-contain {
15 width: 100%; 17 width: 100%;
16 height: 100%; 18 height: 100%;
17 position: absolute; 19 position: absolute;
18 background: #c4211a; 20 background: #c4211a;
  21 +
19 img { 22 img {
20 width: 100%; 23 width: 100%;
21 height: auto; 24 height: auto;
22 } 25 }
23 } 26 }
  27 +
24 .page { 28 .page {
25 width: 100%; 29 width: 100%;
26 height: auto; 30 height: auto;
@@ -29,6 +33,7 @@ @@ -29,6 +33,7 @@
29 top: 0; 33 top: 0;
30 bottom: 0; 34 bottom: 0;
31 } 35 }
  36 +
32 .coupon-centent, 37 .coupon-centent,
33 .gain-coupon-centent { 38 .gain-coupon-centent {
34 margin-top: 428px !important; 39 margin-top: 428px !important;
@@ -39,8 +44,10 @@ @@ -39,8 +44,10 @@
39 overflow: hidden; 44 overflow: hidden;
40 border-radius: 0.3rem; 45 border-radius: 0.3rem;
41 } 46 }
  47 +
42 .coupon-centent { 48 .coupon-centent {
43 position: relative; 49 position: relative;
  50 +
44 .title { 51 .title {
45 position: absolute; 52 position: absolute;
46 top: 40px; 53 top: 40px;
@@ -50,16 +57,19 @@ @@ -50,16 +57,19 @@
50 height: 57px; 57 height: 57px;
51 background: url("../img/coupon/coupon-title.png"); 58 background: url("../img/coupon/coupon-title.png");
52 } 59 }
  60 +
53 .under-title { 61 .under-title {
54 position: absolute; 62 position: absolute;
55 top: 100px; 63 top: 100px;
56 width: 100%; 64 width: 100%;
57 height: 463px; 65 height: 463px;
58 } 66 }
  67 +
59 .input-content { 68 .input-content {
60 height: 206px; 69 height: 206px;
61 margin: 30px 30px 0; 70 margin: 30px 30px 0;
62 position: relative; 71 position: relative;
  72 +
63 input { 73 input {
64 height: 88px; 74 height: 88px;
65 width: 100%; 75 width: 100%;
@@ -72,6 +82,7 @@ @@ -72,6 +82,7 @@
72 text-align: center; 82 text-align: center;
73 outline: none; 83 outline: none;
74 } 84 }
  85 +
75 div { 86 div {
76 height: 88px; 87 height: 88px;
77 width: 100%; 88 width: 100%;
@@ -82,12 +93,14 @@ @@ -82,12 +93,14 @@
82 color: #e0e0e0; 93 color: #e0e0e0;
83 line-height: 88px; 94 line-height: 88px;
84 } 95 }
  96 +
85 .verification-code, 97 .verification-code,
86 .get { 98 .get {
87 background: #fff; 99 background: #fff;
88 color: #444; 100 color: #444;
89 } 101 }
90 } 102 }
  103 +
91 .clear-input { 104 .clear-input {
92 position: absolute; 105 position: absolute;
93 padding: 10px; 106 padding: 10px;
@@ -97,11 +110,13 @@ @@ -97,11 +110,13 @@
97 color: #666; 110 color: #666;
98 z-index: 1; 111 z-index: 1;
99 } 112 }
  113 +
100 .coupon-description { 114 .coupon-description {
101 width: 100%; 115 width: 100%;
102 height: 136px; 116 height: 136px;
103 position: relative; 117 position: relative;
104 background: url("../img/coupon/coupon-footer.png"); 118 background: url("../img/coupon/coupon-footer.png");
  119 +
105 span { 120 span {
106 position: absolute; 121 position: absolute;
107 bottom: 0; 122 bottom: 0;
@@ -111,6 +126,7 @@ @@ -111,6 +126,7 @@
111 } 126 }
112 } 127 }
113 } 128 }
  129 +
114 .gain-coupon-centent { 130 .gain-coupon-centent {
115 p { 131 p {
116 width: 100%; 132 width: 100%;
@@ -120,11 +136,13 @@ @@ -120,11 +136,13 @@
120 color: #fff; 136 color: #fff;
121 font-size: 17px; 137 font-size: 17px;
122 } 138 }
  139 +
123 p.phone { 140 p.phone {
124 margin-top: 10px; 141 margin-top: 10px;
125 font-size: 30px; 142 font-size: 30px;
126 font-weight: bold; 143 font-weight: bold;
127 } 144 }
  145 +
128 .coupon { 146 .coupon {
129 padding-top: 50px; 147 padding-top: 50px;
130 width: 90%; 148 width: 90%;
@@ -132,10 +150,12 @@ @@ -132,10 +150,12 @@
132 height: 220px; 150 height: 220px;
133 background: #9d1a15; 151 background: #9d1a15;
134 } 152 }
  153 +
135 .coupon img { 154 .coupon img {
136 width: 100%; 155 width: 100%;
137 height: auto; 156 height: auto;
138 } 157 }
  158 +
139 .use-coupon-btn { 159 .use-coupon-btn {
140 height: 88px; 160 height: 88px;
141 line-height: 88px; 161 line-height: 88px;
@@ -145,6 +165,7 @@ @@ -145,6 +165,7 @@
145 text-align: center; 165 text-align: center;
146 border-radius: 4px; 166 border-radius: 4px;
147 } 167 }
  168 +
148 span { 169 span {
149 font-weight: bold; 170 font-weight: bold;
150 display: inline-block; 171 display: inline-block;
@@ -156,11 +177,13 @@ @@ -156,11 +177,13 @@
156 margin: 0 40%; 177 margin: 0 40%;
157 background: url("../img/coupon/activity-description.png"); 178 background: url("../img/coupon/activity-description.png");
158 } 179 }
  180 +
159 a { 181 a {
160 color: #fff; 182 color: #fff;
161 font-size: 28px; 183 font-size: 28px;
162 } 184 }
163 } 185 }
  186 +
164 .dialog { 187 .dialog {
165 width: 84%; 188 width: 84%;
166 height: 410px; 189 height: 410px;
@@ -171,6 +194,7 @@ @@ -171,6 +194,7 @@
171 top: 235px; 194 top: 235px;
172 z-index: 2; 195 z-index: 2;
173 } 196 }
  197 +
174 .dialog .close { 198 .dialog .close {
175 width: 40px; 199 width: 40px;
176 height: 40px; 200 height: 40px;
@@ -183,13 +207,16 @@ @@ -183,13 +207,16 @@
183 line-height: 40px; 207 line-height: 40px;
184 text-align: center; 208 text-align: center;
185 } 209 }
  210 +
186 .hidden { 211 .hidden {
187 display: none; 212 display: none;
188 } 213 }
  214 +
189 .phone-error { 215 .phone-error {
190 text-align: center; 216 text-align: center;
191 line-height: 14rem; 217 line-height: 14rem;
192 } 218 }
  219 +
193 .mask { 220 .mask {
194 width: 100%; 221 width: 100%;
195 height: 100%; 222 height: 100%;
@@ -201,11 +228,13 @@ @@ -201,11 +228,13 @@
201 left: 0; 228 left: 0;
202 z-index: 1; 229 z-index: 1;
203 } 230 }
  231 +
204 .activity-message { 232 .activity-message {
205 width: 100%; 233 width: 100%;
206 height: 410px; 234 height: 410px;
207 overflow: scroll; 235 overflow: scroll;
208 } 236 }
  237 +
209 .activity-message h3 { 238 .activity-message h3 {
210 width: 100%; 239 width: 100%;
211 height: 40px; 240 height: 40px;
@@ -215,6 +244,7 @@ @@ -215,6 +244,7 @@
215 font-size: 32px; 244 font-size: 32px;
216 text-align: center; 245 text-align: center;
217 } 246 }
  247 +
218 .activity-message p { 248 .activity-message p {
219 width: 85%; 249 width: 85%;
220 height: auto; 250 height: auto;
@@ -225,6 +255,7 @@ @@ -225,6 +255,7 @@
225 padding-left: 26px; 255 padding-left: 26px;
226 text-indent: -26px; 256 text-indent: -26px;
227 } 257 }
  258 +
228 .messages { 259 .messages {
229 width: 84%; 260 width: 84%;
230 height: 4rem; 261 height: 4rem;
@@ -237,10 +268,12 @@ @@ -237,10 +268,12 @@
237 z-index: 2; 268 z-index: 2;
238 color: #fff; 269 color: #fff;
239 } 270 }
  271 +
240 .messages p { 272 .messages p {
241 line-height: 4rem; 273 line-height: 4rem;
242 font-size: 24px; 274 font-size: 24px;
243 } 275 }
  276 +
244 .tip-wrap { 277 .tip-wrap {
245 width: 100%; 278 width: 100%;
246 height: 100%; 279 height: 100%;
@@ -250,6 +283,7 @@ @@ -250,6 +283,7 @@
250 left: 0; 283 left: 0;
251 z-index: 3; 284 z-index: 3;
252 } 285 }
  286 +
253 .tip { 287 .tip {
254 width: 100%; 288 width: 100%;
255 height: 100%; 289 height: 100%;
@@ -257,6 +291,7 @@ @@ -257,6 +291,7 @@
257 position: absolute; 291 position: absolute;
258 top: 0; 292 top: 0;
259 left: 0; 293 left: 0;
  294 +
260 .header { 295 .header {
261 width: 170px; 296 width: 170px;
262 height: 170px; 297 height: 170px;
@@ -265,6 +300,7 @@ @@ -265,6 +300,7 @@
265 margin-right: auto; 300 margin-right: auto;
266 background: url("../img/coupon/unfortunately.png"); 301 background: url("../img/coupon/unfortunately.png");
267 } 302 }
  303 +
268 .title { 304 .title {
269 margin-top: 30px; 305 margin-top: 30px;
270 font-size: 28px; 306 font-size: 28px;
@@ -273,6 +309,7 @@ @@ -273,6 +309,7 @@
273 margin-left: auto; 309 margin-left: auto;
274 margin-right: auto; 310 margin-right: auto;
275 } 311 }
  312 +
276 .logo { 313 .logo {
277 width: 391px; 314 width: 391px;
278 height: 78px; 315 height: 78px;
@@ -281,10 +318,12 @@ @@ -281,10 +318,12 @@
281 margin-right: auto; 318 margin-right: auto;
282 background: url("../img/coupon/logo.png"); 319 background: url("../img/coupon/logo.png");
283 } 320 }
  321 +
284 .desc { 322 .desc {
285 font-size: 24px; 323 font-size: 24px;
286 color: #444; 324 color: #444;
287 } 325 }
  326 +
288 .button { 327 .button {
289 display: block; 328 display: block;
290 margin: 30px auto; 329 margin: 30px auto;
  1 +.single-day-page {
  2 + overflow: hidden;
  3 +
  4 + .banner {
  5 + width: 100%;
  6 + height: 234px;
  7 +
  8 + .swiper-slide {
  9 + height: 234px;
  10 + }
  11 + }
  12 +
  13 + .swiper-tab {
  14 + height: 86px;
  15 + border-bottom: 1px solid #e0e0e0;
  16 + border-top: 1px solid #e0e0e0;
  17 +
  18 + ul {
  19 + margin-top: 28px;
  20 + }
  21 +
  22 + li {
  23 + float: left;
  24 + padding: 0 50px;
  25 + border-right: 1px solid #e0e0e0;
  26 + height: 30px;
  27 + line-height: 30px;
  28 + color: #b0b0b0;
  29 + width: auto;
  30 + font-size: 28px;
  31 + }
  32 +
  33 + li:last-child {
  34 + border-right: none;
  35 + }
  36 +
  37 + .active {
  38 + color: #444;
  39 + }
  40 + }
  41 +
  42 + .product-list {
  43 + ul {
  44 + width: 720px;
  45 + margin-left: 30px;
  46 + padding-top: 30px;
  47 + height: auto;
  48 + overflow: hidden;
  49 + }
  50 +
  51 + li {
  52 + margin-bottom: 14px;
  53 + height: auto;
  54 + overflow: hidden;
  55 +
  56 + .lazy {
  57 + width: 322px;
  58 + height: 429px;
  59 + float: left;
  60 + margin-right: 27px;
  61 + }
  62 + }
  63 +
  64 + .product-info {
  65 + width: 370px;
  66 + height: 445px;
  67 + float: left;
  68 + position: relative;
  69 + border-bottom: 1px solid #e8e8e8;
  70 + padding-right: 30px;
  71 + box-sizing: border-box;
  72 + }
  73 +
  74 + p {
  75 + width: 340px;
  76 + }
  77 +
  78 + h3 {
  79 + margin-top: 50px;
  80 + font-size: 28px;
  81 + display: -webkit-box;
  82 + -webkit-box-orient: vertical;
  83 + -webkit-line-clamp: 2;
  84 + overflow: hidden;
  85 + color: #444;
  86 + }
  87 +
  88 + .prompt-info {
  89 + font-size: 22px;
  90 + margin-top: 29px;
  91 + color: #d11226;
  92 + width: 100%;
  93 + overflow: hidden;
  94 + white-space: nowrap;
  95 + text-overflow: ellipsis;
  96 + }
  97 +
  98 + .price {
  99 + margin-top: 29px;
  100 + }
  101 +
  102 + .sale-price {
  103 + font-size: 30px;
  104 + color: #cf031e;
  105 + }
  106 +
  107 + .no-price {
  108 + color: #000;
  109 + }
  110 +
  111 + .market-price {
  112 + font-size: 30px;
  113 + color: #b0b0b0;
  114 + text-decoration: line-through;
  115 + margin-left: 24px;
  116 + }
  117 +
  118 + .info-txt {
  119 + position: absolute;
  120 + bottom: 62px;
  121 + font-size: 22px;
  122 + display: -webkit-box;
  123 + -webkit-box-orient: vertical;
  124 + -webkit-line-clamp: 2;
  125 + overflow: hidden;
  126 + color: #454545;
  127 + }
  128 + }
  129 +}
  1 +{{#each this}}
  2 + <li >
  3 + <a href="{{url}}">
  4 + <img class="lazy" data-original="{{image productLink 322 429}}"/>
  5 + <div class="product-info">
  6 + <h3>{{productTitle}}</h3>
  7 + {{#salesPhrase}}
  8 + <p class="prompt-info">{{.}}</p>
  9 + {{/salesPhrase}}
  10 + <p class="price">
  11 + <span class="sale-price {{^marketPrice}}no-price{{/marketPrice}}">¥{{salesPrice}}</span>
  12 + {{#marketPrice}}
  13 + <span class="market-price">¥{{.}}</span>
  14 + {{/marketPrice}}
  15 + </p>
  16 + <p class="info-txt">{{productDesc}}</p>
  17 + </div>
  18 + </a>
  19 + </li>
  20 +{{/each}}
  1 +<ul class="swiper-wrapper">
  2 + {{#each this}}
  3 + <li class="swiper-slide">{{.}}</li>
  4 + {{/each}}
  5 +</ul>
  1 +<div class="banner-top">
  2 + <div class="banner-swiper swiper-container">
  3 + <ul class="swiper-wrapper">
  4 + {{#each data}}
  5 + {{#if @first}}
  6 + <li class="swiper-slide">
  7 + <a href="{{url}}">
  8 + <img src="{{image src 640 240}}">
  9 + </a>
  10 + </li>
  11 + {{^}}
  12 + <li class="swiper-slide">
  13 + <a href="{{url}}">
  14 + <img class="swiper-lazy" data-src="{{image src 640 240}}">
  15 + </a>
  16 + <div class="swiper-lazy-preloader"></div>
  17 + </li>
  18 + {{/if}}
  19 + {{/each}}
  20 + </ul>
  21 + </div>
  22 + <div class="swiper-pagination">
  23 + <div class="pagination-inner">
  24 + </div>
  25 + </div>
  26 +</div>