fe / YOHOBUYPC · Commits

Go to a project

Authored by Rock Zhang
Commit 66e9a71a38b60eb7e23064a078a83fdb90105535 2 parents 316e7867 7ba786e9

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

Inline Side-by-side
Showing 10 changed files with 542 additions and 165 deletions
... ... @@ -6,7 +6,10 @@
var $ = require('jquery'),
Swiper = require('yoho.iswiper'),
lazyLoad = require('yoho.lazyload'),
goodsSwiper;
goodsSwiper,
sizeSwiper,
refSwiper;
lazyLoad($('img.lazy'));
... ... @@ -39,6 +42,14 @@ $('#nav-tab li').on('click', function() {
}
});
sizeSwiper = new Swiper('#size-swiper-container',{
slidesPerView: 'auto'
});
refSwiper = new Swiper('#reference-swiper-container',{
slidesPerView: 'auto'
});
// $('#iframe').load(function() {
// var mainheight = $(this).contents().find('body').height() + 30;
// $(this).height(mainheight);
... ...
... ... @@ -8,10 +8,11 @@ var page = 1,
hotnav,
listTop,
navSwiper,
notab=0,
sort = '',
id = '';
function hotrank(page, sort, tabId) {
function hotrank(page, sort, tabId, notab) {
$.ajax({
type: 'GET',
url: '/product/newsale/selectHotrank',
... ... @@ -19,13 +20,19 @@ function hotrank(page, sort, tabId) {
data: {
page: page,
sort: sort,
tab_id: tabId
tab_id: tabId,
notab: notab
},
success: function(data) {
if (page === 1) {
$('#hotRank').html('');
$('.rank-main').html('');
}
console.log(notab);
if (notab === 1) {
$('.rank-main').append(data);
} else {
$('#hotRank').append(data);
}
$('#hotRank').append(data);
lazyLoad($('img.lazy'));
$('#yoho-footer').css('position', 'static');
$('.rank-main ul li:gt(2)').find('.item-content i').removeClass('top');
... ... @@ -43,9 +50,9 @@ function hotrank(page, sort, tabId) {
var navItme = $('.s-goods-nav .nav-item').eq(index);
id = navItme.data('id') ? navItme.data('id') : '';
sort = navItme.data('sort') ? navItme.data('sort') : '';
page = 1;
hotrank(page, sort, id);
notab = 1;
hotrank(page, sort, id, notab);
});
});
}
... ... @@ -60,7 +67,8 @@ $(window).scroll(function () {
return;
}
page = 2;
hotrank(page, sort, id);
notab = 1;
hotrank(page, sort, id, notab);
});
hotrank(page, sort, id);
hotrank(page, sort, id, notab);
... ...
@function rem($n) {
@return $n / 40 * 1rem;
}
.online-service-detail-page{
.question {
background: #fff;
}
.question-title {
padding: rem(20) rem(30);
font-size: rem(28);
line-height: 1;
color: #b0b0b0;
}
.question-tab {
padding: rem(10) rem(30) rem(30);
font-size: rem(32);
line-height: rem(58);
text-align: center;
color: #b0b0b0;
.current {
color: #444;
}
.line {
padding: 0 rem(32);
}
}
.question-list {
display: none;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
&.current {
display: block;
}
li {
margin-left: rem(30);
width: rem(610);
font-size: rem(28);
line-height: rem(90);
border-bottom: 1px solid #ccc;
a {
display: block;
color: #444;
}
.iconfont {
float: right;
margin-right: rem(30);
color: #ccc;
}
&:last-child {
border-bottom: none;
}
}
}
.connect-info {
margin-top: 30px;
font-size: rem(28);
line-height: rem(50);
background: #fff;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
p {
margin-top: rem(25);
margin-left: rem(-72);
line-height: 1.5;
}
.iconfont {
float: right;
color: #ccc;
}
.connect-item {
position: relative;
a {
display: block;
padding: rem(20) rem(30) rem(20) rem(94);
color: #444;
}
&:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: rem(548);
height: 1px;
background: #ccc;
}
&:last-child {
&:after {
content: none;
}
}
}
.icon-chat {
@include retina-sprite($customerIcons, chat);
}
.icon-tel {
@include retina-sprite($customerIcons, tel);
}
.icon {
display: inline-block;
margin-right: rem(14);
margin-left: rem(-70);
vertical-align:middle;
}
}
}
.online-service-detail-page {
.qa-list {
background: #f0f0f0;
.question-item {
margin-bottom: rem(32);
border-top: 1px solid #c8c7cc;
border-bottom: 1px solid #c8c7cc;
background: #fff;
&:last-child {
margin-bottom: 0;
}
}
%qa {
margin-left: rem(30);
padding: 0 rem(40) 0 rem(10);
font-size: rem(30);
line-height: rem(76);
font-weight: bold;
}
.question {
@extend %qa;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid #c8c7cc;
}
}
.answer {
@extend %qa;
}
}
}
\ No newline at end of file
... ...
$mainFontC:#444444;
$subFontC:#b0b0b0;
$borderC:#e0e0e0;
$borderC:#b0b0b0;
$tableCellC:#eee;
@function px2rem($px){
@return $px*1rem/$pxConvertRem;
}
.good-detail-page {
/* basic component */
.page-block{
box-sizing:border-box;
width: 100%;
border-bottom: 1px solid $borderC;
border-top: 1px solid $borderC;
padding: 0 px2rem(28);
border-bottom: 2px solid $borderC;
border-top: 2px solid $borderC;
padding: 0 pxToRem(28px);
.title{
min-height: px2rem(88);
line-height: px2rem(88);
min-height: pxToRem(88px);
line-height: pxToRem(88px);
color: $mainFontC;
font:{
size : px2rem(28);
}
border-bottom: 1px solid $borderC;
font-size : pxToRem(28px);
border-bottom: 2px solid $borderC;
span{
color:#a0a0a0;
font:{
size:px2rem(18);
}
font-size:pxToRem(18px);
// vertical-align: baseline;
}
}
.detail{
margin-top: px2rem(20);
margin-bottom: px2rem(20);
table {
width: 100%;
tbody td{
margin-top: pxToRem(20px);
margin-bottom: pxToRem(20px);
font-size: pxToRem(24px);
line-height: pxToRem(36px);
&.table{
display: table;
width: 100%;
.row{
display: table-row;
.column{
display: table-cell;
padding: 0.4em 0.8em;
border:3px solid white;
font-size: px2rem(24);
border:2px solid white;
font-size: pxToRem(24px);
background-color: $tableCellC;
}
}
}
}
// table {
// width: 100%;
// tbody td{
// padding: 0.4em 0.8em;
// border:3px solid white;
// font-size: pxToRem(24px);
// background-color: $tableCellC;
// }
// }
}
}
.gap-block{
... ... @@ -57,15 +67,15 @@ $tableCellC:#eee;
// overflow: hidden;
.is-new-lable{
position: absolute;
left: px2rem(108);
top:px2rem(40);
height: px2rem(35);
width:px2rem(70);
left: pxToRem(108px);
top:pxToRem(40px);
height: pxToRem(35px);
width:pxToRem(70px);
color:#fff;
text-align: center;
font-size: px2rem(20);
line-height: px2rem(35);
font-size: pxToRem(20px);
line-height: pxToRem(35px);
background-color: #7cd881;
z-index: 16;
}
... ... @@ -78,7 +88,7 @@ $tableCellC:#eee;
.swiper-pagination{
position:absolute;
bottom: px2rem(40);
bottom: pxToRem(40px);
.swiper-pagination-bullet {
margin-right: 2px;
}
... ... @@ -90,9 +100,9 @@ $tableCellC:#eee;
}
.banner-swiper {
min-height: px2rem(600);
min-width: px2rem(448);
margin: px2rem(30) px2rem(96);
min-height: pxToRem(600px);
min-width: pxToRem(448px);
margin: pxToRem(30px) pxToRem(96px);
// position: relative;
overflow: hidden;
ul {
... ... @@ -107,55 +117,55 @@ $tableCellC:#eee;
.goodsName {
min-height: px2rem(83);
font-size: px2rem(28);
min-height: pxToRem(83px);
font-size: pxToRem(28px);
color: #fff;
padding-left: px2rem(25);
padding-right: px2rem(25);
line-height: px2rem(36);
padding-left: pxToRem(25px);
padding-right: pxToRem(25px);
line-height: pxToRem(36px);
background-color: #515150;
}
.goodsSubtitle{
min-height: px2rem(87);
font-size: px2rem(24);
line-height: px2rem(36);
min-height: pxToRem(87px);
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color:$subFontC;
padding-left:px2rem(28);
padding-right:px2rem(28);
border-bottom: 1px solid $borderC;
padding-left:pxToRem(28px);
padding-right:pxToRem(28px);
border-bottom: 2px solid $borderC;
background-color: #f4f4f4;
}
.price-date{
// width: 100%;
color:$subFontC;
min-height: px2rem(88);
padding-left:px2rem(28);
padding-right:px2rem(28);
border-bottom: 1px solid $borderC;
min-height: pxToRem(88px);
padding-left:pxToRem(28px);
padding-right:pxToRem(28px);
border-bottom: 2px solid $borderC;
}
.goodsPrice{
float: left;
font-size: px2rem(34.59);
font-size: pxToRem(34.59px);
h1{
display: inline-block;
line-height: px2rem(88);
line-height: pxToRem(88px);
}
.currentPrice{
color:red;
margin-right: px2rem(10);
margin-right: pxToRem(10px);
}
.previousPrice{
text-decoration:line-through;
}
}
.periodOfMarket{
font-size: px2rem(24);
font-size: pxToRem(24px);
float: right;
h1{
display: inline-block;
line-height: px2rem(88);
line-height: pxToRem(88px);
}
}
.goodsName,
... ... @@ -169,39 +179,40 @@ $tableCellC:#eee;
}
.vipLevel {
display: table;
min-height: px2rem(88);
padding-left:px2rem(28);
padding-right:px2rem(28);
font-size: px2rem(22);
min-height: pxToRem(88px);
padding-left:pxToRem(28px);
padding-right:pxToRem(28px);
font-size: pxToRem(22px);
color: #999999;
border-bottom: 1px solid $borderC;
border-bottom: 2px solid $borderC;
span{
display: table-cell;
vertical-align: middle;
}
.vip-img{
padding-right: px2rem(22);
padding-right: pxToRem(22px);
img{
width: px2rem(52);
height: px2rem(32);
width: pxToRem(52px);
height: pxToRem(32px);
}
}
.vip-price{
padding-right: px2rem(55);
padding-right: pxToRem(55px);
}
.vip-price:last-child{
padding-right: 0;
}
}
.goodsDiscount{
min-height: px2rem(88);
padding-left:px2rem(28);
padding-right:px2rem(28);
font-size: px2rem(28);
min-height: pxToRem(88px);
padding-left:pxToRem(28px);
padding-right:pxToRem(28px);
font-size: pxToRem(28px);
color: $mainFontC;
line-height: px2rem(88);
border-bottom: 1px solid $borderC;
line-height: pxToRem(88px);
border-bottom: 2px solid $borderC;
.iconfont{
// padding-right:28rem/$pxConvertRem;
font-size: inherit;
... ... @@ -212,7 +223,7 @@ $tableCellC:#eee;
}
.feedback-list-page {
padding-top: px2rem(30);
padding-top: pxToRem(30px);
background-color: #f0f0f0;
.nav-tab{
... ... @@ -220,20 +231,20 @@ $tableCellC:#eee;
}
.nav-tab {
height: px2rem(60);
padding: px2rem(10) 0;
height: pxToRem(60px);
padding: pxToRem(10px) 0;
background-color: #fff;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
border-top: 2px solid $borderC;
border-bottom: 2px solid $borderC;
}
.comment-nav, .consult-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: px2rem(60);
line-height: px2rem(60);
font-size: px2rem(28);
height: pxToRem(60px);
line-height: pxToRem(60px);
font-size: pxToRem(28px);
text-align: center;
color: #ccc;
... ... @@ -243,13 +254,13 @@ $tableCellC:#eee;
}
.comment-nav {
border-right: 1px solid #ccc;
border-right: 2px solid #ccc;
}
.comment-content{
.comment-content-main{
background-color: #fff;
border-bottom: 1px solid $borderC;
border-bottom: 2px solid $borderC;
.user-name{
font-size: px2rem(24);
line-height: px2rem(62);
... ... @@ -265,6 +276,20 @@ $tableCellC:#eee;
.detail-content{
font-size: px2rem(28);
line-height: px2rem(36);
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
padding-left: pxToRem(28px);
padding-right: pxToRem(18px);
}
.goods-spec,
.comment-time{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
font-size: pxToRem(28px);
line-height: pxToRem(36px);
}
.goods-spec,
.detail-content{
... ... @@ -277,6 +302,11 @@ $tableCellC:#eee;
}
.detail-content{
padding-right: px2rem(28);
padding-left: pxToRem(28px);
}
.detail-content{
padding-right: pxToRem(28px);
}
.comment-time{
... ... @@ -285,13 +315,14 @@ $tableCellC:#eee;
}
.comment-content-footer{
min-height: px2rem(88);
min-height: pxToRem(88px);
text-align: center;
background-color: #fff;
border-bottom: 1px solid $borderC;
line-height: px2rem(88);
font-size: px2rem(28);
border-bottom: 2px solid $borderC;
line-height: pxToRem(88px);
font-size: pxToRem(28px);
a{
color: #e0e0e0;
.iconfont{
... ... @@ -308,7 +339,7 @@ $tableCellC:#eee;
}
.enter-store{
min-height: px2rem(100);
min-height: pxToRem(100px);
display: table;
a{
display: table-cell;
... ... @@ -319,19 +350,19 @@ $tableCellC:#eee;
// padding-right: 35rem/$pxConvertRem;
img{
width: px2rem(109);
height: px2rem(68);
width: pxToRem(109px);
height: pxToRem(68px);
margin-left: 0;
margin-right: px2rem(-25);
margin-right: pxToRem(-25px);
}
}
.store-name{
font-size: px2rem(34);
font-size: pxToRem(34px);
color:$mainFontC;
}
.store-link{
font-size:px2rem(28) ;
font-size:pxToRem(28px) ;
color:$subFontC;
text-align: right;
span{
... ... @@ -339,9 +370,51 @@ $tableCellC:#eee;
}
}
}
.goods-desc{
table{
// .goods-desc{
// table{
// }
// }
.materials{
.detail{
img{
display: block;
overflow: hidden;
width: pxToRem(90px);
height: pxToRem(120px);
padding-right: pxToRem(20px);
float: left;
}
.material-desc{
// float: left;
font-size: pxToRem(24px);
}
}
}
.product-detail{
.detail{
img{
margin-top: pxToRem(20px);
width: pxToRem(581px);
height: pxToRem(772px);
}
}
}
.detail-swiper{
.swiper-wrapper{
.swiper-slide{
width: pxToRem(114px);
div{
text-align: center;
}
div.cell{
background-color: $tableCellC;
padding:pxToRem(15px) 0;
border: 1px solid #fff;
}
}
}
}
}
... ...
{{> layout/header}}
<div class="online-service-page yoho-page">
<div class="question">
<div class="question-title">问题查询</div>
<div class="question-tab">
<span class="tab-item" data-tab="order">订单问题</span>
<span class="line">|</span>
<span class="tab-item current" data-tab="shopping">购物问题</span>
<span class="line">|</span>
<span class="tab-item" data-tab="other">其他问题</span>
</div>
{{#question}}
<ul class="question-list {{#current}}current{{/current}}" data-tab-name="{{name}}">
{{#list}}
<li class="question-item">
<a href="{{link}}" title="{{title}}">
{{title}}
<span class="iconfont icon-yoho-enter"></span>
</a>
</li>
{{/list}}
</ul>
{{/question}}
</div>
<div class="connect-info">
<div class="connect-item connect-online">
<a href="#" title="在线客服">
<span class="icon icon-chat"></span>
在线客服
<span class="iconfont icon-yoho-enter"></span>
</a>
</div>
<div class="connect-item connect-tel">
<a href="tel:400-889-9649" title="电话客服">
<span class="icon icon-tel"></span>
电话客服
<p>
400-889-9649 &nbsp;&nbsp; 09:00 - 22:30 &nbsp; (周一至周日)
</p>
</a>
</div>
</div>
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="online-service-detail-page yoho-page">
<div class="qa-list">
{{# list}}
<div class="question-item">
<div class="question">Q：{{q}}</div>
<div class="answer">{{a}}</div>
</div>
{{/ list}}
</div>
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="good-detail-page yoho-page">
... ... @@ -125,27 +126,23 @@
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail">
<table>
<tbody>
<tr>
<td>编号：{{nubmer}}</td>
<td>帽型：{{hatType}}</td>
</tr>
<tr>
<td>颜色：{{color}}</td>
<td>帽檐：{{bongrace}}</td>
</tr>
<tr>
<td>类型：{{type}}</td>
<td>细节：{{goodsDetail}}</td>
</tr>
<tr>
<td>性别：{{gender}}</td>
<td>风格：{{style}}</td>
</tr>
</tbody>
</table>
<div class="detail table">
<div class="row">
<div class="column">编号：{{nubmer}}</div>
<div class="column">帽型：{{hatType}}</div>
</div>
<div class="row">
<div class="column">颜色：{{color}}</div>
<div class="column">帽檐：{{bongrace}}</div>
</div>
<div class="row">
<div class="column">类型：{{type}}</div>
<div class="column">细节：{{goodsDetail}}</div>
</div>
<div class="row">
<div class="column">性别：{{gender}}</div>
<div class="column">风格：{{style}}</div>
</div>
</div>
{{/detail}}
</div>
... ... @@ -153,15 +150,29 @@
<div class="gap-block"></div>
{{#sizeInfo}}
<div class="size-info page-block">
<h1 class="title">
尺码信息
<span class="en-title">SIZE INFO</span>
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail">
</div>
<div class="swiper-container detail-swiper" id="size-swiper-container">
<div class="swiper-wrapper">
{{#list}}
<div class="swiper-slide blue-slide" >
<div class="size-name cell">{{name}}</div>
<div class="size-m cell">{{sizem}}</div>
<div class="size-xl cell">{{sizexl}}</div>
</div>
{{/list}}
</div>
</div>
</div>
{{/detail}}
</div>
{{/sizeInfo}}
<div class="gap-block"></div>
... ... @@ -176,6 +187,32 @@
</div>
<div class="gap-block"></div>
{{#reference}}
<div class="size-info page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail">
<div class="swiper-container detail-swiper" id="reference-swiper-container">
<div class="swiper-wrapper">
{{#list}}
<div class="swiper-slide blue-slide" >
<div class="model-name cell">{{name}}</div>
<div class="first-model cell">{{firstModel}}</div>
<div class="second-model cell">{{secondModel}}</div>
</div>
{{/list}}
</div>
</div>
</div>
{{/detail}}
</div>
{{/reference}}
<div class="gap-block"></div>
{{#materials}}
<div class="materials page-block">
... ... @@ -186,6 +223,7 @@
<div class="detail">
<img src="{{img}}" alt="">
<p class="material-desc">
{{desc}}
</p>
</div>
... ... @@ -194,15 +232,18 @@
<div class="gap-block"></div>
<div class="size-info page-block">
{{#productDetail}}
<div class="product-detail page-block">
<h1 class="title">
商品详情
<span class="en-title">SIZE INFO</span>
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail">
<p>{{desc}}</p>
<img src="{{img}}" alt="">
</div>
</div>
{{/productDetail}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
... ... @@ -166,12 +166,14 @@ class HomeController extends AbstractAction
$this->setTitle('优惠券');
$this->setNavHeader('优惠券', true, SITE_MAIN);
// $uid = $this->getUid();
$uid = 967016;
$uid = 8826435;
$status = $this->get('status', 0);
$coupons = array(
'couponsUrl' => \Index\UserModel::getCouponData($uid, $status),
'couponsPage' => true
);
print_r($coupons);
$this->_view->display('coupons', $coupons);
}
... ... @@ -246,6 +248,12 @@ class HomeController extends AbstractAction
$service = \Index\UserModel::getOnlineServiceData();
print_r($service);
$this->_view->display('online_service', array(
'onlineServicePage' => true,
'pageFooter' => true,
'service' => $service
));
}
/**
... ...
... ... @@ -110,20 +110,36 @@ SHOE BQT KEN BLOCK',
'detail' =>array(
'list'=>array(
array(
'size'=>'M',
'shoulderWidth'=>'43',
'bodyLength'=>'102',
'sleevesLength'=>'65',
'chestMeasurement'=>'90'
),
'name'=>'尺寸',
'sizem'=>'m',
'sizexl' =>'XL'
),
array(
'size'=>'XL',
'shoulderWidth'=>'46',
'bodyLength'=>'106',
'sleevesLength'=>'69',
'chestMeasurement'=>'96'
)
)
'name'=>'肩宽',
'sizem'=>'43',
'sizexl' =>'46'
),
array(
'name'=>'衣长',
'sizem'=>'102',
'sizexl' =>'106'
),
array(
'name'=>'肩宽',
'sizem'=>'90',
'sizexl' =>'96'
),
array(
'name'=>'胸围',
'sizem'=>'90',
'sizexl' =>'96'
),
array(
'name'=>'xx',
'sizem'=>'xx',
'sizexl' =>'xx'
)
)
)
),
... ... @@ -143,26 +159,40 @@ SHOE BQT KEN BLOCK',
'title' => '模特试穿',
'enTitle' =>'REFERENCE',
'detail'=>array(
'list' => array(
array(
'avatar' =>'',
'name' =>'Oliver',
'height' => '170',
'weight' =>'55',
'BWH' =>'78/70/87',
'size' =>'S'
),
array(
'avatar' =>'',
'name' =>'Jvly',
'height' => '170',
'weight' =>'59',
'BWH' =>'78/70/87',
'size' =>'L'
)
)
)
'detail' =>array(
'list'=>array(
array(
'name'=>'头像',
'firstModel'=>'',
'secondModel' =>''
),
array(
'name'=>'模特',
'firstModel'=>'Oliver',
'secondModel' =>'Jvly'
),
array(
'name'=>'身高',
'firstModel'=>'175',
'secondModel' =>'170'
),
array(
'name'=>'体重',
'firstModel'=>'53',
'secondModel' =>'59'
),
array(
'name'=>'三围',
'firstModel'=>'78/70/87',
'secondModel' =>'78/70/87'
),
array(
'name'=>'吊牌尺',
'firstModel'=>'S',
'secondModel' =>'L'
)
)
)
),
'materials' => array(
... ... @@ -173,8 +203,10 @@ SHOE BQT KEN BLOCK',
),
'productDetail' =>array(
'title' => '商品详情',
'enTitle' =>'DETAILS',
'desc' => 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。',
'img' =>''
'img' =>'http://static.dev.yohobuy.com/img/product/product.png'
)
);
... ...