fe / yohobuy-node · Commits

Go to a project

Authored by hongweigao
Commit c60f1d7ec9d591284e173481b7101fd31708b106 1 parent 8c3437ac

详情页套餐区样式

Inline Side-by-side
Showing 4 changed files with 168 additions and 1 deletions
@@ -29,11 +29,13 @@ @@ -29,11 +29,13 @@
29 </div> 29 </div>
30 {{/if}} 30 {{/if}}
31 31
32 - <div class="share-row"><span class="title pull-left">分享商品：</span> {{> common/share }} </div> 32 + <div class="share-row clearfix"><span class="title pull-left">分享商品：</span> {{> common/share }} </div>
33 33
34 {{!-- 因接口原因，暂存size的title的值 --}} 34 {{!-- 因接口原因，暂存size的title的值 --}}
35 <div id="size-title-json" style="display: none;">{{sizeTitleJson}}</div> 35 <div id="size-title-json" style="display: none;">{{sizeTitleJson}}</div>
36 36
  37 + {{> product/package}}
  38 +
37 <div class="other-infos"> 39 <div class="other-infos">
38 <div class="description-material info-block"> 40 <div class="description-material info-block">
39 <p class="block-title"id="block-title-head"> 41 <p class="block-title"id="block-title-head">
  1 +<div class="package-box clearfix">
  2 + <div class="title-header">优惠套装</div>
  3 + <div class="package-pro clearfix">
  4 + <div class="good-info" data-skn="" data-from="">
  5 + <div class="good-detail-img">
  6 + <a class="good-thumb" href="" target="_blank">
  7 + <img class="lazy" src="//img11.static.yhbimg.com/goodsimg/2016/11/24/14/012a2e26bd48f26654cbbe724280cd29d9.jpg?imageMogr2/thumbnail/280x382/extent/280x382/background/d2hpdGU=/position/center/quality/90" style="display: block;">
  8 + </a>
  9 + </div>
  10 + <div class="good-detail-text stu-good-detail ">
  11 + <a href="" target="_blank">PALLADIUM Pampa Cuff WP Lux 男 高帮牛皮防水休闲鞋</a>
  12 + <p class="price ">
  13 + <span class="sale-price red-color">
  14 + ¥1078.20
  15 + </span>
  16 + </p>
  17 + </div>
  18 + </div>
  19 + <div class="spliter">+</div>
  20 + <div class="good-info" data-skn="" data-from="">
  21 + <div class="good-detail-img">
  22 + <a class="good-thumb" href="" target="_blank">
  23 + <img class="lazy" src="//img11.static.yhbimg.com/goodsimg/2016/11/24/14/012a2e26bd48f26654cbbe724280cd29d9.jpg?imageMogr2/thumbnail/280x382/extent/280x382/background/d2hpdGU=/position/center/quality/90" style="display: block;">
  24 + </a>
  25 + </div>
  26 + <div class="good-detail-text stu-good-detail ">
  27 + <a href="" target="_blank">PALLADIUM Pampa Cuff WP Lux 男 高帮牛皮防水休闲鞋</a>
  28 + <p class="price ">
  29 + <span class="sale-price red-color">
  30 + ¥1078.20
  31 + </span>
  32 + </p>
  33 + </div>
  34 + </div>
  35 + <div class="spliter">+</div>
  36 + <div class="good-info" data-skn="" data-from="">
  37 + <div class="good-detail-img">
  38 + <a class="good-thumb" href="" target="_blank">
  39 + <img class="lazy" src="//img11.static.yhbimg.com/goodsimg/2016/11/24/14/012a2e26bd48f26654cbbe724280cd29d9.jpg?imageMogr2/thumbnail/280x382/extent/280x382/background/d2hpdGU=/position/center/quality/90" style="display: block;">
  40 + </a>
  41 + </div>
  42 + <div class="good-detail-text stu-good-detail ">
  43 + <a href="" target="_blank">PALLADIUM Pampa Cuff WP Lux 男 高帮牛皮防水休闲鞋</a>
  44 + <p class="price ">
  45 + <span class="sale-price red-color">
  46 + ¥1078.20
  47 + </span>
  48 + </p>
  49 + </div>
  50 + </div>
  51 + <div class="spliter">+</div>
  52 + <div class="good-info" data-skn="" data-from="">
  53 + <div class="good-detail-img">
  54 + <a class="good-thumb" href="" target="_blank">
  55 + <img class="lazy" src="//img11.static.yhbimg.com/goodsimg/2016/11/24/14/012a2e26bd48f26654cbbe724280cd29d9.jpg?imageMogr2/thumbnail/280x382/extent/280x382/background/d2hpdGU=/position/center/quality/90" style="display: block;">
  56 + </a>
  57 + </div>
  58 + <div class="good-detail-text stu-good-detail ">
  59 + <a href="" target="_blank">PALLADIUM Cuff WP Lux 男 高帮牛皮防水休闲鞋</a>
  60 + <p class="price ">
  61 + <span class="sale-price red-color">
  62 + ¥1078.20
  63 + </span>
  64 + </p>
  65 + </div>
  66 + </div>
  67 + <div class="spliter">=</div>
  68 + <div class="package-priceList">
  69 + <p>销售价:<em class="sale-price">¥633.00</em></p>
  70 + <p>套餐价:<em class="package-price red-color">¥520.00</em></p>
  71 + <p class="save-text red-color">立省<em class="save-price">¥113.00</em>元</p>
  72 + <span class="buy-product red-color">
  73 + <em>立即购买</em>
  74 + </span>
  75 + </div>
  76 + </div>
  77 +</div>
