fe / yoho-blk · Commits

Go to a project

Authored by zhangxiaoru
Commit 9ca28e2238532b8bf71678a12398f54cf44d37ba 2 parents 8c4ce231 46243b94

图标封装

Inline Side-by-side
Showing 21 changed files with 827 additions and 11 deletions
@@ -10,6 +10,8 @@ const isProduction = process.env.NODE_ENV === 'production'; @@ -10,6 +10,8 @@ const isProduction = process.env.NODE_ENV === 'production';
10 const isTest = process.env.NODE_ENV === 'test'; 10 const isTest = process.env.NODE_ENV === 'test';
11 11
12 module.exports = { 12 module.exports = {
  13 + app: 'web',
  14 + appVersion: '4.6.0', // 调用api接口版本
13 port: 6003, 15 port: 6003,
14 siteUrl: 'http://www.yohoblk.com', 16 siteUrl: 'http://www.yohoblk.com',
15 domains: { 17 domains: {
  1 +/**
  2 + * header model
  3 + * @author: yyq<yanqing.yang@yoho.cn>
  4 + * @date: 2016/06/30
  5 + */
  6 +'use strict';
  7 +
  8 +const _ = require('lodash');
  9 +
  10 +const serviceApi = global.yoho.ServiceAPI;
  11 +
  12 +/**
  13 + * 获取菜单
  14 + * @param undefined
  15 + * @return {array} 菜单数组
  16 + */
  17 +const getMenuData = () => (
  18 + {
  19 + yohoGroup: [{
  20 + link: '/',
  21 + cn: '有货BLACK',
  22 + en: 'YOHO!BLK'
  23 + }, {
  24 + link: 'http://www.yohoboys.com',
  25 + cn: '男生潮流',
  26 + en: 'YOHO!BOYS'
  27 + }, {
  28 + link: 'http://www.yohogirls.com',
  29 + cn: '女生潮流',
  30 + en: 'YOHO!GIRLS'
  31 + }, {
  32 + link: 'http://app.yohoshow.com',
  33 + cn: '物趣分享',
  34 + en: 'YOHO!SHOW'
  35 + }, {
  36 + link: 'http://www.yohood.cn',
  37 + cn: '潮流嘉年华',
  38 + en: 'YO\'HOOD'
  39 + }, {
  40 + link: '//www.yohobuy.com',
  41 + cn: '有货',
  42 + en: 'YOHO!BUY'
  43 + }]
  44 + }
  45 +);
  46 +
  47 +/**
  48 + * 获取导航
  49 + * @param {Object} data 要处理的数据
  50 + * @param {String} type 频道类型
  51 + * @return {array} 导航数组
  52 + */
  53 +const getNavBar = (data, type) => {
  54 + let navBars = [];
  55 +
  56 + _.forEach(data, item => {
  57 + let obj = {},
  58 + lowEn = _.camelCase(item.sort_name_en).toLowerCase();
  59 +
  60 +
  61 + obj.link = item.sort_url;
  62 + obj.cn = item.sort_name;
  63 + obj.en = item.sort_name_en;
  64 + obj.isNewPage = item.is_new_page === 'Y' ? true : false;
  65 +
  66 + if (type === lowEn) {
  67 + obj.cur = true;
  68 + }
  69 +
  70 + // 奥莱频道显示图片，特殊处理
  71 + if (lowEn === 'outlets') {
  72 + obj.ico = item.sort_ico;
  73 + }
  74 +
  75 + navBars.push(obj);
  76 + });
  77 +
  78 + return navBars;
  79 +};
  80 +
  81 +
  82 +/**
  83 + * 获取品牌名字
  84 + * @param {Object} data 要处理数据
  85 + * @return {array} 品牌数组
  86 + */
  87 +const getBrandItems = (data) => {
  88 + let brandItems = [];
  89 +
  90 + _.forEach(data, item => {
  91 + brandItems.push({
  92 + link: item.sort_url,
  93 + hot: item.is_hot === 'Y' ? true : false,
  94 + name: item.sort_name
  95 + });
  96 + });
  97 +
  98 +
  99 + return brandItems;
  100 +};
  101 +
  102 +/**
  103 + * 获取三级菜单
  104 + * @param {Object} data 要处理数据
  105 + * @return {array} 三级菜单数组
  106 + */
  107 +const getThirdNav = (data) => {
  108 + let thirdNav = [];
  109 +
  110 + _.forEach(data, item => {
  111 + let obj = {
  112 + link: item.sort_url,
  113 + name: item.sort_name
  114 + };
  115 +
  116 + thirdNav.push(obj);
  117 +
  118 + if (item.sub) {
  119 + thirdNav = _.concat(thirdNav, getBrandItems(item.sub));
  120 + obj.category = true;
  121 + // obj.brandItems = getBrandItems(item.sub);
  122 + }
  123 +
  124 + });
  125 +
  126 + return _.chunk(thirdNav, 10);
  127 +};
  128 +
  129 +/**
  130 + * 获取子菜单
  131 + * @param {Object} data 要处理数据
  132 + * @param {String} type 频道类型
  133 + * @return {array} 子菜单数组
  134 + */
  135 +const getSubNav = (data, type) => {
  136 + let subNav = [];
  137 +
  138 + _.forEach(data, it => {
  139 + if (type === _.camelCase(it.sort_name_en).toLowerCase()) {
  140 + _.forEach(it.sub, item => {
  141 + let obj = {};
  142 +
  143 + obj.link = item.sort_url;
  144 + obj.cn = item.sort_name;
  145 + obj.en = item.sort_name_en;
  146 + obj.isHot = item.is_hot === 'Y' ? true : false;
  147 + obj.isNew = item.is_new === 'Y' ? true : false;
  148 +
  149 + if (item.sub) {
  150 + obj.thirdNav = getThirdNav(item.sub);
  151 + obj.imgCode = item.content_code;
  152 + }
  153 +
  154 + subNav.push(obj);
  155 + });
  156 + }
  157 + });
  158 +
  159 + return subNav;
  160 +};
  161 +
  162 +
  163 +
  164 +
  165 +/**
  166 + * 处理接口返回的数据
  167 + * @param {object} 接口返回的对象
  168 + * @param {String} 指定页面类型
  169 + * @return {object} 头部数据
  170 + */
  171 +const setHeaderData = (resData, type) => (
  172 + {
  173 + navMenu: {
  174 + type: type,
  175 + navbars: resData ? getNavBar(resData, type) : [],
  176 + subNav: resData ? getSubNav(resData, type) : []
  177 + }
  178 + }
  179 +);
  180 +
  181 +const requestNavBar = (type) => {
  182 + return serviceApi.get('operations/api/v6/category/getCategory', {
  183 + client_type: 'web'
  184 + }, {
  185 + cache: true,
  186 + code: 200
  187 + }).then(res => {
  188 + return setHeaderData(res.data, type);
  189 + });
  190 +};
  191 +
  192 +
  193 +
  194 +/**
  195 + * 请求头部数据
  196 + * @param {String} 频道类型
  197 + * @return {promise}
  198 + */
  199 +exports.requestHeaderData = (type) => {
  200 + let data = {};
  201 +
  202 + let arr = [
  203 + getMenuData()
  204 + ];
  205 +
  206 + if (type) {
  207 + arr.push(requestNavBar(type));
  208 + }
  209 +
  210 + return Promise.all(arr).then(result => {
  211 + return Object.assign(data, {
  212 + pageHeader: result[0]
  213 + }, result[1]);
  214 + });
  215 +};
@@ -17,23 +17,21 @@ @@ -17,23 +17,21 @@
17 {{#if devEnv}} 17 {{#if devEnv}}
18 <link rel="stylesheet" href="//localhost:5003/css/index.css"> 18 <link rel="stylesheet" href="//localhost:5003/css/index.css">
19 {{^}} 19 {{^}}
20 - <link rel="stylesheet" href="//cdn.yoho.cn/yohobuy-node/{{version}}/index.css"> 20 + <link rel="stylesheet" href="//cdn.yoho.cn/yohoblk-node/{{version}}/index.css">
21 {{/if}} 21 {{/if}}
22 </head> 22 </head>
23 <body> 23 <body>
24 {{> header}} 24 {{> header}}
25 - {{#if pageErr}}  
26 - {{> 404}}  
27 - {{^}}  
28 - {{{body}}}  
29 - {{/if}} 25 +
  26 + {{{body}}}
  27 +
30 {{> footer}} 28 {{> footer}}
31 {{#if devEnv}} 29 {{#if devEnv}}
32 <script src="//localhost:5003/libs.js"></script> 30 <script src="//localhost:5003/libs.js"></script>
33 <script src="//localhost:5003/{{module}}.{{page}}.js"></script> 31 <script src="//localhost:5003/{{module}}.{{page}}.js"></script>
34 {{^}} 32 {{^}}
35 - <script src="//cdn.yoho.cn/yohobuy-node/{{version}}/libs.js"></script>  
36 - <script src="//cdn.yoho.cn/yohobuy-node/{{version}}/{{module}}.{{page}}.js"></script> 33 + <script src="//cdn.yoho.cn/yohoblk-node/{{version}}/libs.js"></script>
  34 + <script src="//cdn.yoho.cn/yohoblk-node/{{version}}/{{module}}.{{page}}.js"></script>
37 {{/if}} 35 {{/if}}
38 </body> 36 </body>
39 </html> 37 </html>
  1 +<div class="yoho-footer">
  2 + <div class="center-content">
  3 + <ul class="about-us clearfix">
  4 + <li><a href="#">BLK首页</a></li>
  5 + <li><a href="#">客户服务</a></li>
  6 + <li><a href="#">支付方式</a></li>
  7 + <li><a href="#">配送方式</a></li>
  8 + <li><a href="#">售后服务</a></li>
  9 + </ul>
  10 + <div class="record-info">
  11 + <p>
  12 + CopyRight © 2007-2016 南京新与力文化传播有限公司
  13 + <a class="rbg6" href="http://www.miibeian.gov.cn/" target="_blank">苏ICP备09011225号</a>
  14 + </p>
  15 + <p>NewPower Co. 版权所有 经营许可证编号：苏B2-20120395</p>
  16 + </div>
  17 + </div>
  18 +</div>
  1 +{{# pageHeader}}
  2 +<div class="yoho-header">
  3 + <div class="center-content">
  4 + <div class="yoho-group-map">
  5 + <span class="iconfont">&#xe600;</span>
  6 + <a href="javascript:;">YOHO!BLK</a>
  7 + <ul class="yoho-group">
  8 + {{# yohoGroup}}
  9 + <li>
  10 + <a href="{{link}}" data-en="{{en}}" data-cn="{{cn}}">{{en}}</a>
  11 + </li>
  12 + {{/ yohoGroup}}
  13 + </ul>
  14 + </div>
  15 + <div class="header-tools right">
  16 + <ul>
  17 + <li>登录 | 注册</li>
  18 + <li>
  19 + <a href="#">个人中心</a>
  20 + </li>
  21 + <li>
  22 + <a href="#">帮助中心</a>
  23 + </li>
  24 + <li class="tag-phone">
  25 + <span class="tools-icon icon-phone"></span>
  26 + 手机版
  27 + <div class="down-app-box sub-wrapper">
  28 + <div class="down-qr"></div>
  29 + <p>扫描二维码<br>下载YOHO！BLK手机客户端</p>
  30 + <a href="#" class="more-app">更多客户端下载请点击</a>
  31 + </div>
  32 + </li>
  33 + <li class="tag-bag">
  34 + <span class="tools-icon icon-bag">
  35 + <b class="bag-num">1</b>
  36 + </span>
  37 + 购物袋
  38 + <div class="mini-bag-box sub-wrapper">
  39 + <div class="bag-content">
  40 + 购物袋空空的哦，去看看心仪的商品吧~
  41 + </div>
  42 + </div>
  43 + </li>
  44 + </ul>
  45 + </div>
  46 + </div>
  47 +</div>
  48 +{{/ pageHeader}}
  49 +{{> nav-menu}}
  1 +{{# navMenu}}
  2 + <div class="yoho-nav">
  3 + <div class="main-nav">
  4 + <div class="center-content">
  5 + <ul class="main-nav-list">
  6 + {{# navbars}}
  7 + <li class="nav-item{{#if cur}} cur{{/if}}">
  8 + <a href="{{link}}">
  9 + <span class="nav-en">{{en}}</span>
  10 + <span class="nav-cn">{{cn}}</span>
  11 + </a>
  12 + </li>
  13 + {{/ navbars}}
  14 + </ul>
  15 + <div class="main-logo"></div>
  16 + </div>
  17 + </div>
  18 + <div class="sub-nav">
  19 + <div class="center-content">
  20 + <ul class="sub-nav-list clearfix">
  21 + {{# subNav}}
  22 + <li{{#if thirdNav}} class="contain-third"{{/if}}>
  23 + <a href="{{link}}">
  24 + <span class="nav-en">{{en}}</span>
  25 + <span class="nav-cn">{{cn}}</span>
  26 + </a>
  27 + {{#if thirdNav}}
  28 + <div class="third-nav-wrapper">
  29 + <div class="center-content">
  30 + {{# thirdNav}}
  31 + <dl class="category-list">
  32 + {{# this}}
  33 + {{#if category}}
  34 + <dt>
  35 + <a href="{{link}}">{{name}}</a>
  36 + </dt>
  37 + {{^}}
  38 + <dd>
  39 + <a href="{{link}}"{{#if hot}} class="hot"{{/if}}>{{name}}</a>
  40 + </dd>
  41 + {{/if}}
  42 + {{/ this}}
  43 + </dl>
  44 + {{/ thirdNav}}
  45 + <div class="show-detail" data-code="{{imgCode}}">
  46 + </div>
  47 + </div>
  48 + </div>
  49 + {{/if}}
  50 + </li>
  51 + {{/ subNav}}
  52 + </ul>
  53 + <div class="search-entry">
  54 + <span class="iconfont">&#xe605;</span>
  55 + <div class="search-wrapper">
  56 + <div class="search-input">
  57 + <span class="iconfont left">&#xe605;</span>
  58 + <input type="text" name="query" id="search-key" class="search-key" placeholder="search"autocomplete="off">
  59 + <span class="iconfont right">&#xe608;</span>
  60 + </div>
  61 + <ul class="search-hint clearfix">
  62 + <li class="cur">
  63 + <a href="#">
  64 + <span>大衣</span>
  65 + <span class="right">约300个商品</span>
  66 + </a>
  67 + </li>
  68 + <li>
  69 + <a href="#">
  70 + <span>大衣</span>
  71 + <span class="right">约300个商品</span>
  72 + </a>
  73 + </li>
  74 + <li>
  75 + <a href="#">
  76 + <span>大衣</span>
  77 + <span class="right">约300个商品</span>
  78 + </a>
  79 + </li>
  80 + </ul>
  81 + <div class="hot-search">
  82 + <a href="#">外套</a>
  83 + <a href="#">长裤</a>
  84 + <a href="#">大衣</a>
  85 + <a href="#">毛衣</a>
  86 + <a href="#">图案</a>
  87 + <a href="#">简约连衣裙</a>
  88 + </div>
  89 + </div>
  90 + </div>
  91 + </div>
  92 + </div>
  93 + </div>
  94 +{{/ navMenu}}
  1 +<div class="yoho-sign-header">
  2 + <div class="center-content">
  3 + <div class="main-logo"></div>
  4 + <ul class="header-tools right clearfix">
  5 + <li><a href="#">首页</a></li>
  6 + <li><a href="#">帮助中心</a></li>
  7 + <li>客服电话<span>400-9889-9646</span></li>
  8 + </ul>
  9 + </div>
  10 +</div>
@@ -52,7 +52,7 @@ @@ -52,7 +52,7 @@
52 "uuid": "^2.0.2", 52 "uuid": "^2.0.2",
53 "winston": "^2.2.0", 53 "winston": "^2.2.0",
54 "winston-daily-rotate-file": "^1.1.4", 54 "winston-daily-rotate-file": "^1.1.4",
55 - "yoho-node-lib": "0.0.5" 55 + "yoho-node-lib": "0.0.11"
56 }, 56 },
57 "devDependencies": { 57 "devDependencies": {
58 "autoprefixer": "^6.3.6", 58 "autoprefixer": "^6.3.6",
  1 +/**
  2 + * 公共头部
  3 + * @author: yyq<yanqing.yang@yoho.cn>
  4 + * @date: 2016/7/1
  5 + */
  6 +var $ = require('yoho-jquery');
  7 +
  8 +var delayer;
  9 +
  10 +$('.yoho-group a').hover(function() {
  11 + var data = $(this).data();
  12 +
  13 + $(this).text(data.cn);
  14 +}, function() {
  15 + var data = $(this).data();
  16 +
  17 + $(this).text(data.en);
  18 +});
  19 +
  20 +$('.contain-third').on({
  21 + mouseenter: function() {
  22 + var $thirdWrapper = $(this).children('.third-nav-wrapper');
  23 +
  24 + delayer = setTimeout(function() {
  25 + $thirdWrapper.show();
  26 + }, 200);
  27 + },
  28 + mouseleave: function() {
  29 + var $thirdWrapper = $(this).children('.third-nav-wrapper');
  30 +
  31 + if (delayer) {
  32 + clearTimeout(delayer);
  33 + }
  34 + $thirdWrapper.hide();
  35 + }
  36 +});
  1 +.yoho-footer {
  2 + .center-content {
  3 + border-top: 2px solid #eee;
  4 + }
  5 +
  6 + .about-us {
  7 + line-height: 88px;
  8 + font-size: 14px;
  9 + font-weight: bold;
  10 +
  11 + li {
  12 + float: left;
  13 + width: 20%;
  14 + text-align: center;
  15 + }
  16 + }
  17 +
  18 + .record-info {
  19 + font-size: 12px;
  20 + line-height: 1.5;
  21 + text-align: center;
  22 + padding: 15px 0;
  23 + }
  24 +}
  1 +.center-content {
  2 + width: 1150px;
  3 + margin: 0 auto;
  4 +}
  5 +
  6 +.yoho-header {
  7 + height: 50px;
  8 + line-height: 50px;
  9 + font-size: 12px;
  10 +
  11 + .yoho-group-map {
  12 + padding-right: 2px;
  13 + display: inline-block;
  14 + position: relative;
  15 +
  16 + .iconfont {
  17 + font-size: 18px;
  18 + position: relative;
  19 + top: -1px;
  20 + }
  21 +
  22 + a {
  23 + vertical-align: top;
  24 + }
  25 +
  26 + .yoho-group {
  27 + font-size: 14px;
  28 + display: none;
  29 + }
  30 +
  31 + &:hover {
  32 + height: 50px;
  33 + border-bottom: 2px solid #9a9a9a;
  34 +
  35 + > * {
  36 + color: #9a9a9a;
  37 + }
  38 +
  39 + .yoho-group {
  40 + display: block;
  41 + }
  42 + }
  43 +
  44 + .yoho-group {
  45 + border: 1px solid #eee;
  46 + line-height: 32px;
  47 + padding: 20px 0;
  48 + background: #fff;
  49 + position: absolute;
  50 + z-index: 50;
  51 + top: 50px;
  52 +
  53 + li {
  54 + width: 170px;
  55 + padding-left: 20px;
  56 + font-weight: bold;
  57 + }
  58 +
  59 + a:hover {
  60 + color: #9a9a9a;
  61 + }
  62 +
  63 + }
  64 + }
  65 +
  66 + .header-tools {
  67 + li {
  68 + float: left;
  69 + padding: 0 2px;
  70 + margin: 0 12px;
  71 + }
  72 +
  73 + .tag-phone,
  74 + .tag-bag {
  75 + padding-right: 6px;
  76 + margin-right: 8px;
  77 + position: relative;
  78 +
  79 + &:hover {
  80 + color: #9a9a9a;
  81 + height: 50px;
  82 + border-bottom: 2px solid #9a9a9a;
  83 + cursor: default;
  84 + }
  85 +
  86 + &:hover .sub-wrapper {
  87 + display: block;
  88 + }
  89 + }
  90 +
  91 + .tools-icon {
  92 + width: 20px;
  93 + height: 20px;
  94 + display: inline-block;
  95 + vertical-align: middle;
  96 + position: relative;
  97 + top: -1px;
  98 + }
  99 +
  100 + .icon-phone {
  101 + background-image: url('/layout/phone.png');
  102 + }
  103 +
  104 + .icon-bag {
  105 + background-image: url('/layout/bag.png');
  106 + line-height: 22px;
  107 + text-align: center;
  108 + }
  109 +
  110 + .bag-num {
  111 + font-size: 12px;
  112 + font-weight: bold;
  113 + color: #fff;
  114 + display: inline-block;
  115 + transform: scale(0.8, 0.8);
  116 + }
  117 +
  118 + .down-app-box {
  119 + width: 230px;
  120 + color: #000;
  121 + font-size: 14px;
  122 + padding: 20px 0;
  123 + margin-left: -86px;
  124 + line-height: 1.5;
  125 + border: 1px solid #eee;
  126 + background: #fff;
  127 + position: absolute;
  128 + z-index: 50;
  129 + text-align: center;
  130 + display: none;
  131 +
  132 + .down-qr {
  133 + display: inline-block;
  134 + width: 138px;
  135 + height: 138px;
  136 + background-image: resolve('layout/qr.png');
  137 + }
  138 +
  139 + p {
  140 + margin: 20px 0;
  141 + }
  142 +
  143 + .more-app {
  144 + color: #ccc;
  145 + }
  146 + }
  147 +
  148 + .mini-bag-box {
  149 + width: 370px;
  150 + padding: 18px;
  151 + border: 1px solid #eee;
  152 + background: #fff resolve('layout/bag-bg.png') no-repeat center center;
  153 + position: absolute;
  154 + z-index: 50;
  155 + right: 0;
  156 + display: none;
  157 +
  158 + .bag-content {
  159 + padding: 280px 0 130px;
  160 + text-align: center;
  161 + color: #1d1d1d;
  162 + }
  163 +
  164 + }
  165 + }
  166 +}
  167 +
  168 +.yoho-nav {
  169 + .main-nav {
  170 + height: 80px;
  171 +
  172 + .main-nav-list {
  173 + li {
  174 + float: left;
  175 + height: 21px;
  176 + margin-top: 38px;
  177 + margin-right: 30px;
  178 + font-weight: bold;
  179 + }
  180 +
  181 + li > a {
  182 + color: #999;
  183 + }
  184 +
  185 + .cur {
  186 + border-bottom: 2px solid #1d1d1d;
  187 + }
  188 +
  189 + .cur > a {
  190 + color: #1d1d1d;
  191 + }
  192 + }
  193 +
  194 + .main-logo {
  195 + width: 264px;
  196 + height: 40px;
  197 + left: 50%;
  198 + position: absolute;
  199 + margin-left: -132px;
  200 + margin-top: 20px;
  201 + background: resolve('layout/blk-logo.png') no-repeat center center;
  202 + }
  203 + }
  204 +
  205 + .sub-nav {
  206 + height: 50px;
  207 + background: #1d1d1d;
  208 +
  209 + .sub-nav-list {
  210 + max-width: 94%;
  211 + line-height: 50px;
  212 + display: inline-block;
  213 +
  214 + li {
  215 + float: left;
  216 + margin-right: 66px;
  217 + }
  218 +
  219 + li > a {
  220 + color: #fff;
  221 + }
  222 +
  223 + li:hover > a {
  224 + display: inline-block;
  225 + height: 40px;
  226 + border-bottom: 2px solid #fff;
  227 + }
  228 + }
  229 +
  230 + .search-entry {
  231 + float: right;
  232 + width: 50px;
  233 + height: 50px;
  234 + line-height: 50px;
  235 + text-align: center;
  236 + position: relative;
  237 + color: #fff;
  238 + cursor: pointer;
  239 +
  240 + .iconfont {
  241 + font-size: 16px;
  242 + }
  243 + }
  244 +
  245 + .search-wrapper {
  246 + width: 360px;
  247 + padding: 16px 0 10px;
  248 + font-size: 14px;
  249 + top: 50px;
  250 + right: 0;
  251 + position: absolute;
  252 + background: #1d1d1d;
  253 + text-align: left;
  254 + display: none;
  255 + }
  256 +
  257 + .search-input {
  258 + font-size: 16px;
  259 + padding: 0 20px;
  260 +
  261 + .search-key {
  262 + width: 260px;
  263 + height: 30px;
  264 + padding: 10px;
  265 + background: none;
  266 + border: none;
  267 + color: #fff;
  268 + }
  269 + }
  270 +
  271 + .search-hint {
  272 + display: none;
  273 +
  274 + li {
  275 + line-height: 30px;
  276 + padding: 0 20px;
  277 + }
  278 +
  279 + .cur {
  280 + background: #000;
  281 + }
  282 +
  283 + a {
  284 + color: #fff;
  285 + }
  286 + }
  287 +
  288 + .hot-search {
  289 + line-height: 65px;
  290 + margin: 0 20px;
  291 + border-top: 1px solid #fff;
  292 +
  293 + a {
  294 + color: #fff;
  295 + margin-right: 15px;
  296 + }
  297 + }
  298 + }
  299 +
  300 + .third-nav-wrapper {
  301 + padding: 30px 0;
  302 + font-size: 14px;
  303 + position: absolute;
  304 + background: #fff;
  305 + width: 100%;
  306 + left: 0;
  307 + display: none;
  308 +
  309 + dl {
  310 + float: left;
  311 + height: 330px;
  312 + line-height: 1;
  313 + box-sizing: border-box;
  314 + border-left: 1px solid #eee;
  315 + padding: 0 20px;
  316 +
  317 + &:first-child {
  318 + border-left: 0;
  319 + padding-left: 0;
  320 + }
  321 +
  322 + > * {
  323 + width: 230px;
  324 + height: 35px;
  325 + }
  326 +
  327 + a {
  328 + color: #666;
  329 + }
  330 + }
  331 +
  332 + dt > a {
  333 + color: #000;
  334 + text-decoration: underline;
  335 + }
  336 + }
  337 +}
  1 +@import "header";
  2 +@import "sign-header";
  3 +@import "footer";
  1 +.yoho-sign-header {
  2 + .center-content {
  3 + height: 80px;
  4 + border-bottom: 2px solid #eee;
  5 + }
  6 +
  7 + .main-logo {
  8 + width: 200px;
  9 + height: 80px;
  10 + background: resolve('layout/sign-logo.png') no-repeat center center;
  11 + display: inline-block;
  12 + }
  13 +
  14 + .header-tools {
  15 + font-size: 14px;
  16 + font-weight: bold;
  17 +
  18 + li {
  19 + float: left;
  20 + line-height: 80px;
  21 + margin-left: 50px;
  22 + }
  23 + }
  24 +}
1 -@import "base";  
2 -@import "components/index"; 1 +@charset "utf-8";
  2 +
  3 +/* 公共 */
  4 +@import "common/index";
  5 +
  6 +/* 模块 */
  7 +@import "base";
  8 +@import "components/index";