wip
This commit is contained in:
pushuo
parent
d098b4cd1b
commit
fea082bb0b
|
|
@ -32,6 +32,52 @@
|
||||||
background: #FD560F;
|
background: #FD560F;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.steps-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.steps-wrap:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 14px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 3px solid #D7D7D7;
|
||||||
|
}
|
||||||
|
.steps-wrap > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.steps-wrap > div.active .number {
|
||||||
|
background-color: #3C3D41;
|
||||||
|
border-color: #3C3D41;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
.steps-wrap > div.active .title {
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
.steps-wrap > div .number-wrap {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 4px;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.steps-wrap > div .number {
|
||||||
|
border: 2px solid #ddd;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.steps-wrap > div .title {
|
||||||
|
color: #848484;
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
@ -227,6 +273,7 @@ body.page-account .account-info .head .account-email {
|
||||||
body.page-account .account-info .account-links > a {
|
body.page-account .account-info .account-links > a {
|
||||||
color: #4B566B;
|
color: #4B566B;
|
||||||
border: none;
|
border: none;
|
||||||
|
padding: 0.8rem 1rem;
|
||||||
border-bottom: 1px solid #EEEEEE;
|
border-bottom: 1px solid #EEEEEE;
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
|
|
@ -324,3 +371,62 @@ body.page-product .product-description .nav-tabs .nav-link.active:before {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.page-cart .cart-products-wrap .table tbody {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
body.page-cart .cart-products-wrap .table tbody td {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
body.page-cart .cart-products-wrap .table thead {
|
||||||
|
background-color: #F8F9FA;
|
||||||
|
}
|
||||||
|
body.page-cart .cart-products-wrap .table thead th {
|
||||||
|
border-bottom: none;
|
||||||
|
padding: 0.7rem 0.5rem;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
body.page-cart .cart-products-wrap .table .p-image input {
|
||||||
|
flex: 0 0 1;
|
||||||
|
}
|
||||||
|
body.page-cart .cart-products-wrap .table .p-image img {
|
||||||
|
max-width: 80px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
body.page-cart .cart-products-wrap .table .quantity-wrap {
|
||||||
|
width: 80px;
|
||||||
|
height: 37px;
|
||||||
|
display: flex;
|
||||||
|
align-content: space-between;
|
||||||
|
border: 1px solid #ced4da;
|
||||||
|
}
|
||||||
|
body.page-cart .cart-products-wrap .table .quantity-wrap input {
|
||||||
|
border: none;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
body.page-cart .cart-products-wrap .table .quantity-wrap > .right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-left: 1px solid #ced4da;
|
||||||
|
}
|
||||||
|
body.page-cart .cart-products-wrap .table .quantity-wrap > .right i {
|
||||||
|
flex: 1;
|
||||||
|
width: 20px;
|
||||||
|
height: 17px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
body.page-cart .cart-products-wrap .table .quantity-wrap > .right i:last-of-type {
|
||||||
|
border-top: 1px solid #ced4da;
|
||||||
|
}
|
||||||
|
body.page-cart .cart-products-wrap .table .quantity-wrap > .right i:hover {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
body.page-cart .total-wrap {
|
||||||
|
border: none;
|
||||||
|
background-color: #F8F9FA;
|
||||||
|
}
|
||||||
|
body.page-cart .total-wrap .card-header {
|
||||||
|
border-bottom: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,7 @@ body.page-account {
|
||||||
> a {
|
> a {
|
||||||
color: #4B566B;
|
color: #4B566B;
|
||||||
border: none;
|
border: none;
|
||||||
|
padding: 0.8rem 1rem;
|
||||||
border-bottom: 1px solid #EEEEEE;
|
border-bottom: 1px solid #EEEEEE;
|
||||||
transition: all .2s ease-in-out;
|
transition: all .2s ease-in-out;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
|
|
|
||||||
|
|
@ -14,3 +14,4 @@ $primary: #fd560f;
|
||||||
@import './login';
|
@import './login';
|
||||||
@import './account/account';
|
@import './account/account';
|
||||||
@import './product';
|
@import './product';
|
||||||
|
@import './cart';
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
body.page-cart {
|
||||||
|
.cart-products-wrap {
|
||||||
|
.table {
|
||||||
|
tbody {
|
||||||
|
border-top: none;
|
||||||
|
td {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background-color: #F8F9FA;
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: none;
|
||||||
|
padding: 0.7rem 0.5rem;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-image {
|
||||||
|
input {
|
||||||
|
flex: 0 0 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 80px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-wrap {
|
||||||
|
width: 80px;
|
||||||
|
height: 37px;
|
||||||
|
display: flex;
|
||||||
|
align-content: space-between;
|
||||||
|
border: 1px solid #ced4da;
|
||||||
|
input {
|
||||||
|
border: none;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// align-items: center;
|
||||||
|
border-left: 1px solid #ced4da;
|
||||||
|
|
||||||
|
i {
|
||||||
|
flex: 1;
|
||||||
|
width: 20px;
|
||||||
|
height: 17px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
&:last-of-type {
|
||||||
|
border-top: 1px solid #ced4da;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-wrap {
|
||||||
|
border: none;
|
||||||
|
background-color: #F8F9FA;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
border-bottom: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -19,3 +19,57 @@
|
||||||
background: #FD560F;
|
background: #FD560F;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.steps-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 14px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 3px solid #D7D7D7;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
&.active {
|
||||||
|
.number {
|
||||||
|
background-color: #3C3D41;
|
||||||
|
border-color: #3C3D41;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.number-wrap {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 4px;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
border: 2px solid #ddd;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center; // flex-start | center
|
||||||
|
justify-content: center; // flex-end | center | space-between
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #848484;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<div class="steps-wrap">
|
||||||
|
<div class="{{ $steps == 1 || $steps == 2 || $steps == 3 ? 'active':'' }}">
|
||||||
|
<div class="number-wrap"><span class="number">1</span></div>
|
||||||
|
<span class="title">购物车</span>
|
||||||
|
</div>
|
||||||
|
<div class="{{ $steps == 2 || $steps == 3 ? 'active':'' }}">
|
||||||
|
<div class="number-wrap"><span class="number">2</span></div>
|
||||||
|
<span class="title">结账</span>
|
||||||
|
</div>
|
||||||
|
<div class="{{ $steps == 3 ? 'active':'' }}">
|
||||||
|
<div class="number-wrap"><span class="number">3</span></div>
|
||||||
|
<span class="title">提交成功</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
@extends('layout.master')
|
||||||
|
|
||||||
|
@section('body-class', 'page-cart')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
<div class="container">
|
||||||
|
<nav aria-label="breadcrumb">
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||||
|
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 col-md-9">@include('layout.steps', ['steps' => 1])</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mt-5">
|
||||||
|
<div class="col-12 col-md-9">
|
||||||
|
<div class="cart-products-wrap">
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th width="130">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" id="check-all">
|
||||||
|
<label class="form-check-label ms-1" for="check-all">
|
||||||
|
全选
|
||||||
|
</label>
|
||||||
|
</th>
|
||||||
|
<th>商品</th>
|
||||||
|
<th>数量</th>
|
||||||
|
<th>小计</th>
|
||||||
|
<th class="align-right">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@for ($i = 0; $i < 5; $i++)
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="d-flex align-items-center p-image">
|
||||||
|
<input class="form-check-input" type="checkbox" value="">
|
||||||
|
<img src="http://fpoimg.com/100x100?bg_color=f3f3f3" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="name mb-1 fw-bold">Camera Canon EOS M50 Kit</div>
|
||||||
|
<div class="price">$1156.00</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="quantity-wrap">
|
||||||
|
<input type="text" class="form-control" value="1">
|
||||||
|
<div class="right">
|
||||||
|
<i class="bi bi-chevron-up"></i>
|
||||||
|
<i class="bi bi-chevron-down"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>$1156.00</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="btn btn-link btn-sm">删除</button><br>
|
||||||
|
<button type="button" class="btn btn-link btn-sm">加入收藏</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
@endfor
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-3">
|
||||||
|
<div class="card total-wrap">
|
||||||
|
<div class="card-header"><h5 class="mb-0">商品总计</h5></div>
|
||||||
|
<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"></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endsection
|
||||||
Loading…
Reference in New Issue