shopping cart add css namespace
Showing
11 changed files
with
556 additions
and
540 deletions
| 1 | {{> sign-header}} | 1 | {{> sign-header}} |
| 2 | -<div class="blk-page center-content"> | 2 | +<div class="blk-page blk-cart-page center-content"> |
| 3 | {{> bc-nav}} | 3 | {{> bc-nav}} |
| 4 | {{> cart/info}} | 4 | {{> cart/info}} |
| 5 | <div id="cart_content"> | 5 | <div id="cart_content"> |
| @@ -295,13 +295,13 @@ | @@ -295,13 +295,13 @@ | ||
| 295 | <div class="selected-num">已选<span>\{{selectedNum}}</span>件</div> | 295 | <div class="selected-num">已选<span>\{{selectedNum}}</span>件</div> |
| 296 | <div class="checkout-total"> | 296 | <div class="checkout-total"> |
| 297 | <div class="total-title">商品金额:</div> | 297 | <div class="total-title">商品金额:</div> |
| 298 | - <div class="total-money">¥ <span>\{{totalMoney}}</span></div> | 298 | + <div class="total-money">¥ <span>\{{round totalMoney 2}}</span></div> |
| 299 | </div> | 299 | </div> |
| 300 | </div> | 300 | </div> |
| 301 | <div class="calculate"> | 301 | <div class="calculate"> |
| 302 | <div class="checkout-total pay-total"> | 302 | <div class="checkout-total pay-total"> |
| 303 | <div class="pay-title">应付金额（不含运费）:</div> | 303 | <div class="pay-title">应付金额（不含运费）:</div> |
| 304 | - <div class="total-money">¥ <span>\{{totalMoney}}</span></div> | 304 | + <div class="total-money">¥ <span>\{{round totalMoney 2}}</span></div> |
| 305 | </div> | 305 | </div> |
| 306 | </div> | 306 | </div> |
| 307 | <div class="checkout"> | 307 | <div class="checkout"> |
| @@ -13,13 +13,13 @@ | @@ -13,13 +13,13 @@ | ||
| 13 | <div class="selected-num">已选<span>{{selectedNum}}</span>件</div> | 13 | <div class="selected-num">已选<span>{{selectedNum}}</span>件</div> |
| 14 | <div class="checkout-total"> | 14 | <div class="checkout-total"> |
| 15 | <div class="total-title">商品金额:</div> | 15 | <div class="total-title">商品金额:</div> |
| 16 | - <div class="total-money">¥<span>{{totalMoney}}</span></div> | 16 | + <div class="total-money">¥<span> {{round totalMoney 2}}</span></div> |
| 17 | </div> | 17 | </div> |
| 18 | </div> | 18 | </div> |
| 19 | <div class="calculate"> | 19 | <div class="calculate"> |
| 20 | <div class="checkout-total pay-total"> | 20 | <div class="checkout-total pay-total"> |
| 21 | <div class="pay-title">应付金额（不含运费）:</div> | 21 | <div class="pay-title">应付金额（不含运费）:</div> |
| 22 | - <div class="total-money">¥<span>{{totalMoney}}</span></div> | 22 | + <div class="total-money">¥<span> {{round totalMoney 2}}</span></div> |
| 23 | </div> | 23 | </div> |
| 24 | </div> | 24 | </div> |
| 25 | <div class="checkout"> | 25 | <div class="checkout"> |
| @@ -2,88 +2,90 @@ | @@ -2,88 +2,90 @@ | ||
| 2 | border-bottom: none; | 2 | border-bottom: none; |
| 3 | } | 3 | } |
| 4 | 4 | ||
| 5 | -.cart-bc { | ||
| 6 | - width: 100%; | ||
| 7 | - position: relative; | ||
| 8 | - background: #999; | ||
| 9 | -} | 5 | +.blk-cart-page { |
| 6 | + .cart-bc { | ||
| 7 | + width: 100%; | ||
| 8 | + position: relative; | ||
| 9 | + background: #999; | ||
| 10 | + } | ||
| 10 | 11 | ||
| 11 | -.breadcrumb { | ||
| 12 | - list-style: none; | ||
| 13 | - overflow: hidden; | ||
| 14 | - margin: 0; | ||
| 15 | - padding: 0; | ||
| 16 | - height: 32px; | 12 | + .breadcrumb { |
| 13 | + list-style: none; | ||
| 14 | + overflow: hidden; | ||
| 15 | + margin: 0; | ||
| 16 | + padding: 0; | ||
| 17 | + height: 32px; | ||
| 17 | 18 | ||
| 18 | - .current { | ||
| 19 | - background: #1b1b1b; | ||
| 20 | - color: #fff; | ||
| 21 | - z-index: 1; | 19 | + .current { |
| 20 | + background: #1b1b1b; | ||
| 21 | + color: #fff; | ||
| 22 | + z-index: 1; | ||
| 22 | 23 | ||
| 23 | - i { | ||
| 24 | - border-color: #fff transparent #fff #1b1b1b; | 24 | + i { |
| 25 | + border-color: #fff transparent #fff #1b1b1b; | ||
| 26 | + } | ||
| 25 | } | 27 | } |
| 26 | - } | ||
| 27 | 28 | ||
| 28 | - li { | ||
| 29 | - float: left; | ||
| 30 | - width: 365px; | ||
| 31 | - text-align: center; | ||
| 32 | - position: relative; | ||
| 33 | - z-index: 2; | ||
| 34 | - font-weight: bold; | ||
| 35 | - font-size: 14px; | ||
| 36 | - line-height: 32px; | 29 | + li { |
| 30 | + float: left; | ||
| 31 | + width: 365px; | ||
| 32 | + text-align: center; | ||
| 33 | + position: relative; | ||
| 34 | + z-index: 2; | ||
| 35 | + font-weight: bold; | ||
| 36 | + font-size: 14px; | ||
| 37 | + line-height: 32px; | ||
| 38 | + | ||
| 39 | + &:last-child { | ||
| 40 | + i { | ||
| 41 | + right: -17px; | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + | ||
| 45 | + a { | ||
| 46 | + color: #fff; | ||
| 47 | + width: 100%; | ||
| 48 | + display: inline-block; | ||
| 49 | + position: relative; | ||
| 50 | + z-index: 0; | ||
| 51 | + } | ||
| 52 | + | ||
| 53 | + em { | ||
| 54 | + position: absolute; | ||
| 55 | + right: -24px; | ||
| 56 | + top: -8px; | ||
| 57 | + width: 0; | ||
| 58 | + height: 0; | ||
| 59 | + line-height: 0; | ||
| 60 | + border-width: 24px 0 24px 24px; | ||
| 61 | + border-color: transparent transparent transparent #fff; | ||
| 62 | + border-style: dashed dashed dashed solid; | ||
| 63 | + } | ||
| 37 | 64 | ||
| 38 | - &:last-child { | ||
| 39 | i { | 65 | i { |
| 40 | - right: -17px; | 66 | + position: absolute; |
| 67 | + right: -6px; | ||
| 68 | + top: 0; | ||
| 69 | + width: 0; | ||
| 70 | + height: 0; | ||
| 71 | + line-height: 0; | ||
| 72 | + border-width: 17px 0 17px 17px; | ||
| 73 | + border-color: #fff transparent #fff #999; | ||
| 74 | + border-style: dashed dashed dashed solid; | ||
| 75 | + z-index: 1000; | ||
| 41 | } | 76 | } |
| 42 | } | 77 | } |
| 43 | 78 | ||
| 44 | - a { | ||
| 45 | - color: #fff; | ||
| 46 | - width: 100%; | ||
| 47 | - display: inline-block; | ||
| 48 | - position: relative; | ||
| 49 | - z-index: 0; | 79 | + .level-1 { |
| 80 | + width: 375px; | ||
| 50 | } | 81 | } |
| 51 | 82 | ||
| 52 | - em { | ||
| 53 | - position: absolute; | ||
| 54 | - right: -24px; | ||
| 55 | - top: -8px; | ||
| 56 | - width: 0; | ||
| 57 | - height: 0; | ||
| 58 | - line-height: 0; | ||
| 59 | - border-width: 24px 0 24px 24px; | ||
| 60 | - border-color: transparent transparent transparent #fff; | ||
| 61 | - border-style: dashed dashed dashed solid; | 83 | + .level-2 { |
| 84 | + width: 400px; | ||
| 62 | } | 85 | } |
| 63 | 86 | ||
| 64 | - i { | ||
| 65 | - position: absolute; | ||
| 66 | - right: -6px; | ||
| 67 | - top: 0; | ||
| 68 | - width: 0; | ||
| 69 | - height: 0; | ||
| 70 | - line-height: 0; | ||
| 71 | - border-width: 17px 0 17px 17px; | ||
| 72 | - border-color: #fff transparent #fff #999; | ||
| 73 | - border-style: dashed dashed dashed solid; | ||
| 74 | - z-index: 1000; | 87 | + .level-3 { |
| 88 | + width: 375px; | ||
| 75 | } | 89 | } |
| 76 | } | 90 | } |
| 77 | - | ||
| 78 | - .level-1 { | ||
| 79 | - width: 375px; | ||
| 80 | - } | ||
| 81 | - | ||
| 82 | - .level-2 { | ||
| 83 | - width: 400px; | ||
| 84 | - } | ||
| 85 | - | ||
| 86 | - .level-3 { | ||
| 87 | - width: 375px; | ||
| 88 | - } | ||
| 89 | } | 91 | } |
| 1 | -.cart-header { | ||
| 2 | - margin: 50px auto; | ||
| 3 | - width: 100%; | ||
| 4 | - padding: 30px; | ||
| 5 | - border-bottom: 1px solid #eee; | 1 | +.blk-cart-page { |
| 2 | + .cart-header { | ||
| 3 | + margin: 50px auto; | ||
| 4 | + width: 100%; | ||
| 5 | + padding: 30px; | ||
| 6 | + border-bottom: 1px solid #eee; | ||
| 6 | 7 | ||
| 7 | - .titles { | ||
| 8 | - position: relative; | ||
| 9 | - } | ||
| 10 | - | ||
| 11 | - .toggle-chk { | ||
| 12 | - span { | ||
| 13 | - font-weight: bold; | ||
| 14 | - } | ||
| 15 | - .not-checked { | ||
| 16 | - color: #999; | 8 | + .titles { |
| 9 | + position: relative; | ||
| 17 | } | 10 | } |
| 18 | - } | ||
| 19 | 11 | ||
| 20 | - .chk-all { | ||
| 21 | - &:hover { | ||
| 22 | - cursor: pointer; | 12 | + .toggle-chk { |
| 13 | + span { | ||
| 14 | + font-weight: bold; | ||
| 15 | + } | ||
| 16 | + .not-checked { | ||
| 17 | + color: #999; | ||
| 18 | + } | ||
| 23 | } | 19 | } |
| 24 | - } | ||
| 25 | 20 | ||
| 26 | - .checked { | ||
| 27 | - display: none; | ||
| 28 | - } | 21 | + .chk-all { |
| 22 | + &:hover { | ||
| 23 | + cursor: pointer; | ||
| 24 | + } | ||
| 25 | + } | ||
| 29 | 26 | ||
| 30 | - .chk-group { | ||
| 31 | .checked { | 27 | .checked { |
| 32 | - display: inline-block; | ||
| 33 | - } | ||
| 34 | - .not-checked { | ||
| 35 | display: none; | 28 | display: none; |
| 36 | } | 29 | } |
| 37 | - } | ||
| 38 | 30 | ||
| 39 | - .iconfont { | ||
| 40 | - font-size: 16px; | ||
| 41 | - line-height: 16px; | ||
| 42 | - } | 31 | + .chk-group { |
| 32 | + .checked { | ||
| 33 | + display: inline-block; | ||
| 34 | + } | ||
| 35 | + .not-checked { | ||
| 36 | + display: none; | ||
| 37 | + } | ||
| 38 | + } | ||
| 43 | 39 | ||
| 44 | - .item { | ||
| 45 | - display: inline-block; | ||
| 46 | - text-align: center; | ||
| 47 | - font-size: 14px; | ||
| 48 | - font-weight: bold; | ||
| 49 | - } | 40 | + .iconfont { |
| 41 | + font-size: 16px; | ||
| 42 | + line-height: 16px; | ||
| 43 | + } | ||
| 50 | 44 | ||
| 51 | - .product { | ||
| 52 | - width: 380px; | ||
| 53 | - } | 45 | + .item { |
| 46 | + display: inline-block; | ||
| 47 | + text-align: center; | ||
| 48 | + font-size: 14px; | ||
| 49 | + font-weight: bold; | ||
| 50 | + } | ||
| 54 | 51 | ||
| 55 | - .price { | ||
| 56 | - width: 260px; | ||
| 57 | - padding-left: 50px; | ||
| 58 | - } | 52 | + .product { |
| 53 | + width: 380px; | ||
| 54 | + } | ||
| 59 | 55 | ||
| 60 | - .num { | ||
| 61 | - width: 90px; | ||
| 62 | - padding-left: 20px; | ||
| 63 | - } | 56 | + .price { |
| 57 | + width: 260px; | ||
| 58 | + padding-left: 50px; | ||
| 59 | + } | ||
| 64 | 60 | ||
| 65 | - .pro-total-price { | ||
| 66 | - width: 180px; | ||
| 67 | - } | 61 | + .num { |
| 62 | + width: 90px; | ||
| 63 | + padding-left: 20px; | ||
| 64 | + } | ||
| 68 | 65 | ||
| 69 | - .actions { | ||
| 70 | - position: absolute; | ||
| 71 | - width: 65px; | ||
| 72 | - text-align: center; | ||
| 73 | - right: 0; | 66 | + .pro-total-price { |
| 67 | + width: 180px; | ||
| 68 | + } | ||
| 69 | + | ||
| 70 | + .actions { | ||
| 71 | + position: absolute; | ||
| 72 | + width: 65px; | ||
| 73 | + text-align: center; | ||
| 74 | + right: 0; | ||
| 75 | + } | ||
| 74 | } | 76 | } |
| 75 | } | 77 | } |
| 1 | $hoverColor: #379ed6; | 1 | $hoverColor: #379ed6; |
| 2 | 2 | ||
| 3 | -.cart-pro-list { | ||
| 4 | - .title { | ||
| 5 | - border-bottom: 1px solid #eee; | ||
| 6 | - font-size: 16px; | ||
| 7 | - font-weight: bold; | ||
| 8 | - color: #1b1b1b; | ||
| 9 | - padding-left: 30px; | ||
| 10 | - padding-bottom: 17px; | ||
| 11 | - width: 100%; | ||
| 12 | - | ||
| 13 | - .note { | ||
| 14 | - font-size: 14px; | ||
| 15 | - color: #999; | ||
| 16 | - font-weight: normal; | ||
| 17 | - } | ||
| 18 | - } | ||
| 19 | - | ||
| 20 | - ul { | ||
| 21 | - height: 180px; | ||
| 22 | - border-bottom: 1px solid #eee; | ||
| 23 | - padding: 24px 30px; | 3 | +.blk-cart-page { |
| 4 | + .cart-pro-list { | ||
| 5 | + .title { | ||
| 6 | + border-bottom: 1px solid #eee; | ||
| 7 | + font-size: 16px; | ||
| 8 | + font-weight: bold; | ||
| 9 | + color: #1b1b1b; | ||
| 10 | + padding-left: 30px; | ||
| 11 | + padding-bottom: 17px; | ||
| 12 | + width: 100%; | ||
| 24 | 13 | ||
| 25 | - li { | ||
| 26 | - float: left; | ||
| 27 | - height: 134px; | 14 | + .note { |
| 15 | + font-size: 14px; | ||
| 16 | + color: #999; | ||
| 17 | + font-weight: normal; | ||
| 18 | + } | ||
| 28 | } | 19 | } |
| 29 | 20 | ||
| 30 | - .chk { | ||
| 31 | - padding: 58px 60px 58px 0; | ||
| 32 | - } | 21 | + ul { |
| 22 | + height: 180px; | ||
| 23 | + border-bottom: 1px solid #eee; | ||
| 24 | + padding: 24px 30px; | ||
| 33 | 25 | ||
| 34 | - .toggle-chk-item { | ||
| 35 | - span { | ||
| 36 | - font-weight: bold; | 26 | + li { |
| 27 | + float: left; | ||
| 28 | + height: 134px; | ||
| 37 | } | 29 | } |
| 38 | - .not-checked { | ||
| 39 | - color: #999; | 30 | + |
| 31 | + .chk { | ||
| 32 | + padding: 58px 60px 58px 0; | ||
| 40 | } | 33 | } |
| 41 | - } | ||
| 42 | 34 | ||
| 43 | - .checked { | ||
| 44 | - display: none; | ||
| 45 | - } | 35 | + .toggle-chk-item { |
| 36 | + span { | ||
| 37 | + font-weight: bold; | ||
| 38 | + } | ||
| 39 | + .not-checked { | ||
| 40 | + color: #999; | ||
| 41 | + } | ||
| 42 | + } | ||
| 46 | 43 | ||
| 47 | - .chk-group { | ||
| 48 | .checked { | 44 | .checked { |
| 49 | - display: inline-block; | ||
| 50 | - } | ||
| 51 | - .not-checked { | ||
| 52 | display: none; | 45 | display: none; |
| 53 | } | 46 | } |
| 54 | - } | ||
| 55 | 47 | ||
| 56 | - .iconfont { | ||
| 57 | - font-size: 16px; | ||
| 58 | - line-height: 16px; | ||
| 59 | - } | 48 | + .chk-group { |
| 49 | + .checked { | ||
| 50 | + display: inline-block; | ||
| 51 | + } | ||
| 52 | + .not-checked { | ||
| 53 | + display: none; | ||
| 54 | + } | ||
| 55 | + } | ||
| 60 | 56 | ||
| 61 | - .pro-info { | ||
| 62 | - width: 342px; | ||
| 63 | - padding-left: 42px; | ||
| 64 | - font-size: 12px; | ||
| 65 | - font-weight: bold; | 57 | + .iconfont { |
| 58 | + font-size: 16px; | ||
| 59 | + line-height: 16px; | ||
| 60 | + } | ||
| 66 | 61 | ||
| 67 | - .brand-name { | ||
| 68 | - margin-bottom: 19px; | 62 | + .pro-info { |
| 63 | + width: 342px; | ||
| 64 | + padding-left: 42px; | ||
| 65 | + font-size: 12px; | ||
| 66 | + font-weight: bold; | ||
| 67 | + | ||
| 68 | + .brand-name { | ||
| 69 | + margin-bottom: 19px; | ||
| 70 | + } | ||
| 71 | + | ||
| 72 | + .size { | ||
| 73 | + margin-bottom: 13px; | ||
| 74 | + } | ||
| 75 | + | ||
| 76 | + .published-at { | ||
| 77 | + margin-bottom: 13px; | ||
| 78 | + } | ||
| 69 | } | 79 | } |
| 70 | 80 | ||
| 71 | .pro-name { | 81 | .pro-name { |
| @@ -84,147 +94,138 @@ $hoverColor: #379ed6; | @@ -84,147 +94,138 @@ $hoverColor: #379ed6; | ||
| 84 | } | 94 | } |
| 85 | } | 95 | } |
| 86 | 96 | ||
| 87 | - .size { | ||
| 88 | - margin-bottom: 13px; | 97 | + .price { |
| 98 | + display: inline-block; | ||
| 99 | + padding: 59px 0; | ||
| 100 | + font-size: 16px; | ||
| 101 | + font-weight: bold; | ||
| 89 | } | 102 | } |
| 90 | 103 | ||
| 91 | - .published-at { | ||
| 92 | - margin-bottom: 13px; | 104 | + .price-num { |
| 105 | + width: 300px; | ||
| 106 | + padding-left: 40px; | ||
| 107 | + position: relative; | ||
| 108 | + | ||
| 109 | + .stepper { | ||
| 110 | + position: absolute; | ||
| 111 | + right: 15px; | ||
| 112 | + padding: 52px 0; | ||
| 113 | + } | ||
| 93 | } | 114 | } |
| 94 | - } | ||
| 95 | 115 | ||
| 96 | - .price { | ||
| 97 | - display: inline-block; | ||
| 98 | - padding: 59px 0; | ||
| 99 | - font-size: 16px; | ||
| 100 | - font-weight: bold; | 116 | + .total-price-action { |
| 117 | + width: 270px; | ||
| 118 | + padding-left: 50px; | ||
| 119 | + position: relative; | ||
| 120 | + | ||
| 121 | + .actions { | ||
| 122 | + position: absolute; | ||
| 123 | + right: 0; | ||
| 124 | + display: inline-block; | ||
| 125 | + height: 51px; | ||
| 126 | + padding: 42px 0; | ||
| 127 | + } | ||
| 128 | + | ||
| 129 | + .action { | ||
| 130 | + margin-bottom: 24px; | ||
| 131 | + font-size: 13px; | ||
| 132 | + } | ||
| 133 | + } | ||
| 101 | } | 134 | } |
| 102 | 135 | ||
| 103 | - .price-num { | ||
| 104 | - width: 300px; | ||
| 105 | - padding-left: 40px; | ||
| 106 | - position: relative; | 136 | + .pros-group { |
| 137 | + margin-bottom: 30px; | ||
| 138 | + border-top: 1px solid #eee; | ||
| 107 | 139 | ||
| 108 | - .stepper { | ||
| 109 | - position: absolute; | ||
| 110 | - right: 15px; | ||
| 111 | - padding: 52px 0; | 140 | + &:first-child { |
| 141 | + border-top: none; | ||
| 112 | } | 142 | } |
| 113 | } | 143 | } |
| 114 | 144 | ||
| 115 | - .total-price-action { | ||
| 116 | - width: 270px; | ||
| 117 | - padding-left: 50px; | 145 | + .editable { |
| 146 | + padding: 5px; | ||
| 147 | + width: 168px; | ||
| 118 | position: relative; | 148 | position: relative; |
| 119 | 149 | ||
| 120 | - .actions { | ||
| 121 | - position: absolute; | ||
| 122 | - right: 0; | ||
| 123 | - display: inline-block; | ||
| 124 | - height: 51px; | ||
| 125 | - padding: 42px 0; | 150 | + .iconfont { |
| 151 | + display: none; | ||
| 126 | } | 152 | } |
| 127 | 153 | ||
| 128 | - .action { | ||
| 129 | - margin-bottom: 24px; | ||
| 130 | - font-size: 13px; | 154 | + &:hover { |
| 155 | + cursor: pointer; | ||
| 156 | + border: 1px dashed #3a9ed6; | ||
| 157 | + | ||
| 158 | + .iconfont { | ||
| 159 | + position: absolute; | ||
| 160 | + right: 5px; | ||
| 161 | + top: 3px; | ||
| 162 | + font-size: 16px; | ||
| 163 | + font-weight: normal !important; | ||
| 164 | + display: inline-block !important; | ||
| 165 | + } | ||
| 166 | + } | ||
| 167 | + .sizes-list { | ||
| 168 | + width: 195px; | ||
| 169 | + } | ||
| 170 | + .size-item { | ||
| 171 | + height: 20px; | ||
| 172 | + border: 1px solid #e8e8e8; | ||
| 173 | + display: inline-block; | ||
| 174 | + text-align: center; | ||
| 175 | + font-size: 12px; | ||
| 176 | + padding: 4px; | ||
| 131 | } | 177 | } |
| 132 | - } | ||
| 133 | - } | ||
| 134 | 178 | ||
| 135 | - .pros-group { | ||
| 136 | - margin-bottom: 30px; | ||
| 137 | - border-top: 1px solid #eee; | 179 | + .color-item { |
| 180 | + display: inline-block; | ||
| 181 | + width: 20px; | ||
| 182 | + height: 20px; | ||
| 183 | + border: 1px solid #000; | ||
| 184 | + margin-right: 20px; | ||
| 185 | + } | ||
| 138 | 186 | ||
| 139 | - &:first-child { | ||
| 140 | - border-top: none; | 187 | + .actions { |
| 188 | + span { | ||
| 189 | + font-size: 12px; | ||
| 190 | + float: left; | ||
| 191 | + } | ||
| 192 | + } | ||
| 141 | } | 193 | } |
| 142 | - } | ||
| 143 | - | ||
| 144 | - .editable { | ||
| 145 | - padding: 5px; | ||
| 146 | - width: 168px; | ||
| 147 | - position: relative; | ||
| 148 | - | ||
| 149 | - .iconfont { | ||
| 150 | - display: none; | 194 | + .mr20 { |
| 195 | + margin-right: 20px; | ||
| 151 | } | 196 | } |
| 152 | - | ||
| 153 | - &:hover { | ||
| 154 | - cursor: pointer; | ||
| 155 | - border: 1px dashed #3a9ed6; | ||
| 156 | - | ||
| 157 | - .iconfont { | ||
| 158 | - position: absolute; | ||
| 159 | - right: 5px; | ||
| 160 | - top: 3px; | ||
| 161 | - font-size: 16px; | ||
| 162 | - font-weight: normal !important; | ||
| 163 | - display: inline-block !important; | ||
| 164 | - } | 197 | + .mr10 { |
| 198 | + margin-right: 10px; | ||
| 165 | } | 199 | } |
| 166 | - .sizes-list { | ||
| 167 | - width: 195px; | 200 | + .mb10 { |
| 201 | + margin-bottom: 10px; | ||
| 168 | } | 202 | } |
| 169 | - .size-item { | ||
| 170 | - height: 20px; | ||
| 171 | - border: 1px solid #e8e8e8; | ||
| 172 | - display: inline-block; | ||
| 173 | - text-align: center; | ||
| 174 | - font-size: 12px; | ||
| 175 | - padding: 4px; | 203 | + .mb20 { |
| 204 | + margin-bottom: 20px; | ||
| 176 | } | 205 | } |
| 177 | - | ||
| 178 | - .color-item { | ||
| 179 | - display: inline-block; | ||
| 180 | - width: 20px; | ||
| 181 | - height: 20px; | ||
| 182 | - border: 1px solid #000; | ||
| 183 | - margin-right: 20px; | 206 | + .mb30 { |
| 207 | + margin-bottom: 30px; | ||
| 184 | } | 208 | } |
| 185 | 209 | ||
| 186 | - .actions { | ||
| 187 | - span { | ||
| 188 | - font-size: 12px; | ||
| 189 | - float: left; | ||
| 190 | - } | ||
| 191 | - } | ||
| 192 | - } | ||
| 193 | - .mr20 { | ||
| 194 | - margin-right: 20px; | ||
| 195 | - } | ||
| 196 | - .mr10 { | ||
| 197 | - margin-right: 10px; | ||
| 198 | - } | ||
| 199 | - .mb10 { | ||
| 200 | - margin-bottom: 10px; | ||
| 201 | } | 210 | } |
| 202 | - .mb20 { | ||
| 203 | - margin-bottom: 20px; | ||
| 204 | - } | ||
| 205 | - .mb30 { | ||
| 206 | - margin-bottom: 30px; | ||
| 207 | - } | ||
| 208 | - | ||
| 209 | -} | ||
| 210 | 211 | ||
| 211 | -.invalid-pros { | ||
| 212 | - margin-top: 80px; | ||
| 213 | - border-top: 1px solid #eee; | ||
| 214 | - color: #999; | 212 | + .invalid-pros { |
| 213 | + margin-top: 80px; | ||
| 214 | + border-top: 1px solid #eee; | ||
| 215 | + color: #999; | ||
| 215 | 216 | ||
| 216 | - .warning { | ||
| 217 | - font-size: 18px !important; | ||
| 218 | - color: #666; | ||
| 219 | - width: 20px; | ||
| 220 | - height: 17px; | 217 | + .warning { |
| 218 | + font-size: 18px !important; | ||
| 219 | + color: #666; | ||
| 220 | + width: 20px; | ||
| 221 | + height: 17px; | ||
| 222 | + } | ||
| 221 | } | 223 | } |
| 222 | -} | ||
| 223 | 224 | ||
| 224 | -.action { | ||
| 225 | - &:hover { | ||
| 226 | - cursor: pointer; | ||
| 227 | - color: #379ed6; | 225 | + .action { |
| 226 | + &:hover { | ||
| 227 | + cursor: pointer; | ||
| 228 | + color: #379ed6; | ||
| 229 | + } | ||
| 228 | } | 230 | } |
| 229 | } | 231 | } |
| 230 | - |
| 1 | -.edit-color-size { | ||
| 2 | - position: absolute; | ||
| 3 | - left: 180px; | ||
| 4 | - width: 354px; | ||
| 5 | - height: 250px; | ||
| 6 | - border: 2px solid #bbb; | ||
| 7 | - top: -113px; | ||
| 8 | - *top: -113px; | ||
| 9 | - background: #fff; | ||
| 10 | - z-index: 1000; | ||
| 11 | - padding: 25px 20px; | ||
| 12 | - | ||
| 13 | - .indicator { | 1 | +.blk-cart-page { |
| 2 | + .edit-color-size { | ||
| 14 | position: absolute; | 3 | position: absolute; |
| 15 | - left: -20px; | ||
| 16 | - top: 112px; | ||
| 17 | - *top: 113px; | ||
| 18 | - width: 0; | ||
| 19 | - height: 0; | ||
| 20 | - border-width: 10px; | ||
| 21 | - border-style: dashed; | ||
| 22 | - border-color: transparent #bbb transparent transparent; | ||
| 23 | - } | 4 | + left: 180px; |
| 5 | + width: 354px; | ||
| 6 | + height: 250px; | ||
| 7 | + border: 2px solid #bbb; | ||
| 8 | + top: -113px; | ||
| 9 | + *top: -113px; | ||
| 10 | + background: #fff; | ||
| 11 | + z-index: 1000; | ||
| 12 | + padding: 25px 20px; | ||
| 24 | 13 | ||
| 25 | - i { | ||
| 26 | - position: absolute; | ||
| 27 | - top: -10px; | ||
| 28 | - left: -7px; | ||
| 29 | - display: block; | ||
| 30 | - height: 0; | ||
| 31 | - width: 0; | ||
| 32 | - font-size: 0; | ||
| 33 | - line-height: 0; | ||
| 34 | - border-color: transparent #fff transparent transparent; | ||
| 35 | - border-style: dashed solid dashed dashed; | ||
| 36 | - border-width: 10px; | ||
| 37 | - } | 14 | + .indicator { |
| 15 | + position: absolute; | ||
| 16 | + left: -20px; | ||
| 17 | + top: 112px; | ||
| 18 | + *top: 113px; | ||
| 19 | + width: 0; | ||
| 20 | + height: 0; | ||
| 21 | + border-width: 10px; | ||
| 22 | + border-style: dashed; | ||
| 23 | + border-color: transparent #bbb transparent transparent; | ||
| 24 | + } | ||
| 38 | 25 | ||
| 39 | - .current { | ||
| 40 | - background-color: #444; | ||
| 41 | - color: #fff; | ||
| 42 | - } | 26 | + i { |
| 27 | + position: absolute; | ||
| 28 | + top: -10px; | ||
| 29 | + left: -7px; | ||
| 30 | + display: block; | ||
| 31 | + height: 0; | ||
| 32 | + width: 0; | ||
| 33 | + font-size: 0; | ||
| 34 | + line-height: 0; | ||
| 35 | + border-color: transparent #fff transparent transparent; | ||
| 36 | + border-style: dashed solid dashed dashed; | ||
| 37 | + border-width: 10px; | ||
| 38 | + } | ||
| 43 | 39 | ||
| 44 | - .current-color { | ||
| 45 | - .inner { | ||
| 46 | - border: 2px solid #b0b0b0; | ||
| 47 | - width: 18px; | ||
| 48 | - height: 18px; | ||
| 49 | - display: inline-block; | 40 | + .current { |
| 41 | + background-color: #444; | ||
| 42 | + color: #fff; | ||
| 43 | + } | ||
| 44 | + | ||
| 45 | + .current-color { | ||
| 46 | + .inner { | ||
| 47 | + border: 2px solid #b0b0b0; | ||
| 48 | + width: 18px; | ||
| 49 | + height: 18px; | ||
| 50 | + display: inline-block; | ||
| 51 | + } | ||
| 50 | } | 52 | } |
| 51 | - } | ||
| 52 | 53 | ||
| 53 | - .right { | ||
| 54 | - float: left; | 54 | + .right { |
| 55 | + float: left; | ||
| 55 | 56 | ||
| 56 | - .img-preview { | ||
| 57 | - margin: 20px 0; | 57 | + .img-preview { |
| 58 | + margin: 20px 0; | ||
| 59 | + } | ||
| 58 | } | 60 | } |
| 59 | } | 61 | } |
| 60 | } | 62 | } |
| 1 | -.empty-cart { | ||
| 2 | - width: 400px; | ||
| 3 | - margin: 100px auto 200px; | ||
| 4 | - text-align: center; | ||
| 5 | - | ||
| 6 | - .empty-cart-bg { | ||
| 7 | - background: resolve('layout/bag-bg.png') no-repeat center center; | ||
| 8 | - width: 163px; | ||
| 9 | - height: 198px; | ||
| 10 | - margin: 0 auto; | ||
| 11 | - } | ||
| 12 | - | ||
| 13 | - .empty-cart-info { | ||
| 14 | - font-size: 20px; | ||
| 15 | - color: #1b1b1b; | 1 | +.blk-cart-page { |
| 2 | + .empty-cart { | ||
| 3 | + width: 400px; | ||
| 4 | + margin: 100px auto 200px; | ||
| 16 | text-align: center; | 5 | text-align: center; |
| 17 | - margin-bottom: 20px; | ||
| 18 | - } | ||
| 19 | 6 | ||
| 20 | - .go-to-shop { | ||
| 21 | - text-align: center; | ||
| 22 | - display: inline-block; | 7 | + .empty-cart-bg { |
| 8 | + background: resolve('layout/bag-bg.png') no-repeat center center; | ||
| 9 | + width: 163px; | ||
| 10 | + height: 198px; | ||
| 11 | + margin: 0 auto; | ||
| 12 | + } | ||
| 23 | 13 | ||
| 24 | - span { | ||
| 25 | - width: 130px; | ||
| 26 | - height: 40px; | 14 | + .empty-cart-info { |
| 15 | + font-size: 20px; | ||
| 27 | color: #1b1b1b; | 16 | color: #1b1b1b; |
| 28 | - font-size: 14px; | ||
| 29 | - padding: 12px 0; | ||
| 30 | - line-height: 14px; | 17 | + text-align: center; |
| 18 | + margin-bottom: 20px; | ||
| 19 | + } | ||
| 20 | + | ||
| 21 | + .go-to-shop { | ||
| 22 | + text-align: center; | ||
| 23 | + display: inline-block; | ||
| 24 | + | ||
| 25 | + span { | ||
| 26 | + width: 130px; | ||
| 27 | + height: 40px; | ||
| 28 | + color: #1b1b1b; | ||
| 29 | + font-size: 14px; | ||
| 30 | + padding: 12px 0; | ||
| 31 | + line-height: 14px; | ||
| 32 | + } | ||
| 31 | } | 33 | } |
| 32 | } | 34 | } |
| 33 | } | 35 | } |
| 1 | -.info-bar { | ||
| 2 | - margin-top: 20px; | ||
| 3 | - padding: 8px 30px; | ||
| 4 | - background: #f5f5f5; | ||
| 5 | - font-size: 14px; | ||
| 6 | - color: #818181; | ||
| 7 | - | ||
| 8 | - a { | ||
| 9 | - color: #219dd6; | ||
| 10 | - } | ||
| 11 | - | ||
| 12 | - .pull-right { | ||
| 13 | - float: right; | ||
| 14 | - width: 14px; | ||
| 15 | - height: 14px; | 1 | +.blk-cart-page { |
| 2 | + .info-bar { | ||
| 3 | + margin-top: 20px; | ||
| 4 | + padding: 8px 30px; | ||
| 5 | + background: #f5f5f5; | ||
| 16 | font-size: 14px; | 6 | font-size: 14px; |
| 17 | color: #818181; | 7 | color: #818181; |
| 18 | 8 | ||
| 19 | - &:hover { | ||
| 20 | - cursor: pointer; | 9 | + a { |
| 10 | + color: #219dd6; | ||
| 21 | } | 11 | } |
| 22 | - } | ||
| 23 | 12 | ||
| 13 | + .pull-right { | ||
| 14 | + float: right; | ||
| 15 | + width: 14px; | ||
| 16 | + height: 14px; | ||
| 17 | + font-size: 14px; | ||
| 18 | + color: #818181; | ||
| 19 | + | ||
| 20 | + &:hover { | ||
| 21 | + cursor: pointer; | ||
| 22 | + } | ||
| 23 | + } | ||
| 24 | + } | ||
| 24 | } | 25 | } |
| 1 | -.cart-statement { | ||
| 2 | - margin: 50px auto; | ||
| 3 | - width: 100%; | ||
| 4 | - height: 194px; | ||
| 5 | - padding: 30px; | ||
| 6 | - border: 1px solid #eee; | ||
| 7 | - .toggle-chk { | ||
| 8 | - span { | ||
| 9 | - font-weight: bold; | ||
| 10 | - } | ||
| 11 | - .not-checked { | ||
| 12 | - color: #999; | 1 | +.blk-cart-page { |
| 2 | + .cart-statement { | ||
| 3 | + margin: 50px auto; | ||
| 4 | + width: 100%; | ||
| 5 | + height: 194px; | ||
| 6 | + padding: 30px; | ||
| 7 | + border: 1px solid #eee; | ||
| 8 | + .toggle-chk { | ||
| 9 | + span { | ||
| 10 | + font-weight: bold; | ||
| 11 | + } | ||
| 12 | + .not-checked { | ||
| 13 | + color: #999; | ||
| 14 | + } | ||
| 13 | } | 15 | } |
| 14 | - } | ||
| 15 | 16 | ||
| 16 | - .checked { | ||
| 17 | - display: none; | ||
| 18 | - } | ||
| 19 | - | ||
| 20 | - .chk-group { | ||
| 21 | .checked { | 17 | .checked { |
| 22 | - display: inline-block; | ||
| 23 | - } | ||
| 24 | - .not-checked { | ||
| 25 | display: none; | 18 | display: none; |
| 26 | } | 19 | } |
| 27 | - } | ||
| 28 | - | ||
| 29 | - .iconfont { | ||
| 30 | - font-size: 16px; | ||
| 31 | - line-height: 16px; | ||
| 32 | - } | ||
| 33 | 20 | ||
| 34 | - .action { | ||
| 35 | - display: inline-block; | ||
| 36 | - margin-right: 40px; | ||
| 37 | - font-size: 14px; | ||
| 38 | - line-height: 16px; | ||
| 39 | - padding: 1px 0; | ||
| 40 | - color: #1b1b1b; | 21 | + .chk-group { |
| 22 | + .checked { | ||
| 23 | + display: inline-block; | ||
| 24 | + } | ||
| 25 | + .not-checked { | ||
| 26 | + display: none; | ||
| 27 | + } | ||
| 28 | + } | ||
| 41 | 29 | ||
| 42 | - &:hover { | ||
| 43 | - cursor: pointer; | 30 | + .iconfont { |
| 31 | + font-size: 16px; | ||
| 32 | + line-height: 16px; | ||
| 44 | } | 33 | } |
| 45 | 34 | ||
| 46 | - label { | 35 | + .action { |
| 36 | + display: inline-block; | ||
| 37 | + margin-right: 40px; | ||
| 38 | + font-size: 14px; | ||
| 39 | + line-height: 16px; | ||
| 40 | + padding: 1px 0; | ||
| 41 | + color: #1b1b1b; | ||
| 42 | + | ||
| 47 | &:hover { | 43 | &:hover { |
| 48 | cursor: pointer; | 44 | cursor: pointer; |
| 49 | } | 45 | } |
| 50 | - } | ||
| 51 | - } | ||
| 52 | - | ||
| 53 | - .selected-num { | ||
| 54 | - display: inline-block; | ||
| 55 | - font-size: 14px; | ||
| 56 | - color: #1b1b1b; | ||
| 57 | - font-weight: bold; | ||
| 58 | - margin: 0 60px 0 140px; | ||
| 59 | - } | ||
| 60 | 46 | ||
| 61 | - .checkout-total { | ||
| 62 | - position: relative; | ||
| 63 | - float: right; | ||
| 64 | - font-size: 14px; | ||
| 65 | - color: #1b1b1b; | ||
| 66 | - font-weight: bold; | ||
| 67 | - width: 350px; | 47 | + label { |
| 48 | + &:hover { | ||
| 49 | + cursor: pointer; | ||
| 50 | + } | ||
| 51 | + } | ||
| 52 | + } | ||
| 68 | 53 | ||
| 69 | - div { | 54 | + .selected-num { |
| 70 | display: inline-block; | 55 | display: inline-block; |
| 56 | + font-size: 14px; | ||
| 57 | + color: #1b1b1b; | ||
| 58 | + font-weight: bold; | ||
| 59 | + margin: 0 60px 0 140px; | ||
| 71 | } | 60 | } |
| 72 | 61 | ||
| 73 | - .total-money { | ||
| 74 | - position: absolute; | ||
| 75 | - right: 0; | 62 | + .checkout-total { |
| 63 | + position: relative; | ||
| 64 | + float: right; | ||
| 65 | + font-size: 14px; | ||
| 66 | + color: #1b1b1b; | ||
| 67 | + font-weight: bold; | ||
| 68 | + width: 350px; | ||
| 69 | + | ||
| 70 | + div { | ||
| 71 | + display: inline-block; | ||
| 72 | + } | ||
| 73 | + | ||
| 74 | + .total-money { | ||
| 75 | + position: absolute; | ||
| 76 | + right: 0; | ||
| 77 | + } | ||
| 76 | } | 78 | } |
| 77 | - } | ||
| 78 | 79 | ||
| 79 | - .pay-total { | ||
| 80 | - float: right; | ||
| 81 | - border-top: 2px solid #1b1b1b; | ||
| 82 | - padding-top: 15px; | ||
| 83 | - } | 80 | + .pay-total { |
| 81 | + float: right; | ||
| 82 | + border-top: 2px solid #1b1b1b; | ||
| 83 | + padding-top: 15px; | ||
| 84 | + } | ||
| 84 | 85 | ||
| 85 | - .calculate { | ||
| 86 | - margin-top: 15px; | ||
| 87 | - height: 31px; | ||
| 88 | - } | 86 | + .calculate { |
| 87 | + margin-top: 15px; | ||
| 88 | + height: 31px; | ||
| 89 | + } | ||
| 89 | 90 | ||
| 90 | - .checkout { | ||
| 91 | - margin-top: 40px; | ||
| 92 | - float: right; | ||
| 93 | - margin-right: 192px; | 91 | + .checkout { |
| 92 | + margin-top: 40px; | ||
| 93 | + float: right; | ||
| 94 | + margin-right: 192px; | ||
| 94 | 95 | ||
| 95 | - .btn { | ||
| 96 | - padding: 14px 59px; | ||
| 97 | - width: 160px; | ||
| 98 | - display: inline-block; | ||
| 99 | - height: 40px; | ||
| 100 | - font-size: 14px; | ||
| 101 | - line-height: 14px; | 96 | + .btn { |
| 97 | + padding: 14px 59px; | ||
| 98 | + width: 160px; | ||
| 99 | + display: inline-block; | ||
| 100 | + height: 40px; | ||
| 101 | + font-size: 14px; | ||
| 102 | + line-height: 14px; | ||
| 103 | + } | ||
| 102 | } | 104 | } |
| 103 | - } | ||
| 104 | 105 | ||
| 105 | - .hoverable { | ||
| 106 | - &:hover { | ||
| 107 | - cursor: pointer; | ||
| 108 | - color: #379ed6; | 106 | + .hoverable { |
| 107 | + &:hover { | ||
| 108 | + cursor: pointer; | ||
| 109 | + color: #379ed6; | ||
| 110 | + } | ||
| 109 | } | 111 | } |
| 110 | } | 112 | } |
| 111 | } | 113 | } |
| 1 | -.stepper { | ||
| 2 | - display: inline-block; | 1 | +.blk-cart-page { |
| 2 | + .stepper { | ||
| 3 | + display: inline-block; | ||
| 3 | 4 | ||
| 4 | - div { | ||
| 5 | - float: left; | ||
| 6 | - } | 5 | + div { |
| 6 | + float: left; | ||
| 7 | + } | ||
| 7 | 8 | ||
| 8 | - .action { | ||
| 9 | - width: 20px; | ||
| 10 | - height: 28px; | ||
| 11 | - text-align: center; | ||
| 12 | - border: 1px solid #eee; | ||
| 13 | - color: #999; | 9 | + .action { |
| 10 | + width: 20px; | ||
| 11 | + height: 28px; | ||
| 12 | + text-align: center; | ||
| 13 | + border: 1px solid #eee; | ||
| 14 | + color: #999; | ||
| 14 | 15 | ||
| 15 | - &:hover { | ||
| 16 | - background-color: #666; | ||
| 17 | - cursor: pointer; | ||
| 18 | - color: #fff; | ||
| 19 | - } | 16 | + &:hover { |
| 17 | + background-color: #666; | ||
| 18 | + cursor: pointer; | ||
| 19 | + color: #fff; | ||
| 20 | + } | ||
| 20 | 21 | ||
| 21 | - .iconfont { | ||
| 22 | - font-size: 14px; | ||
| 23 | - line-height: 28px; | ||
| 24 | - height: 14px; | ||
| 25 | - display: inline-block; | 22 | + .iconfont { |
| 23 | + font-size: 14px; | ||
| 24 | + line-height: 28px; | ||
| 25 | + height: 14px; | ||
| 26 | + display: inline-block; | ||
| 26 | 27 | ||
| 27 | - } | 28 | + } |
| 28 | 29 | ||
| 29 | - } | 30 | + } |
| 30 | 31 | ||
| 31 | - .disable { | ||
| 32 | - background: #999; | ||
| 33 | - color: #fff; | ||
| 34 | - } | 32 | + .disable { |
| 33 | + background: #999; | ||
| 34 | + color: #fff; | ||
| 35 | + } | ||
| 35 | 36 | ||
| 36 | - .input { | ||
| 37 | - margin: 0 5px; | ||
| 38 | - width: 38px; | ||
| 39 | - height: 28px; | ||
| 40 | - text-align: center; | ||
| 41 | - } | 37 | + .input { |
| 38 | + margin: 0 5px; | ||
| 39 | + width: 38px; | ||
| 40 | + height: 28px; | ||
| 41 | + text-align: center; | ||
| 42 | + } | ||
| 42 | 43 | ||
| 43 | - .warning { | ||
| 44 | - clear: both; | ||
| 45 | - text-align: center; | ||
| 46 | - width: 100%; | ||
| 47 | - margin-top: 5px; | ||
| 48 | - color: #e8044f; | ||
| 49 | - font-size: 13px; | ||
| 50 | - font-weight: bold; | 44 | + .warning { |
| 45 | + clear: both; | ||
| 46 | + text-align: center; | ||
| 47 | + width: 100%; | ||
| 48 | + margin-top: 5px; | ||
| 49 | + color: #e8044f; | ||
| 50 | + font-size: 13px; | ||
| 51 | + font-weight: bold; | ||
| 52 | + } | ||
| 51 | } | 53 | } |
| 52 | } | 54 | } |
| 1 | -.tooltip { | ||
| 2 | - position: absolute; | ||
| 3 | - font-weight: normal !important; | 1 | +.blk-cart-page { |
| 2 | + .tooltip { | ||
| 3 | + position: relative; | ||
| 4 | + font-weight: normal !important; | ||
| 4 | 5 | ||
| 5 | - .content { | ||
| 6 | - font-size: 12px; | ||
| 7 | - background: #f5f5f5; | ||
| 8 | - position: absolute; | ||
| 9 | - top: -38px; | ||
| 10 | - text-align: center; | ||
| 11 | - width: 140px; | ||
| 12 | - padding: 10px; | ||
| 13 | - left: -10px; | ||
| 14 | - top: -57px; | ||
| 15 | - } | 6 | + .content { |
| 7 | + font-size: 12px; | ||
| 8 | + background: #f5f5f5; | ||
| 9 | + position: absolute; | ||
| 10 | + top: -38px; | ||
| 11 | + text-align: center; | ||
| 12 | + width: 140px; | ||
| 13 | + padding: 10px; | ||
| 14 | + left: -10px; | ||
| 15 | + top: -57px; | ||
| 16 | + } | ||
| 16 | 17 | ||
| 17 | - .indicator { | ||
| 18 | - position: absolute; | ||
| 19 | - left: 0; | ||
| 20 | - width: 0; | ||
| 21 | - height: 0; | ||
| 22 | - border-width: 8px; | ||
| 23 | - top: -26px; | ||
| 24 | - border-style: solid dashed dashed; | ||
| 25 | - border-color: #f5f5f5 transparent transparent; | ||
| 26 | - } | 18 | + .indicator { |
| 19 | + position: absolute; | ||
| 20 | + left: 0; | ||
| 21 | + width: 0; | ||
| 22 | + height: 0; | ||
| 23 | + border-width: 8px; | ||
| 24 | + top: -26px; | ||
| 25 | + border-style: solid dashed dashed; | ||
| 26 | + border-color: #f5f5f5 transparent transparent; | ||
| 27 | + } | ||
| 27 | 28 | ||
| 28 | - .all { | ||
| 29 | - width: 320px; | 29 | + .all { |
| 30 | + width: 320px; | ||
| 31 | + } | ||
| 30 | } | 32 | } |
| 31 | } | 33 | } |
-
Please register or login to post a comment