fe / YOHOBUYPC · Commits

Go to a project

Authored by hf
Commit a019858d9b3ce3cc53270a9628a460cc32750e38 1 parent 098424e2

code review by hf: merge zhangzhen code to fixes home floor bugs

Inline Side-by-side
Showing 19 changed files with 235 additions and 101 deletions
... ... @@ -10,11 +10,23 @@ var $searchBox = $('.search-box'),
$box = $('.box'),
$indexSearch = $('.index-search'),
$indexLogo = $('.index-logo'),
$channelLink = $('.index-channel a');
$channelLink = $('.index-channel a'),
$win = $(window),
$doc = $(document),
$appFloatLayer = $('#float-layer-app');
var $search = $searchBox.children('input[type="text"]'),
$cancelSearch = $box.children('.no-search'),
$searchIcon = $searchBox.children('.search-icon');
$cancelSearch = $box.children('.no-search'),
$searchIcon = $searchBox.children('.search-icon');
// variables for calculate the app download layer position
var layerInit = false,
windowViewHeight = 0,
layerContentHeight = $appFloatLayer.height(),
layerPaddingTop = parseInt($appFloatLayer.css('padding-top')),
layerPaddingBottom = parseInt($appFloatLayer.css('padding-bottom')),
layerHeight = layerContentHeight + layerPaddingTop + layerPaddingBottom,
layerNewPos;
require('../common');
... ... @@ -69,3 +81,40 @@ $channelLink.on('touchstart', function() {
borderColor: '#fff'
});
});
function updateLayerPosition() {
var winHeight = window.innerHeight,
bodyHeight = $doc.height(),
scrollTopPosition = $win.scrollTop();
if (layerInit) {
//keyboard is shown
if (windowViewHeight - winHeight > 200) {
if (scrollTopPosition + windowViewHeight + layerHeight >= bodyHeight) {
layerNewPos = 0;
} else {
layerNewPos = bodyHeight - windowViewHeight - scrollTopPosition - layerHeight;
}
} else {
layerNewPos = bodyHeight - winHeight - scrollTopPosition;
}
} else {
windowViewHeight = winHeight;
layerNewPos = bodyHeight - winHeight - scrollTopPosition + layerHeight;
layerInit = true;
}
$appFloatLayer.css({
position: 'relative',
bottom: layerNewPos + 'px'
});
}
$(window).scroll(function() {
window.requestAnimationFrame(updateLayerPosition);
});
$doc.on('ready', updateLayerPosition);
... ...
... ... @@ -20,7 +20,7 @@ function couponAJAX(statu, page) {
page: page
},
success: function(data) {
$('.employ').append(data);
$('#employ').append(data);
window.rePosFooter();
loading.hideLoadingMask();
}
... ...
... ... @@ -23,7 +23,7 @@
display: inline-block;
max-width: pxToRem(380px);
overflow: hidden;
text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
... ... @@ -37,10 +37,10 @@
}
.action {
font-size: pxToRem(40px);
font-size: pxToRem(32px);
line-height: pxToRem(60px);
text-align: right;
.edit,
.del {
display: inline-block;
... ... @@ -48,6 +48,10 @@
width: pxToRem(60px);
height: pxToRem(60px);
color: #999;
&:hover {
color: #666;
}
}
.edit {
... ... @@ -212,7 +216,7 @@
float: right;
color: #d0d0d0;
}
&.highlight {
background: #eee;
}
... ...
... ... @@ -23,7 +23,7 @@
}
}
}
.employ-list{
#employ{
width:100%;
height: auto;
overflow:hidden;
... ... @@ -32,7 +32,9 @@
height: 180rem / $pxConvertRem;
overflow: hidden;
margin: 20rem / $pxConvertRem auto;
background: image-url('me/employ/employ.jpg') top center no-repeat;
background-image: image-url('me/employ/employ.jpg');
background-position: top center;
background-repeat:no-repeat;
background-size: 100% 100%;
color: #fff;
position: relative;
... ... @@ -42,16 +44,21 @@
float: left;
text-align: center;
line-height: 180rem / $pxConvertRem;
font-size: 180em / $pxConvertRem;
font-size: 50px;
}
p{
width: 55.517241%;
height: auto;
padding: 0 5% 18em / $pxConvertRem;;
padding: 0 5% 18em / $pxConvertRem;
float: left;
&:first-of-type{
padding-top:30em / $pxConvertRem;
font-size: 60em / $pxConvertRem;
padding-top: 0.75rem;
font-size: 18px;
height: 76rem / $pxConvertRem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
i{
... ...
... ... @@ -126,6 +126,7 @@
.price-underline {
text-decoration: line-through;
margin-left: pxToRem(15px);
}
}
... ... @@ -170,17 +171,14 @@
}
&.del-fav {
$width: pxToRem(image_width(sprite-file($fav, fav-del)));
$height: pxToRem(image_height(sprite-file($fav, fav-del)));
@include rem-sprite($fav, fav-del);
width: $width;
height: $height;
width: 2rem;
height: 1.5rem;
line-height: 1.5rem;
position: absolute;
top: 50%;
right: pxToRem(30px);
margin-top: -$height / 2;
margin-top: -0.75rem;
right: 0;
color: #666;
}
}
}
... ... @@ -188,6 +186,24 @@
}
//品牌收藏
.fav-brand-swiper {
border-top: 1px solid #e0e0e0;
border-bottom: pxToRem(28px) solid #f0f0f0;
position: relative;
&:nth-of-type(1) {
border-top: 0;
}
&:after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
border-top: 1px solid #e0e0e0;
display: block;
width: 100%;
height: 1px;
}
.swiper-header {
height: pxToRem(100px);
... ... @@ -239,21 +255,30 @@
}
}
.fav-more {
$width: pxToRem(image_width(sprite-file($fav, fav-more)));
$height: pxToRem(image_height(sprite-file($fav, fav-more)));
@include rem-sprite($fav, fav-more);
width: $width;
height: $height;
width: 2.5rem;
height: 2.5rem;
position: absolute;
top: 50%;
right: pxToRem(30px);
margin-top: -$height / 2;
top: 0;
right: 0;
&:after {
$width: pxToRem(image_width(sprite-file($fav, fav-more)));
$height: pxToRem(image_height(sprite-file($fav, fav-more)));
@include rem-sprite($fav, fav-more);
width: $width;
height: $height;
position: absolute;
top: 50%;
right: pxToRem(30px);
margin-top: -$height / 2;
content: '';
}
}
}
.swiper-container {
height: pxToRem(300px);
height: pxToRem(365px);
margin: 0 pxToRem(30px);
.swiper-slide {
... ... @@ -270,9 +295,28 @@
img {
display: block;
width: 100%;
height: 100%;
height: pxToRem(300px);
overflow: hidden;
}
.brand-product {
height: pxToRem(65px);
line-height: pxToRem(65px);
text-align: center;
font-size: pxToRem(22px);
color: #fff;
.price-discount {
span {
color: #d1021c
}
b {
color: #b0b0b0;
text-decoration: line-through;
font-weight: normal;
margin-left: pxToRem(13px);
}
}
}
}
}
}
... ...
... ... @@ -140,6 +140,7 @@
border-top: 1px solid #e0e0e0;
.type-item {
position: relative;
float: left;
color: #444;
font-size: pxToRem(28px);
... ... @@ -149,6 +150,20 @@
&.highlight {
background: #eee;
}
.num {
position: absolute;
padding: 0 pxToRem(8px);
top: 0;
right: pxToRem(40px);
min-width: pxToRem(16px);
font-size: pxToRem(24px);
line-height: pxToRem(32px);
color: #fff;
background: #F03D35;
text-align: center;
border-radius: pxToRem(20px);
}
}
.iconfont {
... ...
$vip: sprite-map("me/vip/*.png", $spacing: 10px);
$fav: sprite-map("me/fav/*.png", $spacing: 5px);
@import "home", "vip-grade", "order", "order-detail", "coupons", "personal-details", "yoho-coin", "fav", "suggest", "address", "online-service", "my-guang", "ihelp", "logistic";
@import "home", "vip-grade", "order", "order-detail", "coupons", "personal-details", "yoho-coin", "fav", "suggest", "address", "online-service", "my-guang", "ihelp", "browse-record";
... ...
... ... @@ -171,4 +171,4 @@
@extend %qa;
}
}
}
\ No newline at end of file
}
... ...
... ... @@ -35,6 +35,9 @@
font-size: 48em / $pxConvertRem;
margin-right: 8%;
float: left;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
.head-portrait{
width:90rem / $pxConvertRem;
height: 90rem / $pxConvertRem;
... ...
... ... @@ -31,18 +31,23 @@ $suggest: sprite-map("me/suggest/*.png",$spacing: 5px);
//意见反馈主体
.suggest-content {
border-top: pxToRem(30px) solid #fff;
border-top: 1px solid #e0e0e0;
.suggest-item {
width: 100%;
color: #444;
border-top: 1px solid #e0e0e0;
border-bottom: pxToRem(30px) solid #f0f0f0;
overflow: hidden;
> img {
display: block;
overflow: hidden;
.suggest-item-img {
width: 100%;
overflow: hidden;
> img {
margin: 0 auto;
display: block;
max-width: 100%;
}
}
> h2 {
... ... @@ -71,6 +76,7 @@ $suggest: sprite-map("me/suggest/*.png",$spacing: 5px);
&.suggest-active {
> div {
width: 50%;
height: 100%;
float: left;
text-align: left;
padding-left: pxToRem(128px);
... ... @@ -130,8 +136,29 @@ $suggest: sprite-map("me/suggest/*.png",$spacing: 5px);
line-height: pxToRem(88px);
text-align: center;
font-size: pxToRem(30px);
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
//border-top: 1px solid #e0e0e0;
//border-bottom: 1px solid #e0e0e0;
border-top: pxToRem(30px) solid #f0f0f0;
border-bottom: pxToRem(30px) solid #f0f0f0;
position: relative;
&:after {
content: '';
width: 100%;
height: 1px;
border-top: 1px solid #e0e0e0;
position: absolute;
left: 0;
top: 0;
}
&:before {
content: '';
width: 100%;
height: 1px;
border-bottom: 1px solid #e0e0e0;
position: absolute;
left: 0;
bottom: 0;
}
a {
color: #444;
... ... @@ -176,7 +203,8 @@ $suggest: sprite-map("me/suggest/*.png",$spacing: 5px);
.img-form {
padding: 0 pxToRem(30px);
float: left;
padding-top: pxToRem(40px);
overflow: hidden;
.upload-img-list {
float: left;
... ...
... ... @@ -16,6 +16,7 @@
.user-name {
font-size: 25rem / $pxConvertRem;
margin-right: 0.5rem;
}
.vip-icon {
... ...
... ... @@ -2,7 +2,7 @@
<div class="my-address-page yoho-page">
<div class="my-edit-address-page page-wrap">
<form class="edit-address">
<input type="hidden" name="id" value="{{address.id}}">
<input type="hidden" name="id" value="{{address.address_id}}">
<label class="username">
收件人姓名
<input type="text" name="consignee" maxlength="20" value="{{address.consignee}}">
... ... @@ -18,7 +18,7 @@
<span class="iconfont">&#xe604;</span>
</label>
<label class="address">
详细地址
详细地址
<textarea name="address" maxlength="255">{{address.address}}</textarea>
</label>
... ... @@ -28,6 +28,7 @@
确认
</div>
</div>
{{> me/address/address-list}}
<div class="my-address-list-page page-wrap hide">
</div>
</div>
{{> layout/footer}}
\ No newline at end of file
{{> layout/footer}}
... ...
{{> layout/header}}
<div class="employ">
<span class="active">未使用</span>
<span>已使用</span>
</div>
{{# couponsUrl}}
<div class="employ-list">
{{# used}}
<div class="employ-main">
<span>{{ money}}</span>
<p>{{ coupon_name}}</p>
<p>{{ couponValidity}}</p>
</div>
{{/ used}}
{{^ used}}
<div class="null">
<i></i>
<p>您还没有优惠券!</p>
<a href="{{topURL}}">随便逛逛</a>
</div>
{{/ used}}
<div class="yoho-page">
<div class="employ">
<span class="active">未使用</span>
<span>已使用</span>
</div>
<div class="employ-list not none">
{{# unused}}
<div class="employ-main">
<span>{{ money}}</span>
<p>{{ coupon_name}}</p>
<p>{{ couponValidity}}</p>
<i></i>
</div>
{{/ unused}}
{{^ unused}}
<div class="null">
<i></i>
<p>您还没有使用的优惠券!</p>
<a href="{{topURL}}">随便逛逛</a>
</div>
{{/ unused}}
<div id="employ"></div>
</div>
{{/ couponsUrl}}
{{> layout/footer}}
\ No newline at end of file
... ...
... ... @@ -17,7 +17,7 @@
<div class="fav-load-more fav-load-background hide"></div>
</div>
<div class="fav-type">
<div class="fav-brand-swiper"></div>
<div class="fav-brand-swiper-wrapper"></div>
<div class="fav-content-loading"></div>
<div class="fav-null-box hide">
... ...
... ... @@ -28,7 +28,7 @@
{{#isLogin}}{{brand_favorite_total}}{{/isLogin}}
<p>收藏的品牌</p>
</a>
<a class="link-item" href="/home/">
<a class="link-item" href="/home/record">
{{#isLogin}}{{product_browse}}{{/isLogin}}
<p>浏览记录</p>
</a>
... ... @@ -44,14 +44,23 @@
<a class="type-item" href="/home/order?type=2">
<span class="iconfont">&#xe634;</span>
<br>待付款
{{#if pendingPaymentCount}}
<span class="num">{{pendingPaymentCount}}</span>
{{/if}}
</a>
<a class="type-item" href="/home/order?type=3">
<span class="iconfont">&#xe63b;</span>
<br>待发货
{{#if dueOutGoodsCount}}
<span class="num">{{dueOutGoodsCount}}</span>
{{/if}}
</a>
<a class="type-item" href="/home/order?type=4">
<span class="iconfont">&#xe633;</span>
<br>待收货
{{#if dueInGoodsCount}}
<span class="num">{{dueInGoodsCount}}</span>
{{/if}}
</a>
</div>
</div>
... ... @@ -94,7 +103,7 @@
</a>
</div>
<div class="group-list">
<a class="list-item" href="/home/IHelp">
<a class="list-item" href="/help.html">
<span class="iconfont icon">&#xe639;</span>
帮助
<span class="iconfont num">&#xe604;</span>
... ... @@ -106,4 +115,4 @@
</div>
{{> layout/download_app}}
{{> layout/footer}}
\ No newline at end of file
{{> layout/footer}}
... ...
... ... @@ -2,7 +2,7 @@
<div class="logistic-page yoho-page">
<div class="overview">
<div class="left" >
<a href="{{logisticUrl}}"><div class="icon" style='background-image:url("{{logisticImg}}")'></div></a>
<div class="icon" style='background-image:url("{{logisticImg}}")'> </div>
</div>
<div class="right">
... ... @@ -28,7 +28,7 @@
<span class="timeline-node"></span>
<div class="timeline-info">
<div class="timeline-info-row">
{{status}}
{{ city}}&nbsp;&nbsp;&nbsp;{{ status}}
</div>
<div class="timeline-info-row">
{{date}}
... ...
{{> layout/header}}
<div class="online-service-detail-page yoho-page">
<div class="qa-list">
{{# service}}
{{# list}}
<div class="question-item">
<div class="question">Q：{{q}}</div>
<div class="answer">{{a}}</div>
</div>
{{/ list}}
{{/ list}}
{{/ service}}
</div>
</div>
{{> layout/footer}}
\ No newline at end of file
{{> layout/footer}}
... ...
{{> layout/header}}
<div class="personal-details">
<ul>
<li><span>头像</span><span><i class="head-portrait"><img class="user-avatar" src="{{ head_ico }}"></i></span></li>
<li><span>头像</span><span><i class="head-portrait user-avatar" data-avatar="{{head_ico}}"></i></span></li>
<li><span>昵称</span><span>{{ nickname }}</span></li>
<li><span>性别</span><span>{{ gender }}</span></li>
<li><span>生日</span><span>{{ birthday }}</span></li>
... ...
... ... @@ -6,22 +6,30 @@
我们希望了解您的意见和建议
</h2>
<div class="create-new-suggest">
<a href="./suggestSub">
反馈问题<span>（功能意见，界面意见）</span>
</a>
</div>
<div class="suggest-content" id="suggest-content">
{{# suggestContent}}
<div class="suggest-item" data-id="{{suggest_id}}">
{{#if imgUrl}}
<div class="suggest-item-img">
<img class="lazy" data-original="{{imgUrl}}" alt=""/>
</div>
{{/if}}
<h2>{{title}}</h2>
<p>{{content}}</p>
<div class="suggest-type suggest-good">
<div class="suggest-type suggest-good {{#good}}show{{/good}}">
<div class="active">
<span class="iconfont">&#xe601;</span>
<span>靠谱，谢谢您的反馈</span>
</div>
</div>
<div class="suggest-type suggest-bad">
<div class="suggest-type suggest-bad {{# bad}}show{{/ bad}}">
<div class="active">
<span class="iconfont">&#xe601;</span>
<span>不靠谱，谢谢您的反馈</span>
... ... @@ -44,11 +52,6 @@
{{/ suggestContent}}
</div>
<div class="create-new-suggest">
<a href="./suggestSub">
反馈问题<span>（功能意见，界面意见）</span>
</a>
</div>
{{/ suggest}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...