diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css index 90206ce7..a5b66de5 100644 --- a/public/build/beike/shop/default/css/app.css +++ b/public/build/beike/shop/default/css/app.css @@ -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; +} diff --git a/resources/beike/shop/default/account/account.scss b/resources/beike/shop/default/account/account.scss index 881fb6a0..3cf2c2db 100644 --- a/resources/beike/shop/default/account/account.scss +++ b/resources/beike/shop/default/account/account.scss @@ -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; diff --git a/resources/beike/shop/default/app.scss b/resources/beike/shop/default/app.scss index 8c4388ac..32a91b93 100644 --- a/resources/beike/shop/default/app.scss +++ b/resources/beike/shop/default/app.scss @@ -13,4 +13,5 @@ $primary: #fd560f; @import './module-tab-product'; @import './login'; @import './account/account'; -@import './product'; \ No newline at end of file +@import './product'; +@import './cart'; \ No newline at end of file diff --git a/resources/beike/shop/default/cart.scss b/resources/beike/shop/default/cart.scss new file mode 100644 index 00000000..c67c012f --- /dev/null +++ b/resources/beike/shop/default/cart.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/resources/beike/shop/default/global.scss b/resources/beike/shop/default/global.scss index 260f16d4..3a05bfdb 100644 --- a/resources/beike/shop/default/global.scss +++ b/resources/beike/shop/default/global.scss @@ -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; + } + } } \ No newline at end of file diff --git a/themes/default/layout/steps.blade.php b/themes/default/layout/steps.blade.php new file mode 100644 index 00000000..3a417514 --- /dev/null +++ b/themes/default/layout/steps.blade.php @@ -0,0 +1,14 @@ +
+
+
1
+ 购物车 +
+
+
2
+ 结账 +
+
+
3
+ 提交成功 +
+
\ No newline at end of file diff --git a/themes/default/pages/cart.blade.php b/themes/default/pages/cart.blade.php new file mode 100644 index 00000000..34b84a1f --- /dev/null +++ b/themes/default/pages/cart.blade.php @@ -0,0 +1,83 @@ +@extends('layout.master') + +@section('body-class', 'page-cart') + +@section('content') +
+ + +
+
@include('layout.steps', ['steps' => 1])
+
+ +
+
+
+ + + + + + + + + + + + @for ($i = 0; $i < 5; $i++) + + + + + + + + @endfor + +
+ + + 商品数量小计操作
+
+ + +
+ 		+
Camera Canon EOS M50 Kit
+
$1156.00
+ 		+
+ +
+ + +
+
+ 		$1156.00 +
+ +
+
+
+
+
+
商品总计
+
+
    +
  • 总数20
    • +
  • 总价¥223.33
    • +
  • +
+
+
+
+
+
+@endsection diff --git a/themes/default/pages/product.blade.php b/themes/default/pages/product.blade.php index 86b339b5..c6f6e541 100644 --- a/themes/default/pages/product.blade.php +++ b/themes/default/pages/product.blade.php @@ -22,7 +22,7 @@
-
+

Super Oversized T-Shirt With Raw Sleeves In Brown