fe / yoho-blk · Commits

Go to a project

Authored by jinhu.tung
Commit e37c09645678751e2867519c230a68c96f27e918 2 parents d630fed9 4b8c53ff

shopping cart add css namespace

Inline Side-by-side
Showing 11 changed files with 556 additions and 540 deletions
{{> sign-header}}
<div class="blk-page center-content">
<div class="blk-page blk-cart-page center-content">
{{> bc-nav}}
{{> cart/info}}
<div id="cart_content">
... ... @@ -295,13 +295,13 @@
<div class="selected-num">已选<span>\{{selectedNum}}</span>件</div>
<div class="checkout-total">
<div class="total-title">商品金额:</div>
<div class="total-money">¥ <span>\{{totalMoney}}</span></div>
<div class="total-money">¥ <span>\{{round totalMoney 2}}</span></div>
</div>
</div>
<div class="calculate">
<div class="checkout-total pay-total">
<div class="pay-title">应付金额（不含运费）:</div>
<div class="total-money">¥ <span>\{{totalMoney}}</span></div>
<div class="total-money">¥ <span>\{{round totalMoney 2}}</span></div>
</div>
</div>
<div class="checkout">
... ...
... ... @@ -13,13 +13,13 @@
<div class="selected-num">已选<span>{{selectedNum}}</span>件</div>
<div class="checkout-total">
<div class="total-title">商品金额:</div>
<div class="total-money">¥<span>{{totalMoney}}</span></div>
<div class="total-money">¥<span> {{round totalMoney 2}}</span></div>
</div>
</div>
<div class="calculate">
<div class="checkout-total pay-total">
<div class="pay-title">应付金额（不含运费）:</div>
<div class="total-money">¥<span>{{totalMoney}}</span></div>
<div class="total-money">¥<span> {{round totalMoney 2}}</span></div>
</div>
</div>
<div class="checkout">
... ...
... ... @@ -2,88 +2,90 @@
border-bottom: none;
}
.cart-bc {
width: 100%;
position: relative;
background: #999;
}
.blk-cart-page {
.cart-bc {
width: 100%;
position: relative;
background: #999;
}
.breadcrumb {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
height: 32px;
.breadcrumb {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
height: 32px;
.current {
background: #1b1b1b;
color: #fff;
z-index: 1;
.current {
background: #1b1b1b;
color: #fff;
z-index: 1;
i {
border-color: #fff transparent #fff #1b1b1b;
i {
border-color: #fff transparent #fff #1b1b1b;
}
}
}
li {
float: left;
width: 365px;
text-align: center;
position: relative;
z-index: 2;
font-weight: bold;
font-size: 14px;
line-height: 32px;
li {
float: left;
width: 365px;
text-align: center;
position: relative;
z-index: 2;
font-weight: bold;
font-size: 14px;
line-height: 32px;
&:last-child {
i {
right: -17px;
}
}
a {
color: #fff;
width: 100%;
display: inline-block;
position: relative;
z-index: 0;
}
em {
position: absolute;
right: -24px;
top: -8px;
width: 0;
height: 0;
line-height: 0;
border-width: 24px 0 24px 24px;
border-color: transparent transparent transparent #fff;
border-style: dashed dashed dashed solid;
}
&:last-child {
i {
right: -17px;
position: absolute;
right: -6px;
top: 0;
width: 0;
height: 0;
line-height: 0;
border-width: 17px 0 17px 17px;
border-color: #fff transparent #fff #999;
border-style: dashed dashed dashed solid;
z-index: 1000;
}
}
a {
color: #fff;
width: 100%;
display: inline-block;
position: relative;
z-index: 0;
.level-1 {
width: 375px;
}
em {
position: absolute;
right: -24px;
top: -8px;
width: 0;
height: 0;
line-height: 0;
border-width: 24px 0 24px 24px;
border-color: transparent transparent transparent #fff;
border-style: dashed dashed dashed solid;
.level-2 {
width: 400px;
}
i {
position: absolute;
right: -6px;
top: 0;
width: 0;
height: 0;
line-height: 0;
border-width: 17px 0 17px 17px;
border-color: #fff transparent #fff #999;
border-style: dashed dashed dashed solid;
z-index: 1000;
.level-3 {
width: 375px;
}
}
.level-1 {
width: 375px;
}
.level-2 {
width: 400px;
}
.level-3 {
width: 375px;
}
}
... ...
.cart-header {
margin: 50px auto;
width: 100%;
padding: 30px;
border-bottom: 1px solid #eee;
.blk-cart-page {
.cart-header {
margin: 50px auto;
width: 100%;
padding: 30px;
border-bottom: 1px solid #eee;
.titles {
position: relative;
}
.toggle-chk {
span {
font-weight: bold;
}
.not-checked {
color: #999;
.titles {
position: relative;
}
}
.chk-all {
&:hover {
cursor: pointer;
.toggle-chk {
span {
font-weight: bold;
}
.not-checked {
color: #999;
}
}
}
.checked {
display: none;
}
.chk-all {
&:hover {
cursor: pointer;
}
}
.chk-group {
.checked {
display: inline-block;
}
.not-checked {
display: none;
}
}
.iconfont {
font-size: 16px;
line-height: 16px;
}
.chk-group {
.checked {
display: inline-block;
}
.not-checked {
display: none;
}
}
.item {
display: inline-block;
text-align: center;
font-size: 14px;
font-weight: bold;
}
.iconfont {
font-size: 16px;
line-height: 16px;
}
.product {
width: 380px;
}
.item {
display: inline-block;
text-align: center;
font-size: 14px;
font-weight: bold;
}
.price {
width: 260px;
padding-left: 50px;
}
.product {
width: 380px;
}
.num {
width: 90px;
padding-left: 20px;
}
.price {
width: 260px;
padding-left: 50px;
}
.pro-total-price {
width: 180px;
}
.num {
width: 90px;
padding-left: 20px;
}
.actions {
position: absolute;
width: 65px;
text-align: center;
right: 0;
.pro-total-price {
width: 180px;
}
.actions {
position: absolute;
width: 65px;
text-align: center;
right: 0;
}
}
}
... ...
$hoverColor: #379ed6;
.cart-pro-list {
.title {
border-bottom: 1px solid #eee;
font-size: 16px;
font-weight: bold;
color: #1b1b1b;
padding-left: 30px;
padding-bottom: 17px;
width: 100%;
.note {
font-size: 14px;
color: #999;
font-weight: normal;
}
}
ul {
height: 180px;
border-bottom: 1px solid #eee;
padding: 24px 30px;
.blk-cart-page {
.cart-pro-list {
.title {
border-bottom: 1px solid #eee;
font-size: 16px;
font-weight: bold;
color: #1b1b1b;
padding-left: 30px;
padding-bottom: 17px;
width: 100%;
li {
float: left;
height: 134px;
.note {
font-size: 14px;
color: #999;
font-weight: normal;
}
}
.chk {
padding: 58px 60px 58px 0;
}
ul {
height: 180px;
border-bottom: 1px solid #eee;
padding: 24px 30px;
.toggle-chk-item {
span {
font-weight: bold;
li {
float: left;
height: 134px;
}
.not-checked {
color: #999;
.chk {
padding: 58px 60px 58px 0;
}
}
.checked {
display: none;
}
.toggle-chk-item {
span {
font-weight: bold;
}
.not-checked {
color: #999;
}
}
.chk-group {
.checked {
display: inline-block;
}
.not-checked {
display: none;
}
}
.iconfont {
font-size: 16px;
line-height: 16px;
}
.chk-group {
.checked {
display: inline-block;
}
.not-checked {
display: none;
}
}
.pro-info {
width: 342px;
padding-left: 42px;
font-size: 12px;
font-weight: bold;
.iconfont {
font-size: 16px;
line-height: 16px;
}
.brand-name {
margin-bottom: 19px;
.pro-info {
width: 342px;
padding-left: 42px;
font-size: 12px;
font-weight: bold;
.brand-name {
margin-bottom: 19px;
}
.size {
margin-bottom: 13px;
}
.published-at {
margin-bottom: 13px;
}
}
.pro-name {
... ... @@ -84,147 +94,138 @@ $hoverColor: #379ed6;
}
}
.size {
margin-bottom: 13px;
.price {
display: inline-block;
padding: 59px 0;
font-size: 16px;
font-weight: bold;
}
.published-at {
margin-bottom: 13px;
.price-num {
width: 300px;
padding-left: 40px;
position: relative;
.stepper {
position: absolute;
right: 15px;
padding: 52px 0;
}
}
}
.price {
display: inline-block;
padding: 59px 0;
font-size: 16px;
font-weight: bold;
.total-price-action {
width: 270px;
padding-left: 50px;
position: relative;
.actions {
position: absolute;
right: 0;
display: inline-block;
height: 51px;
padding: 42px 0;
}
.action {
margin-bottom: 24px;
font-size: 13px;
}
}
}
.price-num {
width: 300px;
padding-left: 40px;
position: relative;
.pros-group {
margin-bottom: 30px;
border-top: 1px solid #eee;
.stepper {
position: absolute;
right: 15px;
padding: 52px 0;
&:first-child {
border-top: none;
}
}
.total-price-action {
width: 270px;
padding-left: 50px;
.editable {
padding: 5px;
width: 168px;
position: relative;
.actions {
position: absolute;
right: 0;
display: inline-block;
height: 51px;
padding: 42px 0;
.iconfont {
display: none;
}
.action {
margin-bottom: 24px;
font-size: 13px;
&:hover {
cursor: pointer;
border: 1px dashed #3a9ed6;
.iconfont {
position: absolute;
right: 5px;
top: 3px;
font-size: 16px;
font-weight: normal !important;
display: inline-block !important;
}
}
.sizes-list {
width: 195px;
}
.size-item {
height: 20px;
border: 1px solid #e8e8e8;
display: inline-block;
text-align: center;
font-size: 12px;
padding: 4px;
}
}
}
.pros-group {
margin-bottom: 30px;
border-top: 1px solid #eee;
.color-item {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #000;
margin-right: 20px;
}
&:first-child {
border-top: none;
.actions {
span {
font-size: 12px;
float: left;
}
}
}
}
.editable {
padding: 5px;
width: 168px;
position: relative;
.iconfont {
display: none;
.mr20 {
margin-right: 20px;
}
&:hover {
cursor: pointer;
border: 1px dashed #3a9ed6;
.iconfont {
position: absolute;
right: 5px;
top: 3px;
font-size: 16px;
font-weight: normal !important;
display: inline-block !important;
}
.mr10 {
margin-right: 10px;
}
.sizes-list {
width: 195px;
.mb10 {
margin-bottom: 10px;
}
.size-item {
height: 20px;
border: 1px solid #e8e8e8;
display: inline-block;
text-align: center;
font-size: 12px;
padding: 4px;
.mb20 {
margin-bottom: 20px;
}
.color-item {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #000;
margin-right: 20px;
.mb30 {
margin-bottom: 30px;
}
.actions {
span {
font-size: 12px;
float: left;
}
}
}
.mr20 {
margin-right: 20px;
}
.mr10 {
margin-right: 10px;
}
.mb10 {
margin-bottom: 10px;
}
.mb20 {
margin-bottom: 20px;
}
.mb30 {
margin-bottom: 30px;
}
}
.invalid-pros {
margin-top: 80px;
border-top: 1px solid #eee;
color: #999;
.invalid-pros {
margin-top: 80px;
border-top: 1px solid #eee;
color: #999;
.warning {
font-size: 18px !important;
color: #666;
width: 20px;
height: 17px;
.warning {
font-size: 18px !important;
color: #666;
width: 20px;
height: 17px;
}
}
}
.action {
&:hover {
cursor: pointer;
color: #379ed6;
.action {
&:hover {
cursor: pointer;
color: #379ed6;
}
}
}
... ...
.edit-color-size {
position: absolute;
left: 180px;
width: 354px;
height: 250px;
border: 2px solid #bbb;
top: -113px;
*top: -113px;
background: #fff;
z-index: 1000;
padding: 25px 20px;
.indicator {
.blk-cart-page {
.edit-color-size {
position: absolute;
left: -20px;
top: 112px;
*top: 113px;
width: 0;
height: 0;
border-width: 10px;
border-style: dashed;
border-color: transparent #bbb transparent transparent;
}
left: 180px;
width: 354px;
height: 250px;
border: 2px solid #bbb;
top: -113px;
*top: -113px;
background: #fff;
z-index: 1000;
padding: 25px 20px;
i {
position: absolute;
top: -10px;
left: -7px;
display: block;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
border-color: transparent #fff transparent transparent;
border-style: dashed solid dashed dashed;
border-width: 10px;
}
.indicator {
position: absolute;
left: -20px;
top: 112px;
*top: 113px;
width: 0;
height: 0;
border-width: 10px;
border-style: dashed;
border-color: transparent #bbb transparent transparent;
}
.current {
background-color: #444;
color: #fff;
}
i {
position: absolute;
top: -10px;
left: -7px;
display: block;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
border-color: transparent #fff transparent transparent;
border-style: dashed solid dashed dashed;
border-width: 10px;
}
.current-color {
.inner {
border: 2px solid #b0b0b0;
width: 18px;
height: 18px;
display: inline-block;
.current {
background-color: #444;
color: #fff;
}
.current-color {
.inner {
border: 2px solid #b0b0b0;
width: 18px;
height: 18px;
display: inline-block;
}
}
}
.right {
float: left;
.right {
float: left;
.img-preview {
margin: 20px 0;
.img-preview {
margin: 20px 0;
}
}
}
}
... ...
.empty-cart {
width: 400px;
margin: 100px auto 200px;
text-align: center;
.empty-cart-bg {
background: resolve('layout/bag-bg.png') no-repeat center center;
width: 163px;
height: 198px;
margin: 0 auto;
}
.empty-cart-info {
font-size: 20px;
color: #1b1b1b;
.blk-cart-page {
.empty-cart {
width: 400px;
margin: 100px auto 200px;
text-align: center;
margin-bottom: 20px;
}
.go-to-shop {
text-align: center;
display: inline-block;
.empty-cart-bg {
background: resolve('layout/bag-bg.png') no-repeat center center;
width: 163px;
height: 198px;
margin: 0 auto;
}
span {
width: 130px;
height: 40px;
.empty-cart-info {
font-size: 20px;
color: #1b1b1b;
font-size: 14px;
padding: 12px 0;
line-height: 14px;
text-align: center;
margin-bottom: 20px;
}
.go-to-shop {
text-align: center;
display: inline-block;
span {
width: 130px;
height: 40px;
color: #1b1b1b;
font-size: 14px;
padding: 12px 0;
line-height: 14px;
}
}
}
}
... ...
.info-bar {
margin-top: 20px;
padding: 8px 30px;
background: #f5f5f5;
font-size: 14px;
color: #818181;
a {
color: #219dd6;
}
.pull-right {
float: right;
width: 14px;
height: 14px;
.blk-cart-page {
.info-bar {
margin-top: 20px;
padding: 8px 30px;
background: #f5f5f5;
font-size: 14px;
color: #818181;
&:hover {
cursor: pointer;
a {
color: #219dd6;
}
}
.pull-right {
float: right;
width: 14px;
height: 14px;
font-size: 14px;
color: #818181;
&:hover {
cursor: pointer;
}
}
}
}
... ...
.cart-statement {
margin: 50px auto;
width: 100%;
height: 194px;
padding: 30px;
border: 1px solid #eee;
.toggle-chk {
span {
font-weight: bold;
}
.not-checked {
color: #999;
.blk-cart-page {
.cart-statement {
margin: 50px auto;
width: 100%;
height: 194px;
padding: 30px;
border: 1px solid #eee;
.toggle-chk {
span {
font-weight: bold;
}
.not-checked {
color: #999;
}
}
}
.checked {
display: none;
}
.chk-group {
.checked {
display: inline-block;
}
.not-checked {
display: none;
}
}
.iconfont {
font-size: 16px;
line-height: 16px;
}
.action {
display: inline-block;
margin-right: 40px;
font-size: 14px;
line-height: 16px;
padding: 1px 0;
color: #1b1b1b;
.chk-group {
.checked {
display: inline-block;
}
.not-checked {
display: none;
}
}
&:hover {
cursor: pointer;
.iconfont {
font-size: 16px;
line-height: 16px;
}
label {
.action {
display: inline-block;
margin-right: 40px;
font-size: 14px;
line-height: 16px;
padding: 1px 0;
color: #1b1b1b;
&:hover {
cursor: pointer;
}
}
}
.selected-num {
display: inline-block;
font-size: 14px;
color: #1b1b1b;
font-weight: bold;
margin: 0 60px 0 140px;
}
.checkout-total {
position: relative;
float: right;
font-size: 14px;
color: #1b1b1b;
font-weight: bold;
width: 350px;
label {
&:hover {
cursor: pointer;
}
}
}
div {
.selected-num {
display: inline-block;
font-size: 14px;
color: #1b1b1b;
font-weight: bold;
margin: 0 60px 0 140px;
}
.total-money {
position: absolute;
right: 0;
.checkout-total {
position: relative;
float: right;
font-size: 14px;
color: #1b1b1b;
font-weight: bold;
width: 350px;
div {
display: inline-block;
}
.total-money {
position: absolute;
right: 0;
}
}
}
.pay-total {
float: right;
border-top: 2px solid #1b1b1b;
padding-top: 15px;
}
.pay-total {
float: right;
border-top: 2px solid #1b1b1b;
padding-top: 15px;
}
.calculate {
margin-top: 15px;
height: 31px;
}
.calculate {
margin-top: 15px;
height: 31px;
}
.checkout {
margin-top: 40px;
float: right;
margin-right: 192px;
.checkout {
margin-top: 40px;
float: right;
margin-right: 192px;
.btn {
padding: 14px 59px;
width: 160px;
display: inline-block;
height: 40px;
font-size: 14px;
line-height: 14px;
.btn {
padding: 14px 59px;
width: 160px;
display: inline-block;
height: 40px;
font-size: 14px;
line-height: 14px;
}
}
}
.hoverable {
&:hover {
cursor: pointer;
color: #379ed6;
.hoverable {
&:hover {
cursor: pointer;
color: #379ed6;
}
}
}
}
... ...
.stepper {
display: inline-block;
.blk-cart-page {
.stepper {
display: inline-block;
div {
float: left;
}
div {
float: left;
}
.action {
width: 20px;
height: 28px;
text-align: center;
border: 1px solid #eee;
color: #999;
.action {
width: 20px;
height: 28px;
text-align: center;
border: 1px solid #eee;
color: #999;
&:hover {
background-color: #666;
cursor: pointer;
color: #fff;
}
&:hover {
background-color: #666;
cursor: pointer;
color: #fff;
}
.iconfont {
font-size: 14px;
line-height: 28px;
height: 14px;
display: inline-block;
.iconfont {
font-size: 14px;
line-height: 28px;
height: 14px;
display: inline-block;
}
}
}
}
.disable {
background: #999;
color: #fff;
}
.disable {
background: #999;
color: #fff;
}
.input {
margin: 0 5px;
width: 38px;
height: 28px;
text-align: center;
}
.input {
margin: 0 5px;
width: 38px;
height: 28px;
text-align: center;
}
.warning {
clear: both;
text-align: center;
width: 100%;
margin-top: 5px;
color: #e8044f;
font-size: 13px;
font-weight: bold;
.warning {
clear: both;
text-align: center;
width: 100%;
margin-top: 5px;
color: #e8044f;
font-size: 13px;
font-weight: bold;
}
}
}
... ...
.tooltip {
position: absolute;
font-weight: normal !important;
.blk-cart-page {
.tooltip {
position: relative;
font-weight: normal !important;
.content {
font-size: 12px;
background: #f5f5f5;
position: absolute;
top: -38px;
text-align: center;
width: 140px;
padding: 10px;
left: -10px;
top: -57px;
}
.content {
font-size: 12px;
background: #f5f5f5;
position: absolute;
top: -38px;
text-align: center;
width: 140px;
padding: 10px;
left: -10px;
top: -57px;
}
.indicator {
position: absolute;
left: 0;
width: 0;
height: 0;
border-width: 8px;
top: -26px;
border-style: solid dashed dashed;
border-color: #f5f5f5 transparent transparent;
}
.indicator {
position: absolute;
left: 0;
width: 0;
height: 0;
border-width: 8px;
top: -26px;
border-style: solid dashed dashed;
border-color: #f5f5f5 transparent transparent;
}
.all {
width: 320px;
.all {
width: 320px;
}
}
}
... ...