优化购物车

This commit is contained in:
pushuo 2022-06-28 10:26:01 +08:00
parent 474c0bfdf6
commit 5a8baa5b26
7 changed files with 11331 additions and 11288 deletions

View File

@ -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

View File

@ -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;

View File

@ -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;
}
}
}
}

View File

@ -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 {

View File

@ -72,7 +72,7 @@
</ul>
</li>
<li class="nav-item">
<a href="" class="nav-link"><i class="iconfont">&#xe634;</i></a>
<a href="{{ shop_route('pages.show', 'cart') }}" class="nav-link"><i class="iconfont">&#xe634;</i></a>
</li>
</ul>
</div>

View File

@ -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>