Authored by zhangxiaoru

图标封装

... ... @@ -10,6 +10,8 @@ const isProduction = process.env.NODE_ENV === 'production';
const isTest = process.env.NODE_ENV === 'test';
module.exports = {
app: 'web',
appVersion: '4.6.0', // 调用api接口版本
port: 6003,
siteUrl: 'http://www.yohoblk.com',
domains: {
... ...
/**
* header model
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/06/30
*/
'use strict';
const _ = require('lodash');
const serviceApi = global.yoho.ServiceAPI;
/**
* 获取菜单
* @param undefined
* @return {array} 菜单数组
*/
const getMenuData = () => (
{
yohoGroup: [{
link: '/',
cn: '有货BLACK',
en: 'YOHO!BLK'
}, {
link: 'http://www.yohoboys.com',
cn: '男生潮流',
en: 'YOHO!BOYS'
}, {
link: 'http://www.yohogirls.com',
cn: '女生潮流',
en: 'YOHO!GIRLS'
}, {
link: 'http://app.yohoshow.com',
cn: '物趣分享',
en: 'YOHO!SHOW'
}, {
link: 'http://www.yohood.cn',
cn: '潮流嘉年华',
en: 'YO\'HOOD'
}, {
link: '//www.yohobuy.com',
cn: '有货',
en: 'YOHO!BUY'
}]
}
);
/**
* 获取导航
* @param {Object} data 要处理的数据
* @param {String} type 频道类型
* @return {array} 导航数组
*/
const getNavBar = (data, type) => {
let navBars = [];
_.forEach(data, item => {
let obj = {},
lowEn = _.camelCase(item.sort_name_en).toLowerCase();
obj.link = item.sort_url;
obj.cn = item.sort_name;
obj.en = item.sort_name_en;
obj.isNewPage = item.is_new_page === 'Y' ? true : false;
if (type === lowEn) {
obj.cur = true;
}
// 奥莱频道显示图片,特殊处理
if (lowEn === 'outlets') {
obj.ico = item.sort_ico;
}
navBars.push(obj);
});
return navBars;
};
/**
* 获取品牌名字
* @param {Object} data 要处理数据
* @return {array} 品牌数组
*/
const getBrandItems = (data) => {
let brandItems = [];
_.forEach(data, item => {
brandItems.push({
link: item.sort_url,
hot: item.is_hot === 'Y' ? true : false,
name: item.sort_name
});
});
return brandItems;
};
/**
* 获取三级菜单
* @param {Object} data 要处理数据
* @return {array} 三级菜单数组
*/
const getThirdNav = (data) => {
let thirdNav = [];
_.forEach(data, item => {
let obj = {
link: item.sort_url,
name: item.sort_name
};
thirdNav.push(obj);
if (item.sub) {
thirdNav = _.concat(thirdNav, getBrandItems(item.sub));
obj.category = true;
// obj.brandItems = getBrandItems(item.sub);
}
});
return _.chunk(thirdNav, 10);
};
/**
* 获取子菜单
* @param {Object} data 要处理数据
* @param {String} type 频道类型
* @return {array} 子菜单数组
*/
const getSubNav = (data, type) => {
let subNav = [];
_.forEach(data, it => {
if (type === _.camelCase(it.sort_name_en).toLowerCase()) {
_.forEach(it.sub, item => {
let obj = {};
obj.link = item.sort_url;
obj.cn = item.sort_name;
obj.en = item.sort_name_en;
obj.isHot = item.is_hot === 'Y' ? true : false;
obj.isNew = item.is_new === 'Y' ? true : false;
if (item.sub) {
obj.thirdNav = getThirdNav(item.sub);
obj.imgCode = item.content_code;
}
subNav.push(obj);
});
}
});
return subNav;
};
/**
* 处理接口返回的数据
* @param {object} 接口返回的对象
* @param {String} 指定页面类型
* @return {object} 头部数据
*/
const setHeaderData = (resData, type) => (
{
navMenu: {
type: type,
navbars: resData ? getNavBar(resData, type) : [],
subNav: resData ? getSubNav(resData, type) : []
}
}
);
const requestNavBar = (type) => {
return serviceApi.get('operations/api/v6/category/getCategory', {
client_type: 'web'
}, {
cache: true,
code: 200
}).then(res => {
return setHeaderData(res.data, type);
});
};
/**
* 请求头部数据
* @param {String} 频道类型
* @return {promise}
*/
exports.requestHeaderData = (type) => {
let data = {};
let arr = [
getMenuData()
];
if (type) {
arr.push(requestNavBar(type));
}
return Promise.all(arr).then(result => {
return Object.assign(data, {
pageHeader: result[0]
}, result[1]);
});
};
... ...
... ... @@ -17,23 +17,21 @@
{{#if devEnv}}
<link rel="stylesheet" href="//localhost:5003/css/index.css">
{{^}}
<link rel="stylesheet" href="//cdn.yoho.cn/yohobuy-node/{{version}}/index.css">
<link rel="stylesheet" href="//cdn.yoho.cn/yohoblk-node/{{version}}/index.css">
{{/if}}
</head>
<body>
{{> header}}
{{#if pageErr}}
{{> 404}}
{{^}}
{{{body}}}
{{/if}}
{{{body}}}
{{> footer}}
{{#if devEnv}}
<script src="//localhost:5003/libs.js"></script>
<script src="//localhost:5003/{{module}}.{{page}}.js"></script>
{{^}}
<script src="//cdn.yoho.cn/yohobuy-node/{{version}}/libs.js"></script>
<script src="//cdn.yoho.cn/yohobuy-node/{{version}}/{{module}}.{{page}}.js"></script>
<script src="//cdn.yoho.cn/yohoblk-node/{{version}}/libs.js"></script>
<script src="//cdn.yoho.cn/yohoblk-node/{{version}}/{{module}}.{{page}}.js"></script>
{{/if}}
</body>
</html>
... ...
<div class="yoho-footer">
<div class="center-content">
<ul class="about-us clearfix">
<li><a href="#">BLK首页</a></li>
<li><a href="#">客户服务</a></li>
<li><a href="#">支付方式</a></li>
<li><a href="#">配送方式</a></li>
<li><a href="#">售后服务</a></li>
</ul>
<div class="record-info">
<p>
CopyRight © 2007-2016 南京新与力文化传播有限公司
<a class="rbg6" href="http://www.miibeian.gov.cn/" target="_blank">苏ICP备09011225号</a>
</p>
<p>NewPower Co. 版权所有 经营许可证编号:苏B2-20120395</p>
</div>
</div>
</div>
\ No newline at end of file
... ...
{{# pageHeader}}
<div class="yoho-header">
<div class="center-content">
<div class="yoho-group-map">
<span class="iconfont">&#xe600;</span>
<a href="javascript:;">YOHO!BLK</a>
<ul class="yoho-group">
{{# yohoGroup}}
<li>
<a href="{{link}}" data-en="{{en}}" data-cn="{{cn}}">{{en}}</a>
</li>
{{/ yohoGroup}}
</ul>
</div>
<div class="header-tools right">
<ul>
<li>登录 | 注册</li>
<li>
<a href="#">个人中心</a>
</li>
<li>
<a href="#">帮助中心</a>
</li>
<li class="tag-phone">
<span class="tools-icon icon-phone"></span>
手机版
<div class="down-app-box sub-wrapper">
<div class="down-qr"></div>
<p>扫描二维码<br>下载YOHO!BLK手机客户端</p>
<a href="#" class="more-app">更多客户端下载请点击</a>
</div>
</li>
<li class="tag-bag">
<span class="tools-icon icon-bag">
<b class="bag-num">1</b>
</span>
购物袋
<div class="mini-bag-box sub-wrapper">
<div class="bag-content">
购物袋空空的哦,去看看心仪的商品吧~
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
{{/ pageHeader}}
{{> nav-menu}}
... ...
{{# navMenu}}
<div class="yoho-nav">
<div class="main-nav">
<div class="center-content">
<ul class="main-nav-list">
{{# navbars}}
<li class="nav-item{{#if cur}} cur{{/if}}">
<a href="{{link}}">
<span class="nav-en">{{en}}</span>
<span class="nav-cn">{{cn}}</span>
</a>
</li>
{{/ navbars}}
</ul>
<div class="main-logo"></div>
</div>
</div>
<div class="sub-nav">
<div class="center-content">
<ul class="sub-nav-list clearfix">
{{# subNav}}
<li{{#if thirdNav}} class="contain-third"{{/if}}>
<a href="{{link}}">
<span class="nav-en">{{en}}</span>
<span class="nav-cn">{{cn}}</span>
</a>
{{#if thirdNav}}
<div class="third-nav-wrapper">
<div class="center-content">
{{# thirdNav}}
<dl class="category-list">
{{# this}}
{{#if category}}
<dt>
<a href="{{link}}">{{name}}</a>
</dt>
{{^}}
<dd>
<a href="{{link}}"{{#if hot}} class="hot"{{/if}}>{{name}}</a>
</dd>
{{/if}}
{{/ this}}
</dl>
{{/ thirdNav}}
<div class="show-detail" data-code="{{imgCode}}">
</div>
</div>
</div>
{{/if}}
</li>
{{/ subNav}}
</ul>
<div class="search-entry">
<span class="iconfont">&#xe605;</span>
<div class="search-wrapper">
<div class="search-input">
<span class="iconfont left">&#xe605;</span>
<input type="text" name="query" id="search-key" class="search-key" placeholder="search"autocomplete="off">
<span class="iconfont right">&#xe608;</span>
</div>
<ul class="search-hint clearfix">
<li class="cur">
<a href="#">
<span>大衣</span>
<span class="right">约300个商品</span>
</a>
</li>
<li>
<a href="#">
<span>大衣</span>
<span class="right">约300个商品</span>
</a>
</li>
<li>
<a href="#">
<span>大衣</span>
<span class="right">约300个商品</span>
</a>
</li>
</ul>
<div class="hot-search">
<a href="#">外套</a>
<a href="#">长裤</a>
<a href="#">大衣</a>
<a href="#">毛衣</a>
<a href="#">图案</a>
<a href="#">简约连衣裙</a>
</div>
</div>
</div>
</div>
</div>
</div>
{{/ navMenu}}
\ No newline at end of file
... ...
<div class="yoho-sign-header">
<div class="center-content">
<div class="main-logo"></div>
<ul class="header-tools right clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">帮助中心</a></li>
<li>客服电话<span>400-9889-9646</span></li>
</ul>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -52,7 +52,7 @@
"uuid": "^2.0.2",
"winston": "^2.2.0",
"winston-daily-rotate-file": "^1.1.4",
"yoho-node-lib": "0.0.5"
"yoho-node-lib": "0.0.11"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
... ...
/**
* 公共头部
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/7/1
*/
var $ = require('yoho-jquery');
var delayer;
$('.yoho-group a').hover(function() {
var data = $(this).data();
$(this).text(data.cn);
}, function() {
var data = $(this).data();
$(this).text(data.en);
});
$('.contain-third').on({
mouseenter: function() {
var $thirdWrapper = $(this).children('.third-nav-wrapper');
delayer = setTimeout(function() {
$thirdWrapper.show();
}, 200);
},
mouseleave: function() {
var $thirdWrapper = $(this).children('.third-nav-wrapper');
if (delayer) {
clearTimeout(delayer);
}
$thirdWrapper.hide();
}
});
\ No newline at end of file
... ...
.yoho-footer {
.center-content {
border-top: 2px solid #eee;
}
.about-us {
line-height: 88px;
font-size: 14px;
font-weight: bold;
li {
float: left;
width: 20%;
text-align: center;
}
}
.record-info {
font-size: 12px;
line-height: 1.5;
text-align: center;
padding: 15px 0;
}
}
... ...
.center-content {
width: 1150px;
margin: 0 auto;
}
.yoho-header {
height: 50px;
line-height: 50px;
font-size: 12px;
.yoho-group-map {
padding-right: 2px;
display: inline-block;
position: relative;
.iconfont {
font-size: 18px;
position: relative;
top: -1px;
}
a {
vertical-align: top;
}
.yoho-group {
font-size: 14px;
display: none;
}
&:hover {
height: 50px;
border-bottom: 2px solid #9a9a9a;
> * {
color: #9a9a9a;
}
.yoho-group {
display: block;
}
}
.yoho-group {
border: 1px solid #eee;
line-height: 32px;
padding: 20px 0;
background: #fff;
position: absolute;
z-index: 50;
top: 50px;
li {
width: 170px;
padding-left: 20px;
font-weight: bold;
}
a:hover {
color: #9a9a9a;
}
}
}
.header-tools {
li {
float: left;
padding: 0 2px;
margin: 0 12px;
}
.tag-phone,
.tag-bag {
padding-right: 6px;
margin-right: 8px;
position: relative;
&:hover {
color: #9a9a9a;
height: 50px;
border-bottom: 2px solid #9a9a9a;
cursor: default;
}
&:hover .sub-wrapper {
display: block;
}
}
.tools-icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
position: relative;
top: -1px;
}
.icon-phone {
background-image: url('/layout/phone.png');
}
.icon-bag {
background-image: url('/layout/bag.png');
line-height: 22px;
text-align: center;
}
.bag-num {
font-size: 12px;
font-weight: bold;
color: #fff;
display: inline-block;
transform: scale(0.8, 0.8);
}
.down-app-box {
width: 230px;
color: #000;
font-size: 14px;
padding: 20px 0;
margin-left: -86px;
line-height: 1.5;
border: 1px solid #eee;
background: #fff;
position: absolute;
z-index: 50;
text-align: center;
display: none;
.down-qr {
display: inline-block;
width: 138px;
height: 138px;
background-image: resolve('layout/qr.png');
}
p {
margin: 20px 0;
}
.more-app {
color: #ccc;
}
}
.mini-bag-box {
width: 370px;
padding: 18px;
border: 1px solid #eee;
background: #fff resolve('layout/bag-bg.png') no-repeat center center;
position: absolute;
z-index: 50;
right: 0;
display: none;
.bag-content {
padding: 280px 0 130px;
text-align: center;
color: #1d1d1d;
}
}
}
}
.yoho-nav {
.main-nav {
height: 80px;
.main-nav-list {
li {
float: left;
height: 21px;
margin-top: 38px;
margin-right: 30px;
font-weight: bold;
}
li > a {
color: #999;
}
.cur {
border-bottom: 2px solid #1d1d1d;
}
.cur > a {
color: #1d1d1d;
}
}
.main-logo {
width: 264px;
height: 40px;
left: 50%;
position: absolute;
margin-left: -132px;
margin-top: 20px;
background: resolve('layout/blk-logo.png') no-repeat center center;
}
}
.sub-nav {
height: 50px;
background: #1d1d1d;
.sub-nav-list {
max-width: 94%;
line-height: 50px;
display: inline-block;
li {
float: left;
margin-right: 66px;
}
li > a {
color: #fff;
}
li:hover > a {
display: inline-block;
height: 40px;
border-bottom: 2px solid #fff;
}
}
.search-entry {
float: right;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
position: relative;
color: #fff;
cursor: pointer;
.iconfont {
font-size: 16px;
}
}
.search-wrapper {
width: 360px;
padding: 16px 0 10px;
font-size: 14px;
top: 50px;
right: 0;
position: absolute;
background: #1d1d1d;
text-align: left;
display: none;
}
.search-input {
font-size: 16px;
padding: 0 20px;
.search-key {
width: 260px;
height: 30px;
padding: 10px;
background: none;
border: none;
color: #fff;
}
}
.search-hint {
display: none;
li {
line-height: 30px;
padding: 0 20px;
}
.cur {
background: #000;
}
a {
color: #fff;
}
}
.hot-search {
line-height: 65px;
margin: 0 20px;
border-top: 1px solid #fff;
a {
color: #fff;
margin-right: 15px;
}
}
}
.third-nav-wrapper {
padding: 30px 0;
font-size: 14px;
position: absolute;
background: #fff;
width: 100%;
left: 0;
display: none;
dl {
float: left;
height: 330px;
line-height: 1;
box-sizing: border-box;
border-left: 1px solid #eee;
padding: 0 20px;
&:first-child {
border-left: 0;
padding-left: 0;
}
> * {
width: 230px;
height: 35px;
}
a {
color: #666;
}
}
dt > a {
color: #000;
text-decoration: underline;
}
}
}
... ...
@import "header";
@import "sign-header";
@import "footer";
... ...
.yoho-sign-header {
.center-content {
height: 80px;
border-bottom: 2px solid #eee;
}
.main-logo {
width: 200px;
height: 80px;
background: resolve('layout/sign-logo.png') no-repeat center center;
display: inline-block;
}
.header-tools {
font-size: 14px;
font-weight: bold;
li {
float: left;
line-height: 80px;
margin-left: 50px;
}
}
}
... ...
@import "base";
@import "components/index";
@charset "utf-8";
/* 公共 */
@import "common/index";
/* 模块 */
@import "base";
@import "components/index";
... ...