@@ -742,6 +742,10 @@ $('#brand-favour').click(function() { @@ -742,6 +742,10 @@ $('#brand-favour').click(function() {
742 // $modelContent.slideDown(SLIDETIME); 742 // $modelContent.slideDown(SLIDETIME);
743 // } 743 // }
744 // }); 744 // });
  745 +//详情页套餐区
  746 +$('.good-info .good-detail-text > a').dotdotdot({
  747 + wrap: 'letter'
  748 +});
745 749
746 // 售后服务 750 // 售后服务
747 $('.after-service-switch').click(function() { 751 $('.after-service-switch').click(function() {
@@ -716,6 +716,90 @@ @@ -716,6 +716,90 @@
716 716
717 } 717 }
718 718
  719 + /**套餐**/
  720 + .package-box {
  721 + margin-top: 30px;
  722 + border: 1px solid #eaeceb;
  723 +
  724 + .title-header {
  725 + line-height: 45px;
  726 + background-color: #f5f5f5;
  727 + border-bottom: 1px solid #eaeceb;
  728 + text-indent: 20px;
  729 + }
  730 +
  731 + .package-pro {
  732 + width: 990px;
  733 + margin: 0 auto;
  734 + }
  735 +
  736 + .spliter {
  737 + width: 50px;
  738 + float: left;
  739 + margin: 0 25px;
  740 + color: #b0b0b0;
  741 + text-align: center;
  742 + font-size: 25px;
  743 + line-height: 196px;
  744 + }
  745 +
  746 + .good-info {
  747 + margin: 25px 0;
  748 + width: 110px;
  749 + }
  750 +
  751 + .good-info .good-detail-img {
  752 + width: 100px;
  753 + height: 135px;
  754 + margin: 0 auto;
  755 + }
  756 +
  757 + .good-info .good-detail-text > .price {
  758 + text-align: center;
  759 + font-weight: bold;
  760 + }
  761 +
  762 + .good-info .good-detail-text > a {
  763 + height: 35px;
  764 + }
  765 +
  766 + .package-priceList {
  767 + float: left;
  768 + margin-top: 25px;
  769 +
  770 + .sale-price {
  771 + text-decoration: line-through;
  772 + }
  773 +
  774 + .package-price {
  775 + font-weight: bold;
  776 + }
  777 +
  778 + .save-text {
  779 + margin-top: 10px;
  780 + }
  781 +
  782 + .buy-product {
  783 + display: inline-block;
  784 + margin-top: 40px;
  785 + width: 120px;
  786 + height: 30px;
  787 + text-align: center;
  788 + line-height: 30px;
  789 + border: 1px solid #d42838;
  790 + }
  791 +
  792 + > p {
  793 + line-height: 25px;
  794 + font-size: 14px;
  795 + }
  796 + }
  797 +
  798 + .red-color {
  799 + color: #d42838;
  800 + }
  801 + }
  802 +
719 .video-wrap { 803 .video-wrap {
720 804
721 } 805 }