From ff87b819fcb55e9827d78de32958d0b89ec4e5a9 Mon Sep 17 00:00:00 2001 From: pushuo <229102104@qq.com> Date: Thu, 1 Sep 2022 08:54:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E8=8F=9C=E5=8D=95=20->=20?= =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF=E5=93=8D=E5=BA=94=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- beike/Helpers.php | 6 + composer.json | 1 + composer.lock | 214 +++++++++++++++++- public/build/beike/shop/default/css/app.css | 89 ++++++++ public/build/beike/shop/default/js/app.js | 25 +- resources/beike/shop/default/css/header.scss | 94 ++++++++ .../beike/shop/default/css/page-product.scss | 12 + resources/beike/shop/default/js/header.js | 33 +-- resources/lang/en/common.php | 1 + resources/lang/zh_cn/common.php | 1 + themes/default/layout/header.blade.php | 75 ++---- themes/default/product.blade.php | 4 +- themes/default/shared/menu-mobile.blade.php | 107 +++++++++ themes/default/shared/menu-pc.blade.php | 57 +++++ 14 files changed, 634 insertions(+), 85 deletions(-) create mode 100644 themes/default/shared/menu-mobile.blade.php create mode 100644 themes/default/shared/menu-pc.blade.php diff --git a/beike/Helpers.php b/beike/Helpers.php index e693e2e2..03ff27c3 100644 --- a/beike/Helpers.php +++ b/beike/Helpers.php @@ -582,3 +582,9 @@ function installed() { return file_exists(storage_path('installed')); } + + +function isMobile() +{ + return (new \Jenssegers\Agent\Agent())->isMobile(); +} \ No newline at end of file diff --git a/composer.json b/composer.json index 9106dc01..81b094bd 100644 --- a/composer.json +++ b/composer.json @@ -15,6 +15,7 @@ "intervention/image": "^2.7", "laravel/framework": "^9.0", "laravel/tinker": "^2.7", + "jenssegers/agent": "^2.6", "spatie/laravel-permission": "^5.5", "srmklive/paypal": "^3.0", "stripe/stripe-php": "^8.8", diff --git a/composer.lock b/composer.lock index c581732a..38afefbb 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "d291ec39fe19eebe5c5e98e9014cda39", + "content-hash": "638306dddcdd0d2164cdbc1d4272416a", "packages": [ { "name": "asm89/stack-cors", @@ -1561,6 +1561,153 @@ ], "time": "2022-05-21T17:30:32+00:00" }, + { + "name": "jaybizzle/crawler-detect", + "version": "v1.2.111", + "source": { + "type": "git", + "url": "https://github.com/JayBizzle/Crawler-Detect.git", + "reference": "d572ed4a65a70a2d2871dc5137c9c5b7e69745ab" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/JayBizzle/Crawler-Detect/zipball/d572ed4a65a70a2d2871dc5137c9c5b7e69745ab", + "reference": "d572ed4a65a70a2d2871dc5137c9c5b7e69745ab", + "shasum": "", + "mirrors": [ + { + "url": "https://mirrors.aliyun.com/composer/dists/%package%/%reference%.%type%", + "preferred": true + } + ] + }, + "require": { + "php": ">=5.3.0" + }, + "require-dev": { + "phpunit/phpunit": "^4.8|^5.5|^6.5|^9.4" + }, + "type": "library", + "autoload": { + "psr-4": { + "Jaybizzle\\CrawlerDetect\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Mark Beech", + "email": "m@rkbee.ch", + "role": "Developer" + } + ], + "description": "CrawlerDetect is a PHP class for detecting bots/crawlers/spiders via the user agent", + "homepage": "https://github.com/JayBizzle/Crawler-Detect/", + "keywords": [ + "crawler", + "crawler detect", + "crawler detector", + "crawlerdetect", + "php crawler detect" + ], + "support": { + "issues": "https://github.com/JayBizzle/Crawler-Detect/issues", + "source": "https://github.com/JayBizzle/Crawler-Detect/tree/v1.2.111" + }, + "time": "2022-03-15T22:19:01+00:00" + }, + { + "name": "jenssegers/agent", + "version": "v2.6.4", + "source": { + "type": "git", + "url": "https://github.com/jenssegers/agent.git", + "reference": "daa11c43729510b3700bc34d414664966b03bffe" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/jenssegers/agent/zipball/daa11c43729510b3700bc34d414664966b03bffe", + "reference": "daa11c43729510b3700bc34d414664966b03bffe", + "shasum": "", + "mirrors": [ + { + "url": "https://mirrors.aliyun.com/composer/dists/%package%/%reference%.%type%", + "preferred": true + } + ] + }, + "require": { + "jaybizzle/crawler-detect": "^1.2", + "mobiledetect/mobiledetectlib": "^2.7.6", + "php": ">=5.6" + }, + "require-dev": { + "php-coveralls/php-coveralls": "^2.1", + "phpunit/phpunit": "^5.0|^6.0|^7.0" + }, + "suggest": { + "illuminate/support": "Required for laravel service providers" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "3.0-dev" + }, + "laravel": { + "providers": [ + "Jenssegers\\Agent\\AgentServiceProvider" + ], + "aliases": { + "Agent": "Jenssegers\\Agent\\Facades\\Agent" + } + } + }, + "autoload": { + "psr-4": { + "Jenssegers\\Agent\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Jens Segers", + "homepage": "https://jenssegers.com" + } + ], + "description": "Desktop/mobile user agent parser with support for Laravel, based on Mobiledetect", + "homepage": "https://github.com/jenssegers/agent", + "keywords": [ + "Agent", + "browser", + "desktop", + "laravel", + "mobile", + "platform", + "user agent", + "useragent" + ], + "support": { + "issues": "https://github.com/jenssegers/agent/issues", + "source": "https://github.com/jenssegers/agent/tree/v2.6.4" + }, + "funding": [ + { + "url": "https://github.com/jenssegers", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/jenssegers/agent", + "type": "tidelift" + } + ], + "time": "2020-06-13T08:05:20+00:00" + }, { "name": "laravel/framework", "version": "v9.22.1", @@ -2244,6 +2391,68 @@ ], "time": "2022-04-17T13:12:02+00:00" }, + { + "name": "mobiledetect/mobiledetectlib", + "version": "2.8.39", + "source": { + "type": "git", + "url": "https://github.com/serbanghita/Mobile-Detect.git", + "reference": "0fd6753003fc870f6e229bae869cc1337c99bc45" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/serbanghita/Mobile-Detect/zipball/0fd6753003fc870f6e229bae869cc1337c99bc45", + "reference": "0fd6753003fc870f6e229bae869cc1337c99bc45", + "shasum": "", + "mirrors": [ + { + "url": "https://mirrors.aliyun.com/composer/dists/%package%/%reference%.%type%", + "preferred": true + } + ] + }, + "require": { + "php": ">=5.0.0" + }, + "require-dev": { + "phpunit/phpunit": "~4.8.35||~5.7" + }, + "type": "library", + "autoload": { + "psr-0": { + "Detection": "namespaced/" + }, + "classmap": [ + "Mobile_Detect.php" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Serban Ghita", + "email": "serbanghita@gmail.com", + "homepage": "http://mobiledetect.net", + "role": "Developer" + } + ], + "description": "Mobile_Detect is a lightweight PHP class for detecting mobile devices. It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.", + "homepage": "https://github.com/serbanghita/Mobile-Detect", + "keywords": [ + "detect mobile devices", + "mobile", + "mobile detect", + "mobile detector", + "php mobile detect" + ], + "support": { + "issues": "https://github.com/serbanghita/Mobile-Detect/issues", + "source": "https://github.com/serbanghita/Mobile-Detect/tree/2.8.39" + }, + "time": "2022-02-17T19:24:25+00:00" + }, { "name": "monolog/monolog", "version": "2.8.0", @@ -9686,9 +9895,10 @@ "prefer-lowest": false, "platform": { "php": "^8.0.2", + "ext-iconv": "*", "ext-json": "*", "ext-zip": "*" }, "platform-dev": [], - "plugin-api-version": "2.3.0" + "plugin-api-version": "2.1.0" } diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css index 792ca1dd..8aa4ce52 100644 --- a/public/build/beike/shop/default/css/app.css +++ b/public/build/beike/shop/default/css/app.css @@ -621,6 +621,9 @@ header .header-mobile .mobile-content { align-items: center; justify-content: space-between; } +header .header-mobile .mobile-content .mobile-open-menu { + cursor: pointer; +} header .header-mobile .mobile-content > div { width: 33.33%; } @@ -673,6 +676,77 @@ header .header-mobile .mobile-content .right .nav-link i { color: #999; } +#offcanvas-mobile-menu { + width: 80%; +} +#offcanvas-mobile-menu .offcanvas-header { + padding: 10px 20px 10px 10px; +} +#offcanvas-mobile-menu .mobile-menu-wrap { + padding: 0; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion { + border-top: 1px solid #e5e5e5; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item { + border-bottom: 1px solid #e5e5e5; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text { + display: flex; + align-items: center; + justify-content: space-between; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > a { + flex: 1; + height: 44px; + padding-left: 10px; + display: flex; + align-items: center; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > a .badge { + position: relative; + margin-left: 13px; + font-weight: 400; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > a .badge::before { + content: ""; + position: absolute; + top: 50%; + right: 100%; + transform: translate(0, -50%); + border: 4px solid; + border-right-width: 7px; + border: 5px solid rgba(0, 0, 0, 0); + border-right-color: inherit; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > span { + width: 44px; + height: 44px; + display: flex; + border-left: 1px solid #e5e5e5; + align-items: center; + justify-content: center; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > span:active { + background-color: #eee; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > span[aria-expanded=true] { + background-color: #eee; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > span[aria-expanded=true] i { + transform: rotate(180deg); +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .accordion-collapse { + padding: 10px; + border-top: 1px solid #e5e5e5; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .accordion-collapse .children-group .group-name { + margin-bottom: 4px; +} +#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .accordion-collapse .children-group .nav a { + color: #777; +} + footer { background: #fafafa; margin-top: 5rem; @@ -934,6 +1008,11 @@ body.page-product .variables-wrap .variable-info > div:not(.selected).disabled { color: #999; font-weight: initial; } +@media (max-width: 768px) { + body.page-product .peoduct-info h1 { + font-size: 1.2rem; + } +} body.page-product .peoduct-info .rating-wrap { margin-bottom: 2rem; } @@ -946,6 +1025,11 @@ body.page-product .peoduct-info .rating-wrap .rating i { body.page-product .peoduct-info .price-wrap { margin-bottom: 2.4rem; } +@media (min-width: 768px) { + body.page-product .peoduct-info .quantity-btns { + display: flex; + } +} body.page-product .peoduct-info .quantity-btns .quantity-input { max-width: 5rem; text-align: center; @@ -953,6 +1037,11 @@ body.page-product .peoduct-info .quantity-btns .quantity-input { body.page-product .peoduct-info .quantity-btns .quantity-wrap { height: 43px; } +@media (max-width: 768px) { + body.page-product .peoduct-info .quantity-btns .quantity-wrap { + margin-bottom: 10px; + } +} body.page-product .product-description .nav-tabs .nav-link { border: none; } diff --git a/public/build/beike/shop/default/js/app.js b/public/build/beike/shop/default/js/app.js index b977affe..58628c3c 100644 --- a/public/build/beike/shop/default/js/app.js +++ b/public/build/beike/shop/default/js/app.js @@ -2259,17 +2259,24 @@ __webpack_require__.r(__webpack_exports__); // offcanvas-search-top $(function () { - var myOffcanvas = document.getElementById('offcanvas-search-top'); - if (!myOffcanvas) return; - myOffcanvas.addEventListener('shown.bs.offcanvas', function () { - $('#offcanvas-search-top input').focus(); - $('#offcanvas-search-top input').keydown(function (e) { - if (e.keyCode == 13) { - if ($(this).val() != '') { - location.href = 'products/search?keyword=' + $(this).val(); + var myOffcanvas = document.getElementById("offcanvas-search-top"); + + if (myOffcanvas) { + myOffcanvas.addEventListener("shown.bs.offcanvas", function () { + $("#offcanvas-search-top input").focus(); + $("#offcanvas-search-top input").keydown(function (e) { + if (e.keyCode == 13) { + if ($(this).val() != "") { + location.href = "products/search?keyword=" + $(this).val(); + } } - } + }); }); + } + + $(document).on("click", ".mobile-open-menu", function () { + var offcanvasMobileMenu = new bootstrap.Offcanvas('#offcanvas-mobile-menu'); + offcanvasMobileMenu.show(); }); }); diff --git a/resources/beike/shop/default/css/header.scss b/resources/beike/shop/default/css/header.scss index f0dda6cf..280bab83 100644 --- a/resources/beike/shop/default/css/header.scss +++ b/resources/beike/shop/default/css/header.scss @@ -177,6 +177,11 @@ header { display: flex; align-items: center; justify-content: space-between; + + .mobile-open-menu { + cursor: pointer; + } + > div { width: 33.33%; } @@ -252,4 +257,93 @@ header { } } } +} + +#offcanvas-mobile-menu { + width: 80%; + + .offcanvas-header { + padding: 10px 20px 10px 10px; + } + + .mobile-menu-wrap { + padding: 0; + + #menu-accordion { + border-top: 1px solid #e5e5e5; + + .accordion-item { + border-bottom: 1px solid #e5e5e5; + + .nav-item-text { + display: flex; + align-items: center; + justify-content: space-between; + + > a { + flex: 1; + height: 44px; + padding-left: 10px; + display: flex; + align-items: center; + + .badge { + position: relative; + margin-left: 13px; + // padding: 2px 4px; + font-weight: 400; + + &::before { + content: ""; + position: absolute; + top: 50%; + right: 100%; + transform: translate(0, -50%); + border: 4px solid; + border-right-width: 7px; + border: 5px solid #0000; + border-right-color: inherit; + } + } + } + + > span { + width: 44px; + height: 44px; + display: flex; + border-left: 1px solid #e5e5e5; + align-items: center; + justify-content: center; + &:active { + background-color: #eee; + } + + &[aria-expanded="true"] { + background-color: #eee; + i { + transform:rotate(180deg); + } + } + } + } + + .accordion-collapse { + padding: 10px; + border-top: 1px solid #e5e5e5; + + .children-group { + .group-name { + margin-bottom: 4px; + } + + .nav { + a { + color: #777; + } + } + } + } + } + } + } } \ No newline at end of file diff --git a/resources/beike/shop/default/css/page-product.scss b/resources/beike/shop/default/css/page-product.scss index b83ae25a..c66c654b 100644 --- a/resources/beike/shop/default/css/page-product.scss +++ b/resources/beike/shop/default/css/page-product.scss @@ -135,6 +135,11 @@ body.page-product { } .peoduct-info { + h1 { + @media (max-width: 768px) { + font-size: 1.2rem; + } + } .rating-wrap { margin-bottom: 2rem; @@ -151,6 +156,10 @@ body.page-product { } .quantity-btns { + @media (min-width: 768px) { + display: flex; + } + .quantity-input { max-width: 5rem; text-align: center; @@ -158,6 +167,9 @@ body.page-product { .quantity-wrap { height: 43px; + @media (max-width: 768px) { + margin-bottom: 10px; + } } } } diff --git a/resources/beike/shop/default/js/header.js b/resources/beike/shop/default/js/header.js index a72b7f6a..98d4328c 100644 --- a/resources/beike/shop/default/js/header.js +++ b/resources/beike/shop/default/js/header.js @@ -1,16 +1,21 @@ // offcanvas-search-top -$(function() { - var myOffcanvas = document.getElementById('offcanvas-search-top') - if (!myOffcanvas) return; - - myOffcanvas.addEventListener('shown.bs.offcanvas', function () { - $('#offcanvas-search-top input').focus(); - $('#offcanvas-search-top input').keydown(function (e) { - if (e.keyCode == 13) { - if ($(this).val() != '') { - location.href = 'products/search?keyword=' + $(this).val(); +$(function () { + var myOffcanvas = document.getElementById("offcanvas-search-top"); + if (myOffcanvas) { + myOffcanvas.addEventListener("shown.bs.offcanvas", function () { + $("#offcanvas-search-top input").focus(); + $("#offcanvas-search-top input").keydown(function (e) { + if (e.keyCode == 13) { + if ($(this).val() != "") { + location.href = "products/search?keyword=" + $(this).val(); + } } - } - }) - }) -}); \ No newline at end of file + }); + }); + } + + $(document).on("click", ".mobile-open-menu", function () { + const offcanvasMobileMenu = new bootstrap.Offcanvas('#offcanvas-mobile-menu') + offcanvasMobileMenu.show() + }); +}); diff --git a/resources/lang/en/common.php b/resources/lang/en/common.php index 2c8537a5..f4c9b607 100644 --- a/resources/lang/en/common.php +++ b/resources/lang/en/common.php @@ -64,6 +64,7 @@ return [ 'language' => 'Language', 'select_all' => 'Select All', 'sign_out' => 'Sign Out', + 'menu' => 'Menu', 'id' => 'ID', 'created_at' => 'Created At', diff --git a/resources/lang/zh_cn/common.php b/resources/lang/zh_cn/common.php index a2b21ab4..780332e2 100644 --- a/resources/lang/zh_cn/common.php +++ b/resources/lang/zh_cn/common.php @@ -63,6 +63,7 @@ return [ 'language' => '语言', 'select_all' => '全选', 'sign_out' => '退出登录', + 'menu' => '菜单', 'id' => 'ID', 'created_at' => '创建时间', diff --git a/themes/default/layout/header.blade.php b/themes/default/layout/header.blade.php index 69a5869a..26649ff0 100644 --- a/themes/default/layout/header.blade.php +++ b/themes/default/layout/header.blade.php @@ -62,63 +62,9 @@
- + @if (!isMobile()) + @include('shared.menu-pc') + @endif
+
+
+
{{ __('common.menu') }}
+ +
+
+ @if (isMobile()) + @include('shared.menu-mobile') + @endif +
+
+ +
diff --git a/themes/default/product.blade.php b/themes/default/product.blade.php index e6777182..e86f9227 100644 --- a/themes/default/product.blade.php +++ b/themes/default/product.blade.php @@ -86,7 +86,7 @@ @if ($product['active']) -
+
@@ -95,7 +95,7 @@