wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化购物车和结账

This commit is contained in:
pushuo 2022-06-29 13:53:26 +08:00
parent 2d6cc23da8
commit 33a887c5f2
9 changed files with 117 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/build/beike/shop/default/css/app.css vendored
View File

@ -118,9 +118,14 @@ header {
body:not(.page-home) header {
box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.04);
}
header .dropdown:hover {
background-color: #fff;
}
header .dropdown:hover .dropdown-menu {
margin: 0;
display: block;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border: none;
}
header .dropdown:hover .dropdown-menu.dropdown-menu-end {
right: 0;
@ -432,12 +437,17 @@ body.page-cart .cart-products-wrap .table .p-image input {
}
body.page-cart .cart-products-wrap .table .p-image img {
max-width: 80px;
margin-left: 10px;
margin-left: 14px;
}
body.page-cart .total-wrap {
border: none;
background-color: #F8F9FA;
}
body.page-cart .total-wrap.total-wrap-fixed {
position: fixed;
top: 0;
right: 0;
}
body.page-cart .total-wrap .card-header {
padding-top: 1rem;
border-bottom: none;
@ -468,6 +478,10 @@ body.page-checkout .total-wrap {
padding: 1.4rem;
border: 3px solid #efefef;
}
body.page-checkout .total-wrap.total-wrap-fixed {
position: fixed;
top: 0;
}
body.page-checkout .total-wrap .card-body {
padding: 0;
}
@ -484,12 +498,14 @@ body.page-checkout .total-wrap .products-wrap {
border-bottom: 1px solid #E6E6E6;
margin-bottom: 1.3rem;
padding-bottom: 0.3rem;
max-height: 380px;
overflow-y: auto;
}
body.page-checkout .total-wrap .products-wrap .item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
margin-bottom: 0.8rem;
}
body.page-checkout .total-wrap .products-wrap .item .image {
display: flex;

30
public/build/beike/shop/default/css/bootstrap.css vendored
View File

@ -9207,18 +9207,18 @@ textarea.form-control-lg {
.form-check {
display: block;
min-height: 1.2rem;
padding-left: 1.5em;
padding-left: 1.7em;
margin-bottom: 0.125rem;
}
.form-check .form-check-input {
float: left;
margin-left: -1.5em;
margin-left: -1.7em;
}
.form-check-input {
width: 1em;
height: 1em;
margin-top: 0.25em;
width: 1.2em;
height: 1.2em;
margin-top: 0.15em;
vertical-align: top;
background-color: #fff;
background-repeat: no-repeat;
@ -9232,7 +9232,7 @@ textarea.form-control-lg {
color-adjust: exact;
}
.form-check-input[type=checkbox] {
border-radius: 0.25em;
border-radius: 0;
}
.form-check-input[type=radio] {
border-radius: 50%;
@ -10306,7 +10306,7 @@ textarea.form-control-lg {
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0;
}
.dropdown-menu[data-bs-popper] {
@ -10496,13 +10496,13 @@ textarea.form-control-lg {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid rgba(0, 0, 0, 0.15);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdown-item {
display: block;
width: 100%;
padding: 0.25rem 1rem;
padding: 0.4rem 1rem;
clear: both;
font-weight: 400;
color: #212529;
@ -10541,14 +10541,14 @@ textarea.form-control-lg {
.dropdown-item-text {
display: block;
padding: 0.25rem 1rem;
padding: 0.4rem 1rem;
color: #212529;
}
.dropdown-menu-dark {
color: #dee2e6;
background-color: #343a40;
border-color: rgba(0, 0, 0, 0.15);
border-color: rgba(0, 0, 0, 0.1);
}
.dropdown-menu-dark .dropdown-item {
color: #dee2e6;
@ -10565,7 +10565,7 @@ textarea.form-control-lg {
color: #adb5bd;
}
.dropdown-menu-dark .dropdown-divider {
border-color: rgba(0, 0, 0, 0.15);
border-color: rgba(0, 0, 0, 0.1);
}
.dropdown-menu-dark .dropdown-item-text {
color: #dee2e6;
@ -18026,3 +18026,9 @@ textarea.form-control-lg {
padding-right: 50px;
padding-left: 50px;
}
.dropdown .dropdown-divider {
margin-left: 1rem;
margin-right: 1rem;
opacity: 0.1;
}

17
resources/beike/shop/default/css/bootstrap/bootstrap.scss vendored
View File

@ -11,8 +11,11 @@
$primary: #fd560f;
$font-size-base: 0.8rem;
// Breadcrumbs
$border-radius: 0;
$form-check-input-width: 1.2em;
$form-check-input-border-radius: 0;
// Breadcrumbs
// scss-docs-start breadcrumb-variables
// $breadcrumb-font-size: null !default;
$breadcrumb-padding-y: 1.4rem;
@ -34,6 +37,7 @@ $input-btn-font-size: 0.9rem;
$link-decoration: none;
$link-color: #1f1f1f;
$link-hover-color: $primary;
$btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
$input-btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
$form-select-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
$btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
@ -43,6 +47,9 @@ $form-floating-input-padding-b: .625rem;
$form-floating-padding-y: .8rem;
$form-floating-height: 50px;
$dropdown-border-color: rgba(0, 0, 0, 0.1);
$dropdown-item-padding-y: .4rem;
// $dropdown-divider-bg: rgba(0, 0, 0, 0.1);
@import './bootstrap-icons';
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
@ -53,4 +60,12 @@ $form-floating-height: 50px;
.container-fluid {
padding-right: 50px;
padding-left: 50px;
}
.dropdown {
.dropdown-divider {
margin-left: 1rem;
margin-right: 1rem;
opacity: .1;
}
}

8
resources/beike/shop/default/css/cart.scss vendored
View File

@ -28,7 +28,7 @@ body.page-cart {
img {
max-width: 80px;
margin-left: 10px;
margin-left: 14px;
}
}
}
@ -38,6 +38,12 @@ body.page-cart {
border: none;
background-color: #F8F9FA;
&.total-wrap-fixed {
position: fixed;
top: 0;
right: 0;
}
.card-header {
padding-top: 1rem;
border-bottom: none;

6
resources/beike/shop/default/css/header.scss vendored
View File

@ -10,9 +10,15 @@ header {
.dropdown {
&:hover {
background-color: #fff;
.dropdown-menu {
margin: 0;
display: block;
// box-shadow: 0 6px 6px 0 rgb(0, 0, 0, .08);
box-shadow: 0 0 15px rgb(0, 0, 0, .1);
border: none;
&.dropdown-menu-end {
right: 0;
}

9
resources/beike/shop/default/css/page-checkout.scss vendored
View File

@ -11,6 +11,11 @@ body.page-checkout {
padding: 1.4rem;
border: 3px solid #efefef;
&.total-wrap-fixed {
position: fixed;
top: 0;
}
.card-body {
padding: 0;
}
@ -29,12 +34,14 @@ body.page-checkout {
border-bottom: 1px solid #E6E6E6;
margin-bottom: 1.3rem;
padding-bottom: .3rem;
max-height: 380px;
overflow-y: auto;
.item {
display: flex;
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
margin-bottom: 1rem;
margin-bottom: .8rem;
.image {
display: flex;

18
themes/default/cart.blade.php
View File

@ -91,6 +91,22 @@
@endsection
@push('add-scripts')
<script>
$(function() {
const totalWrapTop = $('.total-wrap').offset().top;
const totalWrapWidth = $('.total-wrap').outerWidth();
const totalWrapLeft = $('.total-wrap').offset().left;
$(window).scroll(function () {
if ($(this).scrollTop() > totalWrapTop) {
$('.total-wrap').addClass('total-wrap-fixed').css({'left': totalWrapLeft, 'width': totalWrapWidth})
} else {
$('.total-wrap').removeClass('total-wrap-fixed').css({'left': 0, 'width': 'auto'})
}
})
});
</script>
<script>
var app = new Vue({
el: "#app-cart",
@ -123,6 +139,8 @@
layer.msg('请选择至少一个商品', ()=>{})
return
}
location = '{{ shop_route("checkout.index") }}'
},
quantityChange(quantity, cart_id) {

17
themes/default/checkout.blade.php
View File

@ -135,3 +135,20 @@
</div>
</div>
@endsection
@push('add-scripts')
<script>
$(function() {
const totalWrapTop = $('.total-wrap').offset().top;
const totalWrapWidth = $('.total-wrap').outerWidth();
const totalWrapLeft = $('.total-wrap').offset().left;
$(window).scroll(function () {
if ($(this).scrollTop() > totalWrapTop) {
$('.total-wrap').addClass('total-wrap-fixed').css({'left': totalWrapLeft, 'width': totalWrapWidth})
} else {
$('.total-wrap').removeClass('total-wrap-fixed').css({'left': 0, 'width': 'auto'})
}
})
});
</script>
@endpush

13
themes/default/layout/header.blade.php
View File

@ -61,13 +61,18 @@
<li class="nav-item"><a href="" class="nav-link"><i class="iconfont">&#xe8d6;</i></a></li>
<li class="nav-item"><a href="" class="nav-link"><i class="iconfont">&#xe662;</i></a></li>
<li class="nav-item dropdown">
<a href="" class="nav-link"><i class="iconfont">&#xe619;</i></a>
<a href="{{ shop_route('account.index') }}" class="nav-link"><i class="iconfont">&#xe619;</i></a>
<ul class="dropdown-menu dropdown-menu-end">
@auth('web_shop')
<li><a href="{{ shop_route('account.index') }}" class="dropdown-item">个人中心</a></li>
<li><a href="{{ shop_route('logout') }}" class="dropdown-item">退出登录</a></li>
<li class="dropdown-item"><h6 class="mb-0">Pu Shuo</h6></li>
<li><hr class="dropdown-divider"></li>
<li><a href="{{ shop_route('account.index') }}" class="dropdown-item"><i class="bi bi-person me-1"></i> 个人中心</a></li>
<li><a href="{{ shop_route('account.index') }}" class="dropdown-item"><i class="bi bi-clipboard-check me-1"></i> 我的订单</a></li>
<li><a href="{{ shop_route('account.index') }}" class="dropdown-item"><i class="bi bi-heart me-1"></i> 我的收藏</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="{{ shop_route('logout') }}" class="dropdown-item"><i class="bi bi-box-arrow-left me-1"></i> 退出登录</a></li>
@else
<li><a href="{{ shop_route('login.index') }}" class="dropdown-item">登录/注册</a></li>
<li><a href="{{ shop_route('login.index') }}" class="dropdown-item"><i class="bi bi-box-arrow-right me-1"></i> 登录/注册</a></li>
@endauth
</ul>
</li>