wip
This commit is contained in:
parent
32af642169
commit
8c80026876
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -77,10 +77,47 @@
|
|||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ shop_route('carts.index') }}" class="nav-link"><i class="iconfont"></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"></i></a> --}}
|
||||
<a class="nav-link" data-bs-toggle="offcanvas" href="#offcanvas-right-cart" role="button" aria-controls="offcanvasExample">
|
||||
<i class="iconfont"></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>
|
||||
|
|
@ -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') }}">
|
||||
|
|
|
|||
Loading…
Reference in New Issue