fe / yohobuywap-node · Commits

Go to a project

Authored by lijing
Commit 33bef6e4db3b50e59e1f154214da34188cb3038d 1 parent bb78c7d4

market

Inline Side-by-side
Showing 20 changed files with 302 additions and 0 deletions
/**
* 市场推广
* <jing.li@yoho.cn>
* 2016/09/07
*/
'use strict';
const indexModel = require('../models/market');
exports.index = (req, res, next) => {
indexModel.index({
}).then((result) => {
res.render('market/market', result);
}).catch(next);
};
... ...
/**
* 市场推广
* <jing.li@yoho.cn>
* 2016/09/07
*/
'use strict';
var api = global.yoho.API;
const index = (data) => {
return api.get('', {
}).then(result => {
let resu = {
url: '../img/activity/market/goods/floor-pic-1.jpg'
};
return resu;
});
};
module.exports = {
index
};
... ...
... ... @@ -14,6 +14,7 @@ const wechat = require(`${cRoot}/wechat`);
const student = require(`${cRoot}/student`);
const live = require(`${cRoot}/live`);
const invite = require(`${cRoot}/invite`);
const market = require(`${cRoot}/market`);
// routers
... ... @@ -50,6 +51,8 @@ router.get('/live/:id', live.main);
router.get('/invite', invite.index);
router.get('/invite/index', invite.index);
router.get('/market', market.index);// 市场推广活动
router.get(/\/invite\/share_([\d]+)_([\d]+)_([\d]+).html/, invite.share);
router.get('/invite/sendRegCodeToMobile', invite.sendRegCodeToMobile);
router.get('/invite/checkOldUserCoupon', invite.checkOldUserCoupon);
... ...
<div class="container">
<div class="m-header">
<div>全球1400+ 潮流品牌每日上新</div>
</div>
<div class="tab">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="../img/activity/market/goods/tab-1.jpg" />
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="../img/activity/market/goods/floor-pic-1.jpg" />
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="../img/activity/market/goods/floor-pic-2.jpg" />
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="../img/activity/market/goods/floor-pic-3.jpg" />
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="../img/activity/market/goods/floor-pic-4.jpg" />
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<div class="floor-top">
<a href="#">
<img src="../img/activity/market/floor-top-1.jpg" />
</a>
</div>
<ul class="floor-ul">
<a>
<li>
<img src="{{url}}" />
<p>余文乐MADNESS(MDNS)为概念，发展出全新独立LABEL</p>
</li>
</a>
<a>
<li>
<img src="../img/activity/market/goods/floor-pic-2.jpg" />
<p>余文乐MADNESS(MDNS)为概念，发展出全新独立LABEL</p>
</li>
</a>
<a>
<li>
<img src="../img/activity/market/goods/floor-pic-3.jpg" />
<p>余文乐MADNESS(MDNS)为概念，发展出全新独立LABEL</p>
</li>
</a>
<a>
<li>
<img src="../img/activity/market/goods/floor-pic-4.jpg" />
<p>余文乐MADNESS(MDNS)为概念，发展出全新独立LABEL</p>
</li>
</a>
</ul>
<div class="floor-top">
<a href="#">
<img src="../img/activity/market/floor-top-2.jpg" />
</a>
</div>
<div class="floor-c">
<a href="#">
<img src="../img/activity/market/goods/floor-c.jpg" />
</a>
<p>之前没抢到侃爷Pablo限定的这次注意了！</p>
</div>
<a href="#" class="down">
<img src="../img/activity/market/foot-sao.png" />
</a>
</div>
\ No newline at end of file
... ...

48 KB | W: | H:

72.4 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
var $ = require('yoho-jquery'),
Swiper = require('yoho-swiper');
var swiper = new Swiper('.tab .swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true,
});
... ...
@import "live/index";
@import "market/index";
.receive-coupon-page {
* {
margin: 0;
... ...
.container {
width: 100%;
max-width: 640px;
margin: 0 auto;
position: relative;
background: #222;
padding-bottom: 10px;
}
.m-header {
width: 100%;
height: 82px;
background: url(../img/activity/market/header.jpg) no-repeat center center;
}
.m-header {
div {
width: 375px;
line-height: 82px;
font-size: 24px;
color: #fff;
float: right;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
}
.tab {
width: 100%;
height: 310px;
}
.tab {
img {
width: 100%;
height: 100%;
}
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-pagination-bullet {
background: #959799 !important;
width: 14px !important;
height: 14px !important;
margin: 0 9px !important;
}
.swiper-pagination-bullet-active {
background: #fff !important;
}
.floor-top {
width: 100%;
height: 68px;
}
.floor-top {
img {
width: 100%;
height: 100%;
}
}
.floor-ul {
li {
width: 100%;
height: 170px;
position: relative;
margin-bottom: 17px;
}
}
.floor-ul {
li {
img {
width: 100%;
height: 100%;
}
}
}
.floor-ul {
li {
p {
height: 45px;
line-height: 45px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff;
font-size: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
padding: 0 25px;
}
}
}
.floor-c {
background: #fff;
padding: 25px;
position: relative;
}
.floor-c {
img {
width: 100%;
height: 100%;
}
}
.floor-c {
p {
height: 45px;
line-height: 45px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff;
font-size: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
margin: 0 40px 25px;
}
}
.down {
width: 100%;
height: 265px;
position: relative;
display: block;
}
.down {
img {
width: 100%;
position: absolute;
top: -10px;
left: 0;
right: 0;
}
}
... ...