fe / YOHOBUYWAP · Commits

Go to a project

Authored by Lynnic
Commit c0a17336bf395c44cc59108416f1c318edf1f5a5 1 parent f57e2ffe

update

Inline Side-by-side
Showing 7 changed files with 310 additions and 98 deletions
... ... @@ -1089,13 +1089,15 @@
]
},
'goodsDiscount' : {
'listLength' : 2,
'list' : [
{
'text' : '【BACK TO SCHOOL】满￥499赠送Paul
Franke帽子一个，多买多送！'
},
...
],
]
},
'feedbacks' : {
'commentsNum' : 0,
'consultsNum' : 1,
... ... @@ -1138,7 +1140,8 @@
'bongrace' : '平檐款式',
'goodsDetail' : '字母图案',
'style' : '街头'
}
},
'desc':'商品描述信息';
},
'sizeInfo' : {
... ... @@ -1148,9 +1151,12 @@
'detail' : {
'list' : [
{
'name' : '尺寸',
'sizem' : 'm',
'sizexl' : 'XL'
'params' : [
{
'param' : '尺寸'
},
...
]
},
...
]
... ...
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')) {
// 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');
});
// $('#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');
}
}
});
// $(this).addClass('focus');
// $('#feedback-content .content:eq(' + index + ')').removeClass('hide');
// }
// }
// });
$('.goodsDiscount .dropdown').on('click', function() {
if ($('.goodsDiscount .discount-folder').is(':hidden')) {
... ...
.goods-comments-page{
.goods-comments{
.comment-item{
.goods-comments-page {
.goods-comments {
.comment-item {
border: 1px solid $borderC;
padding: 0 pxToRem(28px);
.user-name{
.user-name {
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
color: $mainFontC;
}
.goods-spec,
.comment-time{
.comment-time {
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
.detail-content {
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
color: $mainFontC;
}
.goods-spec,
.comment-time{
.comment-time {
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
.detail-content {
font-size: pxToRem(28px);
line-height: pxToRem(36px);
}
.goods-spec,
.detail-content{
color:$mainFontC;
.detail-content {
color: $mainFontC;
}
.comment-time{
color:#c1c1c1;
.comment-time {
color: #c1c1c1;
}
}
}
}
.goods-consults-page{
.goto-consult{
.goods-consults-page {
.goto-consult {
padding: 0 pxToRem(28px);
height: pxToRem(120px);
background-color: #ffffff;
i,span{
i,
span {
line-height: pxToRem(120px);
font-size: pxToRem(28px);
color:$mainFontC;
color: $mainFontC;
}
.consult-logo{
.consult-logo {
padding-right: pxToRem(15px);
}
.enter-consult-page{
.enter-consult-page {
float: right;
color:$subFontC;
color: $subFontC;
}
}
.goods-consults{
.consult-item{
.goods-consults {
.consult-item {
padding: pxToRem(20px) pxToRem(28px);
background-color: #fff;
.question{
.question {
font-size: pxToRem(24px);
color:$mainFontC;
span{
color: $mainFontC;
span {
display: block;
float: left;
font-size: inherit;
padding-right: pxToRem(15px);
}
p{
p {
overflow: hidden;
padding-bottom: pxToRem(15px);
border-bottom: 1px solid $borderC;
}
}
.time{
.time {
font-size: pxToRem(22px);
color:$subFontC;
color: $subFontC;
}
.answer{
.answer {
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color:$subFontC;
color: $subFontC;
margin-top: pxToRem(14px);
span{
span {
display: block;
float: left;
font-size: inherit;
color:$mainFontC;
color: $mainFontC;
padding-right: pxToRem(15px);
}
p{
p {
overflow: hidden;
}
}
}
}
.gap-block{
.gap-block {
min-height: 30rem/$pxConvertRem;
background-color: #f0f0f0;
}
}
.consult-form-page{
.consult-form-page {
padding: pxToRem(28px);
text-align: center;
textarea{
box-sizing:border-box;
textarea {
box-sizing: border-box;
width: 100%;
height: pxToRem(400px);
font-size: pxToRem(28px);
padding:pxToRem(10px);
color:$mainFontC;
padding: pxToRem(10px);
color: $mainFontC;
}
a{
a {
display: inline-block;
height: pxToRem(80px);
width: pxToRem(360px);
... ... @@ -127,3 +127,169 @@
margin-top: pxToRem(20px);
}
}
.goods-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);
}
}
}
}
}
... ...
... ... @@ -87,7 +87,7 @@ $basicBtnC:#eb0313;
font-size: pxToRem(20px);
line-height: pxToRem(35px);
background-color: #7cd881;
// z-index: 16;
z-index: 2;
}
}
.banner-top {
... ... @@ -432,6 +432,11 @@ $basicBtnC:#eb0313;
height: pxToRem(28px);
margin-top: pxToRem(22px);
}
.desc-text {
font-size: pxToRem(24px);
margin-bottom: pxToRem(20px);
color: $mainFontC;
}
}
.tips {
color: $subFontC;
... ... @@ -472,8 +477,8 @@ $basicBtnC:#eb0313;
}
.detail-swiper {
.swiper-wrapper {
height: pxToRem(200px);
overflow: hidden;
// height: pxToRem(200px);
// overflow: hidden;
.swiper-slide {
width: pxToRem(114px);
div {
... ... @@ -488,6 +493,7 @@ $basicBtnC:#eb0313;
}
}
}
//模特
#reference-swiper-container {
.first-group {
width: pxToRem(70px);
... ... @@ -500,6 +506,8 @@ $basicBtnC:#eb0313;
}
}
}
//测量方法
.measurement-method {
.detail {
width: 100%;
... ... @@ -550,6 +558,8 @@ $basicBtnC:#eb0313;
clear:both;
}
}
//底部固定栏
.cart-bar {
position: relative;
box-sizing: border-box;
... ...
... ... @@ -44,12 +44,12 @@
{{#goodsDiscount}}
<div class="goodsDiscount">
{{#each list}}
{{#list}}
{{#if @first}}
<h1 class="first-item">{{title}}<span class="icon-down iconfont dropdown">&#xe609;</span></h1>
<h1 class="first-item">{{text}}<span class="icon-down iconfont dropdown">&#xe609;</span></h1>
<div class="discount-folder">
{{else}}
<h1 class="folder-item">{{title}}</h1>
<h1 class="folder-item">{{text}}</h1>
{{/if}}
{{/list}}
</div>
... ... @@ -59,14 +59,10 @@
<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>
... ... @@ -118,6 +114,7 @@
</div>
</div>
{{/detail}}
<div class="desc-text">{{desc}}</div>
</div>
{{/goodsDescription}}
... ... @@ -135,9 +132,9 @@
<div class="swiper-wrapper">
{{#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>
{{#params}}
<div class="cell">{{param}}</div>
{{/params}}
</div>
{{/list}}
</div>
... ...
... ... @@ -166,7 +166,7 @@
{{!-- 商品详情评论 --}}
{{#if goodsCommentsPage}}
<script>
seajs.use('js/product/detail/comments');
seajs.use('js/product/detail/comments-consults');
</script>
{{/if}}
{{!-- 品类 --}}
... ...