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 14:36:04 +08:00
parent e4fee9c047
commit d098b4cd1b
11 changed files with 193 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,7 +36,7 @@ header {
background: #fff;
}
body:not(.page-home) header {
border-bottom: 1px solid #e5e5e5;
box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.04);
}
header .top-wrap {
height: 44px;
@ -59,7 +59,7 @@ header .header-content .menu-wrap .nav-link {
padding-right: 1rem;
}
header .header-content .logo img {
max-width: 170px;
max-width: 140px;
max-height: 30px;
}
header .header-content .right-btn .nav-link {
@ -72,8 +72,8 @@ header .header-content .right-btn .nav-link i {
}
footer {
background: #F8F9FA;
margin-top: 3rem;
background: #fafafa;
margin-top: 5rem;
}
footer .footer-top {
padding: 2.2rem 0;
@ -102,6 +102,12 @@ footer .footer-top .service-item .sub-title {
footer .footer-content {
padding: 3rem 0;
}
footer .footer-content a {
color: #666;
}
footer .footer-content a:hover {
color: #fd560f;
}
@media (min-width: 768px) {
footer .footer-content .footer-content-left {
width: 76%;
@ -194,9 +200,6 @@ body.page-login .card {
body.page-account {
background-color: #F7F8FA;
}
body.page-account footer {
background-color: #fff;
}
body.page-account .account-info .head {
display: flex;
flex-direction: column;
@ -205,8 +208,8 @@ body.page-account .account-info .head {
background-color: #fff;
}
body.page-account .account-info .head .portrait {
width: 90px;
height: 90px;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
border: 2px solid #FFFFFF;
@ -244,11 +247,13 @@ body.page-account .account-card {
body.page-account .account-card .card-header {
border: none;
background-color: #fff;
padding-top: 1rem;
}
body.page-account .account-card .card-header h6 {
border-left: 3px solid #fd560f;
padding-left: 6px;
font-size: 0.9rem;
font-weight: bold;
font-size: 1rem;
}
body.page-account .account-card .card-items > a {
width: 25%;
@ -279,9 +284,6 @@ body.page-product .product-image .left {
body.page-product .product-image .left > div {
margin-bottom: 1rem;
}
body.page-product .peoduct-info {
padding-left: 3rem;
}
body.page-product .peoduct-info .rating-wrap {
margin-bottom: 2rem;
}
@ -291,8 +293,34 @@ body.page-product .peoduct-info .rating-wrap .rating {
body.page-product .peoduct-info .rating-wrap .rating i {
color: #fd560f;
}
body.page-product .peoduct-info .price-wrap {
margin-bottom: 2rem;
}
body.page-product .peoduct-info .price-wrap .new-price {
margin-right: 0.6rem;
font-size: 1.6rem;
line-height: 1;
}
body.page-product .peoduct-info .attribute-wrap {
margin-bottom: 2rem;
}
body.page-product .peoduct-info .quantity-wrap .quantity-input {
max-width: 5rem;
text-align: center;
}
body.page-product .product-description .nav-tabs .nav-link {
border: none;
}
body.page-product .product-description .nav-tabs .nav-link.active {
position: relative;
background-color: transparent;
color: #fd560f;
}
body.page-product .product-description .nav-tabs .nav-link.active:before {
border-top: 1px solid #fd560f;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

28
public/build/beike/shop/default/css/bootstrap.css vendored
View File

@ -225,11 +225,11 @@ sup {
}
a {
color: #fd560f;
text-decoration: underline;
color: #1f1f1f;
text-decoration: none;
}
a:hover {
color: #ca450c;
color: #fd560f;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
@ -2987,7 +2987,6 @@ textarea.form-control-lg {
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
@ -3460,11 +3459,11 @@ textarea.form-control-lg {
.btn-link {
font-weight: 400;
color: #fd560f;
text-decoration: underline;
color: #1f1f1f;
text-decoration: none;
}
.btn-link:hover {
color: #ca450c;
color: #fd560f;
}
.btn-link:disabled, .btn-link.disabled {
color: #6c757d;
@ -3757,7 +3756,6 @@ textarea.form-control-lg {
font-weight: 400;
color: #212529;
text-align: inherit;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border: 0;
@ -3932,8 +3930,7 @@ textarea.form-control-lg {
.nav-link {
display: block;
padding: 0.5rem 1rem;
color: #fd560f;
text-decoration: none;
color: #1f1f1f;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
@ -3942,7 +3939,7 @@ textarea.form-control-lg {
}
}
.nav-link:hover, .nav-link:focus {
color: #ca450c;
color: #fd560f;
}
.nav-link.disabled {
color: #6c757d;
@ -4043,7 +4040,6 @@ textarea.form-control-lg {
padding-bottom: 0.35rem;
margin-right: 1rem;
font-size: 1rem;
text-decoration: none;
white-space: nowrap;
}
.navbar-nav {
@ -4794,8 +4790,7 @@ textarea.form-control-lg {
.page-link {
position: relative;
display: block;
color: #fd560f;
text-decoration: none;
color: #1f1f1f;
background-color: #fff;
border: 1px solid #dee2e6;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@ -4807,13 +4802,13 @@ textarea.form-control-lg {
}
.page-link:hover {
z-index: 2;
color: #ca450c;
color: #fd560f;
background-color: #e9ecef;
border-color: #dee2e6;
}
.page-link:focus {
z-index: 3;
color: #ca450c;
color: #fd560f;
background-color: #e9ecef;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(253, 86, 15, 0.25);
@ -5085,7 +5080,6 @@ textarea.form-control-lg {
display: block;
padding: 0.5rem 1rem;
color: #212529;
text-decoration: none;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125);
}

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

@ -4,7 +4,7 @@ body.page-account {
background-color: #F7F8FA;
footer {
background-color: #fff;
// background-color: #fff;
}
.account-info {
@ -16,8 +16,8 @@ body.page-account {
background-color: #fff;
.portrait {
width: 90px;
height: 90px;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
border: 2px solid #FFFFFF;
@ -66,11 +66,13 @@ body.page-account {
.card-header {
border: none;
background-color: #fff;
padding-top: 1rem;
h6 {
border-left: 3px solid $primary;
padding-left: 6px;
font-size: 0.9rem;
font-weight: bold;
font-size: 1rem;
}
}

4
resources/beike/shop/default/bootstrap/bootstrap.scss vendored
View File

@ -31,6 +31,10 @@ $input-btn-padding-y: .6rem;
$input-btn-font-size: 0.9rem;
// $input-btn-padding-x: .75rem !default;
$link-decoration: none;
$link-color: #1f1f1f;
$link-hover-color: $primary;
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
@import './bootstrap-icons';

13
resources/beike/shop/default/footer.scss vendored
View File

@ -1,8 +1,9 @@
@charset "UTF-8";
footer {
background: #F8F9FA;
margin-top: 3rem;
// background: #F8F9FA;
background: #fafafa;
margin-top: 5rem;
.footer-top {
padding: 2.2rem 0;
@ -37,6 +38,14 @@ footer {
.footer-content {
padding: 3rem 0;
a {
color: #666;
&:hover {
color: $primary;
}
}
.footer-content-left {
@media (min-width: 768px) {
width: 76%;

5
resources/beike/shop/default/header.scss vendored
View File

@ -4,7 +4,8 @@ header {
// box-shadow: 0px 1px 10px rgba(0, 0, 0, .04);
background: #fff;
body:not(.page-home) & {
border-bottom: 1px solid #e5e5e5;
box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .04);
// border-bottom: 1px solid #e5e5e5;
}
.top-wrap {
@ -45,7 +46,7 @@ header {
.logo {
img {
max-width: 170px;
max-width: 140px;
max-height: 30px;
}
}

43
resources/beike/shop/default/product.scss vendored
View File

@ -10,9 +10,8 @@ body.page-product {
}
}
}
.peoduct-info {
padding-left: 3rem;
.peoduct-info {
.rating-wrap {
margin-bottom: 2rem;
@ -25,11 +24,51 @@ body.page-product {
}
.price-wrap {
margin-bottom: 2rem;
.new-price {
margin-right: .6rem;
font-size: 1.6rem;
line-height: 1;
}
}
.attribute-wrap {
margin-bottom: 2rem;
.table {
}
}
.quantity-wrap {
.quantity-input {
max-width: 5rem;
text-align: center;
}
}
}
.product-description {
.nav-tabs {
.nav-link {
border: none;
&.active {
position: relative;
background-color: transparent;
color: $primary;
&:before {
border-top: 1px solid $primary;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
}
}
}
}
}

32
themes/default/layout/footer.blade.php
View File

@ -30,37 +30,37 @@
<div class="col-6 col-sm">
<h6 class="text-uppercase text-dark mb-3">Hot links</h6>
<ul class="list-unstyled">
<li><a href="" class="text-muted">adsdasd</a></li>
<li><a href="" class="text-muted">adsdasd</a></li>
<li><a href="" class="text-muted">adsdasd</a></li>
<li><a href="" class="text-muted">adsdasd</a></li>
<li><a href="">adsdasd</a></li>
<li><a href="">adsdasd</a></li>
<li><a href="">adsdasd</a></li>
<li><a href="">adsdasd</a></li>
</ul>
</div>
<div class="col-6 col-sm">
<h6 class="text-uppercase text-dark mb-3">Hot links</h6>
<ul class="list-unstyled">
<li><a href="" class="text-muted">dsddslkdjccxz</a></li>
<li><a href="" class="text-muted">dsddslkdjccxz</a></li>
<li><a href="" class="text-muted">adsdasd</a></li>
<li><a href="" class="text-muted">adsdasd</a></li>
<li><a href="">dsddslkdjccxz</a></li>
<li><a href="">dsddslkdjccxz</a></li>
<li><a href="">adsdasd</a></li>
<li><a href="">adsdasd</a></li>
</ul>
</div>
<div class="col-6 col-sm">
<h6 class="text-uppercase text-dark mb-3">Hot links</h6>
<ul class="list-unstyled">
<li><a href="" class="text-muted">adsdasd</a></li>
<li><a href="" class="text-muted">adsdasd</a></li>
<li><a href="" class="text-muted">adsdasd</a></li>
<li><a href="" class="text-muted">adsdasd</a></li>
<li><a href="">adsdasd</a></li>
<li><a href="">adsdasd</a></li>
<li><a href="">adsdasd</a></li>
<li><a href="">adsdasd</a></li>
</ul>
</div>
<div class="col-6 col-sm">
<h6 class="text-uppercase text-dark mb-3">Hot links</h6>
<ul class="list-unstyled">
<li><a href="" class="text-muted">dsddslkdjccxz</a></li>
<li><a href="" class="text-muted">dsddslkdjccxz</a></li>
<li><a href="" class="text-muted">dsddslkdjccxz</a></li>
<li><a href="" class="text-muted">dsddslkdjccxz</a></li>
<li><a href="">dsddslkdjccxz</a></li>
<li><a href="">dsddslkdjccxz</a></li>
<li><a href="">dsddslkdjccxz</a></li>
<li><a href="">dsddslkdjccxz</a></li>
</ul>
</div>
</div>

12
themes/default/layout/header.blade.php
View File

@ -3,7 +3,7 @@
<div class="container d-flex justify-content-between align-items-center">
<div class="left d-flex align-items-center">
<div class="dropdown">
<a class="btn dropdown-toggle" href="#" role="button" id="currency-dropdown" data-toggle="dropdown"
<a class="btn dropdown-toggle ps-0" href="#" role="button" id="currency-dropdown" data-toggle="dropdown"
aria-expanded="false">
$ USD
</a>
@ -27,10 +27,10 @@
</div>
</div>
</div>
<div class="right">
<a href="">Delivery</a>
<a href="">Help</a>
<span>028-0000000</span>
<div class="right nav">
<a href="" class="px-2">Delivery</a>
<a href="" class="px-2">Help</a>
<span class="px-2">028-0000000</span>
</div>
</div>
</div>
@ -61,7 +61,7 @@
<li class="nav-item"><a href="" class="nav-link"><i class="iconfont">&#xe662;</i></a></li>
<li class="nav-item dropdown">
<a href="" class="nav-link"><i class="iconfont">&#xe619;</i></a>
<ul class="dropdown-menu dropdown-menu-right">
<ul class="dropdown-menu dropdown-menu-end">
<li><a href="/accounts" class="dropdown-item">个人中心</a></li>
<li><a href="{{ shop_route('login.index') }}" class="dropdown-item">登录/注册</a></li>
</ul>

8
themes/default/pages/accounts.blade.php
View File

@ -12,7 +12,7 @@
</nav>
<div class="row">
<div class="col-3">
<div class="col-12 col-md-3">
<div class="account-info">
<div class="head">
<div class="portrait"><img src="http://fpoimg.com/120x120" class="img-fluid"></div>
@ -37,14 +37,14 @@
</nav>
</div>
</div>
<div class="col-9">
<div class="col-12 col-md-9">
<div class="card mb-4 account-card">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">个人中心</h6>
<a href="http://" class="text-muted">修改休息</a>
</div>
<div class="card-body">
<div class="d-flex flex-nowrap card-items">
<div class="d-flex flex-nowrap card-items py-2">
<a href="http://" class="d-flex flex-column align-items-center"><i class="iconfont">&#xe77f;</i><span
class="text-muted">收藏</span></a>
<a href="http://" class="d-flex flex-column align-items-center"><i class="iconfont">&#xe6a3;</i><span
@ -60,7 +60,7 @@
<a href="http://" class="text-muted">全部订单</a>
</div>
<div class="card-body">
<div class="d-flex flex-nowrap card-items mb-4">
<div class="d-flex flex-nowrap card-items mb-4 py-2">
<a href="http://" class="d-flex flex-column align-items-center"><i class="iconfont">&#xf12f;</i><span
class="text-muted">待付款</span></a>
<a href="http://" class="d-flex flex-column align-items-center"><i class="iconfont">&#xf130;</i><span

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

@ -11,7 +11,7 @@
</ol>
</nav>
<div class="row">
<div class="row mb-5">
<div class="col-12 col-md-6">
<div class="product-image d-flex">
<div class="left">
@ -22,7 +22,7 @@
<div class="right"><img src="http://fpoimg.com/560x560?bg_color=f3f3f3" class="img-fluid"></div>
</div>
</div>
<div class="col-12 col-md-6 ps-lg-10">
<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">
@ -37,8 +37,56 @@
<div class="new-price">$815.00</div>
<div class="old-price text-muted text-decoration-line-through">$1015.00</div>
</div>
<div class="attribute-wrap">
<table class="table table-striped table-borderless">
<tbody>
<tr>
<td>型号</td>
<td>product-222</td>
</tr>
<tr>
<td>型号</td>
<td>product-222</td>
</tr>
<tr>
<td>型号</td>
<td>product-222</td>
</tr>
</tbody>
</table>
</div>
<div class="quantity-wrap d-flex">
<div class="quantity-wrap">
<input class="form-control quantity-input" type="number" value="1">
</div>
<button class="btn btn-outline-secondary ms-3"><i class="bi bi-cart-fill me-1"></i>加入购物车</button>
<button class="btn btn-dark ms-3"><i class="bi bi-bag-fill me-1"></i>立即购买</button>
</div>
<div class="add-wishlist">
<button class="btn btn-link ps-0"><i class="bi bi-suit-heart-fill me-1"></i>加入收藏夹</button>
</div>
</div>
</div>
</div>
<div class="product-description">
<div class="nav nav-tabs nav-overflow justify-content-start justify-content-md-center border-bottom">
<a class="nav-link active" data-bs-toggle="tab" href="#product-description">
Description
</a>
<a class="nav-link" data-bs-toggle="tab" href="#description-1">
Size &amp; Fit
</a>
<a class="nav-link" data-bs-toggle="tab" href="#description-2">
Shipping &amp; Return
</a>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="product-description" role="tabpanel" aria-labelledby="pills-home-tab">111</div>
<div class="tab-pane fade" id="description-1" role="tabpanel" aria-labelledby="pills-profile-tab">222</div>
<div class="tab-pane fade" id="description-2" role="tabpanel" aria-labelledby="pills-contact-tab">333</div>
</div>
</div>
</div>
@endsection