fe / yoho-blk · Commits

Go to a project

Authored by 周奇琪
Commit ed177cbf50d9d324bc3ffa73ebf232cf9c31f6e6 2 parents 6fa3abe7 2b070563

Merge branch 'develop' of git.yoho.cn:fe/yoho-blk into develop

Inline Side-by-side
Showing 30 changed files with 238 additions and 323 deletions
... ... @@ -9,7 +9,7 @@ const getContent = () => {
link: '/'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/28/11/015a86ade17dc6213bab85b2162adebcd6.jpg?imageView2/2/w/1150/h/450',
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: '/'
},
{
... ... @@ -17,6 +17,18 @@ const getContent = () => {
link: '/'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: '/'
},
{
img: '//placehold.it/{width}x{height}',
link: '/'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/28/11/015a86ade17dc6213bab85b2162adebcd6.jpg?imageView2/2/w/1150/h/450',
link: '/'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/28/11/015a86ade17dc6213bab85b2162adebcd6.jpg?imageView2/2/w/1150/h/450',
link: '/'
},
... ...
<div class="home-page">
<div class="home-page blk-page">
<div class="top-slider-container">
{{# content}}
{{#if slider}}
... ... @@ -6,7 +6,7 @@
{{/if}}
{{/ content}}
</div>
<div class="main-container clearfix">
<div class="main-container center-content clearfix">
{{# content}}
{{#if brandsAd}}
{{> ad}}
... ...
<div class="ad-banner">
{{#adBanner}}
<img class="lazy-img" data-original="{{image img 864 120}}" alt="">
<img class="lazy-img" data-original="{{image img 1150 160}}" alt="">
{{/adBanner}}
</div>
... ...
<div class="ad-container clearfix">
{{# brandsAd}}
<div class="ad {{#if @first}}first{{/if}}">
<img class="lazy-img" data-original="{{image img 165 165}}" alt="">
<img class="lazy-img" data-original="{{image img 240 240}}" alt="">
{{> brand-text-box}}
</div>
{{/ brandsAd}}
... ...
{{# classicBrands}}
<div class="brand-img-box {{#if right}}right{{/if}} {{#if bottomSpace}}mb10{{/if}}">
{{# big}}
<img class="big-img lazy-img" data-original="{{image img 426 250}}" alt="big-img">
<img class="big-img lazy-img" data-original="{{image img 556 333}}" alt="big-img">
{{/ big}}
{{# small}}
<img class="small-img lazy-img {{#if @first}}first{{/if}}" data-original="{{image img 213 213}}" alt="big-img">
<img class="small-img lazy-img {{#if @first}}first{{/if}}" data-original="{{image img 283 283}}" alt="big-img">
{{/ small}}
</div>
{{/ classicBrands}}
... ...
<div class="classic-brands-container">
{{> floor-header}}
{{> floor}}
{{#if classicBrands}}
{{> brand-img-box}}
{{/if}}
... ...
<div class="editorial-container">
{{> floor-header}}
{{> floor}}
<div class="news-container">
{{# editorial}}
<div class="news left">
{{# big}}
<img class="lazy-img" data-original="{{image img 288 375}}" alt="">
<img class="lazy-img" data-original="{{image img 395 495}}" alt="">
{{/ big}}
</div>
<div class="news right">
{{# small}}
<img class="lazy-img {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" data-original="{{image img 260 176}}" alt="">
<img class="lazy-img {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" data-original="{{image img 360 240}}" alt="">
{{/ small}}
</div>
{{/ editorial}}
... ...
<div class="new-arrival">
{{> floor-header}}
{{> floor}}
<div class="arrival-item-box">
{{# newArrivals}}
<div class="arrival-item {{#if smallImg}}small-img{{/if}} {{#if @last}}last{{^}}normal{{/if}}">
{{#if even}}
<img class="lazy-img" data-original="{{image img 245 370}}" alt="">
<img class="lazy-img" data-original="{{#if smallImg}}{{image img 223 490}}{{^}}{{image img 325 490}}{{/if}}" alt="">
<div class="brand-name">
<span class="bottom">{{name}}</span>
</div>
... ... @@ -12,7 +12,7 @@
<div class="brand-name">
<span class="top">{{name}}</span>
</div>
<img class="lazy-img" data-original="{{image img 245 370}}" alt="">
<img class="lazy-img" data-original="{{#if smallImg}}{{image img 223 490}}{{^}}{{image img 325 490}}{{/if}}" alt="">
{{/if}}
</div>
{{/ newArrivals}}
... ...
... ... @@ -5,9 +5,9 @@
<li style="{{#if bgColor}}background:{{bgColor}}{{/if}}">
<a href="{{url}}" target= "_blank">
{{#if @first}}
<img src="{{image img 1150 450}}">
<img src="{{image img 1920 645}}">
{{^}}
<img class="lazy-img" data-original="{{image img 1150 450}}" alt="">
<img class="lazy" data-original="{{image img 1920 645}}" alt="">
{{/if}}
</a>
{{# tips}}
... ...
<div class="style-icon-container">
{{> floor-header}}
{{> floor}}
<div class="smooth-card-container">
{{# styleIcon}}
<div class="card {{#if @first}}active{{/if}} {{#if @last}}last{{/if}}">
<div class="img" style="background-image: url('{{image img 160 240}}')"></div>
<img class="img lazy-img" data-original="{{image img 221 320}}" />
{{> brand-text-box}}
</div>
{{/ styleIcon}}
... ...
... ... @@ -36,21 +36,25 @@ const index = (req, res) => {
{
typeId: '0',
isActive: true,
href: '#',
type: '最新'
},
{
typeId: '1',
isActive: false,
href: '#',
type: '话题'
},
{
typeId: '2',
isActive: false,
href: '#',
type: '搭配'
},
{
typeId: '3',
isActive: false,
href: '#',
type: '潮人'
},
{
... ... @@ -61,6 +65,7 @@ const index = (req, res) => {
],
msg: [
{
id: '1',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
... ... @@ -70,6 +75,7 @@ const index = (req, res) => {
like: '8'
},
{
id: '2',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
... ... @@ -93,6 +99,70 @@ const index = (req, res) => {
});
};
const list = (req, res) => {
var pageNum = req.query.page || 1;
res.display('list', {
module: 'editorial',
page: 'list',
title: '资讯列表',
editorialList: {
nav: [
{
link: '//guang.yohobuy.com/index/index?type=0',
pathTitle: '首页',
name: 'MEN首页'
},
{
link: '/',
pathTitle: '资讯',
name: '咨询'
},
{
link: '/',
pathTitle: '资讯',
name: '咨询'
}
],
pathTitle: '户外',
msg: [
{
id: '1',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
msgContent: '鞋款定价回复即可老地方了服务',
time: '2016/05/25 19:36',
liked: true,
like: '8'
},
{
id: '2',
msgLeft: '潮品',
msgTitle: '很到位和范围的恢复文件和的减肥了晚餐费',
img: '',
msgContent: '鞋款定价回复即可老地方了服务',
time: '2016/05/25 19:36',
liked: true,
like: '8'
}
],
paginationOpts: {
page: pageNum, // current page: http://host/?page=2
limit: 10, // per_page records' number
totalRows: 100 // total page number
}
},
helpers: {
// import component, path depends on your project
pagination: require('../../../doraemon/components/pagination/pagination').createPagination
}
});
};
module.exports = {
index // 组件demo页
index, // 组件demo页
list
};
... ...
... ... @@ -11,6 +11,6 @@ const cRoot = './controllers';
const editorial = require(cRoot + '/editorial');
router.get('/', editorial.index); // 咨询首页
// router.get('/list', editorial.list); // 咨询列表页
router.get('/list', editorial.list); // 咨询列表页
module.exports = router;
... ...
<div class="editorial-index-page">
<div class="editorial-index-page center-content">
{{# editorial}}
{{> path-nav}}
... ... @@ -6,7 +6,7 @@
<ul class="msg-nav">
{{# msgTypes}}
<li data-type="{{typeId}}" {{#if isActive}}class="active"{{/if}}>
<a class="pjax-link" href="{{navUrl}}">{{type}}</a>
<a class="pjax-link" href="{{href}}">{{type}}</a>
</li>
{{/ msgTypes}}
</ul>
... ...
<div class="editorial-list-page center-content">
{{# editorialList}}
{{> path-nav}}
<div class="list-content">
<span class="nav-title inline-block"><b>{{pathTitle}}</b>关联的文章</span>
<div id="msg-list" class="msg-list">
{{# msg}}
{{> msg}}
{{/ msg}}
</div>
<div class="paging">
{{{ pagination paginationOpts }}}
</div>
</div>
{{/ editorialList}}
</div>
\ No newline at end of file
... ...
<div class="content-msg clearfix" data-id="{{id}}">
<div class="msg-left">{{msgLeft}}</div>
<div class="msg-right">
<a class="msg-title">{{msgTitle}}</a>
<a class="msg-title" href="{{url}}" target="_blank">{{msgTitle}}</a>
<a href="{{url}}" target="_blank">
<img class="lazy" data-original="{{img}}">
</a>
<div class="content">{{msgContent}}</div>
<div class="msg-app">
<span class="time">
<i class="iconfont">&#xe61b;</i>
<i class="iconfont">&#xe606;</i>
<b class="time-word">{{time}}</b>
</span>
<span class="like-comment">
... ...
... ... @@ -6,6 +6,8 @@
var lazyLoad = require('yoho-jquery-lazyload');
require('../common/header');
require('../common/return-top');
require('../plugins/slider');
lazyLoad($('img.lazy-img'));
... ...
... ... @@ -4,7 +4,27 @@
* @date: 2016/07/05
*/
// var $ = require('yoho-jquery'),
// lazyLoad = require('yoho-jquery-lazyload');
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload');
// lazyLoad($('#msg-list img.lazy'));
lazyLoad($('#msg-list img.lazy'));
$('.msg-nav li').on('click', function() {
var activeTab = $(this).attr('data-type'),
href = $(this).find('a').attr('href');
$('.msg-nav li').removeClass('active');
$(this).addClass('active');
console.log(activeTab);
console.log(href);
});
$('.editorial-index-page').on('click', '.like-icon', function() {
var $this = $(this);
$this.toggleClass('liked');
});
require('../common/header');
require('../common/return-top');
... ...
.ad-banner {
height: 120px;
height: 160px;
margin-top: 15px;
img {
... ...
.ad-container {
height: 225px;
height: 300px;
margin: 0 auto;
box-sizing: border-box;
border: 1PX solid $grayBorder;
border: 1pX solid $grayBorder;
background-color: #fff;
.ad {
... ... @@ -13,7 +13,7 @@
}
.ad.first {
border-right: 1PX solid $grayBorder;
border-right: 1pX solid $grayBorder;
}
img {
... ...
.brand-img-box {
width: 426px;
width: 566px;
box-sizing: border-box;
display: inline-block;
... ... @@ -17,12 +17,12 @@
.big-img {
width: 100%;
height: 250px;
height: 333px;
}
.small-img {
width: 50%;
height: 213px;
height: 283px;
display: inline-block;
box-sizing: border-box;
border: 1px solid $grayBorder;
... ...
.brand-text-box {
$size: 14px;
$size: 18px;
$line-height: 1.8;
$lines-to-show: 3;
... ... @@ -11,7 +11,7 @@
position: relative;
h4 {
font-size: 12px;
font-size: 16px;
font-weight: bold;
}
... ... @@ -29,14 +29,14 @@
}
button {
width: 105px;
height: 26px;
width: 140px;
height: 35px;
position: absolute;
bottom: 29px;
background-color: white;
outline: none;
border: 1PX solid black;
font-size: 12px;
border: 1pX solid black;
font-size: 16px;
cursor: pointer;
}
}
... ...
.editorial-container {
$bigImgWidth: 290px;
$smallImgWidth: 268px;
$smallImgHeight: 176px;
$bigImgWidth: 395px;
$smallImgWidth: 360px;
$smallImgHeight: 240px;
$space: 10px;
@extend .resource-container;
... ...
.home-page {
$sliderHeight: 450px;
$sliderHeight: 645px;
width: 1150px;
margin: 10px auto 0;
.top-slider-container {
... ... @@ -21,7 +20,7 @@
.slide-wrapper {
position: relative;
height: 450px;
height: $sliderHeight;
overflow: hidden;
ul {
... ... @@ -52,15 +51,24 @@
display: block;
}
/* center the image. refer to http://stackoverflow.com/questions/24650218/image-in-full-screen-with-img-tag */
img {
width: 100%;
height: 100%;
min-height: 100%;
min-width: 1920px;
height: auto;
width: auto;
position: absolute;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
margin: auto;
}
}
}
.slide-container-placeholder {
height: 450px;
height: $sliderHeight;
width: 100%;
}
... ... @@ -76,9 +84,9 @@
position: absolute;
top: 50%;
margin: -30px 0 0;
width: 30px;
height: 60px;
line-height: 56px;
width: 40px;
height: 70px;
line-height: 70px;
text-align: center;
z-index: 2;
background: #000;
... ... @@ -86,12 +94,12 @@
&.prev {
left: 50%;
margin-left: -545px;
margin-left: -615px;
}
&.next {
right: 50%;
margin-right: -545px;
margin-right: -615px;
}
&:hover {
... ... @@ -99,8 +107,8 @@
}
.iconfont {
font-size: 32px;
color: #59585a;
font-size: 34px;
color: #fff;
}
}
}
... ... @@ -158,17 +166,17 @@
position: relative;
display: inline-block;
margin: 0 3px;
width: 7px;
height: 7px;
width: 9px;
height: 9px;
background: #ccc;
cursor: pointer;
z-index: 2;
&.focus {
width: 12px;
height: 12px;
width: 16px;
height: 16px;
position: relative;
top: 2px;
top: 3px;
background: #fff;
}
}
... ... @@ -263,236 +271,15 @@
}
}
.new-report {
img {
display: block;
width: 100%;
height: 100%;
}
.report-list {
float: left;
width: 868px;
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
overflow: hidden;
&:first-child {
margin-right: 7px;
width: 282px;
height: 504px;
}
}
}
.last-item {
float: left;
width: 282px;
height: 504px;
overflow: hidden;
}
}
/* 优选品牌 */
.preference-brand {
overflow: hidden;
}
.preference-brand-list {
margin-top: 8px;
width: 1158px;
}
.preference-brand-item {
float: left;
margin-right: 8px;
margin-bottom: 8px;
a {
display: table-cell;
width: 185px;
height: 86px;
text-align: center;
vertical-align: middle;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
}
.preference-more {
float: left;
width: 185px;
height: 86px;
line-height: 100px;
text-align: center;
color: black;
font-size: 16px;
}
.img-slider-wrapper {
position: relative;
width: 100%;
height: 558px;
background: #8ae6e0;
overflow: hidden;
.img-brand-switch {
display: block;
a {
position: absolute;
top: 50%;
font-size: 36px;
color: #fff;
&.next {
right: 30px;
}
&.prev {
left: 30px;
}
}
}
}
.img-container-landscape {
box-sizing: border-box;
margin: 86px auto 0;
width: 982px;
height: 433px;
overflow: hidden;
.img-list {
width: 1000px;
height: 100%;
}
.img-item {
float: left;
box-sizing: border-box;
width: 320px !important;
height: 100%;
margin-right: 10px;
img {
width: 100%;
height: 100%;
}
}
}
.img-brand {
position: relative;
width: 100%;
height: 175px;
overflow: hidden;
&:hover {
.img-brand-switch {
display: block;
}
}
ul {
width: 1158px;
}
li {
float: left;
margin-right: 8px;
width: 378px !important;
height: 175px;
line-height: 175px;
overflow: hidden;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.img-brand-switch {
display: none;
a {
position: absolute;
top: 50%;
margin: -20px 0 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
z-index: 2;
background: #fff;
opacity: 0.55;
&.prev {
left: 0;
}
&.next {
right: 0;
}
&:hover {
opacity: 0.9;
}
}
}
}
.categorys-list {
ul {
width: 1158px;
}
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
&.cate-item0 {
width: 185px;
height: 504px;
}
&.cate-item1 {
width: 377px;
height: 504px;
}
img {
display: block;
width: 100%;
height: 100%;
}
}
}
.floor-header {
text-align: center;
height: 60px;
height: 90px;
line-height: 1.4;
font-weight: bold;
font-size: 16px;
.zh-title {
font-size: 14px;
}
}
.main-container {
position: relative;
top: -60px;
width: 864px;
margin: 0 auto;
box-sizing: border-box;
}
... ...
$grayBorder: #f0f0f0;
.resource-container {
margin-top: 60px;
margin-top: 80px;
}
.cursor-pointer {
... ...
.new-arrival {
$textHeight: 35px;
$imgHeight: 370px;
$textHeight: 47px;
$imgHeight: 490px;
@extend .resource-container;
... ... @@ -12,13 +12,13 @@
}
.arrival-item {
width: 245px;
width: 325px;
display: inline-block;
.brand-name {
height: $textHeight;
text-align: center;
font-size: 12px;
font-size: 16px;
font-weight: normal;
span {
... ... @@ -28,11 +28,11 @@
border-bottom: 1px solid #000;
&.top {
line-height: 20px;
line-height: 30px;
}
&.bottom {
line-height: 40px;
line-height: 56px;
}
}
}
... ... @@ -54,7 +54,7 @@
}
&.small-img {
width: 160px;
width: 223px;
}
}
}
... ...
.style-icon-container {
$width: 164px;
$height: 240px;
$width: 221px;
$height: 320px;
$space: 15px;
$buttonWidth: 105px;
$buttonWidth: 140px;
@extend .resource-container;
.smooth-card-container {
width: 880px;
width: 1170px;
height: $height;
margin: 0 auto;
overflow: hidden;
... ... @@ -35,7 +35,7 @@
}
.brand-text-box {
$size: 12px;
$size: 16px;
$line-height: 1.2;
$lines-to-show: 3;
... ...
.editorial-index-page {
width: 1150px;
margin: 0 auto;
.index-content {
width: 1150px;
margin: 0 auto;
}
.msg-nav {
height: 40px;
... ... @@ -48,3 +41,4 @@
}
@import "msg";
@import "list";
... ...
.editorial-list-page {
.list-content {
margin-top: 30px;
}
.nav-title {
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #eee;
width: 100%;
height: 30px;
b {
font-size: 18px;
margin-right: 5px;
}
}
.paging {
margin: 20px auto;
width: 300px;
height: 40px;
}
}
... ...
... ... @@ -34,6 +34,10 @@
-webkit-box-orient: vertical;
}
.msg-title:hover {
color: #ff1414;
}
.lazy {
width: 640px;
height: 430px;
... ...
... ... @@ -4,10 +4,6 @@
width: 100%;
overflow: hidden;
img {
max-width: 100%;
max-height: 100%;
}
}
.slide-pagination {
... ... @@ -33,22 +29,6 @@
bottom: 0;
}
/*
.slide-pagination-last span {
display: block;
float: left;
position: relative;
margin: 0 3px;
width: 6px;
height: 6px;
background: #fff;
cursor: pointer;
opacity: 0.6;
z-index: 2;
}
*/
.slide-switch {
display: none;
... ...