优化:移动端通知小红点显示效果优化

zhuchunshu · Feb 14, 2023 · 397a194 · 397a194
1 parent d9ef09f
commit 397a194
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 22 deletions.
diff --git a/app/Plugins/Core/resources/assets/js/app.js b/app/Plugins/Core/resources/assets/js/app.js
@@ -3914,15 +3914,22 @@ $(function () {
 
     data = data.result; // 通知小红点
 
-    if (document.getElementById("core-notice-red")) {
-      if (data.notice_red > 0) {
-        var ele = $("#core-notice-red");
-        ele.show();
-        ele.text(data.notice_red);
-        var header_ele = $("div.border-primary");
-        header_ele.addClass("border-orange");
-        header_ele.removeClass("border-primary");
-      }
+    if (data.notice_red > 0) {
+      // 通知icon小红点
+      var ele = $("#core-notice-red");
+      ele.show();
+      ele.text(data.notice_red); // 下拉小红点
+
+      var ele2 = $("#common-user-notice-1");
+      ele2.show();
+      ele2.text(data.notice_red); // 移动端小红点
+
+      var ele3 = $("#common-user-notice-2");
+      ele3.show(); // 页头呼吸条
+
+      var header_ele = $("div.border-primary");
+      header_ele.addClass("border-orange");
+      header_ele.removeClass("border-primary");
     }
   });
 }); // if (ws_url && login_token){

diff --git a/app/Plugins/Core/resources/package/js/app.js b/app/Plugins/Core/resources/package/js/app.js
@@ -75,16 +75,26 @@ $(function () {
         data = data.result;
 
         // 通知小红点
-        if (document.getElementById("core-notice-red")) {
-            if (data.notice_red > 0) {
-                var ele = $("#core-notice-red")
-                ele.show();
-                ele.text(data.notice_red)
-                var header_ele = $("div.border-primary")
-                header_ele.addClass("border-orange")
-                header_ele.removeClass("border-primary")
-            }
+        if (data.notice_red > 0) {
+            // 通知icon小红点
+            var ele = $("#core-notice-red")
+            ele.show();
+            ele.text(data.notice_red)
+            // 下拉小红点
+            var ele2 = $("#common-user-notice-1")
+            ele2.show();
+            ele2.text(data.notice_red)
+
+            // 移动端小红点
+            var ele3 = $("#common-user-notice-2")
+            ele3.show();
+
+            // 页头呼吸条
+            var header_ele = $("div.border-primary")
+            header_ele.addClass("border-orange")
+            header_ele.removeClass("border-primary")
         }
+
     })
 })
 

diff --git a/app/Themes/CodeFec/resources/views/layouts/themes/header-right.blade.php b/app/Themes/CodeFec/resources/views/layouts/themes/header-right.blade.php
@@ -54,6 +54,7 @@
     <div id="vue-header-right-my" class="nav-item dropdown">
         <a href="#" class="p-0 nav-link d-flex lh-1 text-reset" data-bs-toggle="dropdown" aria-label="Open user menu">
             <span class="avatar avatar-sm avatar-rounded" style="background-image: url({{super_avatar(auth()->data())}})"></span>
+            <span id="common-user-notice-2" class="badge bg-red badge-blink d-md-none" style="transform: translate(50%, -50%);display: none; top: -2px; z-index: 1; position: absolute !important; right: 0px !important;"></span>
             <div class="d-none d-xl-block ps-2">
                 <div>{{auth()->data()->username}}</div>
                 <div class="mt-1 small text-muted">{{__("user.st member",['member' => auth()->id()])}}</div>
@@ -63,13 +64,14 @@
             <a href="/user" class="dropdown-item">个人中心</a>
             <a href="/user/collections" class="dropdown-item">我的收藏</a>
             <a href="/user/notice" class="dropdown-item">
-                <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
-                {{--                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>--}}
+{{--                <!-- Download SVG icon from http://tabler-icons.io/i/bell -->--}}
+{{--                --}}{{--                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>--}}
                 我的通知
+                <span id="common-user-notice-1" class="badge bg-red ms-2" style="display: none"></span>
             </a>
             <div class="dropdown-divider"></div>
             <a href="/user/setting" class="dropdown-item">个人设置</a>
-            <a href="#" @@click="Logout" class="dropdown-item">Logout</a>
+            <a href="#" @@click="Logout" class="dropdown-item">退出</a>
         </div>
     </div>
 @else

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -11,7 +11,7 @@
     "/js/admin/pay.js": "/js/admin/pay.js?id=476f7157fca67c342d8c",
     "/plugins/User/js/order.js": "/plugins/User/js/order.js?id=75d4436e905e45647c23",
     "/plugins/User/js/pm.js": "/plugins/User/js/pm.js?id=7c343135431298456b88",
-    "/plugins/Core/js/app.js": "/plugins/Core/js/app.js?id=2abf1afe6b15a1534ba3",
+    "/plugins/Core/js/app.js": "/plugins/Core/js/app.js?id=24b4fe9eb438e90851dc",
     "/plugins/Core/js/sign.js": "/plugins/Core/js/sign.js?id=0e703bf9e39c8d219d19",
     "/plugins/Core/js/user.js": "/plugins/Core/js/user.js?id=6d8fe77058a0f38006f4",
     "/plugins/Topic/js/topic.js": "/plugins/Topic/js/topic.js?id=2441d18b977cde255036",