Authored by huangyCode

修改商品详情

const {
GroupService
} = require('../models/group-service');
const headerModel = require('../../../doraemon/models/header'); // 头部model
const _ = require('lodash');
const utils = '../../../utils';
const detailProcess = require(`${utils}/detail-process`);
function index(req, res, next) {
Promise.all([req.ctx(GroupService).index(),
... ... @@ -72,18 +76,37 @@ function progress(req, res, next) {
}
function goodsDetail(req, res, next) {
req.ctx(GroupService).goodsDetail()
.then(result => {
return res.render('group/goodsDetail', {
title: '商品详情',
page: 'group-goodsDetail',
localCss: true,
nodownload: true,
width750: true,
wechatShare: true,
result
});
}).catch(next);
let headerData = headerModel.setNav({
navTitle: '商品详情'
});
let param = req.query;
req.ctx(GroupService).goodsDetail({
activityId: param.activityId,
productSkn: param.productSkn,
}).then((result) => {
if (_.isEmpty(result)) {
return next();
}
let finalResult = detailProcess.prodessDetailData(result);
console.log(result);
return res.render('group/goodsDetail', {
page: 'group-goodsDetail',
nodownload: true,
width750: true,
wechatShare: true,
pageHeader: headerData,
title: finalResult.goodsName,
pageFooter: true,
localCss: true,
canonical: {
currentHref: result.canonical
},
result: finalResult
});
}).catch(next);
}
function order(req, res, next) {
... ...
... ... @@ -134,6 +134,24 @@ class GroupApi extends global.yoho.BaseModel {
console.log(error);
});
}
getProductData(data) {
return this.get({
data: {
method: 'app.product.data',
product_skn: data.productSkn
},
param: {
code: 200,
cache: true
}
}).then(result => {
result = result.data;
return result;
}).catch(error => {
console.log(error);
});
}
}
module.exports = GroupApi;
... ...
... ... @@ -95,9 +95,8 @@ class GroupService extends global.yoho.BaseModel {
}
}
async goodsDetail() {
// const goodsDetail = await this.api._getGoodsInfo({})
return {};
async goodsDetail(params) {
return await this.api.getProductData(params);
}
async order({
... ...
... ... @@ -370,7 +370,7 @@ router.get('/group', group.index); // 拼团首页
router.get('/group/list', group.groupListIndex); // 拼团列表页
router.get('/group/goods-list', group.groupList); // 拼团列表
router.get('/group/progress', auth, group.progress); // 拼团状态详情页
router.get('/group/goodsDetail/:id', group.goodsDetail);
router.get('/group/goodsDetail', group.goodsDetail);
router.get('/group/order', auth, group.order); // 我的拼团
module.exports = router;
... ...
{{# result}}
<div class="good-detail-page yoho-page">
<div class="banner-container">
<div class="tag-container">
{{# tags}}
{{# is_new}}
<p class="good-tag new-tag">NEW</p>
{{/ is_new}}
{{# is_advance}}
<p class="good-tag renew-tag">再到着</p>
{{/ is_advance}}
{{# is_discount}}
<p class="good-tag sale-tag">SALE</p>
{{/ is_discount}}
{{# is_yohood}}
<p class="good-tag new-festival-tag">新品节</p>
{{/ is_yohood}}
{{# is_limited}}
<p class="good-tag limit-tag">限量</p>
{{/ is_limited}}
{{# is_soon_sold_out}}
<p class="good-tag soon-sold-out-tag">即将售罄</p>
{{/ is_soon_sold_out}}
{{# is_presell}}
<p class="good-tag is-presell">预售</p>
{{/ is_presell}}
{{/ tags}}
</div>
{{# bannerTop}}
{{> group/banner-swiper-arrow}}
{{/ bannerTop}}
</div>
{{# goodsName}}
<h2 class="goods-name"><span>{{.}}</span></h2>
{{/ goodsName}}
{{# goodsSubtitle}}
<h1 class="goods-subtitle"><span>{{.}}</span></h1>
{{/ goodsSubtitle}}
<div class="price-date">
<div class="goods-price data-bind">
<h1 class="current-price"></h1>
<h1 class="previous-price"></h1>
</div>
<button class="limit-sale data-can-get-limit-code data-bind" id='limit-sale'>获取限购码</button>
<button class="got-limit-sale data-code-empty data-bind">限购码已被抢光</button>
<button class="got-limit-sale data-got-code data-bind">已获取限购码</button>
</div>
{{#if periodOfMarket}}
<div class="period-of-market">
<h1>上市期:</h1>
<h1 >{{periodOfMarket}}</h1>
</div>
{{/if}}
<div class="price-date data-bind">
<div class="student-price">
<i class="student-name">学生价</i><span class="student-value"></span>
</div>
</div>
{{!-- {{#if studentCoinNum}}
<div class="price-date">
<div class="student-price">
<i class="student-name">返</i> 学生返币{{ studentCoinNum}}个
</div>
</div>
{{else}}
{{#commodityReturn}}
<div class="price-date">
<div class="student-price">
<i class="student-name">返</i> 返{{studentCoinNum}}个YOHO币
</div>
</div>
{{/commodityReturn}}
{{/if}} --}}
<ul class="vip-level data-bind clearfix">
<li class="icons-item">
<span class="vip-img">
</span>
<span class="vip-price"></span>
</li>
</ul>
{{! 品牌优惠券}}
<div class="brand-coupon hide">
<i class="iconfont font-right pull-right">&#xe614;</i>
<i class="iconfont font-quan">&#xe902;</i><span>领取优惠券</span>
</div>
<div class="goods-discount data-bind" id="goodsDiscount">
<h1 class="first-item short-text tap-hightlight"><span class="icon-down iconfont dropdown">&#xe609;</span></h1>
<div class="discount-folder">
<h1 class="folder-item tap-hightlight"></h1>
</div>
</div>
{{# feedbacks}}
<div class="feedback-list ">
{{#if commentsNum}}
{{> detail/feedback-tab}}
{{else}}
{{#if consultsNum}}
{{> detail/feedback-tab}}
{{else}}
<div class="nodata tap-hightlight" id="goto-consult">
<span>暂无商品评价和咨询</span>
<a href="{{consultsUrl}}" class="go-consult">我要咨询<span class="iconfont">&#xe604;</span></a>
</div>
{{/if}}
{{/if}}
</div>
{{/ feedbacks}}
{{# enterStore}}
<div id="enter-store" class="enter-store page-block tap-hightlight">
<a class="store-logo" href="{{url}}" style="">
<img class="lazy" data-original="{{image2 img w=47 h=47 q=60}}" 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}}
{{# bundleData}}
{{> detail/bundle}}
{{/ bundleData}}
{{# discountBuy}}
<input type="hidden" id="discount-buy" value="{{num}}">
<input type="hidden" id="promotion-phrase" value="{{promotionPhrase}}">
{{/ discountBuy}}
<div id="productDesc" {{#if limit}}class="limit"{{/if}}> </div>
{{> detail/recommend-for-you}}
<div class="chose-panel"></div>
<div class="cart-bar data-bind">
{{#unless @root.wap.common.removeCartCount}}
<input type="hidden" id="remove-cart-count" value="1">
{{/unless}}
<a href="" class="num-incart iconfont"><span class="num-tag hide"></span>&#xe62c;</a>
<a id="addtoCart" href="javascript:;" class="addto-cart add-to-cart-url data-bind"></a>
<a id="soldOut" href="javascript:;" class="sold-out data-bind">已售罄</a>
<a id="notForSale" href="javascript:;" class="sold-out data-bind">非卖品</a>
<a id="limitNotForSale" href="javascript:;" class="sold-out limit data-bind">即将发售</a>
<a id="preSale" href="javascript:;" class="sold-out limit data-bind">即将开售</a>
<a href="javascript:;" id="addtoCart" class="addto-cart can-buy-limit data-bind">立即购买</a>
<a id="noLimitCode" href="javascript:;" class="sold-out limit data-bind">立即购买</a>
<input type="hidden" id="limitCodeUrl" name="limitCodeUrl" value="">
<input type="hidden" id="limitProductPay" name="limitProductPay" value="">
<input type="hidden" id="limitProductCode" class="data-bind" name="limitProductCode" value="">
<a href="javascript:;" id="likeBtn" class="favorite iconfont ">&#xe605;</a>
</div>
{{#if introUrl}}
<input id="introUrl" type="hidden" value="{{introUrl}}">
{{/if}}
{{#if id}}
<input id="productId" type="hidden" value="{{id}}">
{{/if}}
{{#if goodsId}}
<input id="goodsId" type="hidden" value="{{goodsId}}">
{{/if}}
{{#if preferenceUrl}}
<input id="preferenceUrl" type="hidden" value="{{preferenceUrl}}">
{{/if}}
<input id="productSkn" type="hidden" value="{{productSkn}}">
<input id="brand-id" type="hidden" value="{{brandId}}">
<input id="product-limit" type="hidden" value="{{isLimitBuy}}">
<input id="product-coupon-switch" type="hidden" value="{{showCoupon}}">
<input type="hidden" class="data-bind" name="loginUrl" id="loginUrl" value="">
<form id="buyNowForm" class="data-bind" method="post" action="">
<input type="hidden" name="productSku" id="productSku">
<input type="hidden" name="buyNumber" id="buyNumber">
</form>
{{#if showPannel}}
<input type="hidden" id="showPannel" value="1">
{{/if}}
{{> common/suspend-home}}
</div>
{{/ result}}
... ...
{{#if list}}
<div class="banner-top">
<div class="banner-swiper swiper-container">
<ul class="swiper-wrapper">
{{# list}}
<li class="swiper-slide">
<a href="javascript:;">
{{#if @first}}
<img src="{{image2 img w=450 h=600 q=60}}" alt="{{imgAlt}}">
{{else}}
<img class="swiper-lazy" data-src="{{image2 img w=450 h=600 q=60}}" alt="{{imgAlt}}">
{{/if}}
</a>
</li>
{{/ list}}
</ul>
</div>
<div class="swiper-pagination">
<div class="pagination-inner">
</div>
</div>
<div class="my-swiper-button-prev prev-grey"></div>
<div class="my-swiper-button-next next-grey"></div>
</div>
{{^}}
<div class="banner-top-single">
{{#if url}}
<a href="{{url}}">
<img class="img" src="{{image2 img w=450 h=600 q=60}}" alt="{{imgAlt}}">
</a>
{{^}}
<img class="img" src="{{image2 img w=450 h=600 q=60}}" alt="{{imgAlt}}">
{{/if}}
</div>
{{/if}}
... ...
import 'scss/activity/group/group-goodsDetail.page.scss';
... ...
$pageBgC: #f0f0f0;
$mainFontC: #444;
$subFontC: #b0b0b0;
$borderC: #e0e0e0;
$tableCellC: #eee;
$basicBtnC: #eb0313;
.good-detail-page {
overflow: hidden;
background-color: #f0f0f0;
&.hide-discount {
.goods-discount {
display: none;
}
}
.page-block {
box-sizing: border-box;
margin-bottom: 20px;
padding: 0 28px;
width: 100%;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
background-color: #fff;
> .title {
border-bottom: 1px solid $borderC;
color: $mainFontC;
font-size: 28px;
line-height: 88px;
span {
color: #a0a0a0;
font-size: 18px;
}
}
.pro-detail {
margin-top: 20px;
margin-bottom: 20px;
}
.pro-detail * {
font-size: 28px !important;
color: #444;
line-height: 40px !important;
margin-bottom: 40px;
letter-spacing: 1px;
word-break: break-all;
}
video {
width: 100%;
height: auto;
}
.detail {
margin-top: 20px;
margin-bottom: 20px;
font-size: 24px;
line-height: 36px;
b {
font-weight: bold;
}
i {
font-style: italic;
}
&.table {
width: 100%;
overflow: hidden;
.column {
box-sizing: border-box;
padding: 6px 3%;
width: 50%;
border: 1px solid #fff;
background-color: $tableCellC;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 24px;
float: left;
}
.merge-column {
width: 100% !important;
}
.oldbox {
float: left;
overflow: hidden;
box-sizing: border-box;
padding: 6px 3%;
width: 49.9%;
height: 100%;
border: 1px solid #fff;
background-color: $tableCellC;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.remind-tips {
padding-left: 18px;
font-size: 22px;
color: #e9221a;
margin-bottom: 30px;
img {
width: 28px;
float: left;
}
.wash-tags {
line-height: 30px;
height: 30px;
margin-left: 10px;
}
}
.model {
width: 100%;
height: auto;
border-bottom: 1px solid #e0e0e0;
overflow: hidden;
margin-bottom: 30px;
.portrait {
width: 175px;
float: left;
margin-bottom: 15px;
}
.portrait span {
text-align: center;
font-size: 24px;
display: block;
height: 62px;
line-height: 68px;
color: #444;
}
.portrait img {
display: block;
/* margin: 84px auto; */
max-width: 100%;
border: 0;
width: 124px;
height: 124px;
border-radius: 110px;
margin-top: 84px;
margin-left: 22px;
}
.info-list {
margin-left: 190px;
}
.info-list .list-title {
display: block;
width: 250px;
height: 40px;
background: #eee;
line-height: 40px;
text-align: center;
margin: 10px 0 30px;
}
.detail-info {
width: 48%;
height: 50px;
line-height: 50px;
display: inline-block;
.info-name {
color: #b0b0b0;
font-size: 24px;
}
&:nth-child(2) {
width: 100%;
}
}
}
.my-swiper-button-prev,
.my-swiper-button-next {
position: absolute;
top: 50%;
margin-top: -44px;
width: 48px;
height: 48px;
color: #666;
font-size: 48px;
cursor: pointer;
&.swiper-button-disabled {
opacity: 0.3;
}
}
.next-grey {
right: 30px;
left: auto;
}
.prev-grey {
right: auto;
left: 30px;
}
.tag-container {
position: absolute;
top: 40px;
left: 108px;
z-index: 2;
height: 35px;
color: #fff;
font-size: 20px;
line-height: 35px;
.good-tag {
display: inline-block;
box-sizing: border-box;
margin-left: 0.5px;
padding: 0 5px;
text-align: center;
font-size: 18px;
height: 35px;
line-height: 35px;
vertical-align: top;
}
.new-tag {
background-color: #78dc7e;
color: #fff;
}
.hot-tag {
width: 60px;
background-color: #ff575c;
color: #fff;
}
.renew-tag {
background-color: #78dc7e;
color: #fff;
}
.sale-tag {
background-color: #ff575c;
color: #fff;
}
.new-festival-tag {
color: #000;
width: 120px;
background-image: url("img/product/new-festival.png");
background-repeat: no-repeat;
background-color: #fff;
background-size: 120px 38px;
}
.yohood-tag {
background-color: #000;
color: #fff;
}
.limit-tag {
border: 1px solid #000;
background-color: #fff;
color: #000;
line-height: 33px;
}
.soon-sold-out-tag {
background-color: #ffac5b;
color: #fff;
}
.is-presell {
background-color: #000;
color: #fff;
width: 60px;
}
}
.banner-container {
position: relative;
background-color: #fff;
min-height: 660px;
}
.banner-top-single {
overflow: hidden;
margin: 0 auto;
img {
margin-top: 30px;
margin-bottom: 30px;
width: 448px;
}
&.hover {
position: fixed;
width: 100%;
background-color: black;
height: 100%;
top: 0;
left: 0;
right: 0;
border: 0;
z-index: 999;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
img {
margin-top: initial;
margin-bottom: initial;
width: 100%;
}
}
}
.banner-top {
position: relative;
overflow: hidden;
min-height: 660px;
display: flex;
align-items: center;
&.hover {
position: fixed;
width: 100%;
background-color: black;
height: 100%;
top: 0;
left: 0;
right: 0;
border: 0;
z-index: 999;
.banner-swiper {
width: 100%;
height: auto;
margin: 0 !important;
overflow: initial !important;
max-height: initial !important;
ul {
max-height: initial !important;
}
}
.swiper-pagination-bullet-active {
background-color: #fff !important;
}
}
.swiper-pagination {
position: absolute;
bottom: 40px;
z-index: 2;
.pagination-inner {
span {
background-color: #b0b0b0;
}
.swiper-pagination-bullet {
margin-right: 2PX;
}
.swiper-pagination-bullet-active {
background-color: #000;
}
}
}
}
.banner-swiper {
overflow: hidden;
margin: 30px 96px;
width: 448px;
min-height: 600px;
ul {
position: relative;
height: auto;
li {
float: left;
img {
height: auto;
}
}
}
}
.goods-name {
box-sizing: border-box;
padding: 20px 28px;
width: 100%;
background-color: #515150;
color: #fff;
.name {
font-size: 28px;
line-height: 48px;
}
.activity-phrase {
display: table-cell;
height: 40px;
background: #d0021b;
padding: 0 10px;
border-radius: 6px;
font-size: 24px;
line-height: 40px;
margin-right: 10px;
max-width: 100%;
overflow: hidden;
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 3px;
float: left;
}
}
.goods-subtitle {
display: flex;
align-items: center;
padding-right: 28px;
padding-left: 28px;
height: 88px;
border-bottom: 1px solid $borderC;
background-color: $pageBgC;
color: $subFontC;
font-size: 24px;
span {
display: -webkit-box;
overflow: hidden;
margin: 0;
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
line-height: 36px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.phrase {
color: #000;
}
.price-date,
.brand-coupon {
position: relative;
padding-right: 30px;
padding-left: 30px;
width: 100%;
height: 88px;
border-bottom: 1px solid $borderC;
background-color: #fff;
color: $subFontC;
}
.brand-coupon {
font-size: 28px;
line-height: 88px;
.promotion-icon {
line-height: 36px;
background-color: #d0021b;
color: #fff;
padding: 0 4px;
border-radius: 4px;
margin-right: 10px;
font-size: 22px;
float: left;
margin-top: 26px;
}
span {
color: $mainFontC;
}
.iconfont {
font-size: inherit;
}
.font-right {
color: $subFontC;
}
.font-quan {
color: $basicBtnC;
margin-right: 15px;
}
}
.limit-sale {
position: absolute;
top: 50%;
right: 24px;
margin-top: -24px;
padding: 4px 20px;
height: 48px;
border: 2PX solid #d0021b;
border-radius: 40px;
background-color: #fff;
color: #d0021b;
font-weight: bold;
font-size: 24px;
}
.limit-sale:active {
background-color: #f0f0f0;
}
.got-limit-sale {
position: absolute;
top: 24px;
right: 84px;
padding: 4px 20px;
border: 2px solid #d0021b;
border-color: #ccc;
border-radius: 40px;
background-color: #fff;
color: #d0021b;
color: #ccc;
font-weight: bold;
font-size: 24px;
}
.goods-price {
float: left;
font-size: 34.59px;
h2 {
display: inline-block;
line-height: 88px;
}
.seckill-price,
.current-price {
margin-right: 10px;
color: #d0021b;
}
.previous-price {
text-decoration: line-through;
}
}
.student-price {
float: left;
height: 88px;
line-height: 88px;
.student-name {
background-color: #d0021b;
font-size: 20px;
padding: 5px 10px;
color: #fff;
border-radius: 8px;
margin-right: 15px;
}
.red {
color: #d0021b;
}
}
.period-of-market {
padding: 0 30px;
background-color: #fff;
line-height: 54px;
color: #b0b0b0;
font-size: 24px;
border-bottom: 1px solid #e0e0e0;
h2 {
display: inline-block;
line-height: 88px;
}
}
.seckill-time {
float: right;
color: #d0021b;
font-size: 24px;
span {
display: inline-block;
line-height: 88px;
}
.seckill-time-pic {
background-color: #d0021b;
color: #fff;
line-height: 35px;
font-size: 18px;
padding: 0 10px;
border-radius: 5px;
margin-right: 5px;
vertical-align: middle;
}
}
.seckill-chose {
position: absolute;
bottom: 0;
right: 0;
}
.limit-num-text {
color: #d0021b;
font-size: 30px;
line-height: 80px;
position: absolute;
left: 380px;
bottom: 0;
background: #fff;
z-index: 1;
}
.seckill-time-border {
border: solid 1px #d0021b;
margin-top: 26px;
border-radius: 19px;
padding: 0 10px;
span {
line-height: 34px;
}
}
.vip-level {
box-sizing: box-border;
padding-right: 28px;
padding-left: 28px;
min-height: 88px;
border-bottom: 1px solid $borderC;
background-color: #fff;
color: #999;
font-size: 22px;
.icons-item {
float: left;
margin: 0;
width: 33.3%;
height: 88px;
&.current-level {
.vip-price {
color: #d0021b;
}
}
span {
display: inline-block;
padding-left: 8px;
padding-top: 5px;
vertical-align: middle;
line-height: 88px;
}
.vip-img {
width: 53px;
height: 32px;
}
&:nth-child(1) {
text-align: left;
.vip-img {
background: url("img/product/silver.png") no-repeat;
background-size: contain;
}
}
&:nth-child(2) {
.vip-img {
background: url("img/product/golden.png") no-repeat;
background-size: contain;
}
}
&:nth-child(3) {
text-align: right;
.vip-img {
background: url("img/product/platinum.png") no-repeat;
background-size: contain;
}
}
}
}
.goods-discount {
padding-top: 0;
display: block;
width: 100%;
height: auto;
border-bottom: 1px solid $borderC;
background-color: #fff;
color: $mainFontC;
font-size: 28px;
h2 {
position: relative;
padding: 30px 60px 30px 30px;
line-height: 36px;
}
.coin-item > .promotion-icon,
.first-item > .promotion-icon,
.folder-item > .promotion-icon {
background-color: #d0021b;
color: #fff;
padding: 0 4px;
border-radius: 4px;
margin-right: 10px;
font-size: 22px;
float: left;
}
.short-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.iconfont {
position: absolute;
top: 30px;
right: 36px;
width: 35px;
color: #e0e0e0;
font-size: 45px;
}
.discount-folder {
display: none;
.folder-item {
border-top: 1px solid $borderC;
}
}
}
.enter-store {
position: relative;
overflow: hidden;
padding: 0 180px 0 114px;
background-color: #fff;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 84px;
.store-logo {
position: absolute;
top: 1px;
left: 0;
margin-left: 30px;
width: 68px;
height: 84px;
text-align: center;
font-size: 0;
img {
display: inline-block;
width: auto;
height: 68px;
vertical-align: middle;
}
}
.store-name {
color: $mainFontC;
font-size: 34px;
}
.store-link {
position: absolute;
top: 1px;
right: 0;
padding-right: 30px;
color: $subFontC;
text-align: right;
font-size: 28px;
span {
font-size: inherit;
}
}
}
.feedback-list {
margin-top: 20px;
margin-bottom: 20px;
background-color: #f0f0f0;
.nav-tab {
width: 100%;
padding: 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: 60px;
line-height: 60px;
font-size: 28px;
text-align: center;
color: $subFontC;
&.focus {
color: #000;
}
}
.comment-nav {
border-right: 1px solid #ccc;
}
.content-main {
background-color: #fff;
border-bottom: 1px solid $borderC;
}
.content-main.comment-content-main {
.user-name {
font-size: 24px;
line-height: 62px;
height: 62px;
color: $mainFontC;
padding-left: 28px;
float: left;
}
.pd-right {
padding-right: 18px;
}
.user-info {
max-width: 100%;
}
.goods-spec {
max-width: 45%;
display: inline-block;
overflow: hidden;
height: 62px;
float: left;
white-space: nowrap;
text-overflow: ellipsis;
}
.goods-size {
float: left;
line-height: 62px;
}
.goods-spec,
.comment-time {
font-size: 24px;
line-height: 62px;
}
.comment-reply {
margin: 15px 28px 0 28px;
padding: 28px;
background: #f0f0f0;
box-sizing: border-box;
line-height: 32px;
color: #999;
font-size: 26px;
}
.detail-content {
color: $mainFontC;
font-size: 28px;
line-height: 36px;
padding-left: 28px;
padding-right: 28px;
}
.goods-spec,
.detail-content {
color: $mainFontC;
}
.detail-content,
.comment-time {
padding-left: 28px;
}
.comment-time {
color: #c1c1c1;
}
}
.content-main.consult-content-main {
padding: 20px 28px;
.question {
font-size: 24px;
color: $mainFontC;
span {
display: block;
float: left;
font-size: inherit;
padding-right: 15px;
}
p {
overflow: hidden;
}
}
.time {
font-size: 22px;
color: $subFontC;
}
.answer {
font-size: 24px;
line-height: 36px;
color: $subFontC;
margin-top: 14px;
span {
display: block;
float: left;
font-size: inherit;
color: $mainFontC;
padding-right: 15px;
}
p {
overflow: hidden;
}
}
}
.content-main.no-item {
height: 200px;
line-height: 200px;
color: #e0e0e0;
font-size: 16PX;
text-align: center;
span {
display: inline-block;
font-size: 16PX;
padding-right: 5PX;
}
}
.comment-content-footer,
.consult-content-footer {
display: block;
min-height: 88px;
text-align: center;
background-color: #fff;
border-bottom: 1px solid $borderC;
line-height: 88px;
font-size: 28px;
color: #b0b0b0;
.iconfont {
font-size: inherit;
}
}
.content.hide {
display: none;
}
.nodata {
height: 88px;
font-size: 28px;
line-height: 88px;
background-color: #fff;
padding: 0 28px;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
.go-consult {
float: right;
color: $subFontC;
span {
font-size: 28px;
}
}
}
}
/*
秒杀倒计时栏
*/
.seckill-count {
position: relative;
position: fixed;
bottom: 120px;
left: 50%;
margin-left: -320px;
z-index: 2;
box-sizing: border-box;
width: 640px;
height: 70px;
text-align: left;
.seckill-count-bg {
background-color: #000;
opacity: 0.7;
width: 640px;
height: 70px;
}
.seckill-count-num {
position: absolute;
top: 0;
left: 0;
padding: 0 30px;
color: white;
width: 640px;
height: 70px;
line-height: 70px;
box-sizing: border-box;
font-size: 28px;
}
}
/*
底部固定栏
*/
.cart-bar {
position: relative;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -320px;
z-index: 2;
box-sizing: border-box;
padding: 20px 28px;
width: 640px;
height: 120px;
border-top: 1px solid $borderC;
background-color: #fff;
a {
display: inline-block;
}
.num-incart {
position: relative;
color: #444;
font-size: 47px;
}
.new-foot-ico {
width: 100px;
text-align: center;
vertical-align: middle;
.iconfont {
color: #444;
font-size: 40px;
line-height: 40px;
}
.tip {
color: #444;
font-size: 15px;
}
&.fav {
.favorite {
color: #ccc;
}
}
&.store {
.iconfont {
width: 42px;
height: 40px;
margin: 0 auto;
}
}
}
.opa {
opacity: 0.4;
}
.favorite {
color: #ccc;
font-size: 34px;
background-color: transparent;
}
.favorite.liked {
color: $basicBtnC !important;
}
.addto-cart,
.sold-out {
width: 260px;
height: 80px;
background-color: $basicBtnC;
color: #fff;
text-align: center;
font-size: 32px;
line-height: 80px;
}
.can-not-buy {
background-color: #ccc;
}
.sold-out {
background-color: #ccc;
}
.num-tag {
position: absolute;
top: -10px;
right: 5px;
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background: $basicBtnC;
color: #fff;
text-align: center;
font-size: 20px;
line-height: 30px;
&.hide {
display: none;
}
}
.seckill-download-app {
width: 260px;
height: 80px;
line-height: 80px;
font-size: 30px;
text-align: center;
vertical-align: middle;
background-color: #eb0313;
color: #fff;
}
}
.store-good {
.btn-c {
display: none;
}
.fav {
width: 322px;
height: 80px;
line-height: 80px;
background-color: #eb0313;
color: #fff;
border-radius: 4px;
.tip {
color: #fff;
display: inline;
font-size: 24px;
}
.favorite {
color: #eb0313 !important;
}
.iconfont {
display: inline;
vertical-align: middle;
-webkit-text-stroke: 3px #fff;
margin-right: 5px;
font-size: 25px;
}
.liked {
color: #fff !important;
}
.opa {
opacity: 1;
}
}
.new-foot-ico {
margin-right: 20px;
}
.like-btn-c {
margin-right: 0;
}
}
.rec-word {
padding-top: 16px;
padding-left: 30px;
background-color: #fff;
.unfurled {
width: 140px;
height: 50px;
border-radius: 6px;
background: #eee;
line-height: 50px;
text-align: center;
margin: 0 auto;
color: #444;
}
.word-list {
display: none;
> * {
display: inline-block;
font-size: 24px;
border-radius: 6px;
padding: 6px 14px;
margin-right: 24px;
margin-bottom: 16px;
background: #eee;
color: #444;
}
}
}
.recommend-for-you {
border-bottom: none;
padding-left: 15px;
.tag-container {
overflow: hidden;
width: 100%;
height: 0.7rem;
position: static;
}
}
.yoho-tip {
top: 40%;
z-index: 100;
}
.product-desc {
min-height: 200px;
}
}
iframe {
display: none;
}
.is-mars-app {
.good-detail-page {
margin-bottom: 140px;
.addto-cart,
.sold-out {
margin-left: 100px;
}
.addto-cart {
background-color: #000;
}
.cart-bar {
.num-tag {
background-color: #89b374;
}
.new-foot-ico.fav {
display: none;
}
}
.suspend-home {
display: none;
}
}
}
.is-now-app {
.cart-bar {
.fav {
visibility: hidden;
}
}
}
... ...