diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css index 3f2c1876..80f19435 100644 --- a/public/build/beike/shop/default/css/app.css +++ b/public/build/beike/shop/default/css/app.css @@ -203,10 +203,25 @@ header .header-content .right-btn .nav-link { color: #333; padding-right: 0.7rem; padding-left: 0.7rem; + position: relative; } header .header-content .right-btn .nav-link i { font-size: 1.1rem; } +header .navbar-icon-link-badge { + position: absolute; + display: none; + top: 0; + right: 0; + width: 19px; + height: 19px; + text-align: center; + color: #fff; + border-radius: 50%; + background: #fd560f; + font-size: 0.6rem; + line-height: 19px; +} #offcanvas-right-cart .offcanvas-right-products .product-list { padding: 1rem 0; diff --git a/public/build/beike/shop/default/js/app.js b/public/build/beike/shop/default/js/app.js index eb1d7288..b068165b 100644 --- a/public/build/beike/shop/default/js/app.js +++ b/public/build/beike/shop/default/js/app.js @@ -2494,6 +2494,8 @@ $(document).ready(function ($) { $('.offcanvas-right-cart-amount').html(res.data.amount_format); if (res.data.carts.length) { + $('.navbar-icon-link-badge').html(res.data.carts.length > 99 ? '99+' : res.data.carts.length).show(); + $('.offcanvas-right-cart-count').html(res.data.carts.length); var html = ''; res.data.carts.forEach(function (e) { html += '
'; diff --git a/resources/beike/shop/default/css/header.scss b/resources/beike/shop/default/css/header.scss index ca9fadc5..dd1a7ed4 100644 --- a/resources/beike/shop/default/css/header.scss +++ b/resources/beike/shop/default/css/header.scss @@ -66,12 +66,28 @@ header { color: #333; padding-right: 0.7rem; padding-left: 0.7rem; + position: relative; i { font-size: 1.1rem; } } } } + + .navbar-icon-link-badge { + position: absolute; + display: none; + top: 0; + right: 0; + width: 19px; + height: 19px; + text-align: center; + color: #fff; + border-radius: 50%; + background: $primary; + font-size: .6rem; + line-height: 19px; + } } #offcanvas-right-cart { diff --git a/resources/beike/shop/default/js/app.js b/resources/beike/shop/default/js/app.js index b9a52215..57321e4d 100644 --- a/resources/beike/shop/default/js/app.js +++ b/resources/beike/shop/default/js/app.js @@ -12,6 +12,9 @@ $(document).ready(function ($) { $('.offcanvas-right-cart-amount').html(res.data.amount_format); if (res.data.carts.length) { + $('.navbar-icon-link-badge').html(res.data.carts.length > 99 ? '99+' : res.data.carts.length).show(); + $('.offcanvas-right-cart-count').html(res.data.carts.length); + let html = ''; res.data.carts.forEach(e => { html += '
'; diff --git a/themes/default/layout/header.blade.php b/themes/default/layout/header.blade.php index 62ebe58e..d63ee03e 100644 --- a/themes/default/layout/header.blade.php +++ b/themes/default/layout/header.blade.php @@ -1,7 +1,3 @@ -@push('header') - {{-- --}} -@endpush -
@@ -84,6 +80,7 @@ {{-- --}} + @@ -116,7 +113,7 @@