fe / YOHOBUYWAP · Commits

Go to a project

Authored by Rock Zhang
Commit 143b0e95e277c5c624cb2e33b6588538d18e4bc3 2 parents 7cda0df7 aca0e2dd

Merge branch 'develop' of git.dev.yoho.cn:web/yohobuy into develop

Inline Side-by-side
Showing 12 changed files with 156 additions and 19 deletions
... ... @@ -85,6 +85,7 @@ $('.sub-nav').on('mouseenter', 'li', function () {
if ($('.banner-swiper').find('li').size() > 1) {
bannerSwiper = new Swiper('.banner-swiper', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
... ...
... ... @@ -6,6 +6,10 @@
var $ = require('yoho.zepto');
var $searchBox = $('.search-box'),
$indexSearch = $('.index-search'),
$indexLogo = $('.index-logo');
function downLoadApp() {
var appUrl = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.yoho&g_f=995445';
var clickedAt = new Date();
... ... @@ -40,3 +44,42 @@ if (!window.cookie('_float-layer-app')) {
$('#float-layer-app').hide();
}
/**
* 频道选择页面顶部搜索
* @author: bikai<kai.bi@yoho.cn>
* @date: 2015/10/28
*/
$searchBox.find('input').on('focus', function () {
$indexLogo.css({
width: 0,
display: 'none'
});
$searchBox.css({
width: '12.8rem'
});
$indexSearch.css({
width: '15.5rem'
});
$('.clear-text, .no-search').show();
}).on('blur', function () {
$indexLogo.css({
width: '5.4rem',
display: 'block'
});
$searchBox.css({
width: '8.8rem'
});
$indexSearch.css({
width: '9.6rem'
});
$('.clear-text, .no-search').hide();
});
$searchBox.find('.clear-text').tap(function () {
$searchBox.find('input').val('').trigger('focus');
});
$searchBox.find('.search-icon').tap(function () {
$indexSearch.submit();
});
\ No newline at end of file
... ...
... ... @@ -25,12 +25,19 @@ var phoneRegx = {
'+61': /^[0-9]{11}$/
};
//密码显示隐藏
function bindEyesEvt() {
/**
* 密码显示隐藏
* @params opt 初始化参数
*/
function bindEyesEvt(opt) {
var $hasEye = $('.has-eye'),
$eye;
$hasEye.append('<div class="eye close"></div>');
if (opt && opt.status === 'open') {
$hasEye.append('<div class="eye"></div>');
} else {
$hasEye.append('<div class="eye close"></div>');
}
$eye = $hasEye.children('.eye');
$eye.on('tap', function(e) {
... ...
... ... @@ -14,7 +14,9 @@ var tip = require('../../plugin/tip');
var trim = $.trim;
var showErrTip = tip.show;
api.bindEyesEvt();
api.bindEyesEvt({
status: 'open' //默认眼睛打开
});
$pwd.bind('input', function() {
if (trim($pwd.val()) === '') {
... ...
... ... @@ -53,7 +53,7 @@ var $listNav = $('#list-nav'),
end: false
}
},
$pre, //纪录进入筛选前的active项
$pre = $listNav.find('.active'), //纪录进入筛选前的active项，初始为选中项
searching;
if ($('.swiper-container .swiper-slide').length > 1) {
... ...
... ... @@ -53,6 +53,7 @@
background: #000;
text-align: center;
text-decoration: none;
z-index: 1;
}
.info-tag {
... ...
... ... @@ -2,7 +2,71 @@
width: 100%;
overflow: hidden;
margin: 0 auto;
.index-header {
padding: 0 20rem / $pxConvertRem;
width: 100%;
height: 96rem / $pxConvertRem;
line-height: 96rem / $pxConvertRem;
.index-logo {
float: left;
font-size: 50rem / $pxConvertRem;
width: 216rem / $pxConvertRem;
color: #343434;
}
.index-search {
float: right;
width: 384rem / $pxConvertRem;
.search-box {
float: left;
position: relative;
top: 20rem / $pxConvertRem;
width: 352rem / $pxConvertRem;
height: 56rem / $pxConvertRem;
padding-right: 40rem / $pxConvertRem;
z-index: 1;
transition: width 400ms;
box-sizing: border-box;
border: 1px solid #ccc;
overflow: hidden;
}
input {
float: left;
width: 100%;
font-size: 28rem / $pxConvertRem;
padding: 10rem / $pxConvertRem;
color: #999;
overflow: hidden;
border: none;
}
.iconfont {
position: absolute;
top: 8rem / $pxConvertRem;
width: 40rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
z-index: 1;
line-height: 40rem / $pxConvertRem;
}
.clear-text {
display: none;
right: 50rem / $pxConvertRem;
color: #ccc;
}
.search-icon {
right: 10rem / $pxConvertRem;
color: #e6e6e6;
}
}
.no-search {
display: none;
float: left;
margin-right: 10rem / $pxConvertRem;
color: #999;
font-size: 28rem / $pxConvertRem;
}
}
.index-container {
position: relative;
@include transition(transform 0.5s);
... ...
... ... @@ -3,6 +3,17 @@
<div class="index-page yoho-page">
<div class="index-container">
<div class="index-header clearfix">
<div class="iconfont index-logo">&#xe60e;</div>
<form action="http://search.m.yohobuy.com" class="index-search">
<a href="javascript:void(0);" class="no-search">取消</a>
<div class="search-box">
<input type="text" name="query" placeholder="搜索">
<span class="iconfont clear-text">&#xe623;</span>
<span class="iconfont search-icon">&#xe60f;</span>
</div>
</form>
</div>
<div class="index-channel">
<img class="img" src="{{background}}" alt="">
... ...
... ... @@ -29,7 +29,7 @@
<div id="goods-container" class="goods-container">
{{# goodsContainer}}
<div class="new-goods container">
<div class="new-goods container clearfix">
{{#if goods}}
{{# goods}}
{{> good}}
... ...
... ... @@ -39,7 +39,7 @@
<div id="goods-container" class="goods-container">
{{# goodsContainer}}
<div class="new-goods container">
<div class="new-goods container clearfix">
{{#if goods}}
{{# goods}}
{{> good}}
... ... @@ -48,8 +48,8 @@
<p class="no-result">未找到相关搜索结果</p>
{{/if}}
</div>
<div class="price-goods container hide"></div>
<div class="discount-goods container hide"></div>
<div class="price-goods container hide clearfix"></div>
<div class="discount-goods container hide clearfix"></div>
{{/ goodsContainer}}
{{> filter}}
... ...
<div class="banner-top">
<div class="banner-swiper swiper-container">
<ul class="swiper-wrapper">
{{# list}}
<li class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{img}}">
</a>
<div class="swiper-lazy-preloader"></div>
</li>
{{/ list}}
{{#each list}}
{{#if @first}}
<li class="swiper-slide">
<a href="{{url}}">
<img src="{{img}}">
</a>
</li>
{{^}}
<li class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{img}}">
</a>
<div class="swiper-lazy-preloader"></div>
</li>
{{/if}}
{{/each}}
</ul>
</div>
<div class="swiper-pagination">
... ...
<div class="icons-wrapper">
<ul class="icons-list clearfix">
{{#list}}
<li class="icons-item"><a href="{{url}}" class="imagebar"><img class="lazy" data-original="{{img}}" alt=""></a><a href="{{url}}" class="linkbar">{{title}}</a></li>
<li class="icons-item"><a href="{{url}}" class="imagebar"><img src="{{img}}" alt=""></a><a href="{{url}}" class="linkbar">{{title}}</a></li>
{{/list}}
</ul>
</div>
\ No newline at end of file
</div>
... ...