fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit 531d3adc16bf577df1ad5d08da98965deb84343f 1 parent 024531aa

搜索落地页重构

Inline Side-by-side
Showing 12 changed files with 1260 additions and 0 deletions
  1 +/**
  2 + * Created by yoho on 2016/7/21.
  3 + */
  1 +/**
  2 + * Created by yoho on 2016/7/21.
  3 + */
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>Title</title>
  6 +</head>
  7 +<body>
  8 +
  9 +</body>
  10 +</html>
  1 +/**
  2 + * 搜索商品列表页
  3 + * @author: wsl<shuiling.wang@yoho.cn>
  4 + * @date: 2016/7/21
  5 + */
  6 +
  7 +require('./search/list');
  1 +/**
  2 + * 商品列表页
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/20
  5 + */
  6 +
  7 +var $ = require('yoho-jquery'),
  8 + Hammer = require('yoho-hammer'),
  9 + ellipsis = require('yoho-mlellipsis'),
  10 + lazyLoad = require('yoho-jquery-lazyload');
  11 +
  12 +
  13 +//品牌页参数
  14 +var $brandHeader = $('#brand-header'),
  15 + $introBox = $('#intro-box');
  16 +
  17 +var filter = require('../../plugin/filter');
  18 +
  19 +var writeSearch = require('./write-search');
  20 +
  21 +var tip = require('../../plugin/tip');
  22 +var loading = require('../../plugin/loading');
  23 +
  24 +var $goodsContainer = $('#goods-container'),
  25 + $ngc = $goodsContainer.children('.new-goods'),
  26 + $pgc = $goodsContainer.children('.price-goods'),
  27 + $dgc = $goodsContainer.children('.discount-goods');
  28 +
  29 +var winH = $(window).height();
  30 +
  31 +var $input = $('#search-input input'),
  32 + $clear = $('#search-input .clear-input'),
  33 + $buriedpoint = $('.buriedpoint'),
  34 + $search = $('#search');
  35 +
  36 +var shopId,sort,brand,outlets;
  37 +
  38 +//默认筛选条件
  39 +var defaultOpt = require('../../common/query-param');
  40 +
  41 +var $listNav = $('#list-nav'),
  42 +
  43 + //导航数据信息
  44 + navInfo = {
  45 + newest: {
  46 + order: 1,
  47 + reload: true,
  48 + page: 0,
  49 + end: false
  50 + },
  51 + price: {
  52 + order: 1,
  53 + reload: true,
  54 + page: 0,
  55 + end: false
  56 + },
  57 + discount: {
  58 + order: 1,
  59 + reload: true,
  60 + page: 0,
  61 + end: false
  62 + }
  63 + },
  64 + $pre = $listNav.find('.active'), //纪录进入筛选前的active项，初始为选中项
  65 + searching,
  66 + btnIntroHammer,
  67 + introHammer,
  68 + brandColHammer;
  69 +
  70 +require('../../common');
  71 +
  72 +ellipsis.init();
  73 +
  74 +// 搜索输入联动
  75 +function inputAction() {
  76 + var $searchAssociate = $('.search-associate');
  77 + var $icon = $('.search-icon');
  78 + var $searchItems = $('.search-items');
  79 +
  80 + $input.on('input', function() {
  81 + if ($input.val() === '') {
  82 + $icon.css('color', '#b2b2b2');
  83 + $clear.addClass('hide');
  84 + $searchAssociate.html('');
  85 + $searchItems.show();
  86 + $searchAssociate.hide();
  87 + } else {
  88 + $icon.css('color', '#666');
  89 + $clear.removeClass('hide');
  90 + $searchAssociate.show();
  91 + }
  92 +
  93 + // 联动搜索
  94 + $.ajax({
  95 + url: '/index/search/fuzzyDatas',
  96 + data: {
  97 + keyword: $input.val()
  98 + },
  99 + dataType: 'json',
  100 + success: function(data) {
  101 + var ajaxHtml = '';
  102 + var i;
  103 +
  104 + if (data.length > 0) {
  105 + for (i = 0; i < data.length; i++) {
  106 + ajaxHtml += '<li><span class="keyword">' + data[i].keyword + '</span><span class="count">' +
  107 + data[i].count + ' items<i class="iconfont">&#xe614;</i></span></li>';
  108 + }
  109 +
  110 + $searchAssociate.html(ajaxHtml);
  111 + $searchItems.hide();
  112 + } else {
  113 + $searchAssociate.html('');
  114 + }
  115 +
  116 + $searchAssociate.find('li').on('touchend', function() {
  117 + $buriedpoint.val($(this).find('.keyword').html());
  118 + $search.closest('form').submit();
  119 + });
  120 + },
  121 + error: function() {
  122 + tip.show('网络断开连接了~');
  123 + }
  124 + });
  125 + });
  126 +}
  127 +
  128 +inputAction();
  129 +
  130 +$clear.on('touchend', function() {
  131 + $input.val('').trigger('input');
  132 +});
  133 +
  134 +/**
  135 + * 手动触发搜索
  136 + */
  137 +$search.on('touchend', function() {
  138 + $(this).closest('form').submit();
  139 + return false;
  140 +});
  141 +
  142 +/**
  143 + * 获取url参数
  144 + */
  145 +function getQueryString(name) {
  146 + var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  147 + var r = window.location.search.substr(1).match(reg);
  148 +
  149 + if (r != null) {
  150 + return window.unescape(r[2]);
  151 + }
  152 + return null;
  153 +}
  154 +
  155 +shopId = getQueryString('shop_id');
  156 +sort = getQueryString('sort');
  157 +outlets = getQueryString('outlets');
  158 +age_level = outlets = getQueryString('ageLevel');
  159 +
  160 +/**
  161 + * 筛选注册的回调，筛选子项点击后逻辑
  162 + * 需要执行search的场景：1.点选筛选项；2.relaod为true时切换导航；3.下拉加载
  163 + * @param opt {type, id}
  164 + */
  165 +function search(opt) {
  166 + var setting = {},
  167 + ext,
  168 + att,
  169 + nav,
  170 + navType,
  171 + page,
  172 + $this,
  173 + $title,
  174 + params;
  175 +
  176 + if (searching) {
  177 + return;
  178 + }
  179 +
  180 + if (opt) {
  181 +
  182 + //筛选项变更则重置reload为true
  183 + for (att in navInfo) {
  184 + if (navInfo.hasOwnProperty(att)) {
  185 + navInfo[att].reload = true;
  186 + }
  187 + }
  188 +
  189 + //处理active状态
  190 + $listNav.children('.active').removeClass('active');
  191 + $pre.addClass('active');
  192 + switch (opt.type) {
  193 + case 'shop_id':
  194 + ext = {
  195 + shop_id: opt.id
  196 + };
  197 + break;
  198 + case 'gender':
  199 + ext = {
  200 + gender: opt.id
  201 + };
  202 + break;
  203 + case 'brand':
  204 + ext = {
  205 + brand: opt.id
  206 + };
  207 + break;
  208 + case 'sort':
  209 + ext = {
  210 + sort: opt.id
  211 + };
  212 + break;
  213 + case 'color':
  214 + ext = {
  215 + color: opt.id
  216 + };
  217 + break;
  218 + case 'ageLevel':
  219 + ext = {
  220 + age_level: opt.id
  221 + };
  222 + break;
  223 + case 'size':
  224 + ext = {
  225 + size: opt.id
  226 + };
  227 + break;
  228 + case 'price':
  229 + ext = {
  230 + price: opt.id
  231 + };
  232 + break;
  233 + case 'discount':
  234 + ext = {
  235 + discount: opt.id
  236 + };
  237 + break;
  238 + case 'outlets':
  239 + ext = {
  240 + outlets: opt.id
  241 + };
  242 + break;
  243 + }
  244 +
  245 + $.extend(defaultOpt, ext); //扩展筛选项
  246 + }
  247 +
  248 + //导航类别
  249 + if ($pre.hasClass('new')) {
  250 + navType = 'newest';
  251 + } else if ($pre.hasClass('price')) {
  252 + navType = 'price';
  253 + } else if ($pre.hasClass('discount')) {
  254 + navType = 'discount';
  255 + }
  256 +
  257 + nav = navInfo[navType];
  258 +
  259 + page = nav.page + 1;
  260 + if (nav.reload) {
  261 + page = 1;
  262 + } else if (nav.end) {
  263 +
  264 + //不需要重新加载并且数据请求结束
  265 + return;
  266 + }
  267 +
  268 + params = {
  269 + type: navType,
  270 + order: nav.order,
  271 + page: page
  272 + };
  273 +
  274 + if (shopId) {
  275 + params.shop_id = shopId;
  276 + }
  277 +
  278 + if (age_level) {
  279 + params.age_level = age_level
  280 + }
  281 +
  282 + if (sort) {
  283 + params.sort = sort;
  284 + }
  285 +
  286 + if (brand) {
  287 + params.brand = brand;
  288 + }
  289 +
  290 + if (outlets) {
  291 + params.outlets = outlets;
  292 + }
  293 +
  294 + $.extend(setting, defaultOpt, params);
  295 +
  296 + searching = true;
  297 + loading.showLoadingMask();
  298 +
  299 + $.ajax({
  300 + type: 'GET',
  301 + url: '/product/search/search',
  302 + data: setting,
  303 + success: function(data) {
  304 + var noResult = '<p class="no-result">未找到相关搜索结果</p>',
  305 + num,
  306 + $container;
  307 +
  308 + switch (navType) {
  309 + case 'newest':
  310 + $container = $ngc;
  311 + break;
  312 + case 'price':
  313 + $container = $pgc;
  314 + break;
  315 + case 'discount':
  316 + $container = $dgc;
  317 + break;
  318 + }
  319 +
  320 + if (data === ' ') {
  321 + nav.end = true;
  322 +
  323 + if (nav.reload) {
  324 + $container.html(noResult);
  325 + }
  326 + } else {
  327 + if (nav.reload) {
  328 + $container.html(data);
  329 + lazyLoad($container.find('.lazy'));
  330 + } else {
  331 + num = $container.find('.good-info').length;
  332 + $container.append(data);
  333 +
  334 + //lazy good-infos who append in
  335 + lazyLoad($container.find('.good-info:gt(' + (num - 1) + ') .lazy'));
  336 + }
  337 +
  338 + }
  339 +
  340 + nav.reload = false;
  341 + nav.page = page;
  342 +
  343 + searching = false;
  344 + loading.hideLoadingMask();
  345 +
  346 + window.rePosFooter();
  347 +
  348 + $('.good-detail-text .name').each(function() {
  349 + $this = $(this);
  350 + $title = $this.find('a');
  351 +
  352 + $title[0].mlellipsis(2);
  353 + });
  354 +
  355 + // 用于统计点击了商品列表的第几个商品，序号从1开始计算。
  356 + if (window._yas) {
  357 + switch (navType) {
  358 + case 'newest':
  359 + window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
  360 + '', $('.new-goods .good-info .good-detail-img .good-thumb'));
  361 + break;
  362 + case 'price':
  363 + window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
  364 + '', $('.price-goods .good-info .good-detail-img .good-thumb'));
  365 + break;
  366 + case 'discount':
  367 + window._yas(1 * new Date(), '1.0.16', 'yohobuy_m', window._ozuid,
  368 + '', $('.discount-goods .good-info .good-detail-img .good-thumb'));
  369 + break;
  370 + }
  371 + }
  372 + }
  373 + });
  374 +
  375 +}
  376 +
  377 +//require('../../common/suspend-cart'); //悬浮购物车
  378 +
  379 +$.ajax({
  380 + type: 'GET',
  381 + url: '/product/search/filter',
  382 + data: defaultOpt,
  383 + success: function(data) {
  384 + $goodsContainer.append(data);
  385 +
  386 + //初始化filter&注册filter回调
  387 + filter.initFilter({
  388 + fCbFn: search,
  389 + hCbFn: function() {
  390 +
  391 + //切换active状态到$pre上
  392 + $pre.addClass('active');
  393 + $pre.siblings('.filter').removeClass('active');
  394 + }
  395 + });
  396 + }
  397 +});
  398 +
  399 +lazyLoad($('.lazy'));
  400 +
  401 +writeSearch.bindWirteLocal($('#search-form'));
  402 +
  403 +//导航栏点击逻辑说明：
  404 +//1.点击非active项时切换active状态
  405 +//2.价格和折扣active状态时继续点击切换排序
  406 +//3.筛选无active时点击展开筛选面板
  407 +//4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态
  408 +//5.当前active为筛选并且点击其他项时，隐藏筛选面板
  409 +
  410 +$listNav.bind('contextmenu', function(e) {
  411 + return false;
  412 +});
  413 +
  414 +$listNav.on('touchend touchcancel', function(e) {
  415 + var $this = $(e.target).closest('li'),
  416 + nav,
  417 + navType,
  418 + $active;
  419 + var bpIdData = $(this).find('.buriedpoint').attr('data-bp-id') || '';
  420 +
  421 + if ($this.hasClass('filter')) {
  422 +
  423 + //筛选面板切换状态
  424 + if ($this.hasClass('active')) {
  425 + filter.hideFilter();
  426 +
  427 + //点击筛选钱的active项回复active
  428 + $pre.addClass('active');
  429 + $this.removeClass('active');
  430 + } else {
  431 + $pre = $this.siblings('.active');
  432 +
  433 + $pre.removeClass('active');
  434 + $this.addClass('active');
  435 +
  436 + filter.showFilter();
  437 + }
  438 + } else {
  439 +
  440 + if ($this.hasClass('new')) {
  441 + navType = 'newest';
  442 + } else if ($this.hasClass('price')) {
  443 + navType = 'price';
  444 + } else if ($this.hasClass('discount')) {
  445 + navType = 'discount';
  446 + }
  447 +
  448 + nav = navInfo[navType];
  449 +
  450 + if ($this.hasClass('active')) {
  451 +
  452 + //最新无排序切换
  453 + if ($this.hasClass('new')) {
  454 + return;
  455 + }
  456 +
  457 + if ($this.hasClass('price') || $this.hasClass('discount')) {
  458 +
  459 + // 价格/折扣切换排序状态
  460 + $this.find('.icon > .iconfont').toggleClass('cur');
  461 + $pre = $this; //更新pre为当前项
  462 + nav.reload = true; //重置reload,HTML会被替换为逆序的HTML
  463 + nav.order = nav.order === 0 ? 1 : 0; //切换排序
  464 + }
  465 + } else {
  466 + $active = $this.siblings('.active');
  467 +
  468 + $pre = $this; //$pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
  469 +
  470 + if ($active.hasClass('filter')) {
  471 +
  472 + //若之前active项为筛选，则隐藏筛选面板
  473 + filter.hideFilter();
  474 + } else {
  475 +
  476 + //切换container显示
  477 + $goodsContainer.children('.container:not(.hide)').addClass('hide');
  478 +
  479 + switch (navType) {
  480 + case 'newest':
  481 + $ngc.removeClass('hide');
  482 + break;
  483 +
  484 + case 'price':
  485 + $pgc.removeClass('hide');
  486 + break;
  487 +
  488 + case 'discount':
  489 + $dgc.removeClass('hide');
  490 + break;
  491 + }
  492 + }
  493 +
  494 + $active.removeClass('active');
  495 + $this.addClass('active');
  496 + }
  497 + if (nav.reload) {
  498 + $(document).trigger('shouldSendBpData', [bpIdData]);
  499 + search();
  500 + }
  501 + }
  502 +});
  503 +
  504 +function scrollHandler() {
  505 +
  506 + //当scroll到1/4$goodsContainer高度后继续请求下一页数据
  507 + if ($(window).scrollTop() + winH >
  508 + $(document).height() - 0.25 * $goodsContainer.height()) {
  509 + search();
  510 + }
  511 +}
  512 +
  513 +//srcoll to load more
  514 +$(window).scroll(function() {
  515 + window.requestAnimationFrame(scrollHandler);
  516 +});
  517 +
  518 +if ($brandHeader.length > 0) {
  519 +
  520 + //品牌介绍
  521 + btnIntroHammer = new Hammer($brandHeader.children('.btn-intro')[0]);
  522 + btnIntroHammer.on('tap', function() {
  523 + $introBox.removeClass('hide');
  524 +
  525 + //防止混合scroll发生
  526 + $('body').addClass('overflow-hidden');
  527 + });
  528 +
  529 + //关闭品牌介绍
  530 + introHammer = new Hammer(document.getElementById('intro-box'));
  531 + introHammer.on('tap', function(e) {
  532 + var $this = $(e.target);
  533 +
  534 + e.srcEvent.preventDefault();
  535 +
  536 + //关闭品牌介绍box
  537 + if ($this.closest('#brand-intro').length === 0 || $this.hasClass('close-intro')) {
  538 + $introBox.addClass('hide');
  539 + $('body').removeClass('overflow-hidden');
  540 + }
  541 + });
  542 +
  543 + //品牌收藏
  544 + brandColHammer = new Hammer($brandHeader.children('.btn-col')[0]);
  545 + brandColHammer.on('tap', function(e) {
  546 + var $this = $(e.target).closest('.btn-col');
  547 +
  548 + var id = $brandHeader.data('id'),
  549 + opt;
  550 +
  551 + if ($this.hasClass('coled')) {
  552 + opt = 'cancel';
  553 + } else {
  554 + opt = 'ok';
  555 + }
  556 +
  557 + $.ajax({
  558 + type: 'POST',
  559 + url: '/product/opt/favoriteBrand',
  560 + data: {
  561 + id: id,
  562 + opt: opt
  563 + },
  564 + success: function(data) {
  565 + if (data.code === 200) {
  566 + $this.toggleClass('coled');
  567 +
  568 + //提示
  569 + if (opt === 'ok') {
  570 + tip.show('添加收藏成功');
  571 + } else {
  572 + tip.show('取消收藏成功');
  573 + }
  574 + } else if (data.code === 400) {
  575 + location.href = data.data;//未登录跳转登录页
  576 + } else {
  577 + tip.show(data.message);
  578 + }
  579 + },
  580 + error: function() {
  581 + tip.show('网络断开连接了~');
  582 + }
  583 + });
  584 + });
  585 +}
  586 +
  587 +//初始请求最新第一页数据
  588 +search();
  589 +
  590 +$listNav.on('touchstart', 'li', function() {
  591 + $listNav.find('li').removeClass('bytouch');
  592 + $(this).addClass('bytouch');
  593 +}).on('touchend touchcancel', 'li', function() {
  594 + $listNav.find('li').removeClass('bytouch');
  595 +});
  1 +/**
  2 + * 将搜索结果存localStorage
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/29
  5 + */
  6 +
  7 +var ranToken = ',',
  8 + historyval = 'historys1';
  9 +
  10 +//获取分隔符
  11 +function getRanToken() {
  12 + return ranToken;
  13 +}
  14 +
  15 +//存变量
  16 +function getHistoryval() {
  17 + return historyval;
  18 +}
  19 +
  20 +//绑定提交前的存local操作
  21 +function bindWirteLocal($form) {
  22 + $form.on('submit', function() {
  23 + var query = this.query.value;
  24 +
  25 + setHistoryValFun(query);
  26 + });
  27 +}
  28 +
  29 +function setHistoryValFun(query) {
  30 + var historys;
  31 + if (localStorage) {
  32 + historys = localStorage.getItem(historyval);
  33 +
  34 + historys = historys ? historys.replace(new RegExp((query + ranToken), 'g'), '') : '';
  35 +
  36 + if (historys === '') {
  37 + query = ranToken + query;
  38 + }
  39 +
  40 + historys += query + ranToken;
  41 + localStorage.setItem(historyval, historys);
  42 + }
  43 +}
  44 +
  45 +exports.getRanToken = getRanToken;
  46 +exports.getHistoryval = getHistoryval;
  47 +exports.setHistoryValFun = setHistoryValFun;
  48 +
  49 +exports.bindWirteLocal = bindWirteLocal;
