张泽世 / yohobuywap-node · Commits

Go to a project

Authored by 张丽霞
Commit 3f2ca96c15c825d7e1e36cc9fd0f9f9f31c9645c 1 parent 80a89327

商品详情模板 

Signed-off-by: 🍓 <lixia.zhang@yoho.cn>
Inline Side-by-side
Showing 15 changed files with 1445 additions and 4 deletions
1 hello, I am product hbs 1 hello, I am product hbs
2 -<pre>  
3 -{{result}}  
4 -</pre>  
  2 +{{# result}}
  3 +<div class="good-detail-page yoho-page">
  4 + <div class="banner-container">
  5 + <div class="tag-container">
  6 + {{# tags}}
  7 + {{# is_new}}
  8 + <p class="good-tag new-tag">NEW</p>
  9 + {{/ is_new}}
  10 + {{# is_advance}}
  11 + <p class="good-tag renew-tag">再到着</p>
  12 + {{/ is_advance}}
  13 + {{# is_discount}}
  14 + <p class="good-tag sale-tag">SALE</p>
  15 + {{/ is_discount}}
  16 + {{# is_yohood}}
  17 + <div class="good-tag running-man-tag">跑男同款</div>
  18 + {{/ is_yohood}}
  19 + {{# is_limited}}
  20 + <p class="good-tag limit-tag">限量商品</p>
  21 + {{/ is_limited}}
  22 + {{# is_soon_sold_out}}
  23 + <p class="good-tag soonSoldOut-tag">即将售罄</p>
  24 + {{/ is_soon_sold_out}}
  25 + {{/ tags}}
  26 + </div>
  27 + {{# bannerTop}}
  28 + {{!> product/banner-swiper-arrow}}
  29 + {{/ bannerTop}}
  30 + </div>
  31 + {{# goodsName}}
  32 + <h2 class="goodsName"><span>{{.}}</span></h2>
  33 + {{/ goodsName}}
  34 +
  35 + {{# goodsSubtitle}}
  36 + <h1 class="goodsSubtitle"><span>{{.}}</span></h1>
  37 + {{/ goodsSubtitle}}
  38 +
  39 + <div class="price-date">
  40 + {{# goodsPrice}}
  41 + <div class="goodsPrice">
  42 + <h1 class="currentPrice">{{currentPrice}}</h1>
  43 + <h1 class="previousPrice">{{previousPrice}}</h1>
  44 + </div>
  45 + {{/ goodsPrice}}
  46 +
  47 + {{^ noLimitGoodsBtn}}
  48 + {{#if canGetLimitCode}}
  49 + <button class="limit-sale" id='limit-sale'>获取限购码</button>
  50 + {{/if}}
  51 +
  52 + {{#if codeEmpty}}
  53 + <button class="got-limit-sale">限购码已被抢光</button>
  54 + {{/if}}
  55 +
  56 + {{#if gotCode}}
  57 + <button class="got-limit-sale">已获取限购码</button>
  58 + {{/if}}
  59 + {{/noLimitGoodsBtn}}
  60 +
  61 + {{#if periodOfMarket}}
  62 + <div class="periodOfMarket">
  63 + <h1>上市期：</h1>
  64 + <h1 >{{periodOfMarket}}</h1>
  65 + </div>
  66 + {{/if}}
  67 + </div>
  68 +
  69 + {{# vipLevel}}
  70 + <ul class="vip-level clearfix">
  71 + {{# list}}
  72 + <li class="icons-item {{#if currentLevel}}current-level{{/if}}">
  73 + <span class="vip-img " style="background-size:contain;">
  74 + </span>
  75 + <span class="vip-price ">{{text}}</span>
  76 + </li>
  77 + {{/ list}}
  78 + </ul>
  79 + {{/vipLevel}}
  80 +
  81 + {{# goodsDiscount}}
  82 + <div class="goodsDiscount" id="goodsDiscount">
  83 + {{# list}}
  84 + {{#if @first}}
  85 + {{#if text}}
  86 + <h1 class="first-item short-text tap-hightlight">{{text}}<span class="icon-down iconfont dropdown">&#xe609;</span></h1>
  87 + {{/if}}
  88 + {{/if}}
  89 + {{/ list}}
  90 + <div class="discount-folder">
  91 + {{# list}}
  92 + {{#if @first}}
  93 + {{else}}
  94 + {{#if text}}
  95 + <h1 class="folder-item tap-hightlight">{{text}}</h1>
  96 + {{/if}}
  97 + {{/if}}
  98 + {{/list}}
  99 + </div>
  100 + </div>
  101 + {{/ goodsDiscount}}
  102 +
  103 + {{# feedbacks}}
  104 + <div class="feedback-list ">
  105 + {{#if commentsNum}}
  106 + {{> product/feedback-tab}}
  107 + {{else}}
  108 + {{#if consultsNum}}
  109 + {{> product/feedback-tab}}
  110 + {{else}}
  111 + <div class="nodata tap-hightlight" id="goto-consult">
  112 + <span>暂无商品评价和咨询</span>
  113 + <a href="{{consultsUrl}}" class="go-consult">我要咨询<span class="iconfont">&#xe604;</span></a>
  114 + </div>
  115 + {{/if}}
  116 + {{/if}}
  117 + </div>
  118 + {{/ feedbacks}}
  119 +
  120 + {{# enterStore}}
  121 + <div id="enter-store" class="enter-store page-block tap-hightlight">
  122 + <a class="store-logo" href="{{url}}" style="">
  123 + <img class="lazy" data-original="{{img}}" alt="{{storeName}}">
  124 + </a>
  125 + <a class="store-name" href="{{url}}">{{storeName}}</a>
  126 + <a class="store-link" href="{{url}}">进入店铺<span class="iconfont">&#xe604;</span></a>
  127 + </div>
  128 + {{/ enterStore}}
  129 +
  130 + <div id="productDesc"> </div>
  131 + {{!> product/recommend-for-you}}
  132 + {{!> cart/chose-panel}}
  133 +
  134 + {{#cartInfo}}
  135 + <div class="cart-bar">
  136 + <a href="{{cartUrl}}" class="num-incart iconfont"><span class="num-tag hide"></span>&#xe62c;</a>
  137 +
  138 + {{#if addToCartUrl}}
  139 + <!-- <a id="addtoCart" href="{{addToCartUrl}}" class="addto-cart">加入购物车</a> -->
  140 + <a id="addtoCart" href="javascript:;" class="addto-cart">加入购物车</a>
  141 + {{/if}}
  142 +
  143 + {{#if soldOut}}
  144 + <a href="javascript:;" class="sold-out">已售罄</a>
  145 + {{/if}}
  146 +
  147 + {{#if notForSale}}
  148 + <a href="javascript:;" class="sold-out">非卖品</a>
  149 + {{/if}}
  150 +
  151 + {{#if limitNotForSale}}
  152 + <a href="javascript:;" class="sold-out limit">即将发售</a>
  153 + {{/if}}
  154 +
  155 + {{#if canBuyLimit}}
  156 + <a href="javascript:;" id="addtoCart" class="addto-cart">立即购买</a>
  157 + {{/if}}
  158 +
  159 + {{#if noLimitCode}}
  160 + <a href="javascript:;" class="sold-out limit">立即购买</a>
  161 + {{/if}}
  162 + <input type="hidden" id="limitCodeUrl" name="limitCodeUrl" value="{{limitCodeUrl}}">
  163 + <input type="hidden" id="limitProductPay" name="limitProductPay" value="{{limitProductPay}}">
  164 + {{#limitProductCode}}
  165 + <input type="hidden" id="limitProductCode" name="limitProductCode" value="{{.}}">
  166 + {{/limitProductCode}}
  167 +
  168 + <a href="javascript:;" id="likeBtn" class="favorite iconfont {{#isCollect}}liked{{/isCollect}}">&#xe605;</a>
  169 + </div>
  170 + {{/cartInfo}}
  171 + {{#if introUrl}}
  172 + <input id="introUrl" type="hidden" value="{{introUrl}}">
  173 + {{/if}}
  174 + {{#if id}}
  175 + <input id="productId" type="hidden" value="{{id}}">
  176 + {{/if}}
  177 + {{#if preferenceUrl}}
  178 + <input id="preferenceUrl" type="hidden" value="{{preferenceUrl}}">
  179 + {{/if}}
  180 +
  181 + <input id="productSkn" type="hidden" value="{{productSkn}}">
  182 +
  183 + {{#loginUrl}}
  184 + <input type="hidden" name="loginUrl" id="loginUrl" value="{{.}}">
  185 + {{/loginUrl}}
  186 +
  187 +</div>
  188 +{{/ result}}
  1 +{{#cartInfo}}
  2 +<div class="chose-panel">
  3 + <div class="main">
  4 + <div class="infos">
  5 + <div class="basic-info" >
  6 + {{#thumbs}}
  7 + <img class="thumb {{#unless @first}}hide{{/if}}" src={{img}}>
  8 + {{/thumbs}}
  9 + <div class="text-info">
  10 + <p class="name">{{name}}</p>
  11 + <p class="price">
  12 + <span class="sale-price{{^price}} no-price{{/price}}">{{salePrice}}</span>
  13 + {{#if price}}
  14 + <span class="market-price">{{price}}</span>
  15 + {{/if}}
  16 + </p>
  17 + </div>
  18 + </div>
  19 + <div class="chose-items">
  20 + <div class="color-list block-list">
  21 + <span>颜色</span>
  22 + {{# colors}}
  23 + <ul id="{{id}}" data-index="{{@index}}" class="size-row clearfix {{#unless @first}}hide{{/if}}">
  24 + {{# color}}
  25 + <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}">
  26 + {{name}}
  27 + </li>
  28 + {{/ color}}
  29 + </ul>
  30 + {{/ colors}}
  31 + </div>
  32 + <div class="size-list block-list">
  33 + <span>尺码</span>
  34 + {{# sizes}}
  35 + <ul class="size-row clearfix {{#unless @first}}hide{{/if}}">
  36 + {{# size}}
  37 + <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-num="{{sizeNum}}" data-id="{{id}}" data-skuid="{{skuId}}">
  38 + {{name}}
  39 + </li>
  40 + {{/ size}}
  41 + </ul>
  42 + {{/ sizes}}
  43 + </div>
  44 + <p>
  45 + <div class="num">
  46 + <span>数量</span>
  47 + <div class="clearfix">
  48 + <a class="btn btn-minus" href="javascript:void(0);">
  49 + <span class="iconfont {{#if promotionId}}disabled{{/if}}">&#xe625;</span>
  50 + </a>
  51 + <input id="good-num" class="good-num disabled" type="text" value="1" disabled="true">
  52 + <a class="btn btn-plus" href="javascript:void(0);">
  53 + <span class="iconfont {{#if promotionId}}disabled{{/if}}">&#xe624;</span>
  54 + </a>
  55 + </div>
  56 + <span class="left-num"></span>
  57 + <input id="left-num" type="hidden" value="0">
  58 + </div>
  59 + </div>
  60 + </div>
  61 + <div class="btn-wrap">
  62 + <button id="chose-btn-sure" class="btn btn-sure">加入购物车</button>
  63 + </div>
  64 + </div>
  65 +</div>
  66 + {{/cartInfo}}
  67 +<input id="promotionId" type="hidden" value="{{promotionId}}">
  1 +{{#if list}}
  2 +<div class="banner-top">
  3 + <div class="banner-swiper swiper-container">
  4 + <ul class="swiper-wrapper">
  5 + {{# list}}
  6 + <li class="swiper-slide">
  7 + <a href="javascript:;">
  8 + <img src="{{img}}" alt="">
  9 + </a>
  10 + </li>
  11 + {{/ list}}
  12 + </ul>
  13 + </div>
  14 + <div class="swiper-pagination">
  15 + <div class="pagination-inner">
  16 + </div>
  17 + </div>
  18 +
  19 + <div class="my-swiper-button-prev prev-grey"></div>
  20 + <div class="my-swiper-button-next next-grey"></div>
  21 +</div>
  22 + {{^}}
  23 +<div class="banner-top-single">
  24 +<a href={{url}}>
  25 +<img class="img" src="{{img}}">
  26 +</a>
  27 +</div>
  28 + {{/if}}
  1 +<ul id="nav-tab" class="nav-tab clearfix">
  2 + <li class="comment-nav tap-hightlight">商品评价(<span class="comments-num">{{commentsNum}}</span>)</li>
  3 + <li class="consult-nav tap-hightlight">购买咨询(<span class="consults-num">{{consultsNum}}</span>)</li>
  4 +</ul>
  5 +<div id="feedback-content" >
  6 + <div class="comment-content content ">
  7 + {{#if commentsNum}}
  8 + <div class="comment-content-main content-main">
  9 + {{# comments}}
  10 + <span class="user-name">
  11 + {{userName}}
  12 + </span>
  13 + <span class="goods-spec">
  14 + 购买了{{desc}}
  15 + </span>
  16 + <p class="detail-content">
  17 + {{content}}
  18 + </p>
  19 + <span class="comment-time">
  20 + {{time}}
  21 + </span>
  22 + {{/ comments}}
  23 + </div>
  24 + <a class="comment-content-footer tap-hightlight" href="{{commentsUrl}}">
  25 + 查看更多
  26 + <span class="iconfont">&#xe604;</span>
  27 + </a>
  28 + {{^}}
  29 + <div class="comment-content-main content-main no-item">
  30 + <span class="iconfont">&#xe63d;</span>暂无评论
  31 + </div>
  32 + {{/if}}
  33 + </div>
  34 +
  35 + <div class="consult-content content hide ">
  36 + {{#if consultsNum}}
  37 + <div class="consult-content-main content-main">
  38 + {{# consults}}
  39 + <div class="question">
  40 + <span class="iconfont">&#xe644;</span>
  41 + <p>
  42 + {{question}}<br>
  43 + <span class="time">{{time}}</span>
  44 + </p>
  45 + </div>
  46 +
  47 + <div class="answer">
  48 + <span class="iconfont">&#xe642;</span>
  49 + <p>{{answer}}</p>
  50 + </div>
  51 + {{/ consults}}
  52 + </div>
  53 + <a class="consult-content-footer tap-hightlight" href="{{consultsUrl}}">
  54 + 查看更多
  55 + <span class="iconfont">&#xe604;</span>
  56 + </a>
  57 + {{else}}
  58 + <div class="consult-content-main content-main no-item">
  59 + <span class="iconfont">&#xe63f;</span>暂无咨询
  60 + </div>
  61 +
  62 + <div class="consult-content-footer tap-hightlight">
  63 + <a href="{{consultsUrl}}">
  64 + 我要咨询
  65 + <span class="iconfont">&#xe604;</span></a>
  66 + </div>
  67 + {{/if}}
  68 + </div>
  69 +</div>
  1 +<div class="recommend-for-you hide">
  2 +</div>
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 <link rel="dns-prefetch" href="//img12.static.yhbimg.com"> 15 <link rel="dns-prefetch" href="//img12.static.yhbimg.com">
16 <link rel="dns-prefetch" href="//img13.static.yhbimg.com"> 16 <link rel="dns-prefetch" href="//img13.static.yhbimg.com">
17 {{#if devEnv}} 17 {{#if devEnv}}
18 - <link rel="stylesheet" href="//localhost:3000/css/index.css"> 18 + <link rel="stylesheet" href="//localhost:8000/css/index.css">
19 {{^}} 19 {{^}}
20 <link rel="stylesheet" href="//cdn.yoho.cn/m-yohobuy-node/{{version}}/index.css"> 20 <link rel="stylesheet" href="//cdn.yoho.cn/m-yohobuy-node/{{version}}/index.css">
21 {{/if}} 21 {{/if}}
  1 +@import "product/detail";
  2 +@import "product/comments-consults";
  3 +@import "product/product-description";
  1 +@define-mixin consult-item {
  2 + margin-top: 30px;
  3 + padding: 20px 28px;
  4 + background-color: #fff;
  5 + border-bottom: 1px solid $borderC;
  6 + border-top: 1px solid $borderC;
  7 + .question {
  8 + font-size: 24px;
  9 + color: $mainFontC;
  10 + span {
  11 + display: block;
  12 + float: left;
  13 + padding-right: 15px;
  14 + }
  15 + p {
  16 + overflow: hidden;
  17 + padding-bottom: 15px;
  18 + border-bottom: 1px solid $borderC;
  19 + }
  20 + }
  21 + .time {
  22 + font-size: 22px;
  23 + color: $subFontC;
  24 + }
  25 + .answer {
  26 + font-size: 24px;
  27 + line-height: 36px;
  28 + color: $subFontC;
  29 + margin-top: 14px;
  30 + span {
  31 + display: block;
  32 + float: left;
  33 + color: $mainFontC;
  34 + padding-right: 15px;
  35 + }
  36 + p {
  37 + overflow: hidden;
  38 + }
  39 + }
  40 + .operation {
  41 + width: 120%;
  42 + height: 60px;
  43 + line-height: 80px;
  44 + position: relative;
  45 + right: 12%;
  46 + border-top: 1px solid #e0e0e0;
  47 + margin-top: 20px;
  48 +
  49 + li{
  50 + &.highlight{
  51 + color: $basicBtnC;
  52 + }
  53 + font-size:28px;
  54 + float:left;
  55 + width: 50%;
  56 + text-align: center;
  57 + color:$subFontC;
  58 + .iconfont{
  59 + display: inline-block;
  60 + padding-right: 5PX;
  61 + font-size: inherit;
  62 + }
  63 + position: relative;
  64 + .animate-count {
  65 + display: none;
  66 + position: absolute;
  67 + top: 0;
  68 + font-size: 20px;
  69 + z-index: 5;
  70 + }
  71 + i.count {
  72 + position: absolute;
  73 + }
  74 + }
  75 + li.fav {
  76 + .animate-count {
  77 + right: 100px;
  78 + }
  79 + }
  80 +
  81 + li.useful {
  82 + .animate-count {
  83 + right: 88px;
  84 + }
  85 + }
  86 + }
  87 +}
  88 +
  89 +.goods-comments-page {
  90 + .goods-comments {
  91 + .comment-item {
  92 + border-bottom: 1px solid $borderC;
  93 + padding: 0 28px;
  94 + .user-name {
  95 + display: inline-block;
  96 + float: left;
  97 + max-width: 9rem;
  98 + overflow: hidden;
  99 + text-overflow: ellipsis;
  100 + white-space: nowrap;
  101 + font-size: 24px;
  102 + line-height: 62px;
  103 + color: $mainFontC;
  104 + }
  105 + .goods-spec,
  106 + .comment-time {
  107 + font-size: 24px;
  108 + line-height: 62px;
  109 + }
  110 + .detail-content {
  111 + font-size: 24px;
  112 + line-height: 62px;
  113 + color: $mainFontC;
  114 + }
  115 + .goods-spec,
  116 + .comment-time {
  117 + font-size: 24px;
  118 + line-height: 62px;
  119 + }
  120 + .detail-content {
  121 + font-size: 28px;
  122 + line-height: 36px;
  123 + }
  124 + .goods-spec,
  125 + .detail-content {
  126 + color: $mainFontC;
  127 + }
  128 + .comment-time {
  129 + color: #c1c1c1;
  130 + }
  131 + }
  132 + }
  133 +}
  134 +
  135 +.goods-consults-page {
  136 + background-color: #f0f0f0;
  137 + .goto-consult {
  138 + position: fixed;
  139 + top: 2.25rem;
  140 + width: 100%;
  141 + box-sizing:border-box;
  142 + padding: 0 28px;
  143 + height: 120px;
  144 + background-color: #ffffff;
  145 + border-bottom: 1px solid $borderC;
  146 + z-index: 10;
  147 + i,
  148 + span,
  149 + a {
  150 + line-height: 120px;
  151 + font-size: 28px;
  152 + color: $mainFontC;
  153 + }
  154 + .consult-logo {
  155 + padding-right: 15px;
  156 + }
  157 + .enter-consult-page {
  158 + float: right;
  159 + color: $subFontC;
  160 + }
  161 + }
  162 + .goods-consults.customer-consults {
  163 + .consult-item:nth-child(1) {
  164 + display: block;
  165 + }
  166 + .consult-item:nth-child(2) {
  167 + display: block;
  168 + }
  169 + .consult-item {
  170 + display: none;
  171 + }
  172 + }
  173 + .goods-consults {
  174 + margin-top: 5.25rem;
  175 + overflow: hidden;
  176 + @mixin consult-item;
  177 + }
  178 + .readmore{
  179 + display: block;
  180 + height: 88px;
  181 + line-height: 88px;
  182 + background-color: #fff;
  183 + text-align: center;
  184 + color: $subFontC;
  185 + margin-top: 30px;
  186 + border-top: 1px solid $borderC;
  187 + border-bottom: 1px solid $borderC;
  188 + font-size: 28px;
  189 + i{
  190 + font-size: inherit;
  191 + }
  192 + }
  193 + .faq-title{
  194 + height: 88px;
  195 + line-height: 88px;
  196 + text-align: center;
  197 + font-size: 32px;
  198 + }
  199 + .goods-consults .faq-item{
  200 + @mixin consult-item;
  201 + margin-top: 0;
  202 + margin-bottom: 30px;
  203 + .answer{
  204 + border-bottom: none;
  205 + }
  206 + }
  207 +}
  208 +
  209 +.consult-form-page {
  210 + padding: 28px;
  211 + text-align: center;
  212 + textarea {
  213 + box-sizing: border-box;
  214 + width: 100%;
  215 + height: 400px;
  216 + font-size: 28px;
  217 + padding: 10px;
  218 + color: $mainFontC;
  219 + }
  220 + a {
  221 + display: inline-block;
  222 + height: 80px;
  223 + width: 360px;
  224 + color: #fff;
  225 + background-color: #444;
  226 + font-size: 40px;
  227 + line-height: 80px;
  228 + text-align: center;
  229 + margin-top: 20px;
  230 + }
  231 +}
  232 +
  233 +.good-detail-page {
  234 + .feedback-list {
  235 + padding-top: 30px;
  236 + margin-bottom: 30px;
  237 + background-color: #f0f0f0;
  238 + .nav-tab {
  239 + width: 100%;
  240 + height: 60px;
  241 + padding: 10px 0;
  242 + background-color: #fff;
  243 + border-top: 1px solid $borderC;
  244 + border-bottom: 1px solid $borderC;
  245 + }
  246 + .comment-nav,
  247 + .consult-nav {
  248 + box-sizing: border-box;
  249 + float: left;
  250 + width: 50%;
  251 + height: 60px;
  252 + line-height: 60px;
  253 + font-size: 28px;
  254 + text-align: center;
  255 + color: $subFontC;
  256 + &.focus {
  257 + color: #000;
  258 + }
  259 + }
  260 + .comment-nav {
  261 + border-right: 1px solid #ccc;
  262 + }
  263 + .content {
  264 + .content-main {
  265 + background-color: #fff;
  266 + border-bottom: 1px solid $borderC;
  267 + &.comment-content-main {
  268 + .user-name {
  269 + font-size: 24px;
  270 + line-height: 62px;
  271 + color: $mainFontC;
  272 + padding-left: 28px;
  273 + padding-right: 18px;
  274 + }
  275 + .goods-spec,
  276 + .comment-time {
  277 + font-size: 24px;
  278 + line-height: 62px;
  279 + }
  280 + .detail-content {
  281 + font-size: 24px;
  282 + line-height: 62px;
  283 + color: $mainFontC;
  284 + padding-left: 28px;
  285 + padding-right: 18px;
  286 + }
  287 + .goods-spec,
  288 + .comment-time {
  289 + font-size: 24px;
  290 + line-height: 62px;
  291 + }
  292 + .detail-content {
  293 + font-size: 28px;
  294 + line-height: 36px;
  295 + }
  296 + .goods-spec,
  297 + .detail-content {
  298 + color: $mainFontC;
  299 + }
  300 + .detail-content,
  301 + .comment-time {
  302 + padding-left: 28px;
  303 + }
  304 + .detail-content {
  305 + padding-right: 28px;
  306 + padding-left: 28px;
  307 + }
  308 + .detail-content {
  309 + padding-right: 28px;
  310 + }
  311 + .comment-time {
  312 + color: #c1c1c1;
  313 + }
  314 + }
  315 + &.consult-content-main {
  316 + padding-right: 28px;
  317 + padding-left: 28px;
  318 + padding-top: 20px;
  319 + padding-bottom: 20px;
  320 + .question {
  321 + font-size: 24px;
  322 + color: $mainFontC;
  323 + span {
  324 + display: block;
  325 + float: left;
  326 + font-size: inherit;
  327 + padding-right: 15px;
  328 + }
  329 + p {
  330 + overflow: hidden;
  331 + }
  332 + }
  333 + .time {
  334 + font-size: 22px;
  335 + color: $subFontC;
  336 + }
  337 + .answer {
  338 + font-size: 24px;
  339 + line-height: 36px;
  340 + color: $subFontC;
  341 + margin-top: 14px;
  342 + span {
  343 + display: block;
  344 + float: left;
  345 + font-size: inherit;
  346 + color: $mainFontC;
  347 + padding-right: 15px;
  348 + }
  349 + p {
  350 + overflow: hidden;
  351 + }
  352 + }
  353 + }
  354 +
  355 + &.no-item{
  356 + height: 200px;
  357 + line-height: 200px;
  358 + color: #e0e0e0;
  359 + font-size: 16PX;
  360 + text-align: center;
  361 + span{
  362 + display: inline-block;
  363 + font-size: 16PX;
  364 + padding-right: 5PX;
  365 + }
  366 + }
  367 + }
  368 + }
  369 +
  370 + .comment-content-footer,
  371 + .consult-content-footer {
  372 + display: block;
  373 + min-height: 88px;
  374 + text-align: center;
  375 + background-color: #fff;
  376 + border-bottom: 1px solid $borderC;
  377 + line-height: 88px;
  378 + font-size: 28px;
  379 + color: #b0b0b0;
  380 + .iconfont {
  381 + font-size: inherit;
  382 + }
  383 + }
  384 +
  385 + .content.hide {
  386 + display: none;
  387 + }
  388 +
  389 + .nodata {
  390 + height: 88px;
  391 + font-size: 28px;
  392 + line-height: 88px;
  393 + background-color: #fff;
  394 + padding: 0 28px;
  395 + border-top: 1px solid $borderC;
  396 + border-bottom: 1px solid $borderC;
  397 + .go-consult {
  398 + float: right;
  399 + color: $subFontC;
  400 + span {
  401 + font-size: 28px;
  402 + }
  403 + }
  404 + }
  405 +
  406 +
  407 + }
  408 +}
  1 +$pageBgC:#f0f0f0;
  2 +$mainFontC:#444444;
  3 +$subFontC:#b0b0b0;
  4 +$borderC:#e0e0e0;
  5 +$tableCellC:#eee;
  6 +$basicBtnC:#eb0313;
  7 +
  8 +.good-detail-page {
  9 + overflow: hidden;
  10 + background-color: #f0f0f0;
  11 +
  12 + .yoho-tip {
  13 + z-index: 4;
  14 + }
  15 +
  16 + .page-block {
  17 + background-color: #fff;
  18 + box-sizing: border-box;
  19 + width: 100%;
  20 + border-bottom: 1px solid $borderC;
  21 + border-top: 1px solid $borderC;
  22 + padding: 0 28px;
  23 + margin-bottom: 30px;
  24 + >.title {
  25 + line-height: 88px;
  26 + color: $mainFontC;
  27 + font-size: 28px;
  28 + border-bottom: 1px solid $borderC;
  29 + span {
  30 + color: #a0a0a0;
  31 + font-size: 18px;
  32 + }
  33 + }
  34 +
  35 + .pro-detail {
  36 + margin-top: 20px;
  37 + margin-bottom: 20px;
  38 + }
  39 + .detail {
  40 + margin-top: 20px;
  41 + margin-bottom: 20px;
  42 + font-size: 24px;
  43 + line-height: 36px;
  44 +
  45 + b {
  46 + font-weight: bold;
  47 + }
  48 +
  49 + i {
  50 + font-style: italic;
  51 + }
  52 +
  53 + &.table {
  54 + .js-wraper {
  55 + display: flex;
  56 + flex-wrap: wrap;
  57 + justify-content: flex-start;
  58 + }
  59 + width: 100%;
  60 + .column {
  61 + box-sizing: border-box;
  62 + /*padding: 20px 12px;*/
  63 + padding: 6px 3%;
  64 + width: 49.9%;
  65 + border: 1px solid #fff;
  66 + font-size: 24px;
  67 + background-color: $tableCellC;
  68 + word-wrap: break-word;
  69 + display: flex;
  70 + align-items: center;
  71 + flex-basis: 49.9%;
  72 + }
  73 + .oldbox{
  74 + padding: 6px 3%;
  75 + width: 49.9%;
  76 + background-color: $tableCellC;
  77 + box-sizing: border-box;
  78 + border: 1px solid #fff;
  79 + width: 49.9%;
  80 + height: 100%;
  81 + float: left;
  82 + text-overflow:ellipsis;
  83 + white-space:nowrap;
  84 + overflow:hidden;
  85 + }
  86 +
  87 + }
  88 + }
  89 + }
  90 +
  91 + .my-swiper-button-prev,
  92 + .my-swiper-button-next {
  93 + position: absolute;
  94 + top: 50%;
  95 + width: 48px;
  96 + height: 48px;
  97 + margin-top: -44px;
  98 + cursor: pointer;
  99 + color: #666;
  100 + font-size: 48px;
  101 + &.swiper-button-disabled{
  102 + opacity: .3;
  103 + }
  104 + }
  105 +
  106 + .next-grey {
  107 + right: 30px;
  108 + left: auto;
  109 + }
  110 +
  111 + .prev-grey {
  112 + left: 30px;
  113 + right: auto;
  114 + }
  115 +
  116 +
  117 + .tag-container {
  118 + position: absolute;
  119 + left: 108px;
  120 + top: 40px;
  121 + height: 35px;
  122 + color: #fff;
  123 + font-size: 20px;
  124 + line-height: 35px;
  125 + z-index: 2;
  126 + .good-tag {
  127 + display: inline-block;
  128 + box-sizing: border-box;
  129 + margin-left: .5px;
  130 + font-size: 18px;
  131 + text-align: center;
  132 + padding:1px 5PX;
  133 + }
  134 + .new-tag {
  135 + background-color: #78dc7e;
  136 + color: #fff;
  137 + }
  138 + .renew-tag {
  139 + background-color: #78dc7e;
  140 + color: #fff;
  141 + }
  142 + .sale-tag {
  143 + background-color: #ff575c;
  144 + color: #fff;
  145 + }
  146 + .new-festival-tag {
  147 + background-color: #000;
  148 + color: #fff;
  149 + }
  150 + .yohood-tag {
  151 + background-color: #000;
  152 + color: #fff;
  153 + }
  154 + .limit-tag {
  155 + border: 1px solid #000;
  156 + background-color: #fff;
  157 + color: #000;
  158 + }
  159 + .soonSoldOut-tag {
  160 + background-color: #ffac5b;
  161 + color: #fff;
  162 + }
  163 + }
  164 +
  165 + .banner-container {
  166 + position: relative;
  167 + background-color: #fff;
  168 + }
  169 + .banner-top-single{
  170 + margin:0 auto;
  171 + overflow: hidden;
  172 + img{
  173 + width: 448px;
  174 + margin-top:30px;
  175 + margin-bottom:30px;
  176 + }
  177 + }
  178 + .banner-top {
  179 + min-height: 660px;
  180 + overflow: hidden;
  181 + position: relative;
  182 + .swiper-pagination {
  183 + position: absolute;
  184 + z-index: 2;
  185 + bottom: 40px;
  186 + .pagination-inner {
  187 + span {
  188 + background-color: #b0b0b0;
  189 + }
  190 + .swiper-pagination-bullet {
  191 + margin-right: 2PX;
  192 + }
  193 + .swiper-pagination-bullet-active {
  194 + background-color: #000;
  195 + }
  196 + }
  197 + }
  198 + }
  199 + .banner-swiper {
  200 + min-height: 600px;
  201 + min-width: 448px;
  202 + margin: 30px 96px;
  203 + overflow: hidden;
  204 + ul {
  205 + position: relative;
  206 + height: auto;
  207 + li {
  208 + float: left;
  209 + img {
  210 + height: auto;
  211 + }
  212 + }
  213 + }
  214 + }
  215 + .goodsName {
  216 + box-sizing: border-box;
  217 + width: 100%;
  218 + font-size: 28px;
  219 + color: #fff;
  220 + padding: 20px 28px;
  221 + line-height: 48px;
  222 + background-color: #515150;
  223 + }
  224 + .goodsSubtitle {
  225 + /*display: table;*/
  226 + height: 88px;
  227 + font-size: 24px;
  228 + color: $subFontC;
  229 + padding-left: 28px;
  230 + padding-right: 28px;
  231 + border-bottom: 1px solid $borderC;
  232 + background-color: $pageBgC;
  233 + display: flex;
  234 + align-items: center;
  235 + span{
  236 + /*display: table-cell;*/
  237 + display: -webkit-box;
  238 + line-height: 36px;
  239 + margin: 0;
  240 + text-overflow: -o-ellipsis-lastline;
  241 + overflow: hidden;
  242 + text-overflow: ellipsis;
  243 + -webkit-line-clamp: 2;
  244 + -webkit-box-orient: vertical;
  245 + }
  246 + }
  247 + .price-date {
  248 + position: relative;
  249 + width: 100%;
  250 + color: $subFontC;
  251 + height: 88px;
  252 + padding-left: 28px;
  253 + padding-right: 28px;
  254 + background-color: #fff;
  255 + border-bottom: 1px solid $borderC;
  256 + }
  257 +
  258 + .limit-sale {
  259 + height: 48px;
  260 + position: absolute;
  261 + right: 84px;
  262 + top: 50%;
  263 + margin-top: -24px;
  264 + color: #d0021b;
  265 + border: 2PX solid #d0021b;
  266 + background-color: #fff;
  267 + border-radius: 40px;
  268 + padding: 4px 20px;
  269 + font-size: 24px;
  270 + font-weight: bold;
  271 + }
  272 +
  273 + .limit-sale:active {
  274 + background-color: #f0f0f0;
  275 + }
  276 +
  277 + .got-limit-sale {
  278 + position: absolute;
  279 + right: 84px;
  280 + top: 24px;
  281 + color: #d0021b;
  282 + border: 2px solid #d0021b;
  283 + background-color: #fff;
  284 + border-radius: 40px;
  285 + padding: 4px 20px;
  286 + font-size: 24px;
  287 + font-weight: bold;
  288 + color: #ccc;
  289 + border-color: #ccc;
  290 + }
  291 +
  292 + .goodsPrice {
  293 + float: left;
  294 + font-size: 34.59px;
  295 + h1 {
  296 + display: inline-block;
  297 + line-height: 88px;
  298 + }
  299 + .currentPrice {
  300 + color: #d0021b;
  301 + margin-right: 10px;
  302 + }
  303 + .previousPrice {
  304 + text-decoration: line-through;
  305 + }
  306 + }
  307 + .periodOfMarket {
  308 + font-size: 24px;
  309 + float: right;
  310 + color: #d0021b;
  311 + margin-right: 1.4rem;
  312 + h1 {
  313 + display: inline-block;
  314 + line-height: 88px;
  315 + }
  316 + }
  317 +
  318 + .vip-level {
  319 + box-sizing: box-border;
  320 + padding-left: 28px;
  321 + padding-right: 28px;
  322 + min-height: 88px;
  323 + background-color: #fff;
  324 + font-size: 22px;
  325 + color: #999999;
  326 + border-bottom: 1px solid $borderC;
  327 + .icons-item {
  328 + float: left;
  329 + width: 33.3%;
  330 + height: 88px;
  331 + margin: 0;
  332 + &.current-level{
  333 + .vip-price{
  334 + color:#d0021b;
  335 + }
  336 + }
  337 + span {
  338 + vertical-align: middle;
  339 + display: inline-block;
  340 + line-height: 88px;
  341 + padding-left: 8px;
  342 + }
  343 + .vip-img {
  344 + width: 53px;
  345 + height: 32px;
  346 + }
  347 + &:nth-child(1) {
  348 + text-align: left;
  349 + .vip-img {
  350 + background: resolve('product/silver.png') no-repeat;
  351 + }
  352 + }
  353 + &:nth-child(2) {
  354 + .vip-img {
  355 + background: resolve('product/golden.png') no-repeat;
  356 + }
  357 + }
  358 + &:nth-child(3) {
  359 + text-align: right;
  360 + .vip-img {
  361 + background: resolve('product/platinum.png') no-repeat;
  362 + }
  363 + }
  364 + }
  365 + }
  366 + .goodsDiscount {
  367 + display: block;
  368 + width: 100%;
  369 + height:auto;
  370 + font-size: 28px;
  371 + color: $mainFontC;
  372 + background-color: #fff;
  373 + border-bottom: 1px solid $borderC;
  374 + h1 {
  375 + position: relative;
  376 + padding: 30px 60px 30px 28px;
  377 + line-height: 36px;
  378 + }
  379 +
  380 + .short-text {
  381 + white-space: nowrap;
  382 + overflow: hidden;
  383 + text-overflow: ellipsis;
  384 + }
  385 +
  386 + .iconfont {
  387 + position: absolute;
  388 + top: 30px;
  389 + right: 36px;
  390 + width: 35px;
  391 + font-size: 45px;
  392 + float: right;
  393 + color: #e0e0e0;
  394 + /*padding-left:50px;*/
  395 + }
  396 + .discount-folder {
  397 + .folder-item {
  398 + border-top: 1px solid $borderC;
  399 + }
  400 + display: none;
  401 + }
  402 + }
  403 + .enter-store {
  404 + position: relative;
  405 + padding: 0 180px 0 114px;
  406 + line-height: 84px;
  407 + background-color: #fff;
  408 + white-space: nowrap;
  409 + overflow: hidden;
  410 + text-overflow: ellipsis;
  411 +
  412 + .store-logo {
  413 + position: absolute;
  414 + left: 0;
  415 + top: 1px;
  416 + width: 68px;
  417 + height: 84px;
  418 + margin-left: 30px;
  419 + font-size: 0;
  420 + text-align: center;
  421 + img {
  422 + display: inline-block;
  423 + width: auto;
  424 + height: 68px;
  425 + vertical-align: middle;
  426 + }
  427 + }
  428 + .store-name {
  429 + font-size: 34px;
  430 + color: $mainFontC;
  431 + }
  432 + .store-link {
  433 + position: absolute;
  434 + right: 0;
  435 + top: 1px;
  436 + padding-right: 30px;
  437 + font-size: 28px;
  438 + color: $subFontC;
  439 + text-align: right;
  440 + span {
  441 + font-size: inherit;
  442 + }
  443 + }
  444 + }
  445 + /*底部固定栏*/
  446 + .cart-bar {
  447 + position: relative;
  448 + box-sizing: border-box;
  449 + width: 100%;
  450 + height: 120px;
  451 + position: fixed;
  452 + bottom: 0;
  453 + background-color: #fff;
  454 + z-index: 2;
  455 + padding: 20px 28px;
  456 + text-align: center;
  457 + border-top: 1px solid $borderC;
  458 + a {
  459 + display: inline-block;
  460 + &.num-incart {
  461 + font-size: 47px;
  462 + color: #444;
  463 + }
  464 + &.favorite {
  465 + font-size: 34px;
  466 + color: #ccc
  467 + }
  468 + &.favorite.liked {
  469 + color: $basicBtnC;
  470 + ;
  471 + }
  472 + &.addto-cart,
  473 + &.sold-out {
  474 + height: 80px;
  475 + width: 260px;
  476 + margin: 0 100px 0 115px;
  477 + color: #fff;
  478 + background-color: $basicBtnC;
  479 + font-size: 32px;
  480 + line-height: 80px;
  481 + text-align: center;
  482 + }
  483 + &.sold-out {
  484 + background-color: #f58189;
  485 + }
  486 + }
  487 + .num-tag {
  488 + display: block;
  489 + position: absolute;
  490 + top: 0;
  491 + left: 48px;
  492 + width: 72px;
  493 + height: 72px;
  494 + font-size: 40px;
  495 + line-height: 72px;
  496 + color: #fff;
  497 + background: $basicBtnC;
  498 + text-align: center;
  499 + border-radius: 50%;
  500 + transform: scale(0.5);
  501 +
  502 + &.hide{
  503 + display: none;
  504 + }
  505 + }
  506 + }
  507 + .recommend-for-you{
  508 + border-bottom: none;
  509 + }
  510 + .yoho-tip{
  511 + top:40%;
  512 + }
  513 +}
  514 +
  515 +@import "comments-consults";
  516 +@import "product-description";
  1 +.good-detail-page{
  2 + .goods-desc {
  3 + padding-bottom: 20px;
  4 + padding-top: 20px;
  5 +
  6 + .service {
  7 + width: 494px;
  8 + height: 28px;
  9 + margin-left: 50px;
  10 + background: resolve('product/service.png') no-repeat;
  11 + background-size: cover;
  12 + }
  13 + .detail{
  14 + margin-bottom: 1px;
  15 + }
  16 + .desc-text {
  17 + font-size: 24px;
  18 + padding: 16px 12px;
  19 + color: $mainFontC;
  20 + background-color: $tableCellC;
  21 + }
  22 + }
  23 + .tips {
  24 + color: $subFontC;
  25 + font-size: 18px;
  26 + margin-top: 20px;
  27 + }
  28 + .materials {
  29 + overflow: hidden;
  30 + &.page-block{
  31 + margin-bottom: 0;
  32 + border-bottom: none;
  33 + .detail{
  34 + margin-bottom: 0;
  35 + }
  36 + }
  37 + .detail {
  38 + .material-item{
  39 + margin: 10px 0;
  40 + width: 100%;
  41 + height: auto;
  42 + overflow: hidden;
  43 + display: block;
  44 + position: relative;
  45 +
  46 + img {
  47 + margin: 0;
  48 + }
  49 + .material-image {
  50 + width: 23%;
  51 + position: absolute;
  52 + left: 0;
  53 + top: 50%;
  54 + transform: translateY(-50%);
  55 + }
  56 + .material-desc {
  57 + font-size: 24px;
  58 + box-sizing: border-box;
  59 + text-align: left;
  60 + padding-left: 2%;
  61 + height: auto;
  62 + line-height: 38px;
  63 + color: #4b4b4b;
  64 + word-wrap: break-word;
  65 + width: 76.9%;
  66 + float: right;
  67 + }
  68 + &:last-child{
  69 + border-bottom: none;
  70 + }
  71 + }
  72 + }
  73 + }
  74 + .wash-tips{
  75 + padding-top:20px;
  76 + &.page-block{
  77 + padding-left: 15px;
  78 + padding-right: 15px;
  79 + }
  80 + .tip{
  81 + display: inline-block;
  82 + width: 16.6%;
  83 + float:left;
  84 + img{
  85 + width: 48px;
  86 + height: 48px;
  87 + margin-bottom: 10px;
  88 + }
  89 + .caption{
  90 + display: block;
  91 + padding: 0 13px;
  92 + font-size: 18px;
  93 + line-height: 22px;
  94 + min-height: 44px;
  95 + text-align:center;
  96 + }
  97 + }
  98 +
  99 + }
  100 + .product-detail {
  101 + .detail {
  102 + img {
  103 + margin-top: 20px;
  104 + width: 581px;
  105 + height:auto;
  106 + }
  107 +
  108 + a {
  109 + color: #2f91f6;
  110 + text-decoration: underline;
  111 +
  112 + }
  113 +
  114 + }
  115 + margin-top: 30px;
  116 + margin-bottom: 30px;
  117 + }
  118 + .detail-swiper {
  119 + .swiper-wrapper {
  120 + .swiper-slide {
  121 + width: auto;
  122 + div {
  123 + text-align: center;
  124 + &.cell {
  125 + line-height: 53px;
  126 + font-size: 24px;
  127 + background-color: $tableCellC;
  128 + padding: 0 40px;
  129 + border: 1px solid #fff;
  130 + }
  131 + }
  132 + }
  133 + }
  134 + }
  135 + /*模特*/
  136 + #reference-swiper-container {
  137 + .first-group {
  138 + width: 70px;
  139 + margin-top: 55px;
  140 + div{
  141 + height: 55px;
  142 + .avatar {
  143 + display: inline-block;
  144 + width: 40px;
  145 + border-radius: 50%;
  146 + margin-top:7px;
  147 + }
  148 + }
  149 + }
  150 + }
  151 +
  152 + /*测量方法*/
  153 + .measurement-method {
  154 + .detail {
  155 + width: 100%;
  156 + margin-top:0;
  157 + margin-bottom: 0;
  158 + img {
  159 + width: 100%;
  160 + height:auto;
  161 + }
  162 + }
  163 + }
  164 +}