fe / YOHOBUYPC · Commits

Go to a project

Authored by hf
Commit c5cad0dcbd18dab7001564583776118d79c6540e 2 parents 5f60f6ca 798b4fc5

do merge tag 1.1.14 modify tap event to touchstart or touchend

Inline Side-by-side
Showing 16 changed files with 1171 additions and 998 deletions
... ... @@ -1050,4 +1050,161 @@
],
//若无收藏则不传infos
}
}
\ No newline at end of file
}
### 商品详情页
{
'goodsDetailPage': true,
'pageHeader': {
'navBack': 'sss ',
'navHome': 'sss ',
'navTitle': '商品详情'
},
'bannerTop': {
'list': [
{
'img' : ''
},
...
]
},
'goodsName' : 'Stussy No. 4 BOX TEE ',
'goodsSubtitle' : '【全民拼抢购】经典印花T恤，满4件免一件！',
'goodsPrice' : {
'currentPrice' : '¥298.00',
'previousPrice' : '¥598.00'
},
'periodOfMarket' : '11月',
'goodsTitle' : '¥298.00',
'vipLevel' : {
'list' : [
{
'text' : '¥284.00'
},
...
]
},
'goodsDiscount' : {
'listLength' : 2,
'list' : [
{
'text' : '【BACK TO SCHOOL】满￥499赠送Paul Franke帽子一个，多买多送！'
},
...
]
},
'feedbacks' : {
'commentsNum' : 0,
'consultsNum' : 1,
'link' : '',
'comments' : [
{
'userName' : 'Lynnic',
'desc' : '购买了白色Mate7',
'content' : '活动时买的',
'time' : '2014-08-12 10:24:26'
},
...
],
'consults' : [
{
'question' : '您好 我一米七七 140斤 穿M的行吗',
'time' : '2014-08-12 10:24:26',
'answer' : ''
},
...
]
},
'enterStore' : {
'img' : '',
'storeName' : 'Stussy',
'url' : 'http://stussy.m.yohobuy.com/'
},
'goodsDescription' : {
'title' : '商品描述',
'enTitle' : 'DESCRIPTON',
'detail' : {
'list':[
{
'param' : '编号: 51018059'
},
...
]
},
'desc': 'balabala'
},
'sizeInfo' : {
'title' : '尺码信息',
'enTitle' : '',
'detail' : {
'list' : [
{
'params' : [
{
'param' : '尺寸'
},
...
]
},
...
]
}
},
'measurementMethod' : {
'title': '测量方式',
'enTitle': 'MEASUREMENT METHOD',
'img' : '',
},
'reference' : {
'title' : '模特试穿',
'enTitle' : '',
'detail' : {
'list' : [
{
'fieldName' : '头像',
'firstModel' : '', //头像图片url
'secondModel' =>''
},
...
]
}
},
'materials' : {
'title' : '商品材质',
'enTitle' : '',
'img' : '',
'desc' : '用各种洗涤剂',//remark
},
'washTips' : {
'list' : [
{
"caption":"不可干洗",
"img":"http://static.yohobuy.com/images/wash_5.png"
}
]
}
'productDetail' : {
'title' : '商品详情',
'enTitle' : '',
'desc' : 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计',
'img' : ''
},
'cartInfo' : {
'numInCart' : 3,
'goodsInstore' : 0
}
}
... ...
... ... @@ -178,9 +178,10 @@ class Helpers
* @param int $width 图片的宽度
* @param int $height 图片的高度
* @param bool $isApp 判断是不是APP访问
* @param bool $showPoint 商品价格是否显示小数位，默认显示
* @return array | false
*/
public static function formatProduct($productData, $showTags = true, $showNew = true, $showSale = true, $width = 290, $height = 388, $isApp = false)
public static function formatProduct($productData, $showTags = true, $showNew = true, $showSale = true, $width = 290, $height = 388, $isApp = false, $showPoint = true)
{
// 商品信息有问题，则不显示
if (!isset($productData['product_skn']) || !isset($productData['goods_list'][0])) {
... ... @@ -202,8 +203,12 @@ class Helpers
$result['product_id'] = $productData['product_id'];
$result['thumb'] = Images::getImageUrl($productData['default_images'], $width, $height);
$result['name'] = $productData['product_name'];
$result['price'] = empty($productData['market_price']) ? false : $productData['market_price'] . '.00';
$result['salePrice'] = $productData['sales_price'] . '.00';
$result['price'] = empty($productData['market_price']) ? false : $productData['market_price'];
$result['salePrice'] = $productData['sales_price'];
if ($showPoint) {
$result['price'] && $result['price'] .= '.00';
$result['salePrice'] && $result['salePrice'] .= '.00';
}
$result['is_soon_sold_out'] = ($productData['is_soon_sold_out'] === 'Y');
$result['url'] = SITE_MAIN . '/product/pro_' . $productData['product_id'] . '_'
. $productData['goods_list'][0]['goods_id']
... ...
... ... @@ -160,12 +160,48 @@ $header.on('touchstart', 'a', function() {
$(this).removeClass('highlight');
});
$header.on('touchstart', 'a', function() {
$header.find('a').removeClass('highlight');
$(this).addClass('highlight');
}).on('touchend touchcancel', 'a', function() {
$(this).removeClass('highlight');
});
(function() {
var lastTime = 0,
prefixes = 'webkit moz ms o'.split(' '),
requestAnimationFrame = window.requestAnimationFrame,
cancelAnimationFrame = window.cancelAnimationFrame,
prefix,
i;
//通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
for (i = 0; i < prefixes.length; i++) {
if (requestAnimationFrame && cancelAnimationFrame) {
break;
}
prefix = prefixes[i];
requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame'];
cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] ||
window[prefix + 'CancelRequestAnimationFrame'];
}
//如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
if (!requestAnimationFrame || !cancelAnimationFrame) {
requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
//为了使setTimteout的尽可能的接近每秒60帧的效果
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
cancelAnimationFrame = function(id) {
window.clearTimeout(id);
};
}
window.requestAnimationFrame = requestAnimationFrame;
window.cancelAnimationFrame = cancelAnimationFrame;
}());
//暴露公共接口
window.cookie = cookie;
... ...
... ... @@ -62,11 +62,12 @@ function initInfosEvt($container) {
$btn,
$info;
e.preventDefault();
//e.preventDefault();
//点赞
$btn = $this.closest('.like-btn');
if ($btn.length > 0) {
e.preventDefault();
if ($btn.hasClass('like')) {
opt = 'cancel';
}
... ... @@ -99,6 +100,7 @@ function initInfosEvt($container) {
//APP收藏
$btn = $this.closest('.collect-btn');
if ($btn.length > 0) {
e.preventDefault();
if ($btn.hasClass('collected')) {
opt = 'cancel';
}
... ...
var $ = require('jquery');
var commentsNum;
(function() {
var consultsNum = $('#nav-tab .consults-num').html() - 0;
commentsNum = $('#nav-tab .comments-num').html() - 0;
$('#nav-tab li').each(function() {
$(this).removeClass('focus');
});
$('#feedback-content .content').each(function() {
$(this).addClass('hide');
});
if (0 !== commentsNum) {
$('#nav-tab .comment-nav').addClass('focus');
$('#feedback-content .comment-content').removeClass('hide');
} else if (0 !== consultsNum) {
$('#nav-tab .consult-nav').addClass('focus');
$('#feedback-content .consult-content').removeClass('hide');
}
})();
$('#nav-tab li').on('click', function() {
var index = $(this).index();
if ($(this).hasClass('comment-nav') && 0 === commentsNum) {
alert('暂无商品评价');
} else {
if (!$(this).hasClass('focus')) {
$('#nav-tab li').each(function() {
$(this).removeClass('focus');
});
$('#feedback-content .content').each(function() {
$(this).addClass('hide');
});
$(this).addClass('focus');
$('#feedback-content .content:eq(' + index + ')').removeClass('hide');
}
}
});
\ No newline at end of file
... ...
... ... @@ -11,10 +11,10 @@
var goodsSwiper,
sizeSwiper,
refSwiper,
commentsNum,
handleHelper;
require('./desc');
require('./comments-consults');
lazyLoad($('img.lazy'));
... ... @@ -28,50 +28,36 @@ goodsSwiper = new Swiper('.banner-swiper', {
prevButton: '.my-swiper-button-prev'
});
//初始化tab
(function() {
var consultsNum = $('#nav-tab .consults-num').html() - 0;
commentsNum = $('#nav-tab .comments-num').html() - 0;
$('#nav-tab li').each(function() {
$(this).removeClass('focus');
});
$('#feedback-content .content').each(function() {
$(this).addClass('hide');
});
if (0 !== commentsNum) {
$('#nav-tab .comment-nav').addClass('focus');
$('#feedback-content .comment-content').removeClass('hide');
(function() {
} else if (0 !== consultsNum) {
$('#nav-tab .consult-nav').addClass('focus');
$('#feedback-content .consult-content').removeClass('hide');
//初始化goods-discount
if (0 === $('.goods-discount .discount-folder').children().length) {
$('.goods-discount .discount-folder').css('display', 'none');
$('.goods-discount .first-item span').html('');
}
})();
$('#nav-tab li').on('click', function() {
var index = $(this).index();
// $('#nav-tab li').on('click', function() {
// var index = $(this).index();
if ($(this).hasClass('comment-nav') && 0 === commentsNum) {
alert('暂无商品评价');
} else {
if (!$(this).hasClass('focus')) {
$('#nav-tab li').each(function() {
$(this).removeClass('focus');
});
$('#feedback-content .content').each(function() {
$(this).addClass('hide');
});
$(this).addClass('focus');
$('#feedback-content .content:eq(' + index + ')').removeClass('hide');
}
}
});
// if ($(this).hasClass('comment-nav') && 0 === commentsNum) {
// alert('暂无商品评价');
// } else {
// if (!$(this).hasClass('focus')) {
// $('#nav-tab li').each(function() {
// $(this).removeClass('focus');
// });
// $('#feedback-content .content').each(function() {
// $(this).addClass('hide');
// });
// $(this).addClass('focus');
// $('#feedback-content .content:eq(' + index + ')').removeClass('hide');
// }
// }
// });
$('.goodsDiscount .dropdown').on('click', function() {
if ($('.goodsDiscount .discount-folder').is(':hidden')) {
... ...
... ... @@ -150,7 +150,6 @@ a {
@import "home/index";
@import "category/index";
@import "product/index";
@import "product/comments-consults";
@import "index/index";
@import "shopping-cart/index";
@import "me/index"; //个人中心
... ...
.goods-comments-page{
.goods-comments{
.comment-item{
border: 1px solid $borderC;
padding: 0 pxToRem(28px);
.user-name{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
}
.goods-spec,
.comment-time{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
}
.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{
color:$mainFontC;
}
.comment-time{
color:#c1c1c1;
}
}
}
.goods-comments-page {
.goods-comments {
.comment-item {
border: 1px solid $borderC;
padding: 0 pxToRem(28px);
.user-name {
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color: $mainFontC;
}
.goods-spec,
.comment-time {
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content {
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color: $mainFontC;
}
.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 {
color: $mainFontC;
}
.comment-time {
color: #c1c1c1;
}
}
}
}
.goods-consults-page{
.goto-consult{
padding: 0 pxToRem(28px);
height: pxToRem(120px);
background-color: #ffffff;
i,span{
line-height: pxToRem(120px);
font-size: pxToRem(28px);
color:$mainFontC;
}
.consult-logo{
padding-right: pxToRem(15px);
}
.enter-consult-page{
float: right;
color:$subFontC;
}
}
.goods-consults{
.consult-item{
padding: pxToRem(20px) pxToRem(28px);
background-color: #fff;
.question{
font-size: pxToRem(24px);
color:$mainFontC;
span{
display: block;
float: left;
font-size: inherit;
padding-right: pxToRem(15px);
}
p{
overflow: hidden;
padding-bottom: pxToRem(15px);
border-bottom: 1px solid $borderC;
}
}
.time{
font-size: pxToRem(22px);
color:$subFontC;
}
.answer{
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color:$subFontC;
margin-top: pxToRem(14px);
span{
display: block;
float: left;
font-size: inherit;
color:$mainFontC;
padding-right: pxToRem(15px);
}
p{
overflow: hidden;
}
}
}
}
.goods-consults-page {
.goto-consult {
padding: 0 pxToRem(28px);
height: pxToRem(120px);
background-color: #ffffff;
i,
span {
line-height: pxToRem(120px);
font-size: pxToRem(28px);
color: $mainFontC;
}
.consult-logo {
padding-right: pxToRem(15px);
}
.enter-consult-page {
float: right;
color: $subFontC;
}
}
.goods-consults {
.consult-item {
padding: pxToRem(20px) pxToRem(28px);
background-color: #fff;
.question {
font-size: pxToRem(24px);
color: $mainFontC;
span {
display: block;
float: left;
font-size: inherit;
padding-right: pxToRem(15px);
}
p {
overflow: hidden;
padding-bottom: pxToRem(15px);
border-bottom: 1px solid $borderC;
}
}
.time {
font-size: pxToRem(22px);
color: $subFontC;
}
.answer {
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color: $subFontC;
margin-top: pxToRem(14px);
span {
display: block;
float: left;
font-size: inherit;
color: $mainFontC;
padding-right: pxToRem(15px);
}
p {
overflow: hidden;
}
}
}
}
.gap-block {
min-height: 30rem/$pxConvertRem;
background-color: #f0f0f0;
}
}
.gap-block{
min-height: 30rem/$pxConvertRem;
background-color: #f0f0f0;
}
.consult-form-page {
padding: pxToRem(28px);
text-align: center;
textarea {
box-sizing: border-box;
width: 100%;
height: pxToRem(400px);
font-size: pxToRem(28px);
padding: pxToRem(10px);
color: $mainFontC;
}
a {
display: inline-block;
height: pxToRem(80px);
width: pxToRem(360px);
color: #fff;
background-color: #444;
font-size: pxToRem(40px);
line-height: pxToRem(80px);
text-align: center;
margin-top: pxToRem(20px);
}
}
.consult-form-page{
padding: pxToRem(28px);
text-align: center;
textarea{
box-sizing:border-box;
width: 100%;
height: pxToRem(400px);
font-size: pxToRem(28px);
padding:pxToRem(10px);
color:$mainFontC;
}
a{
display: inline-block;
height: pxToRem(80px);
width: pxToRem(360px);
color: #fff;
background-color: #444;
font-size: pxToRem(40px);
line-height: pxToRem(80px);
text-align: center;
margin-top: pxToRem(20px);
}
}
\ No newline at end of file
.good-detail-page {
.feedback-list {
padding-top: pxToRem(30px);
background-color: #f0f0f0;
.nav-tab {
width: 100%;
}
.nav-tab {
height: pxToRem(60px);
padding: pxToRem(10px) 0;
background-color: #fff;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
}
.comment-nav,
.consult-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: pxToRem(60px);
line-height: pxToRem(60px);
font-size: pxToRem(28px);
text-align: center;
color: #ccc;
&.focus {
color: #000;
}
}
.comment-nav {
border-right: 1px solid #ccc;
}
.content {
.content-main {
background-color: #fff;
border-bottom: 1px solid $borderC;
&.comment-content-main {
.user-name {
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);
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 {
color: $mainFontC;
}
.detail-content,
.comment-time {
padding-left: pxToRem(28px);
}
.detail-content {
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
}
.detail-content {
padding-right: pxToRem(28px);
}
.comment-time {
color: #c1c1c1;
}
}
&.consult-content-main {
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
padding-top: pxToRem(20px);
padding-bottom: pxToRem(20px);
.question {
font-size: pxToRem(24px);
color: $mainFontC;
span {
display: block;
float: left;
font-size: inherit;
padding-right: pxToRem(15px);
}
p {
overflow: hidden;
}
}
.time {
font-size: pxToRem(22px);
color: $subFontC;
}
.answer {
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color: $subFontC;
margin-top: pxToRem(14px);
span {
display: block;
float: left;
font-size: inherit;
color: $mainFontC;
padding-right: pxToRem(15px);
}
p {
overflow: hidden;
}
}
}
}
}
.comment-content-footer,
.consult-content-footer {
min-height: pxToRem(88px);
text-align: center;
background-color: #fff;
border-bottom: 1px solid $borderC;
line-height: pxToRem(88px);
font-size: pxToRem(28px);
a {
color: #e0e0e0;
.iconfont {
font-size: inherit;
}
}
}
.content.hide {
display: none;
}
.nodata {
height: pxToRem(88px);
font-size: pxToRem(28px);
line-height: pxToRem(88px);
background-color: #fff;
padding: 0 pxToRem(28px);
.go-consult {
float: right;
color: $subFontC;
span {
font-size: pxToRem(28px);
}
}
}
}
}
... ...
... ... @@ -3,637 +3,335 @@ $subFontC:#b0b0b0;
$borderC:#e0e0e0;
$tableCellC:#eee;
$basicBtnC:#eb0313;
.my-swiper-button-prev,
.my-swiper-button-next {
position: absolute;
top: 50%;
width: pxToRem(48px);
height: pxToRem(48px);
margin-top: pxToRem(-44px);
cursor: pointer;
-moz-background-size: pxToRem(48px) pxToRem(48px);
-webkit-background-size: pxToRem(48px) pxToRem(48px);
background-size: pxToRem(48px) pxToRem(48px);
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
width: pxToRem(48px);
height: pxToRem(48px);
margin-top: pxToRem(-44px);
cursor: pointer;
-moz-background-size: pxToRem(48px) pxToRem(48px);
-webkit-background-size: pxToRem(48px) pxToRem(48px);
background-size: pxToRem(48px) pxToRem(48px);
background-position: center;
background-repeat: no-repeat;
}
.next-grey {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
right: pxToRem(30px);
left: auto;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
right: pxToRem(30px);
left: auto;
}
.prev-grey {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
left: pxToRem(30px);
right: auto;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
left: pxToRem(30px);
right: auto;
}
.good-detail-page {
overflow: hidden;
.page-block{
box-sizing:border-box;
width: 100%;
border-bottom: 2px solid $borderC;
border-top: 1px solid $borderC;
padding: 0 pxToRem(28px);
>.title{
line-height: pxToRem(88px);
color: $mainFontC;
font-size : pxToRem(28px);
border-bottom: 1px solid $borderC;
span{
color:#a0a0a0;
font-size:pxToRem(18px);
}
}
.detail{
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:1px solid #fff;
font-size: pxToRem(24px);
background-color: $tableCellC;
}
}
}
}
}
.gap-block{
min-height: 30rem/$pxConvertRem;
background-color: #f0f0f0;
}
.banner-container{
position: relative;
// overflow: hidden;
.is-new-lable{
position: absolute;
left: pxToRem(108px);
top:pxToRem(40px);
height: pxToRem(35px);
width:pxToRem(70px);
color:#fff;
text-align: center;
font-size: pxToRem(20px);
line-height: pxToRem(35px);
background-color: #7cd881;
// z-index: 16;
}
}
.banner-top{
// width: 100%;
min-height: 660rem / $pxConvertRem;
overflow: hidden;
position: relative;
.swiper-pagination{
position:absolute;
bottom: pxToRem(40px);
.swiper-pagination-bullet {
margin-right: 2px;
}
.swiper-pagination-bullet-active {
background-color: #000;
}
}
}
.banner-swiper {
min-height: pxToRem(600px);
min-width: pxToRem(448px);
margin: pxToRem(30px) pxToRem(96px);
// position: relative;
overflow: hidden;
ul {
position: relative;
height: 100%;
li {
float: left;
height: 100%;
}
}
}
.goodsName {
box-sizing:border-box;
width: 100%;
min-height: pxToRem(83px);
font-size: pxToRem(28px);
color: #fff;
padding-left: pxToRem(25px);
padding-right: pxToRem(25px);
line-height: pxToRem(36px);
background-color: #515150;
}
.goodsSubtitle{
min-height: pxToRem(87px);
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color:$subFontC;
padding-left:pxToRem(28px);
padding-right:pxToRem(28px);
border-bottom:1px solid $borderC;
background-color: #f4f4f4;
}
.price-date{
// width: 100%;
color:$subFontC;
min-height: pxToRem(88px);
padding-left:pxToRem(28px);
padding-right:pxToRem(28px);
border-bottom: 1px solid $borderC;
}
.goodsPrice{
float: left;
font-size: pxToRem(34.59px);
h1{
display: inline-block;
line-height: pxToRem(88px);
}
.currentPrice{
color:red;
margin-right: pxToRem(10px);
}
.previousPrice{
text-decoration:line-through;
}
}
.periodOfMarket{
font-size: pxToRem(24px);
float: right;
h1{
display: inline-block;
line-height: pxToRem(88px);
}
}
.goodsName,
.goodsSubtitle{
// width: 100%;
display:table;
span{
display: table-cell;
vertical-align: middle;
}
}
.vipLevel {
width: 100%;
box-sizing:border-box;
display: table;
min-height: pxToRem(88px);
padding-left:pxToRem(28px);
padding-right:pxToRem(28px);
font-size: pxToRem(22px);
color: #999999;
border-bottom: 1px solid $borderC;
span{
display: table-cell;
vertical-align: middle;
}
.vip-img{
padding-right: pxToRem(22px);
img{
width: pxToRem(52px);
height: pxToRem(32px);
}
}
.vip-price{
padding-right: pxToRem(55px);
}
.vip-price:last-child{
padding-right: 0;
}
}
.goodsDiscount{
font-size: pxToRem(28px);
color: $mainFontC;
border-bottom: 1px solid $borderC;
h1{
padding : pxToRem(30px) pxToRem(28px);
overflow: hidden;
.page-block {
box-sizing: border-box;
width: 100%;
border-bottom: 2px solid $borderC;
border-top: 1px solid $borderC;
padding: 0 pxToRem(28px);
>.title {
line-height: pxToRem(88px);
color: $mainFontC;
font-size: pxToRem(28px);
border-bottom: 1px solid $borderC;
span {
color: #a0a0a0;
font-size: pxToRem(18px);
}
}
.detail {
margin-top: pxToRem(20px);
margin-bottom: pxToRem(20px);
font-size: pxToRem(24px);
line-height: pxToRem(36px);
&.table {
width: 100%;
// .row {
// display: table-row;
.column {
box-sizing:border-box;
display: table-cell;
padding: pxToRem(16px) pxToRem(12px);
width: 50%;
border: 1px solid #fff;
font-size: pxToRem(24px);
background-color: $tableCellC;
float:left;
}
// }
}
}
}
.gap-block {
min-height: 30rem/$pxConvertRem;
background-color: #f0f0f0;
}
.banner-container {
position: relative;
// overflow: hidden;
.is-new-lable {
position: absolute;
left: pxToRem(108px);
top: pxToRem(40px);
height: pxToRem(35px);
width: pxToRem(70px);
color: #fff;
text-align: center;
font-size: pxToRem(20px);
line-height: pxToRem(35px);
background-color: #7cd881;
z-index: 2;
}
}
.banner-top {
// width: 100%;
min-height: 660rem / $pxConvertRem;
overflow: hidden;
position: relative;
.swiper-pagination {
position: absolute;
bottom: pxToRem(40px);
.swiper-pagination-bullet {
margin-right: 2px;
}
.swiper-pagination-bullet-active {
background-color: #000;
}
}
}
.banner-swiper {
min-height: pxToRem(600px);
min-width: pxToRem(448px);
margin: pxToRem(30px) pxToRem(96px);
// position: relative;
overflow: hidden;
ul {
position: relative;
height: 100%;
li {
float: left;
height: 100%;
}
}
}
.goodsName {
box-sizing: border-box;
width: 100%;
min-height: pxToRem(83px);
font-size: pxToRem(28px);
color: #fff;
padding-left: pxToRem(25px);
padding-right: pxToRem(25px);
line-height: pxToRem(36px);
// line-height: pxToRem(88px);
background-color: #515150;
}
.iconfont{
display: inline-block;
width: pxToRem(35px);
font-size: pxToRem(45px);
.goodsSubtitle {
min-height: pxToRem(87px);
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color: $subFontC;
padding-left: pxToRem(28px);
padding-right: pxToRem(28px);
border-bottom: 1px solid $borderC;
background-color: #f4f4f4;
}
.price-date {
// width: 100%;
color: $subFontC;
min-height: pxToRem(88px);
padding-left: pxToRem(28px);
padding-right: pxToRem(28px);
border-bottom: 1px solid $borderC;
}
.goodsPrice {
float: left;
font-size: pxToRem(34.59px);
h1 {
display: inline-block;
line-height: pxToRem(88px);
}
.currentPrice {
color: red;
margin-right: pxToRem(10px);
}
.previousPrice {
text-decoration: line-through;
}
}
.periodOfMarket {
font-size: pxToRem(24px);
float: right;
color:#e0e0e0;
// padding-left:pxToRem(50px);
h1 {
display: inline-block;
line-height: pxToRem(88px);
}
}
.discount-folder{
.folder-item{
border-top: 1px solid $borderC;
.goodsName,
.goodsSubtitle {
// width: 100%;
display: table;
span {
display: table-cell;
vertical-align: middle;
}
display: none;
}
}
.goodsSubtitle,
.goodsDiscount{
text-indent: pxToRem(-14px);
}
.feedback-list {
padding-top: pxToRem(30px);
background-color: #f0f0f0;
.nav-tab{
width: 100%;
}
.nav-tab {
height: pxToRem(60px);
padding: pxToRem(10px) 0;
background-color: #fff;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
}
.comment-nav, .consult-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: pxToRem(60px);
line-height: pxToRem(60px);
font-size: pxToRem(28px);
text-align: center;
color: #ccc;
&.focus {
color: #000;
}
}
.comment-nav {
border-right: 1px solid #ccc;
}
.content{
.content-main{
background-color: #fff;
border-bottom: 1px solid $borderC;
&.comment-content-main{
.user-name{
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);
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{
color:$mainFontC;
}
.detail-content,
.comment-time{
padding-left: pxToRem(28px);
}
.detail-content{
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
}
.detail-content{
padding-right: pxToRem(28px);
}
.comment-time{
color:#c1c1c1;
}
}
&.consult-content-main{
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
padding-top: pxToRem(20px);
padding-bottom: pxToRem(20px);
.question{
font-size: pxToRem(24px);
color:$mainFontC;
span{
display: block;
float: left;
font-size: inherit;
padding-right: pxToRem(15px);
}
p{
overflow: hidden;
}
}
.time{
font-size: pxToRem(22px);
color:$subFontC;
}
.answer{
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color:$subFontC;
margin-top: pxToRem(14px);
span{
display: block;
float: left;
font-size: inherit;
color:$mainFontC;
padding-right: pxToRem(15px);
}
p{
overflow: hidden;
}
}
}
}
}
.comment-content-footer,
.consult-content-footer{
min-height: pxToRem(88px);
text-align: center;
background-color: #fff;
border-bottom: 1px solid $borderC;
line-height: pxToRem(88px);
font-size: pxToRem(28px);
a{
color: #e0e0e0;
.iconfont{
font-size: inherit;
}
}
}
.vipLevel {
width: 100%;
box-sizing: border-box;
display: table;
min-height: pxToRem(88px);
padding-left: pxToRem(28px);
padding-right: pxToRem(28px);
font-size: pxToRem(22px);
color: #999999;
border-bottom: 1px solid $borderC;
span {
display: table-cell;
vertical-align: middle;
}
.vip-img{
padding-right: pxToRem(22px);
.img{
width: pxToRem(52px);
height: pxToRem(32px);
}
&:nth-child(3n-3) .img{
background: image-url('product/silver.png') no-repeat;
}
&:nth-child(3n-2) .img{
background: image-url('product/golden.png') no-repeat;
}
&:nth-child(3n-1) .img{
background: image-url('product/platinum.png') no-repeat;
}
}
.vip-price {
padding-right: pxToRem(55px);
}
.vip-price:last-child {
padding-right: 0;
}
}
.goodsDiscount {
font-size: pxToRem(28px);
color: $mainFontC;
border-bottom: 1px solid $borderC;
h1 {
padding: pxToRem(30px) pxToRem(28px);
line-height: pxToRem(36px);
// line-height: pxToRem(88px);
}
.iconfont {
display: inline-block;
width: pxToRem(35px);
font-size: pxToRem(45px);
float: right;
color: #e0e0e0;
// padding-left:pxToRem(50px);
}
.discount-folder {
.folder-item {
border-top: 1px solid $borderC;
}
display: none;
}
}
.goodsSubtitle,
.goodsDiscount {
text-indent: pxToRem(-14px);
}
.content.hide {
display: none;
}
}
.feedback-list .nodata{
height: pxToRem(88px);
font-size: pxToRem(28px);
line-height: pxToRem(88px);
background-color: #fff;
padding:0 pxToRem(28px);
.go-consult{
float: right;
color: $subFontC;
span{
.enter-store {
min-height: pxToRem(100px);
display: table;
a {
display: table-cell;
vertical-align: middle;
text-align: left;
}
.store-logo {
// padding-right: 35rem/$pxConvertRem;
img {
width: pxToRem(109px);
height: pxToRem(68px);
margin-left: 0;
margin-right: pxToRem(-25px);
}
}
.store-name {
font-size: pxToRem(34px);
color: $mainFontC;
}
.store-link {
font-size: pxToRem(28px);
color: $subFontC;
text-align: right;
span {
font-size: inherit;
}
}
}
}
.enter-store{
min-height: pxToRem(100px);
display: table;
a{
display: table-cell;
vertical-align: middle;
text-align: left;
}
.store-logo{
// padding-right: 35rem/$pxConvertRem;
img{
width: pxToRem(109px);
height: pxToRem(68px);
margin-left: 0;
margin-right: pxToRem(-25px);
}
}
.store-name{
font-size: pxToRem(34px);
color:$mainFontC;
}
.store-link{
font-size:pxToRem(28px) ;
color:$subFontC;
text-align: right;
span{
font-size: inherit;
}
}
}
.goods-desc{
.service{
width: pxToRem(489px);
height: pxToRem(28px);
margin-top: pxToRem(22px);
}
}
.tips{
color:$subFontC;
font-size: pxToRem(18px);
margin-top: pxToRem(20px);
}
.materials{
.detail{
img{
display: block;
overflow: hidden;
width: pxToRem(90px);
height: pxToRem(120px);
padding-right: pxToRem(20px);
float: left;
}
.material-desc{
font-size: pxToRem(24px);
overflow: hidden;
}
}
.material-type{
width: pxToRem(581px);
height: pxToRem(99px);
border-top: 1px solid $borderC;
padding: pxToRem(17px) 0;
}
}
.product-detail{
.detail{
img{
margin-top: pxToRem(20px);
width: pxToRem(581px);
height: pxToRem(772px);
}
}
margin-bottom: pxToRem(120px);
}
.detail-swiper{
.swiper-wrapper{
height: pxToRem(200px);
overflow: hidden;
.swiper-slide{
width: pxToRem(114px);
div{
text-align: center;
&.cell{
font-size: pxToRem(24px);
background-color: $tableCellC;
padding:pxToRem(15px) 0;
border: 1px solid #fff;
}
}
}
}
}
#reference-swiper-container{
.first-group{
width: pxToRem(70px);
margin-top: pxToRem(66px);
.avatar{
line-height: pxToRem(40px);
width: pxToRem(40px);
height: pxToRem(40px);
margin: pxToRem(18px) 0;
}
}
}
.measurement-method{
.detail{
width: 100%;
height: pxToRem(260px);
img{
float:left;
width: pxToRem(270px);
height: pxToRem(239px);
margin-top: pxToRem(18px);
margin-right: pxToRem(28px);
}
.right-part{
overflow: hidden;
.title{
>h1{
margin-top: pxToRem(10px);
display: inline-block;
padding-right: pxToRem(10px);
border-right: 1px solid $borderC;
line-height: 100%;
}
>span{
font-size: pxToRem(12px);
}
}
ul.items{
margin-top: pxToRem(20px);
padding: 0;
line-height: pxToRem(30px);
font-size: pxToRem(13px);
li{
span{
display: inline-block;
width: pxToRem(15px);
height: pxToRem(15px);
background-color: $basicBtnC;
border-radius: 50%;
color:#fff;
text-align: center;
line-height: pxToRem(15px);
font-size: pxToRem(13px);
margin-right: pxToRem(12px);
vertical-align: text-bottom;
}
}
}
}
clear:both;
}
}
.cart-bar{
position: relative;
box-sizing:border-box;
width: 100%;
height: pxToRem(120px);
position:fixed;
bottom: 0;
background-color: #fff;
z-index:2;
padding:pxToRem(20px) pxToRem(28px);
text-align: center;
a{
display: inline-block;
&.num-incart{
font-size: pxToRem(47px);
color:#444;
}
&.favorite{
font-size: pxToRem(34px);
color:$basicBtnC;
}
&.addto-cart,
&.sold-out{
height: pxToRem(80px);
width: pxToRem(260px);
margin:0 pxToRem(100px) 0 pxToRem(115px);
color: #fff;
background-color: $basicBtnC;
font-size: pxToRem(40px);
line-height: pxToRem(80px);
text-align: center;
}
&.sold-out{
background-color: #f58189;
}
}
.num-tag{
position: absolute;
left:pxToRem(66px);
height: pxToRem(20px);
display: block;
width: pxToRem(36px);
height: pxToRem(36px);
background-color: $basicBtnC;
border-radius: 50%;
color:#fff;
font-size: pxToRem(24px);
}
}
//底部固定栏
.cart-bar {
position: relative;
box-sizing: border-box;
width: 100%;
height: pxToRem(120px);
position: fixed;
bottom: 0;
background-color: #fff;
z-index: 2;
padding: pxToRem(20px) pxToRem(28px);
text-align: center;
a {
display: inline-block;
&.num-incart {
font-size: pxToRem(47px);
color: #444;
}
&.favorite {
font-size: pxToRem(34px);
color: $basicBtnC;
}
&.addto-cart,
&.sold-out {
height: pxToRem(80px);
width: pxToRem(260px);
margin: 0 pxToRem(100px) 0 pxToRem(115px);
color: #fff;
background-color: $basicBtnC;
font-size: pxToRem(40px);
line-height: pxToRem(80px);
text-align: center;
}
&.sold-out {
background-color: #f58189;
}
}
.num-tag {
position: absolute;
left: pxToRem(66px);
height: pxToRem(20px);
display: block;
width: pxToRem(36px);
height: pxToRem(36px);
background-color: $basicBtnC;
border-radius: 50%;
color: #fff;
font-size: pxToRem(24px);
}
}
}
@import "comments-consults";
@import "product-description";
\ No newline at end of file
... ...
.good-detail-page{
.goods-desc {
.service {
width: pxToRem(489px);
height: pxToRem(28px);
margin-top: pxToRem(22px);
}
.desc-text {
font-size: pxToRem(24px);
margin-bottom: pxToRem(20px);
color: $mainFontC;
}
}
.tips {
color: $subFontC;
font-size: pxToRem(18px);
margin-top: pxToRem(20px);
}
.materials {
.detail {
img {
display: block;
overflow: hidden;
width: pxToRem(90px);
height: pxToRem(120px);
padding-right: pxToRem(20px);
float: left;
}
.material-desc {
font-size: pxToRem(24px);
overflow: hidden;
}
}
.material-type {
width: pxToRem(581px);
height: pxToRem(99px);
border-top: 1px solid $borderC;
padding: pxToRem(17px) 0;
}
}
.product-detail {
.detail {
img {
margin-top: pxToRem(20px);
width: pxToRem(581px);
height: pxToRem(772px);
}
}
margin-bottom: pxToRem(120px);
}
.detail-swiper {
.swiper-wrapper {
// height: pxToRem(200px);
// overflow: hidden;
.swiper-slide {
width: pxToRem(114px);
div {
text-align: center;
&.cell {
font-size: pxToRem(24px);
background-color: $tableCellC;
padding: pxToRem(15px) 0;
border: 1px solid #fff;
}
}
}
}
}
//模特
#reference-swiper-container {
.first-group {
width: pxToRem(70px);
margin-top: pxToRem(66px);
.avatar {
line-height: pxToRem(40px);
width: pxToRem(40px);
height: pxToRem(40px);
margin: pxToRem(18px) 0;
}
}
}
//测量方法
.measurement-method {
.detail {
width: 100%;
height: pxToRem(260px);
img {
float: left;
width: 100%;
height: pxToRem(239px);
margin-top: pxToRem(18px);
margin-right: pxToRem(28px);
}
}
}
}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="consult-form-page">
<form class="consult-form">
<textarea>这款衣服有WS吗？</textarea>
... ...
... ... @@ -22,6 +22,7 @@
<h1 class="previousPrice">{{previousPrice}}</h1>
</div>
{{/goodsPrice}}
{{#periodOfMarket}}
<div class="periodOfMarket">
<h1>上市期：</h1>
... ... @@ -34,229 +35,72 @@
<div class="vipLevel">
{{# list}}
<span class="vip-img">
<img class="lazy" data-original="{{img}}" alt="">
<div class="img" alt=""></div>
</span>
<span class="vip-price">{{text}}</span>
{{/ list}}
</div>
{{/ vipLevel}}
{{#goodsDiscount}}
<div class="goodsDiscount">
{{#each list}}
{{#if @first}}
<h1 class="first-item">{{this}}<span class="icon-down iconfont dropdown">&#xe609;</span></h1>
<div class="discount-folder">
{{else}}
<h1 class="folder-item">{{this}}</h1>
{{/if}}
{{/list}}
</div>
</div>
{{/goodsDiscount}}
<div class="feedback-list ">
{{# feedbacks}}
{{#if commentsNum}}
<!--tab begin-->
{{> product/feedback-tab}}
<!--/tab end-->
{{else}}
{{#if consultsNum}}
<!--tab begin-->
{{> product/feedback-tab}}
<!--/tab end-->
{{else}}
<div class="nodata">
<span>暂无商品评价和咨询</span>
<a class="go-consult">我要咨询<span class="iconfont">&#xe604;</span></a>
</div>
{{/if}}
{{/if}}
{{/ feedbacks}}
</div>
<div class="gap-block"></div>
{{# enterStore}}
<div class="enter-store page-block">
<a class="store-logo" href="{{url}}" style="">
<img class="lazy" data-original="{{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>
{{#goodsDescription}}
<div class="goods-desc page-block">
<img class="service lazy" data-original="http://static.dev.yohobuy.com/img/product/service.png" alt="">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<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>
{{/goodsDescription}}
<div class="gap-block"></div>
{{#sizeInfo}}
<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="size-swiper-container">
<div class="swiper-wrapper">
{{#goodsDiscount}}
<div class="goodsDiscount">
{{#list}}
<div class="swiper-slide " >
<div class="size-name cell">{{name}}</div>
<div class="size-m cell">{{sizem}}</div>
<div class="size-xl cell">{{sizexl}}</div>
</div>
{{#if @first}}
<h1 class="first-item">{{text}}<span class="icon-down iconfont dropdown">&#xe609;</span></h1>
<div class="discount-folder">
{{else}}
<h1 class="folder-item">{{text}}</h1>
{{/if}}
{{/list}}
</div>
</div>
</div>
<p class="tips">提示：左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
{{/sizeInfo}}
{{/goodsDiscount}}
<div class="gap-block"></div>
{{#measurementMethod}}
<div class="measurement-method page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail" style="width:100%">
<img class="lazy" data-original="{{img}}" alt="">
<div class="right-part">
<div class="title">
<h1 >{{sort}}</h1>
<span>{{enSort}}</span>
</div>
<ul class="items">
{{#each items}}
<li>
<span>{{@index}}</span>
{{this}}</li>
{{/items}}
</ul>
<div class="feedback-list ">
{{# feedbacks}}
{{#if commentsNum}}
{{> product/feedback-tab}}
{{else}}
{{#if consultsNum}}
{{> product/feedback-tab}}
{{else}}
<div class="nodata">
<span>暂无商品评价和咨询</span>
<a class="go-consult">我要咨询<span class="iconfont">&#xe604;</span></a>
</div>
</div>
{{/detail}}
{{/if}}
{{/if}}
{{/ feedbacks}}
</div>
{{/measurementMethod}}
<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}}
{{#if @first}}
<div class="swiper-slide first-group" >
<img class="lazy avatar" data-original="{{firstModel}}" alt="">
<img class="lazy avatar" data-original="{{secondModel}}" alt="">
</div>
{{^}}
<div class="swiper-slide" >
<div class="model-field cell">{{fieldName}}</div>
<div class="first-model cell">{{firstModel}}</div>
<div class="second-model cell">{{secondModel}}</div>
</div>
{{/if}}
{{/list}}
</div>
</div>
<p class="tips">提示:左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
{{/reference}}
<div class="gap-block"></div>
{{# enterStore}}
<div class="enter-store page-block">
<a class="store-logo" href="{{url}}" style="">
<img class="lazy" data-original="{{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}}
{{#materials}}
<div class="materials page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail">
<img class="lazy" data-original="{{img}}" alt="">
<p class="material-desc">
{{desc}}
</p>
</div>
<img class="lazy material-type" data-original="{{materialType}}" alt="" >
</div>
{{/materials}}
<div class="gap-block"></div>
<div class="gap-block"></div>
{{> product/product_description}}
{{#productDetail}}
<div class="product-detail page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail">
<p>{{desc}}</p>
<img class="lazy" data-original="{{img}}" alt="">
</div>
</div>
{{/productDetail}}
{{#cartInfo}}
<div class="cart-bar">
<span class="num-tag">{{numInCart}}</span>
<a href="" class="num-incart iconfont">&#xe62c;</a>
{{#if goodsInstore}}
<a href="" class="addto-cart ">加入购物车</a>
{{else}}
<a href="" class="sold-out">已售罄</a>
{{/if}}
<a href="" class="favorite iconfont">&#xe605;</a>
</div>
{{/cartInfo}}
{{#cartInfo}}
<div class="cart-bar">
<span class="num-tag">{{numInCart}}</span>
<a href="" class="num-incart iconfont">&#xe62c;</a>
{{#if goodsInstore}}
<a href="" class="addto-cart ">加入购物车</a>
{{else}}
<a href="" class="sold-out">已售罄</a>
{{/if}}
<a href="" class="favorite iconfont">&#xe605;</a>
</div>
{{/cartInfo}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
... ... @@ -166,7 +166,7 @@
{{!-- 商品详情评论 --}}
{{#if goodsCommentsPage}}
<script>
seajs.use('js/product/detail/comments');
seajs.use('js/product/detail/comments-consults');
</script>
{{/if}}
{{!-- 品类 --}}
... ...
... ... @@ -3,7 +3,7 @@
<ul class="swiper-wrapper">
{{# list}}
<li class="swiper-slide">
<a href="{{url}}">
<a href="javascript:;">
<img src="{{img}}" alt="">
</a>
</li>
... ... @@ -14,8 +14,8 @@
<div class="pagination-inner">
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev prev-grey"></div>
<div class="swiper-button-next next-grey"></div>
<div class="my-swiper-button-prev prev-grey"></div>
<div class="my-swiper-button-next next-grey"></div>
</div>
\ No newline at end of file
... ...
{{#goodsDescription}}
<div class="goods-desc page-block">
<img class="service lazy" data-original="http://static.dev.yohobuy.com/img/product/service.png" alt="">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<ul class="detail table clearfix">
<!-- <li class="row"> -->
{{#list}}
<div class="column">{{param}}</div>
{{/list}}
<!-- </li> -->
</ul>
{{/detail}}
<div class="desc-text">{{desc}}</div>
</div>
{{/goodsDescription}}
<div class="gap-block"></div>
{{#sizeInfo}}
<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="size-swiper-container">
<div class="swiper-wrapper">
{{#list}}
<div class="swiper-slide " >
{{#params}}
<div class="cell">{{param}}</div>
{{/params}}
</div>
{{/list}}
</div>
</div>
<p class="tips">提示：左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
{{/sizeInfo}}
<div class="gap-block"></div>
{{#measurementMethod}}
<div class="measurement-method page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail" style="width:100%">
<img class="lazy" data-original="{{img}}" alt="">
</div>
</div>
{{/measurementMethod}}
<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}}
{{#if @first}}
<div class="swiper-slide first-group" >
<img class="lazy avatar" data-original="{{firstModel}}" alt="">
<img class="lazy avatar" data-original="{{secondModel}}" alt="">
</div>
{{^}}
<div class="swiper-slide" >
<div class="model-field cell">{{fieldName}}</div>
<div class="first-model cell">{{firstModel}}</div>
<div class="second-model cell">{{secondModel}}</div>
</div>
{{/if}}
{{/list}}
</div>
</div>
<p class="tips">提示:左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
{{/reference}}
<div class="gap-block"></div>
{{#materials}}
<div class="materials page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail">
<img class="lazy" data-original="{{img}}" alt="">
<p class="material-desc">
{{desc}}
</p>
</div>
<img class="lazy material-type" data-original="{{materialType}}" alt="" >
</div>
{{/materials}}
{{#washTips}}
<div class="icons-wrapper washTips page-block">
<ul class="icons-list clearfix">
{{#list}}
<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>
{{/washTips}}
<div class="gap-block"></div>
{{#productDetail}}
<div class="product-detail page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail">
<p>{{desc}}</p>
<img class="lazy" data-original="{{img}}" alt="">
</div>
</div>
{{/productDetail}}
\ No newline at end of file
... ...
... ... @@ -85,7 +85,7 @@ class UserModel
// 处理个人中心页面优选新品数据
if (isset($preferenceData['data']) && !empty($preferenceData['data'])) {
foreach ($preferenceData['data'] as $val) {
$result['recommendList'][] = Helpers::formatProduct($val, false);
$result['recommendList'][] = Helpers::formatProduct($val, false, true, true, 299, 388, false, false);
}
}
... ...