@@ -2,3 +2,4 @@ @@ -2,3 +2,4 @@
2 @import "filter"; 2 @import "filter";
3 @import "suspend-cart"; 3 @import "suspend-cart";
4 @import "error"; 4 @import "error";
  5 +
1 @import "sale/index"; 1 @import "sale/index";
2 @import "detail/index"; 2 @import "detail/index";
3 @import "outlet/index"; 3 @import "outlet/index";
  4 +@import "search/index";
  1 +@import "search";
  2 +@import "list";
  1 +.good-list-page {
  2 + .search-input {
  3 + position: relative;
  4 + padding: 14px 30px;
  5 + background: #f8f8f8;
  6 +
  7 + > form {
  8 + position: relative;
  9 + }
  10 +
  11 + .search-icon {
  12 + position: absolute;
  13 + font-size: 24px;
  14 + top: 18px;
  15 + left: 20px;
  16 + }
  17 +
  18 + input {
  19 + box-sizing: border-box;
  20 + padding-left: 52px;
  21 + padding-right: 68px;
  22 + height: 60px;
  23 + width: 85%;
  24 + border-radius: 30px;
  25 + background: #fff;
  26 + border: none;
  27 + }
  28 +
  29 + .clear-input {
  30 + position: absolute;
  31 + top: 10px;
  32 + right: 100px;
  33 + }
  34 +
  35 + .search {
  36 + position: absolute;
  37 + top: 4px;
  38 + right: -8px;
  39 + border: none;
  40 + background: transparent;
  41 + font-size: 32px;
  42 + height: 60px;
  43 + overflow: hidden;
  44 + line-height: 60px;
  45 + color: #666;
  46 + }
  47 + }
  48 +
  49 + .brand-way {
  50 + padding-bottom: 20px;
  51 + background: #f4f4f4;
  52 +
  53 + > a {
  54 + display: block;
  55 + height: 80px;
  56 + line-height: 80px;
  57 + padding: 0 20px;
  58 + border-bottom: 1px solid #e6e6e6;
  59 + border-top: 1px solid #e6e6e6;
  60 + font-size: 34px;
  61 + background: #fff;
  62 + color: #000;
  63 + }
  64 +
  65 + span {
  66 + font-size: 28px;
  67 + overflow: hidden;
  68 + text-overflow: ellipsis;
  69 + white-space: nowrap;
  70 + }
  71 +
  72 + .brand-name {
  73 + width: 40%;
  74 + overflow: hidden;
  75 + text-overflow: ellipsis;
  76 + white-space: nowrap;
  77 + position: absolute;
  78 + }
  79 +
  80 + .brand-thumb {
  81 + display: block;
  82 + float: left;
  83 + width: 150px;
  84 + height: 80px;
  85 + margin: 0;
  86 + }
  87 +
  88 + .entry {
  89 + color: #999;
  90 + font-size: 28px;
  91 + float: right;
  92 + }
  93 + }
  94 +
  95 + .brand-header {
  96 + position: relative;
  97 + height: 150px;
  98 +
  99 + > img {
  100 + display: block;
  101 + height: 100%;
  102 + width: 100%;
  103 + }
  104 + }
  105 +
  106 + .btn-intro, .btn-col {
  107 + position: absolute;
  108 + display: block;
  109 + width: 124px;
  110 + height: 48px;
  111 + line-height: 48px;
  112 + text-align: center;
  113 + border: 1px solid #fff;
  114 + color: #fff;
  115 +
  116 + top: 50%;
  117 + margin-top: -24px;
  118 + }
  119 +
  120 + .btn-intro {
  121 + right: 180px;
  122 + }
  123 +
  124 + .btn-col {
  125 + right: 30px;
  126 +
  127 + .iconfont {
  128 + font-size: 24px;
  129 + }
  130 +
  131 + &.coled {
  132 + opacity: 0.5;
  133 + }
  134 +
  135 + .txt:after {
  136 + content: '收藏'
  137 + }
  138 +
  139 + &.coled .txt:after {
  140 + content: '已收藏'
  141 + }
  142 + }
  143 +
  144 + .brand-intro-box {
  145 + position: fixed;
  146 + top: 0;
  147 + left: 0;
  148 + right: 0;
  149 + bottom: 0;
  150 + background: rgba(0,0,0,.3);
  151 + padding: 88px 0;
  152 + z-index: 1;
  153 + overflow: auto;
  154 +
  155 + .brand-intro {
  156 + position: relative;
  157 + box-sizing: border-box;
  158 + width: 85%;
  159 + margin: 0 7.5%;
  160 + background: #fff;
  161 + padding: 20px 8%;
  162 + }
  163 +
  164 + h2 {
  165 + text-align: center;
  166 + font-size: 34px;
  167 + line-height: 80px;
  168 + }
  169 +
  170 + .con {
  171 + font-size: 24px;
  172 + line-height: 32px;
  173 + padding: 40px 0;
  174 + border-top: 1px solid #e6e6e6;
  175 + border-bottom: 1px solid #e6e6e6;
  176 + overflow-x: hidden;
  177 + }
  178 +
  179 + .fo {
  180 + font-size: 36px;
  181 + height: 80px;
  182 + line-height: 80px;
  183 + text-align: center;
  184 +
  185 + > span {
  186 + font-size: 44px;
  187 + }
  188 + }
  189 +
  190 + .close-intro {
  191 + position: absolute;
  192 + top: 12px;
  193 + right: 12px;
  194 + }
  195 + }
  196 +
  197 + .list-nav {
  198 + border-top: 2px solid #fff;
  199 + border-bottom: 1px solid #e6e6e6;
  200 +
  201 + > li {
  202 + float: left;
  203 + width: 25%;
  204 + height: 66px;
  205 + line-height: 66px;
  206 + text-align: center;
  207 + font-size: 28px;
  208 + }
  209 + .bytouch{
  210 + background:#eee;
  211 + }
  212 +
  213 + a {
  214 + display: block;
  215 + box-sizing: border-box;
  216 + width: 100%;
  217 + height: 100%;
  218 + color: #999;
  219 + }
  220 +
  221 + .nav-txt {
  222 + display: inline-block;
  223 + height: 100%;
  224 + box-sizing: border-box;
  225 + }
  226 +
  227 + .active > a {
  228 + color: #000;
  229 +
  230 + .iconfont {
  231 + color: #999;
  232 +
  233 + &.cur {
  234 + color: #000;
  235 + }
  236 + }
  237 + }
  238 +
  239 + .new .iconfont {
  240 + transform: scale(0.8);
  241 + font-weight: bold;
  242 + }
  243 +
  244 + .filter .iconfont {
  245 + font-size: 24px;
  246 + transition: transform 0.1 ease-in;
  247 + }
  248 +
  249 + .filter.active .iconfont {
  250 + transform: rotate(-180deg);
  251 + }
  252 +
  253 + .icon {
  254 + position: relative;
  255 +
  256 + i {
  257 + position: absolute;
  258 + transform: scale(0.8);
  259 + font-weight: bold;
  260 + }
  261 +
  262 + .up {
  263 + top: -22px;
  264 + }
  265 +
  266 + .down {
  267 + top: -8px;
  268 + }
  269 + }
  270 + }
  271 +
  272 + .no-result {
  273 + text-align: center;
  274 + vertical-align: middle;
  275 + color: #ccc;
  276 + font-size: 1.2em;
  277 + margin-top: 440px;
  278 + }
  279 +
  280 + .goods-container {
  281 + position: relative;
  282 + min-height: 880px;
  283 + padding-left: 0.375rem;
  284 + padding-top: 0.2rem;
  285 + }
  286 +}
  1 +.search-page {
  2 + .search-input {
  3 + position: relative;
  4 + padding: 14px 22px;
  5 + background: #f8f8f8;
  6 + form {
  7 + width: 100%;
  8 + }
  9 + .search-icon {
  10 + position: absolute;
  11 + font-size: 24px;
  12 + top: 26px;
  13 + left: 36px;
  14 + color: #b2b2b2;
  15 + }
  16 +
  17 + input {
  18 + height: 56px;
  19 + width: 378px;
  20 + border-radius: 28px;
  21 + padding: 0 52px;
  22 + font-size: 24px;
  23 + background: #fff;
  24 + border: none;
  25 + }
  26 +
  27 + .clear-input {
  28 + position: absolute;
  29 + top: 20px;
  30 + right: 145px;
  31 + font-size: 32px;
  32 + color: #666;
  33 + }
  34 +
  35 + .search {
  36 + position: absolute;
  37 + top: 18px;
  38 + right: 40px;
  39 + border: none;
  40 + background: transparent;
  41 + color: #666;
  42 + font-size: 30px;
  43 + line-height: 56px;
  44 + }
  45 + }
  46 +
  47 + .search-items {
  48 + padding: 40px 20px;
  49 +
  50 + h3 {
  51 + font-size: 24px;
  52 + margin-bottom: 20px;
  53 + }
  54 +
  55 + li {
  56 + float: left;
  57 + margin-right: 20px;
  58 + margin-bottom: 20px;
  59 + max-width: 100%;
  60 + overflow: hidden;
  61 + }
  62 +
  63 + a {
  64 + display: block;
  65 + height: 68px;
  66 + line-height: 68px;
  67 + padding: 0 20px;
  68 + font-size: 28px;
  69 + background: #f8f8f8;
  70 + color: #000;
  71 + overflow: hidden;
  72 + text-overflow: ellipsis;
  73 + white-space: nowrap;
  74 + }
  75 +
  76 + .clear-icon {
  77 + float: right;
  78 + background: #fff;
  79 + }
  80 +
  81 + span {
  82 + margin-right: 5px;
  83 + }
  84 +
  85 + .search-group {
  86 + border-bottom: 1px solid #e6e6e6;
  87 +
  88 + .ico-hot {
  89 + width: 22px;
  90 + height: 30px;
  91 + display: inline-block;
  92 + background: url('/search/hot-ico.png') no-repeat;
  93 + margin-right: 20px;
  94 + position: relative;
  95 + top: 2px;
  96 + }
  97 +
  98 + h3 {
  99 + color: #b0b0b0;
  100 + font-size: 28px;
  101 + }
  102 + }
  103 +
  104 + .search-content-title {
  105 + height: 40px;
  106 +
  107 + .ico-lately {
  108 + width: 26px;
  109 + height: 26px;
  110 + display: inline-block;
  111 + background: url('/search/time-ico.png') no-repeat;
  112 + margin-right: 20px;
  113 + position: relative;
  114 + top: 2px;
  115 + }
  116 +
  117 + .ico-del {
  118 + width: 24px;
  119 + height: 26px;
  120 + display: inline-block;
  121 + background: url('/search/del-ico.png') no-repeat;
  122 + }
  123 +
  124 + .left {
  125 + float: left;
  126 + }
  127 +
  128 + .right {
  129 + float: right;
  130 + }
  131 + }
  132 +
  133 + .search-content{
  134 + clear: both;
  135 + padding-left: 47px;
  136 + box-sizing: border-box;
  137 + padding-bottom: 18px;
  138 +
  139 + a {
  140 + border-radius: 8px;
  141 + border: 2px solid #b0b0b0;
  142 + background: #fff;
  143 + color: #b0b0b0;
  144 + font-size: 28px;
  145 + }
  146 + }
  147 +
  148 + .hot-search {
  149 + margin-top: 38px;
  150 + }
  151 + }
  152 +
  153 +}
  154 +
  155 +.search-associate {
  156 + width: 100%;
  157 + background: #f8f8f8;
  158 + display: none;
  159 + position: absolute;
  160 + z-index: 1;
  161 +
  162 + li {
  163 + height: 84px;
  164 + line-height: 84px;
  165 + width: 100%;
  166 + padding: 0 20px;
  167 + clear: both;
  168 + margin-bottom: 5px;
  169 + background: #fff;
  170 + box-sizing: border-box;
  171 + }
  172 +
  173 + .keyword {
  174 + float: left;
  175 + font-size: 30px;
  176 + }
  177 +
  178 + .count {
  179 + float: right;
  180 + color: #b0b0b0;
  181 + font-size: 18px;
  182 +
  183 + i {
  184 + font-size: 12PX;
  185 + margin-left: 10px;
  186 + position: relative;
  187 + top: 3px;
  188 + }
  189 + }
  190 +}
  191 +
  192 +.search-brand-page {
  193 + .search-input {
  194 + position: relative;
  195 + padding: 14px 22px;
  196 + background: #f8f8f8;
  197 + form {
  198 + width: 100%;
  199 + }
  200 + .search-icon {
  201 + position: absolute;
  202 + font-size: 24px;
  203 + top: 26px;
  204 + left: 36px;
  205 + color: #b2b2b2;
  206 + }
  207 +
  208 + input {
  209 + height: 56px;
  210 + width: 378px;
  211 + border-radius: 28px;
  212 + padding: 0 52px;
  213 + font-size: 24px;
  214 + background: #fff;
  215 + border: none;
  216 + }
  217 +
  218 + .clear-input {
  219 + position: absolute;
  220 + top: 20px;
  221 + right: 145px;
  222 + font-size: 32px;
  223 + color: #666;
  224 + }
  225 +
  226 + .search {
  227 + position: absolute;
  228 + top: 18px;
  229 + right: 40px;
  230 + border: none;
  231 + background: transparent;
  232 + color: #666;
  233 + font-size: 30px;
  234 + line-height: 56px;
  235 + }
  236 + }
  237 +
  238 + .search-items {
  239 + padding: 40px 20px;
  240 +
  241 + h3 {
  242 + font-size: 24px;
  243 + margin-bottom: 20px;
  244 + color: #b8b8b8;
  245 + }
  246 +
  247 + li {
  248 + float: left;
  249 + margin-right: 20px;
  250 + margin-bottom: 20px;
  251 + max-width: 100%;
  252 + overflow: hidden;
  253 + }
  254 +
  255 + a {
  256 + display: block;
  257 + height: 68px;
  258 + line-height: 68px;
  259 + padding: 0 20px;
  260 + font-size: 28px;
  261 + background: white;
  262 + color: #b8b8b8;
  263 + overflow: hidden;
  264 + text-overflow: ellipsis;
  265 + white-space: nowrap;
  266 + border:1px solid #b8b8b8;
  267 + border-radius: 0.2rem;
  268 + }
  269 +
  270 + .clear-history {
  271 + font-size: 28px;
  272 + }
  273 +
  274 + .clear-icon{
  275 + float: right;
  276 + color: #b8b8b8;
  277 + border: none;
  278 + background: white;
  279 + }
  280 +
  281 + span{
  282 + margin-right: 10px;
  283 + font-size: 14px;
  284 + }
  285 +
  286 + .history-search{
  287 + border-bottom:1px solid #f3f3f3;
  288 + }
  289 +
  290 + .hot-search{
  291 + margin-top: 20px;
  292 + }
  293 +
  294 + .clearfix{
  295 + margin-left: 30px;
  296 + }
  297 +
  298 + .left-icon {
  299 + font-size: 24px;
  300 + }
  301 + }
  302 +}