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

wip

This commit is contained in:
pushuo 2022-06-27 19:31:35 +08:00
parent d098b4cd1b
commit fea082bb0b
8 changed files with 340 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,6 +32,52 @@
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 {
background: #fff;
}
@ -227,6 +273,7 @@ body.page-account .account-info .head .account-email {
body.page-account .account-info .account-links > a {
color: #4B566B;
border: none;
padding: 0.8rem 1rem;
border-bottom: 1px solid #EEEEEE;
transition: all 0.2s ease-in-out;
text-decoration: none !important;
@ -324,3 +371,62 @@ body.page-product .product-description .nav-tabs .nav-link.active:before {
left: 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;
}

1
resources/beike/shop/default/account/account.scss vendored
View File

@ -40,6 +40,7 @@ body.page-account {
> a {
color: #4B566B;
border: none;
padding: 0.8rem 1rem;
border-bottom: 1px solid #EEEEEE;
transition: all .2s ease-in-out;
text-decoration: none !important;

3
resources/beike/shop/default/app.scss vendored
View File

@ -13,4 +13,5 @@ $primary: #fd560f;
@import './module-tab-product';
@import './login';
@import './account/account';
@import './product';
@import './product';
@import './cart';

79
resources/beike/shop/default/cart.scss vendored Normal file
View File

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

54
resources/beike/shop/default/global.scss vendored
View File

@ -18,4 +18,58 @@
height: 1px;
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;
}
}
}

14
themes/default/layout/steps.blade.php Normal file
View File

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

83
themes/default/pages/cart.blade.php Normal file
View File

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

2
themes/default/pages/product.blade.php
View File

@ -22,7 +22,7 @@
<div class="right"><img src="http://fpoimg.com/560x560?bg_color=f3f3f3" class="img-fluid"></div>
</div>
</div>
<div class=" ps-lg-5 col-xl-5 col-lg-6 order-lg-2">
<div class="ps-lg-5 col-xl-5 col-lg-6 order-lg-2">
<div class="peoduct-info">
<h1>Super Oversized T-Shirt With Raw Sleeves In Brown</h1>
<div class="rating-wrap d-flex">