fe / YOHOBUYPC · Commits

Go to a project

Authored by lynnic
Commit f735917c59165291cfb3fcb064e06bb424e64b40 1 parent da2dd89e

product detail

Inline Side-by-side
Showing 8 changed files with 594 additions and 162 deletions
... ... @@ -20,6 +20,24 @@ goodsSwiper = new Swiper('.banner-swiper', {
prevButton: '.swiper-button-prev'
});
$('#nav-tab li').on('click',function(){
if(!$(this).hasClass('focus')){
$('#nav-tab li').each(function(){
$(this).removeClass('focus');
});
$('#feedback-content .content').each(function(){
console.log('hello');
$(this).addClass('hide');
});
$(this).addClass('focus');
var index = $(this).index();
$('#feedback-content .content:eq('+index+')').removeClass('hide');
}
});
// $('#iframe').load(function() {
// var mainheight = $(this).contents().find('body').height() + 30;
// $(this).height(mainheight);
... ...
$mainFontC:#444444;
$subFontC:#b0b0b0;
$borderC:#e0e0e0;
$tableCellC:#eee;
@function pxToRem($px){
@return $px*1rem/$pxConvertRem;
}
.good-detail-page {
.banner-top {
height: 660rem / $pxConvertRem;
overflow: hidden;
position: relative;
/* basic component */
.page-block{
box-sizing:border-box;
width: 100%;
border-bottom: 1px solid $borderC;
border-top: 1px solid $borderC;
padding: 0 pxToRem(28);
.title{
min-height: pxToRem(88);
line-height: pxToRem(88);
color: $mainFontC;
font:{
size : pxToRem(28);
}
border-bottom: 1px solid $borderC;
.swiper-pagination {
span{
color:#a0a0a0;
font:{
size:pxToRem(18);
}
// vertical-align: baseline;
}
}
.detail{
margin-top: pxToRem(20);
margin-bottom: pxToRem(20);
table {
width: 100%;
tbody td{
padding: 0.4em 0.8em;
border:3px solid white;
font-size: pxToRem(24);
background-color: $tableCellC;
}
}
}
}
.gap-block{
min-height: 30rem/$pxConvertRem;
background-color: #f0f0f0;
}
.banner-container{
position: relative;
// overflow: hidden;
.is-new-lable{
position: absolute;
left: 0;
right: 0;
bottom: 40rem / $pxConvertRem;
left: pxToRem(108);
top:pxToRem(40);
height: pxToRem(35);
width:pxToRem(70);
color:#fff;
text-align: center;
.pagination-inner {
display: inline-block;
span {
display: inline-block;
width: 14rem / $pxConvertRem;
height: 14rem / $pxConvertRem;
background: #fff;
opacity: 0.5;
margin: 0 (9rem / $pxConvertRem);
border-radius: 50%;
font-size: pxToRem(20);
line-height: pxToRem(35);
background-color: #7cd881;
z-index: 16;
}
span.swiper-active-switch {
opacity: 1;
}
.swiper-pagination-bullet-active {
background-color: #000000;
.banner-top{
// width: 100%;
min-height: 660rem / $pxConvertRem;
overflow: hidden;
position: relative;
.swiper-pagination{
position:absolute;
bottom: pxToRem(40);
.swiper-pagination-bullet {
margin-right: 2px;
}
.swiper-pagination-bullet-active {
background-color: #000;
}
}
}
.banner-swiper {
height: 600rem / $pxConvertRem;
width: 448rem / $pxConvertRem;
margin: 30rem / $pxConvertRem 96rem / $pxConvertRem;
position: relative;
min-height: pxToRem(600);
min-width: pxToRem(448);
margin: pxToRem(30) pxToRem(96);
// position: relative;
overflow: hidden;
ul {
position: relative;
... ... @@ -48,124 +105,243 @@
}
}
.goodsName {
font-size: 28rem / $pxConvertRem;
color: #222222;
padding-bottom: 6px;
text-align: center;
min-height: pxToRem(83);
font-size: pxToRem(28);
color: #fff;
padding-left: pxToRem(25);
padding-right: pxToRem(25);
line-height: pxToRem(36);
background-color: #515150;
}
.goodsTitle {
font-size: 36rem / $pxConvertRem;
text-align: center;
padding-bottom: 2px;
font-weight: bold;
.goodsSubtitle{
min-height: pxToRem(87);
font-size: pxToRem(24);
line-height: pxToRem(36);
color:$subFontC;
padding-left:pxToRem(28);
padding-right:pxToRem(28);
border-bottom: 1px solid $borderC;
background-color: #f4f4f4;
}
.price-date{
// width: 100%;
color:$subFontC;
min-height: pxToRem(88);
padding-left:pxToRem(28);
padding-right:pxToRem(28);
border-bottom: 1px solid $borderC;
}
.goodsPrice{
float: left;
font-size: pxToRem(34.59);
h1{
display: inline-block;
line-height: pxToRem(88);
}
.currentPrice{
color:red;
margin-right: pxToRem(10);
}
.previousPrice{
text-decoration:line-through;
}
}
.periodOfMarket{
font-size: pxToRem(24);
float: right;
h1{
display: inline-block;
line-height: pxToRem(88);
}
}
.goodsName,
.goodsSubtitle{
// width: 100%;
display:table;
span{
display: table-cell;
vertical-align: middle;
}
}
.vipLevel {
display: table;
min-height: pxToRem(88);
padding-left:pxToRem(28);
padding-right:pxToRem(28);
font-size: pxToRem(22);
color: #999999;
text-align: center;
padding-bottom: 15px;
}
.goToBuy {
padding: 0 10px;
margin-bottom: 20px;
text-align: center;
overflow: hidden;
.AddFavorite {
background-color: #cccccc;
width: 110rem / $pxConvertRem;
height: 100rem / $pxConvertRem;
line-height: 100rem / $pxConvertRem;
font-size: 1.7em;
color: white;
margin-right: 20rem / $pxConvertRem;
overflow: hidden;
float: left !important;
border-bottom: 1px solid $borderC;
span{
display: table-cell;
vertical-align: middle;
}
.vip-img{
padding-right: pxToRem(22);
img{
width: pxToRem(52);
height: pxToRem(32);
}
}
.vip-price{
padding-right: pxToRem(55);
}
.vip-price:last-child{
padding-right: 0;
}
}
.goodsDiscount{
min-height: pxToRem(88);
padding-left:pxToRem(28);
padding-right:pxToRem(28);
font-size: pxToRem(28);
color: $mainFontC;
line-height: pxToRem(88);
border-bottom: 1px solid $borderC;
.iconfont{
// padding-right:28rem/$pxConvertRem;
font-size: inherit;
float: right;
color:#e0e0e0;
text-align: right;
}
}
.toBuyNow {
height: 50px;
line-height: 50px;
color: white;
display: block;
margin-left: 2.4em;
font-size: 1.84em;
overflow: hidden;
font-weight: bold;
.feedback-list-page {
padding-top: pxToRem(30);
background-color: #f0f0f0;
background-color: #ed0010;
.nav-tab{
width: 100%;
}
.nav-tab {
height: pxToRem(60);
padding: pxToRem(10) 0;
background-color: #fff;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
}
.discountNotice {
margin-bottom: 20px;
.comment-nav, .consult-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: pxToRem(60);
line-height: pxToRem(60);
font-size: pxToRem(28);
text-align: center;
color: #ccc;
p {
height: 44px;
line-height: 44px;
padding: 0 10px;
margin-bottom: 1px;
font-size: 12px;
background-color: #eeeeee;
&.focus {
color: #000;
}
}
.goToShop {
margin: 0 10px 20px;
padding: 10px;
height: 47px;
line-height: 47px;
overflow: hidden;
background-color: #eee;
.comment-nav {
border-right: 1px solid #ccc;
}
.fz14 {
font-size: 1.2em;
float: right !important;
.comment-content{
.comment-content-main{
background-color: #fff;
border-bottom: 1px solid $borderC;
.user-name{
font-size: pxToRem(24);
line-height: pxToRem(62);
color:$mainFontC;
padding-left: pxToRem(28);
padding-right: pxToRem(18);
}
.goods-spec,
.comment-time{
font-size: pxToRem(24);
line-height: pxToRem(62);
}
.detail-content{
font-size: pxToRem(28);
line-height: pxToRem(36);
}
.goods-spec,
.detail-content{
color:$mainFontC;
}
.detail-content,
.comment-time{
padding-left: pxToRem(28);
}
.detail-content{
padding-right: pxToRem(28);
.detailSize {
padding: 0 10px;
margin-bottom: 20px;
}
.comment-time{
color:#c1c1c1;
}
}
h3 {
.comment-content-footer{
min-height: pxToRem(88);
text-align: center;
font-size: 1.3em;
margin-bottom: 5px;
background-color: #fff;
span {
font-size: 0.6em;
display: block;
text-transform: uppercase;
border-bottom: 1px solid $borderC;
line-height: pxToRem(88);
font-size: pxToRem(28);
a{
color: #e0e0e0;
.iconfont{
font-size: inherit;
}
}
table {
background-color: white;
width: 100%;
}
td {
text-align: left;
padding: 0.4em 0.8em;
border: 1px solid white;
}
background-color: #eee;
font-size: 1em;
}
.content.hide {
display: none;
}
}
.enter-store{
min-height: pxToRem(100);
display: table;
a{
display: table-cell;
vertical-align: middle;
text-align: left;
}
.store-logo{
// padding-right: 35rem/$pxConvertRem;
img{
width: pxToRem(109);
height: pxToRem(68);
.detail-img {
padding: 0 10px;
margin-bottom: 10px;
margin-left: 0;
margin-right: pxToRem(-25);
}
}
.store-name{
font-size: pxToRem(34);
color:$mainFontC;
}
.store-link{
font-size:pxToRem(28) ;
color:$subFontC;
text-align: right;
span{
font-size: inherit;
}
}
}
.goods-desc{
table{
}
}
}
... ...
{{> layout/header}}
<div class="good-detail-page yoho-page">
<div class="banner-container">
<h1 class="is-new-lable">NEW</h1>
{{# bannerTop}}
{{> product/banner_swiper_arrow}}
{{/ bannerTop}}
</div>
{{# goodsName}}
<h2 class="goodsName">{{.}}</h2>
<h2 class="goodsName"><span>{{.}}</span></h2>
{{/ goodsName}}
{{# goodsTitle}}
{{# goodsSubtitle}}
<h1 class="goodsSubtitle"><span>{{.}}</span></h1>
{{/ goodsSubtitle}}
<!-- {{# goodsTitle}}
<h1 class="goodsTitle">{{.}}</h1>
{{/ goodsTitle}}
{{/ goodsTitle}} -->
{{# vipLevel}}
<div class="price-date">
{{#goodsPrice}}
<div class="goodsPrice">
<h1 class="currentPrice">{{currentPrice}}</h1>
<h1 class="previousPrice">{{previousPrice}}</h1>
</div>
{{/goodsPrice}}
{{#periodOfMarket}}
<div class="periodOfMarket">
<h1>上市期：</h1>
<h1 >{{.}}</h1>
</div>
{{/periodOfMarket}}
</div>
<!-- {{# vipLevel}}
<div class="vipLevel">
{{# list}}
{{#if @last}}
... ... @@ -22,35 +50,154 @@
{{/if}}
{{/ list}}
</div>
{{/ vipLevel}} -->
{{# vipLevel}}
<div class="vipLevel">
{{# list}}
<span class="vip-img"><img src="{{img}}" alt=""></span>
<span class="vip-price">{{text}}</span>
{{/ list}}
</div>
{{/ vipLevel}}
{{# goToBuy}}
<div class="goToBuy">
<a href="javascript:void(0);" class="AddFavorite" id="favorite" fav="0" name="collect"><em class="icon-uni31"></em></a>
<a href="{{url}}" name="buy" class="toBuyNow">立即购买</a>
{{#goodsDiscount}}
<div class="goodsDiscount">
<h1>{{.}}<span class="iconfont">&#xe609;</span></h1>
</div>
{{/ goToBuy}}
{{/goodsDiscount}}
{{# discountNotice}}
<div class="discountNotice">
{{# list}}
<p><span>{{title}}</span>{{desc}}</p>
{{/ list}}
<div class="feedback-list-page ">
{{# feedbacks}}
<ul id="nav-tab" class="nav-tab clearfix">
<li class="comment-nav focus">{{commentName}}</li>
<li class="consult-nav">{{consultName}}</li>
</ul>
<div id="feedback-content" >
<div class="comment-content content ">
<div class="comment-content-main">
{{# comments}}
<span class="user-name">
{{userName}}
</span>
<span class="goods-spec">
{{desc}}
</span>
<p class="detail-content">
{{content}}
</p>
<span class="comment-time">
{{time}}
</span>
{{/ comments}}
</div>
<div class="comment-content-footer">
<a href="{{moreComments}}">查看更多 <span class="iconfont">&#xe604;</span></a>
</div>
</div>
{{/ discountNotice}}
<div class="consult-content content hide">
{{# consults}}
<!-- {{> guang/ps_item}} -->
{{/ consults}}
</div>
</div>
{{/ feedbacks}}
</div>
<div class="gap-block"></div>
{{# enterStore}}
<div class="enter-store page-block">
<a class="store-logo" href="{{url}}" style="">
<img src="{{img}}" alt="{{storeName}}">
</a>
<a class="store-name" href="{{url}}">{{storeName}}</a>
<a class="store-link" href="{{url}}">进入店铺<span class="iconfont">&#xe604;</span></a>
</div>
{{/ enterStore}}
<div class="gap-block"></div>
<!-- <iframe src="http://www.baidu.com" id="main" width="320" height="300" frameborder="0" scrolling="auto"></iframe> -->
{{#goodsDescription}}
<div class="goods-desc page-block">
<h1 class="title">
{{title}}
<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>
{{/detail}}
</div>
{{/goodsDescription}}
<div class="gap-block"></div>
{{# goToShop}}
<div class="goToShop">
<a href="{{url}}">
<span class="fn-right fz14">进入店铺 <em class="icon-uni3E"></em></span>
<img class="lazy" data-original="{{img}}" alt="" style="display: inline-block;">
{{title}}</a>
<div class="size-info page-block">
<h1 class="title">
尺码信息
<span class="en-title">SIZE INFO</span>
</h1>
<div class="detail">
</div>
</div>
{{/ goToShop}}
<iframe src="http://www.baidu.com" id="main" width="320" height="300" frameborder="0" scrolling="auto"></iframe>
<div class="gap-block"></div>
<div class="size-info page-block">
<h1 class="title">
测量方式
<span class="en-title">SIZE INFO</span>
</h1>
<div class="detail">
</div>
</div>
<div class="gap-block"></div>
<div class="size-info page-block">
<h1 class="title">
商品材质
<span class="en-title">SIZE INFO</span>
</h1>
<div class="detail">
</div>
</div>
<div class="gap-block"></div>
<div class="size-info page-block">
<h1 class="title">
商品详情
<span class="en-title">SIZE INFO</span>
</h1>
<div class="detail">
</div>
</div>
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
... ... @@ -18,13 +18,13 @@ class DetailController extends AbstractAction
'pageHeader' => array (
'navBack' => 'sss ',
'navHome' => 'sss ',
'navTitle' => '商品详情'
'navTitle' => '商品详情TEST'
),
'bannerTop' => array (
'list' => array (
array (
'url' => '',
'img' => 'http://img10.static.yhbimg.com/goodsimg/2015/10/12/04/0100ba0d8512c3af064873f5a1e3805e45.jpg?imageMogr2/thumbnail/450x600/extent/450x600/background/d2hpdGU=/position/center/quality/90'
'img' => 'http://img13.static.yhbimg.com/goodsimg/2015/10/18/03/0250c3935f86dbd2baa7d45603d19fd637.jpg?imageMogr2/thumbnail/450x600/extent/450x600/background/d2hpdGU=/position/center/quality/90'
),
array (
'url' => '',
... ... @@ -36,52 +36,143 @@ class DetailController extends AbstractAction
)
)
),
'goodsName' => 'CHUMS 男式纯色logo休闲长袖T恤',
'goodsTitle' => '￥298.00',
'goodsName' => 'Stussy No. 4 BOX TEE DC SPAR HIGH WC
SHOE BQT KEN BLOCK',
'goodsSubtitle'=>'【全民拼抢购】经典印花T恤，满4件免一件！全场低至
9.9元，拼购时代High起来。',
'goodsPrice' =>array(
'currentPrice'=>'¥298.00',
'previousPrice'=>'¥598.00'
),
'periodOfMarket'=>'11月',
'goodsTitle' => '¥298.00',
'vipLevel' => array (
'list' => array (
array (
'text' => '银卡284.00'
'img'=>'http://static.dev.yohobuy.com/img/product/silver.png',
'text' => '¥284.00'
),
array (
'text' => '金卡269.00'
'img'=>'http://static.dev.yohobuy.com/img/product/golden.png',
'text' => '¥269.00'
),
array (
'text' => '白金263.00'
'img'=>'http://static.dev.yohobuy.com/img/product/platinum.png',
'text' => '¥263.00'
)
)
),
'goToBuy' => array (
'url' => 'http://m.yohobuy.com/product/buy_269003_348031.html'
'goodsDiscount'=>'【summer final sale】满¥499立享6.8折',
'feedbacks'=>array(
'commentName'=>'商品评价(15)',
'consultName' =>'购买咨询(2)',
'moreComments'=>'http://www.baidu.com',
'comments'=>array(
array(
'userName'=>'Lynnic',
'desc'=>'购买了白色Mate7',
'content'=>'活动时买的，挺超值。上身效果也不错。质量
很好，买送人的，很满意。而且物流相当给...',
'time'=>'2014-08-12 10:24:26'
)
),
'discountNotice' => array (
'list' => array (
array (
'title' => '打折',
'desc' => '【深秋优品加持】折上满￥599享75折'
'consults'=>array(
)
),
array (
'title' => '打折',
'desc' => '【深秋优品加持】折上满￥399享85折'
'enterStore'=>array(
'img'=>'http://static.dev.yohobuy.com/img/product/store.png',
'storeName'=>'Stussy',
'url'=>'http://stussy.m.yohobuy.com/'
),
array (
'title' => '加价购',
'desc' => '【全场29元加价购】'
'goodsDescription'=>array(
'title' =>'商品描述',
'enTitle'=>'DESCRIPTON',
'detail'=>array(
'nubmer' =>'51018059',
'color' =>'黑',
'type' =>'帽子',
'gender' =>'女款',
'hatType' =>'棒球帽',
'bongrace' =>'平檐款式',
'goodsDetail'=>'字母图案',
'style'=>'街头'
)
),
array (
'title' => '加价购',
'desc' => '【全场49元加价购】'
'sizeInfo'=>array(
'title' => '尺码信息',
'enTitle' =>'SIZE INFO',
'detail' =>array(
'list'=>array(
array(
'size'=>'M',
'shoulderWidth'=>'43',
'bodyLength'=>'102',
'sleevesLength'=>'65',
'chestMeasurement'=>'90'
),
array (
'title' => '加价购',
'desc' => '【全场69元加价购】'
array(
'size'=>'XL',
'shoulderWidth'=>'46',
'bodyLength'=>'106',
'sleevesLength'=>'69',
'chestMeasurement'=>'96'
)
)
)
),
'measurementMethod'=>array(
'title' => '测量方式',
'enTitle' =>'SIZE INFO',
'detail'=>array(
'kind' =>'上衣' ,
'enKind'=>'TOPS',
'img' =>''
)
),
'reference' => array(
'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'
)
)
)
),
'meterials' => array(
'img' => '',
'desc' =>'用各种洗涤剂，可手洗机洗，但不宜氯漂，宜阴干，避免曝晒，以免深色衣物褪色，在日光下晾晒时，将里面朝外。浸泡时间不能太长，避免褪色，深色与浅色衣服最好请分开洗涤，避免染色。'
),
'goToShop' => array (
'url' => 'http://chums.m.yohobuy.com',
'title' => 'CHUMS',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/08/14/11/022c089923cc22b3b068f862dcd3b9d454.jpg?imageView/1/w/47/h/47" data-original="http://img12.static.yhbimg.com/brandLogo/2015/08/14/11/022c089923cc22b3b068f862dcd3b9d454.jpg?imageView/1/w/47/h/47'
'productDetail' =>array(
'desc' => 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。',
'img' =>''
)
);
... ...