This commit is contained in:
pushuo 2022-07-06 18:59:47 +08:00
parent 32af642169
commit 8c80026876
4 changed files with 74 additions and 2 deletions

View File

@ -208,6 +208,17 @@ header .header-content .right-btn .nav-link i {
font-size: 1.1rem;
}
#offcanvas-right-cart .offcanvas-right-products .product-list {
padding: 1rem 0;
border-top: 1px solid #eee;
}
#offcanvas-right-cart .offcanvas-right-products .product-list .left {
width: 100px;
margin-right: 10px;
}
#offcanvas-right-cart .offcanvas-right-products .product-list .left img {
max-height: 100px;
}
footer {
background: #fafafa;
margin-top: 5rem;

View File

@ -72,4 +72,28 @@ header {
}
}
}
}
#offcanvas-right-cart {
.offcanvas-right-products {
.product-list {
padding: 1rem 0;
border-top: 1px solid #eee;
.left {
width: 100px;
margin-right: 10px;
img {
max-height: 100px;
}
}
.right {
.name {
}
}
}
}
}

View File

@ -77,10 +77,47 @@
</ul>
</li>
<li class="nav-item">
<a href="{{ shop_route('carts.index') }}" class="nav-link"><i class="iconfont">&#xe634;</i></a>
{{-- <a href="javascript:vido(0)" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-right-cart" aria-controls="offcanvas-right-cart" class="nav-link"><i class="iconfont">&#xe634;</i></a> --}}
<a class="nav-link" data-bs-toggle="offcanvas" href="#offcanvas-right-cart" role="button" aria-controls="offcanvasExample">
<i class="iconfont">&#xe634;</i>
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-right-cart" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel" class="mx-auto mb-0">您的购物车</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="offcanvas-right-products">
@for ($i = 0; $i < 20; $i++)
<div class="product-list d-flex align-items-center">
<div class="left"><img src="https://via.placeholder.com/140x140.png/eeeeee" calss="img-fluid"></div>
<div class="right flex-grow-1">
<div class="name fs-sm fw-bold mb-2">测试商品名称事实上</div>
<div class="price mb-2">22.22</div>
<div class="product-bottom d-flex justify-content-between align-items-center">
@include('shared.quantity', ['quantity' => '1'])
<span>删除</span>
</div>
</div>
</div>
@endfor
</div>
</div>
<div class="offcanvas-footer">
<div class="d-flex justify-content-between align-items-center mb-2 p-4 bg-light">
<strong>小计</strong>
<strong class="ms-auto">2222</strong>
</div>
<div class="p-4">
<a href="{{ shop_route('checkout.index') }}" class="btn w-100 btn-dark">去结账</a>
<a href="{{ shop_route('carts.index') }}" class="btn w-100 btn-outline-dark mt-2">查看购物车</a>
</div>
</div>
</div>

View File

@ -9,7 +9,7 @@
<link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/shop/default/css/bootstrap.css') }}">
<script src="{{ asset('vendor/jquery/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('vendor/layer/3.5.1/layer.js') }}"></script>
<script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.bundle.min.js') }}"></script>
{{-- <script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.bundle.min.js') }}"></script> --}}
<script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('/build/beike/shop/default/js/app.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/shop/default/css/app.css') }}">