优化购物车
This commit is contained in:
parent
474c0bfdf6
commit
5a8baa5b26
|
|
@ -84,6 +84,13 @@ header {
|
|||
body:not(.page-home) header {
|
||||
box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
header .dropdown:hover .dropdown-menu {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
header .dropdown:hover .dropdown-menu.dropdown-menu-end {
|
||||
right: 0;
|
||||
}
|
||||
header .top-wrap {
|
||||
height: 44px;
|
||||
background: #F7F8FA;
|
||||
|
|
@ -94,10 +101,6 @@ header .header-content .container {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
header .header-content .navbar-nav li:hover .dropdown-menu {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
header .header-content .menu-wrap .nav-link {
|
||||
color: #333;
|
||||
font-size: 0.9rem;
|
||||
|
|
@ -377,6 +380,7 @@ body.page-cart .cart-products-wrap .table tbody {
|
|||
}
|
||||
body.page-cart .cart-products-wrap .table tbody td {
|
||||
vertical-align: middle;
|
||||
border-color: #f0f2f4;
|
||||
}
|
||||
body.page-cart .cart-products-wrap .table thead {
|
||||
background-color: #F8F9FA;
|
||||
|
|
@ -427,11 +431,22 @@ body.page-cart .total-wrap {
|
|||
background-color: #F8F9FA;
|
||||
}
|
||||
body.page-cart .total-wrap .card-header {
|
||||
padding-top: 1rem;
|
||||
border-bottom: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
body.page-cart .total-wrap .list-group li {
|
||||
background-color: transparent;
|
||||
padding: 0.7rem 0;
|
||||
border-color: #EEEEEE;
|
||||
}
|
||||
body.page-cart .total-wrap .list-group li:not(.d-grid) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body.page-cart .total-wrap .list-group li .total-price {
|
||||
color: #222222;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -33,10 +33,14 @@ $input-btn-font-size: 0.9rem;
|
|||
|
||||
$link-decoration: none;
|
||||
$link-color: #1f1f1f;
|
||||
// $link-hover-color: $primary;
|
||||
$link-hover-color: $primary;
|
||||
|
||||
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
|
||||
@import './bootstrap-icons';
|
||||
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-right: 50px;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ body.page-cart {
|
|||
border-top: none;
|
||||
td {
|
||||
vertical-align: middle;
|
||||
border-color: #f0f2f4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,15 +73,28 @@ body.page-cart {
|
|||
background-color: #F8F9FA;
|
||||
|
||||
.card-header {
|
||||
padding-top: 1rem;
|
||||
border-bottom: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: space-between; // flex-end | center | space-between
|
||||
background-color: transparent;
|
||||
padding: 0.7rem 0;
|
||||
border-color: #EEEEEE;
|
||||
|
||||
&:not(.d-grid) {
|
||||
display: flex;
|
||||
align-items: center; // flex-start | center
|
||||
justify-content: space-between; // flex-end | center | space-between
|
||||
}
|
||||
|
||||
.total-price {
|
||||
color: #222222;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,18 @@ header {
|
|||
// border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
display: block;
|
||||
&.dropdown-menu-end {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-wrap {
|
||||
// padding: 10px;
|
||||
height: 44px;
|
||||
|
|
@ -24,14 +36,6 @@ header {
|
|||
}
|
||||
|
||||
.navbar-nav {
|
||||
li {
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-wrap {
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link"><i class="iconfont"></i></a>
|
||||
<a href="{{ shop_route('pages.show', 'cart') }}" class="nav-link"><i class="iconfont"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -72,8 +72,10 @@
|
|||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item"><span>总数</span><span>20</span></li>
|
||||
<li class="list-group-item"><span>总价</span><span>¥223.33</span></li>
|
||||
<li class="list-group-item d-grid"><button class="btn btn-primary">去结账</button></li>
|
||||
<li class="list-group-item border-bottom-0"><span>总价</span><span class="total-price">¥223.33</span></li>
|
||||
<li class="list-group-item d-grid gap-2 mt-3 border-bottom-0">
|
||||
<button class="btn btn-primary">去结账</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue