fe / yoho-blk · Commits

Go to a project

Authored by xuqi
Commit ef6fba16986fcb16d61e83954408bfbe61689071 2 parents 42324508 cf0d8661

Merge remote-tracking branch 'origin/develop' into feature/me-layout

Inline Side-by-side
Showing 47 changed files with 1777 additions and 116 deletions
... ... @@ -81,13 +81,14 @@ const logger = global.yoho.logger;
// dispatcher
try {
const mobileCheck = require('./doraemon/middleware/mobile-check');
const user = require('./doraemon/middleware/user');
const seo = require('./doraemon/middleware/seo');
const setYohoData = require('./doraemon/middleware/set-yoho-data');
const mobileCheck = require(`${global.middleware}/mobile-check`);
const user = require(`${global.middleware}/user`);
const seo = require(`${global.middleware}/seo`);
const setYohoData = require(`${global.middleware}/set-yoho-data`);
// const errorHanlder = require('./doraemon/middleware/error-handler');
const setPageInfo = require('./doraemon/middleware/set-pageinfo');
// const errorHanlder = require(`${global.middleware}/error-handler`);
const setPageInfo = require(`${global.middleware}/set-pageinfo`);
const display = require(`${global.middleware}/display`);
// YOHO 前置中间件
app.use(mobileCheck());
... ... @@ -95,6 +96,7 @@ try {
app.use(user());
app.use(seo());
app.use(setPageInfo());
app.use(display());
require('./dispatch')(app);
... ... @@ -108,5 +110,5 @@ try {
// listener
app.listen(config.port, function() {
logger.info('yohobuy start');
logger.info('yohoblk start');
});
... ...
const getContent = () => {
const content = {
content: [
{
slider: [
{
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: '/'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/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: '/'
},
{
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: '/'
}
]
},
{
brandsAd: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
name: 'GINZA',
des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场',
btnText: 'shop now'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
name: 'STUSSY',
des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场',
btnText: 'shop now'
}
]
},
{
floorZh: '新品抢鲜看',
floorEn: 'NEW ARRIVALS',
newArrivals: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
name: 'STUSSY',
link: '/',
smallImg: true
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
name: 'DAILY PAPER',
link: '/',
even: true
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
name: 'BAPE',
link: '/'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
name: 'SUPREME',
link: '/',
even: true,
smallImg: true
},
]
},
{
floorZh: '经典品牌',
floorEn: 'CLASSIC BRANDS',
classicBrands: [
{
big: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
],
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/30/10/01714bacda5e9fa323a1dc5f720a7f7140.jpg?imageView2/1/w/185/h/248',
link: ''
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/30/10/01714bacda5e9fa323a1dc5f720a7f7140.jpg?imageView2/1/w/185/h/248',
link: ''
}
],
bottomSpace: true
},
{
big: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
],
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
],
right: true,
bottomSpace: true
},
{
big: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
],
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
]
},
{
big: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
],
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
],
right: true
}
]
},
{
floorZh: '潮流标志',
floorEn: 'STYLE ICON',
styleIcon: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
name: 'COTE&CIEL',
des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
link: '/ ',
btnText: '去看看'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
name: 'COTE&CIEL',
des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
link: '/ ',
btnText: '去看看'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
name: 'COTE&CIEL',
des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
link: '/ ',
btnText: '去看看'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
name: 'COTE&CIEL',
des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
link: '/ ',
btnText: '去看看'
}
]
},
{
adBanner: {
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
},
{
floorZh: '资讯',
floorEn: 'EDITORIAL',
editorial: {
big: {
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
},
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: '/',
bottomSpace: true,
rightSpace: true
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: '/',
bottomSpace: true
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: '/',
rightSpace: true
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
link: ''
}
]
}
}
]
};
return content;
}
module.exports = {
getContent: getContent
};
... ...
<div class="home-page">
{{# content}}
{{#if slider}}
{{> slider}}
{{/if}}
{{/ content}}
<div class="main-container">
{{# content}}
{{#if brandsAd}}
{{> ad}}
{{/if}}
{{#if newArrivals}}
{{> new-arrival}}
{{/if}}
{{#if classicBrands}}
{{> classic-brands}}
{{/if}}
{{#if styleIcon}}
{{> style-icon}}
{{/if}}
{{#if adBanner}}
{{> ad-banner}}
{{/if}}
{{#if editorial}}
{{> editorial}}
{{/if}}
{{/ content}}
</div>
</div>
... ...
<div class="ad-banner">
{{#adBanner}}
<img src="{{image img 864 120}}" alt="">
{{/adBanner}}
</div>
... ...
<div class="ad-container">
{{# brandsAd}}
<div class="ad {{#if @first}}first{{/if}}">
<img src="{{image img 165 165}}" alt="">
{{> brand-text-box}}
</div>
{{/ brandsAd}}
</div>
... ...
{{# classicBrands}}
<div class="brand-img-box {{#if right}}right{{/if}} {{#if bottomSpace}}mb10{{/if}}">
{{# big}}
<img class="big-img" src="{{image img 426 250}}" alt="big-img">
{{/ big}}
{{# small}}
<img class="small-img {{#if @first}}first{{/if}}" src="{{image img 213 213}}" alt="big-img">
{{/ small}}
</div>
{{/ classicBrands}}
... ...
<div class="brand-text-box">
<h4>{{name}}</h4>
<p>{{des}}</p>
<button>{{btnText}}</button>
</div>
... ...
<div class="classic-brands-container">
{{> floor-header}}
{{#if classicBrands}}
{{> brand-img-box}}
{{/if}}
</div>
... ...
<div class="editorial-container">
{{> floor-header}}
{{# editorial}}
<div class="news left">
{{# big}}
<img src="{{image img 288 375}}" alt="">
{{/ big}}
</div>
<div class="news right">
{{# small}}
<img class="{{#if bottomSpace}}bottomSpace{{/if}} {{#if rightSpace}}rightSpace{{/if}}" src="{{image img 260 176}}" alt="">
{{/ small}}
</div>
{{/ editorial}}
</div>
... ...
<div class="floor-header">
<h4 class="en-title">{{floorEn}}</h4>
<h4 class="zh-title">{{floorZh}}</h4>
</div>
... ...
<div class="new-arrival">
{{> floor-header}}
<div class="arrival-item-box">
{{# newArrivals}}
<div class="arrival-item {{#if smallImg}}small-img{{/if}} {{#if @last}}last{{^}}normal{{/if}}">
{{#if even}}
<img src="{{image img 245 370}}" alt="">
<div class="brand-name">
<span class="bottom">{{name}}</span>
</div>
{{^}}
<div class="brand-name">
<span class="top">{{name}}</span>
</div>
<img src="{{image img 245 370}}" alt="">
{{/if}}
</div>
{{/ newArrivals}}
</div>
</div>
... ...
<div class="style-icon-container">
{{> floor-header}}
<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>
{{> brand-text-box}}
</div>
{{/ styleIcon}}
</div>
</div>
... ...
<div class="me-page blk-page clearfix">
{{# content}}
{{!-- 头部面包屑 --}}
{{> path-nav}}
<div class="center-content">
{{# content}}
{{!-- 头部面包屑 --}}
{{> path-nav}}
{{!-- 左侧菜单导航 --}}
<div class="me-navigation left">
<p class="title bold">MY YOHO!BLK</p>
<ul class="nav">
{{#each navigation}}
<li class="nav-row{{#if focus}} focus{{/if}}">
<a href="{{link}}">{{name}}</a>
</li>
{{/each}}
</ul>
{{#if banner}}
<img class="banner-img" data-original="{{banner}}">
{{/if}}
</div>
{{!-- 左侧菜单导航 --}}
<div class="me-navigation left">
<p class="title bold">MY YOHO!BLK</p>
<ul class="nav">
{{#each navigation}}
<li class="nav-row{{#if focus}} focus{{/if}}">
<a href="{{link}}">{{name}}</a>
</li>
{{/each}}
</ul>
{{#if banner}}
<img class="banner-img" data-original="{{banner}}">
{{/if}}
</div>
{{!-- 右侧页面内容 --}}
<div class="me-main left">
{{!-- 我的订单 --}}
{{#if order}}
{{> order}}
{{/if}}
{{!-- 右侧页面内容 --}}
<div class="me-main left">
{{!-- 我的订单 --}}
{{#if order}}
{{> order}}
{{/if}}
{{!-- 我的退换货 --}}
{{#if return}}
{{> return}}
{{/if}}
{{!-- 我的退换货 --}}
{{#if return}}
{{> return}}
{{/if}}
{{!-- 我的收藏 --}}
{{#if collection}}
{{> collection}}
{{/if}}
{{!-- 我的收藏 --}}
{{#if collection}}
{{> collection}}
{{/if}}
{{!-- 我的消息 --}}
{{#if message}}
{{> message}}
{{/if}}
{{!-- 我的消息 --}}
{{#if message}}
{{> message}}
{{/if}}
{{!-- 我的YOHO币 --}}
{{#if currency}}
{{> curency}}
{{/if}}
{{!-- 我的YOHO币 --}}
{{#if currency}}
{{> curency}}
{{/if}}
{{!-- 个人设置 --}}
{{#if setting}}
{{> setting}}
{{/if}}
{{!-- 个人设置 --}}
{{#if setting}}
{{> setting}}
{{/if}}
{{!-- 收货地址 --}}
{{#if address}}
{{> address}}
{{/if}}
</div>
{{/ content}}
{{!-- 收货地址 --}}
{{#if address}}
{{> address}}
{{/if}}
</div>
{{/ content}}
</div>
{{!-- 在线客服和返回顶部 --}}
<div class="service-top">
... ...
... ... @@ -11,7 +11,7 @@
const index = (req, res) => {
var pageNum = req.query.page || 1;
res.render('index', {
res.display('index', {
module: 'partial',
page: 'index',
title: 'Yoho!buy有货',
... ...
... ... @@ -123,34 +123,38 @@
{{> icon/solid-round}}
{{> icon/collection}}
{{> icon/bookmarks}}
{{> icon/refresh}}
{{> icon/headset}}
</div>
</ul>
</div>
<p style="margin-top: 20px;">14. 区域/选择地址组件</p>
<div style="padding: 5px; height: 300px;">
<div id="address"></div>
</div>
{{/ content}}
<p class="title">14. tips</p>
<div>
<button id="change" >show or hide tip</button>
</div>
<div id="tips" style="width: 200px;">
<input style="width: 100%;" type="text" name="" id="">
</div>
<p class="title">14. tips</p>
<div>
<button id="change" >show or hide tip</button>
</div>
<div id="tips" style="width: 200px;">
<input style="width: 100%;" type="text" name="" id="">
</div>
<p class="title">15. 头像</p>
<p class="title">15. 头像</p>
<div>
<img class="avatar" src="http://devlup.com/wp-content/uploads/2013/07/images.jpg" alt="Braden Hamm">
</div>
<div>
<img class="avatar" src="http://devlup.com/wp-content/uploads/2013/07/images.jpg" alt="Braden Hamm">
</div>
<p class="title">16. 对话框（弹窗）</p>
<span class="btn alert-btn">alert</span>
<span class="btn red confirm-btn">confirm</span>
<span class="btn white dialog-btn">dialog</span>
<p class="title">16. 对话框（弹窗）</p>
<span class="btn alert-btn">alert</span>
<span class="btn red confirm-btn">confirm</span>
<span class="btn white dialog-btn">dialog</span>
{{/ content}}
</div>
</div>
\ No newline at end of file
... ...
/**
* 注册数据接口
*
* @author JiangFeng<jeff.jiang@yoho.cn>
* @date 2016/06/21
*/
'use strict';
const api = global.yoho.API;
const BindService = {
bindCheck(mobile, openId, sourceType, area) {
let params = {
method: 'app.passport.signCheck',
area: area,
mobile: mobile,
open_id: openId,
source_type: sourceType
};
return api.get('', params);
},
sendBindMsg(area, mobile) {
let params = {
method: 'app.passport.smsbind',
mobile: mobile,
area: area
};
return api.get('', params);
},
checkBindCode(area, mobile, code) {
return api.get('', {
method: 'app.register.validRegCode',
mobile: mobile,
area: area,
code: code
});
},
bindMobile(openId, sourceType, mobile, area, password, nickname) {
let params = {
method: 'app.passport.bind',
mobile: mobile,
open_id: openId,
source_type: sourceType,
area: area
};
if (password) {
params.password = password;
}
if (nickname) {
params.nickname = nickname;
}
return api.get('', params);
},
relateMobile(openId, sourceType, mobile, area) {
return api.get('', {
method: 'app.passport.relateMobile',
mobile: mobile,
openId: openId,
source_type: sourceType,
area: area
});
},
changeCheck(mobile, area) {
return api.get('', {
method: 'app.passport.changeCheck',
mobile: mobile,
area: area
});
},
changeMobile(uid, mobile, area, code) {
return api.get('', {
method: 'app.passport.changeMobile',
mobile: mobile,
uid: uid,
code: code,
area: area
});
}
};
module.exports = BindService;
... ...
/**
* Created by TaoHuang on 2016/7/1.
*/
'use strict';
const _ = require('lodash');
const Captchapng = require('captchapng');
exports.generateCaptcha = (width, height, length) => {
let min = Math.pow(10, (length - 1 || 1));
let max = Math.pow(10, (length - 1 || 1)) * 9;
let token = '' + _.random(min, max);
let png = new Captchapng(width, height, token);//
png.color(0, 0, 0, 0); // First color: background (red, green, blue, alpha)
png.color(80, 80, 80, 255); // Second color: paint (red, green, blue, alpha)
return {
image: new Buffer(png.getBase64(), 'base64'),
text: token
};
};
... ...
/**
* 渲染布局
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/7/4
*/
'use strict';
const _ = require('lodash');
const header = require('../models/header');
module.exports = () => {
return (req, res, next) => {
res.display = (path, data) => {
let isHead = true;
// 判断是否隐藏公共布局
if (_.isBoolean(data.layout) && !data.layout) {
isHead = false;
}
// 判断是否显示默认头部
if (_.isBoolean(data.defaultHeader) && !data.defaultHeader) {
_.unset(data, 'defaultHeader');
isHead = false;
}
if (!isHead) {
res.render(path, data);
} else {
header.requestHeaderData('boys').then(result => {
Object.assign(data, result);
res.render(path, data);
}).catch(next);
}
};
next();
};
};
... ...
... ... @@ -15,4 +15,7 @@
<p>NewPower Co. 版权所有 经营许可证编号：苏B2-20120395</p>
</div>
</div>
<div class="return-top hide">
{{> icon/up}}
</div>
</div>
\ No newline at end of file
... ...
<span class="iconfont">&#xe61c;</span>
\ No newline at end of file
... ...
<span class="iconfont">&#xe613;</span>
\ No newline at end of file
... ...
require('../plugins/slider');
$('.slide-container').slider();
$('.card').mouseenter(function() {
var $this = $(this);
if($this.hasClass('active')) {
return false;
}
$('.active').removeClass('active');
$this.addClass('active');
});
... ...
/**
* 页面公共逻辑和接口
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/11/23
*/
function cookie(name) {
var re = new RegExp(name + '=([^;$]*)', 'i'),
matchPattern = '$1';
return re.test(decodeURIComponent(document.cookie)) ? RegExp[matchPattern] : '';
}
function setCookie(name, value, options) {
var expires = '',
path,
domain,
secure,
date;
if (typeof value !== 'undefined') {
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
if (options.expires &&
(typeof options.expires === 'number' || options.expires.toUTCString)) {
if (typeof options.expires === 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
path = options.path ? '; path=' + options.path : '';
domain = options.domain ? '; domain=' + options.domain : '';
secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
}
}
function queryString() {
var vars = {},
hash,
i,
search = window.location.search,
hashes = search ? decodeURIComponent(search).slice(1).split('&') : [];
for (i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars[hash[0]] = hash[1];
}
return vars;
}
window.cookie = cookie;
window.setCookie = setCookie;
window.queryString = queryString;
... ...
/**
* 公共底部
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/7/4
*/
var $returnTop = $('.return-top');
function rePosReturn() {
if ($(window).height() > $(document).height()) {
$returnTop.addClass('hide');
}
// 只在窗口高度大于文档高度的时候，隐藏返回顶部
// else {
// $returnTop.removeClass('hide');
// }
}
// 返回顶部
$returnTop.click(function() {
$('html,body').animate({
scrollTop: 0
}, 500);
});
$(window).scroll(function() {
if ($(window).scrollTop() === 0) {
$returnTop.addClass('hide');
} else {
$returnTop.removeClass('hide');
}
});
// 如果初始是隐藏的，监听图片加载，重新确定return-top的高度
if ($returnTop.hasClass('hide')) {
$('img').load(rePosReturn);
}
// 暴露给有可能通AJAX改变内容的页面去用
window.rePosReturnTop = rePosReturn;
... ...
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload'),
dialog = require('../common/dialog');
dialog = require('../plugins/dialog');
var _dialog = dialog.Dialog,
_alert = dialog.Alert,
_confirm = dialog.Confirm;
var cascadingAddress = require('../plugins/cascading-address');
var tips = $('#tips');
var change = $('#change');
var show = false;
require('../plugins/tips');
$('.alert-btn').click(function() {
new _alert('购买成功<br>进入 个人中心>我的订单<br>查看门票信息').show();
});
... ... @@ -46,21 +53,15 @@ $('.dialog-btn').click(function() {
}).show();
});
require('../plugins/tips');
lazyLoad($('img.lazy'));
var tips = $('#tips');
var change = $('#change');
var show = false;
change.click(function () {
"use strict";
change.click(function() {
'use strict';
if (show) {
tips.tips('hide');
show = false;
} else {
tips.tips("show", "×该用户已存在");
tips.tips('show', '×该用户已存在');
show = true;
}
... ...
... ... @@ -88,6 +88,8 @@ function Dialog(options) {
Dialog.prototype.close = function() {
this.$mask && this.$mask.addClass('hide');
this.$el.remove();
return this;
};
Dialog.prototype.show = function() {
... ... @@ -96,6 +98,8 @@ Dialog.prototype.show = function() {
'margin-top': -this.$el.outerHeight() / 2,
'margin-left': -this.$el.outerWidth() / 2
});
return this;
};
exports.Dialog = Dialog;
... ...
/**
* 首页banner轮播
* @author: liuyue(yue.liu@yoho.cn)
* @date: 2015/12/04
*/
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload');
(function() {
var Slider = function(element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.slider.defaults, options);
this.bigItem = this.$element.find('.slide-wrapper').find('li');
this.smallItem = null;
this.len = this.bigItem.size();
this.index = 0;
this.timer = null;
this.init();
};
Slider.prototype = {
init: function() {
if (!this.$element) {
return;
}
if (this.len <= 1) {
lazyLoad(this.$element.find('img.lazy'));
return;
}
if (this.options.pagination) {
this.smallItem = $(this.options.pagination).find('li');
} else {
this._createPage();
}
if (this.options.orient) {
this._createOrient();
}
this._slideShow();
this._bindEvent();
this._autoplay();
},
_createOrient: function() {
var orientHtml = '<div class="slide-switch">' +
'<a class="prev" href="javascript:;"><span class="iconfont">&#xe609;</span></a>' +
'<a class="next" href="javascript:;"><span class="iconfont">&#xe608;</span></a>' +
'</div>';
if (this.$element.find('.slide-switch').length > 0) {
return;
}
this.$element.append(orientHtml);
},
_createPage: function() {
var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' +
'<div class="slide-shade"></div><div class="slide-pagination-last">',
i = 0;
if (this.len <= 1) {
return;
}
for (i = 0; i < this.len; i++) {
pageHtml += '<span></span>';
}
pageHtml += '</div></div></div>';
this.$element.append($(pageHtml));
this.smallItem = this.$element.find('.slide-pagination-inner span');
},
_bindEvent: function() {
var that = this;
this.$element.find('.slide-switch').on('click', '.next', function() {
that._nextSlide();
clearInterval(that.timer);
that.timer = setInterval(function() {
that._nextSlide();
}, that.options.time);
}).on('click', '.prev', function() {
that._prevSlide();
clearInterval(that.timer);
that.timer = setInterval(function() {
that._nextSlide();
}, that.options.time);
});
this.smallItem.on('mouseenter', function() {
that.index = $(this).index();
clearInterval(that.timer);
that._slideShow();
}).on('mouseleave', function() {
that._autoplay();
});
this.$element.on('mouseenter', function() {
$(this).find('.slide-switch').addClass('show');
}).on('mouseleave', function() {
$(this).find('.slide-switch').removeClass('show');
});
},
_nextSlide: function() {
if (this.index === this.len - 1) {
this.index = 0;
} else {
this.index++;
}
this._slideShow();
},
_prevSlide: function() {
if (this.index === 0) {
this.index = this.len - 1;
} else {
this.index--;
}
this._slideShow();
},
_slideShow: function() {
var $img = this.bigItem.eq(this.index).find('img.lazy');
// 未加载图片的及时显示
if ($img.attr('src') !== $img.data('original')) {
lazyLoad($img, {
event: 'sporty'
});
$img.trigger('sporty');
}
this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
this.bigItem.eq(this.index).show().stop().animate({
opacity: 1
}, function() {
// 修正IE下切换时文字会重叠的问题
$(this).find('.slide-tips > p').removeClass('hide');
}).siblings().stop().animate({
opacity: 0
}, function() {
$(this).hide().find('.slide-tips > p').addClass('hide');
});
},
_autoplay: function() {
var that = this;
clearInterval(this.timer);
this.timer = setInterval(function() {
that._nextSlide();
}, this.options.time);
}
};
$.fn.slider = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('Slider'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('Slider', (data = new Slider(this, options)));
}
if (typeof option === 'string') {
data[option]();
}
});
};
$.fn.slider.Constructor = Slider;
$.fn.slider.defaults = {
time: 5000,
orient: true, // 左右切换箭头的显示
pagination: null
};
}($));
... ...
... ... @@ -152,11 +152,6 @@ body {
font-family: BrownStd, "黑体";
}
.blk-page {
width: 1150px;
margin: 0 auto;
}
.clearfix {
clear: fix;
}
... ... @@ -210,6 +205,11 @@ a {
left: 0;
}
.center-content {
width: 1150px;
margin: 0 auto;
}
.block {
display: block;
}
... ...
.ad-banner {
height: 120px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
border: none;
}
}
... ...
.ad-container {
height: 225px;
margin: 0 auto;
box-sizing: border-box;
border: 1PX solid $grayBorder;
background-color: #fff;
.ad {
display: inline-block;
float: left;
width: 50%;
height: 100%;
box-sizing: border-box;
}
.ad.first {
border-right: 1PX solid $grayBorder;
}
img {
display: inline-block;
float: left;
width: 50%;
height: 100%;
box-sizing: border-box;
padding: 25px;
}
}
... ...
.brand-img-box {
width: 426px;
box-sizing: border-box;
display: inline-block;
&.mb10 {
margin-bottom: 10px;
}
&.right {
float: right;
}
img {
float: left;
}
.big-img {
width: 100%;
height: 250px;
}
.small-img {
width: 50%;
height: 213px;
display: inline-block;
box-sizing: border-box;
border: 1px solid $grayBorder;
border-top: none;
&.first {
border-right: none;
}
}
}
... ...
.brand-text-box {
$size: 14px;
$line-height: 1.8;
$lines-to-show: 3;
display: inline-block;
float: left;
height: 100%;
width: 50%;
box-sizing: border-box;
padding: 34px 0;
position: relative;
h4 {
font-size: 12px;
font-weight: bold;
}
p {
display: -webkit-box;
height: calc($size*$line-height*$lines-to-show);
margin: 25px 0;
padding-right: 25px;
font-size: $size;
line-height: $line-height;
overflow: hidden;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
color: #505050;
}
button {
width: 105px;
height: 26px;
position: absolute;
bottom: 29px;
background-color: white;
outline: none;
border: 1PX solid black;
font-size: 12px;
cursor: pointer;
}
}
... ...
.classic-brands-container {
@extend .resource-container;
}
... ...
.editorial-container {
$bigImgWidth: 290px;
$smallImgWidth: 268px;
$smallImgHeight: 176px;
$space: 10px;
@extend .resource-container;
.news {
display: inline-block;
box-sizing: border-box;
.bottomSpace {
margin-bottom: $space;
}
.rightSpace {
margin-right: $space;
}
&.left {
width: $bigImgWidth;
float: left;
img {
width: $bigImgWidth;
height: calc($smallImgHeight*2+$space+2px);
}
}
&.right {
width: calc($smallImgWidth*2+$space*2);
float: right;
img {
width: $smallImgWidth;
height: $smallImgHeight;
}
}
}
}
... ...
.home-page {
width: 1150px;
margin: 10px auto 0;
.slide-container {
position: absolute;
left: 0;
right: 0;
height: 450px;
}
.slide-thumb-container {
height: 510px;
}
.slide-wrapper {
position: relative;
height: 450px;
overflow: hidden;
ul {
position: relative;
height: 100%;
}
&:hover .slide-switch.show {
display: block;
}
li {
display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
a {
display: block;
height: 100%;
width: 100%;
margin: 0 auto;
}
&:first-child {
display: block;
}
img {
width: 100%;
height: 100%;
}
}
}
.slide-container-placeholder {
height: 450px;
width: 100%;
}
.slide-thumb-container-placeholder {
height: 510px;
}
.slide-switch {
display: block;
a {
position: absolute;
top: 50%;
margin: -30px 0 0;
width: 30px;
height: 60px;
line-height: 56px;
text-align: center;
z-index: 2;
background: #000;
opacity: 0.55;
&.prev {
left: 50%;
margin-left: -545px;
}
&.next {
right: 50%;
margin-right: -545px;
}
&:hover {
opacity: 0.9;
}
.iconfont {
font-size: 32px;
color: #59585a;
}
}
}
.thumb-pagination {
width: 1148px;
margin: 6px auto 0;
padding-left: 2px;
li {
position: relative;
float: left;
margin-left: 6px;
width: 138px;
height: 54px;
&:first-child {
margin: 0;
}
&.focus a {
opacity: 0;
}
a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #000;
opacity: 0.3;
}
img {
width: 100%;
height: 100%;
}
}
}
/* 大banner圆点 */
.slide-pagination {
font-size: 0;
.slide-shade {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
/*background: #000;*/
}
span {
position: relative;
display: inline-block;
margin: 0 3px;
width: 7px;
height: 7px;
background: #ccc;
cursor: pointer;
z-index: 2;
&.focus {
width: 12px;
height: 12px;
position: relative;
top: 2px;
background: #fff;
}
}
}
.debris-slider {
height: 510px;
width: 100%;
.col {
float: left;
a {
display: block;
}
}
.left-col a,
.right-col a {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.right-col img,
.left-col img {
height: 100%;
width: 100%;
}
.left-col {
margin-right: 10px;
a {
width: 280px;
height: 120px;
}
a:first-child {
height: 250px;
}
}
.center-col {
position: relative;
width: 570px;
height: 100%;
margin-right: 10px;
font-size: 0;
&:hover {
.slide-switch.show {
display: block;
}
}
.slide-wrapper {
height: 100%;
a {
width: 100%;
}
}
.slide-switch {
a.prev {
left: 0;
margin-left: 0;
}
a.next {
right: 0;
margin-right: 0;
}
}
img {
max-width: 100%;
max-height: 100%;
}
}
.right-col a {
width: 280px;
height: 120px;
}
.right-col a:first-child {
height: 380px;
margin-bottom: 11px;
}
}
.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;
line-height: 1.4;
font-weight: bold;
font-size: 16px;
.zh-title {
font-size: 14px;
}
}
.main-container {
position: relative;
top: 390px;
width: 864px;
margin: 0 auto;
box-sizing: border-box;
}
}
... ...
$grayBorder: #f0f0f0;
.resource-container {
margin-top: 60px;
}
.cursor-pointer {
cursor: pointer;
}
@import "home";
@import "ad";
@import "brand-text-box";
@import "brand-img-box";
@import "new-arrival";
@import "classic-brands";
@import "style-icon";
@import "ad-banner";
@import "editorial";
... ...
.new-arrival {
$textHeight: 35px;
$imgHeight: 370px;
@extend .resource-container;
height: calc($textHeight+$imgHeight+60px);/* 60px is the height of the floor header*/
.arrival-item-box {
box-sizing: border-box;
.arrival-item {
width: 245px;
display: inline-block;
.brand-name {
height: $textHeight;
text-align: center;
font-size: 12px;
span {
@extend .cursor-pointer;
padding-bottom: 3px;
border-bottom: 1px solid #000;
&.top {
line-height: 20px;
}
&.bottom {
line-height: 40px;
}
}
}
img {
@extend .cursor-pointer;
width: 100%;
height: $imgHeight;
}
&.normal {
float: left;
margin-right: 18px;
}
&.last {
float: right;
}
&.small-img {
width: 160px;
}
}
}
}
... ...
.style-icon-container {
$width: 164px;
$height: 240px;
$space: 15px;
@extend .resource-container;
.smooth-card-container {
width: 880px;
height: $height;
margin: 0 auto;
overflow: hidden;
}
.card {
height: $height;
display: inline-block;
float: left;
position: relative;
box-sizing: border-box;
.img {
width: $width;
height: 100%;
display: inline-block;
float: left;
margin-right: $space;
background-size: 100% 100%;
background-position: center center;
}
&.last {
.img {
margin-right: 0;
}
}
.brand-text-box {
$size: 12px;
$line-height: 1.2;
$lines-to-show: 3;
width: 0;
border: none;
p {
height: calc($size*$line-height*$lines-to-show);
width: calc($width-2*$space);
padding-right: $space;
font-size: $size;
line-height: $line-height;
overflow: hidden;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
color: #505050;
}
button {
left: calc($width/2-105px/2);
}
* {
display: none;
}
}
&.active {
width: calc($width*2+$space);
float: left;
.img {
margin-right: 0;
}
.brand-text-box {
width: $width;
height: 100%;
display: inline-block;
float: left;
padding: 25px 0 25px $space;
border: 1px solid #404040;
border-left: none;
* {
display: block;
}
p {
display: -webkit-box;
}
}
}
}
}
... ...
@import "header";
@import "sign-header";
@import "footer";
@import "dialog";
.yoho-footer {
background: #fff;
.center-content {
border-top: 2px solid #eee;
}
... ... @@ -21,4 +23,26 @@
text-align: center;
padding: 15px 0;
}
.return-top {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #000;
opacity: 0.5;
position: fixed;
left: 50%;
bottom: 20px;
margin-left: 595px;
cursor: pointer;
.iconfont {
color: #fff;
}
&.min {
margin-left: 505px;
}
}
}
... ...
.center-content {
width: 1150px;
margin: 0 auto;
}
.yoho-header {
height: 50px;
line-height: 50px;
... ...
@import "header";
@import "sign-header";
@import "footer";
@import "pagination"; /* 分页 */
@import "goods"; /* 商品 */
@import "path-nav"; /* 面包屑 */
@import "floor"; /* 楼层头部 */
@import "cascading-address"; /* 区域/地址组件 */
@import "dialog"; /* 对话框组件 */
... ...
... ... @@ -3,8 +3,9 @@
/* 公共 */
@import "base";
@import "components/index";
@import "common/index";
@import "plugin/index";
/* 模块 */
@import "me/index";
@import "channel/index";
... ...
/* 个人中心页面背景 */
body.for-me {
.me-page {
padding-bottom: 30px;
background: #f5f5f5;
}
.me-page {
margin-bottom: 30px;
/* 个人中心布局下重置默认的底部样式 */
+ .yoho-footer .center-content {
border-top: none;
}
/* 左侧导航 */
.me-navigation {
... ... @@ -43,6 +44,8 @@ body.for-me {
}
.banner-img {
width: 150px;
height: 120px;
margin-top: 10px;
}
}
... ...
... ... @@ -14,7 +14,7 @@
position: absolute;
left: 0;
right: 0;
bottom: 12px;
bottom: 80px;
text-align: center;
}
... ... @@ -31,28 +31,23 @@
right: 0;
top: 0;
bottom: 0;
background: #000;
opacity: 0.3;
border-radius: 13px;
}
/*
.slide-pagination-last span {
display: block;
float: left;
position: relative;
margin: 0 7px;
width: 12px;
height: 12px;
margin: 0 3px;
width: 6px;
height: 6px;
background: #fff;
cursor: pointer;
opacity: 0.6;
border-radius: 6px;
z-index: 2;
&.focus {
opacity: 1;
}
}
*/
.slide-switch {
display: none;
... ... @@ -66,12 +61,12 @@
position: absolute;
top: 50%;
margin: -30px 0 0;
width: 60px;
width: 30px;
height: 60px;
line-height: 56px;
text-align: center;
z-index: 2;
background: #fff;
background: #000;
opacity: 0.55;
&:hover {
... ...