修复移动端顶部菜单显示错乱问题

src/Befri.Goldhoo/Befri.Goldhoo.Mobile.MvcUI/Content/themes/SUI/extend/topbar/sui.topbar.js

@@ -2,8 +2,8 @@
 	* SUI Topbar
     * 顶栏 程序
 	* 基于 SUI 库开发的组件，适用于 Web 应用程序
-	* 当前版本：1.0.1
-	* 更新日期：2024/5/18
+	* 当前版本：1.1.0
+	* 更新日期：2024/8/16
 */
 
 /** Start 配置 [**/
@@ -86,14 +86,18 @@ var Topbar = new Application('.sui-topbar', 'Topbar');
 		}
 		/* Start 菜单事件 [*/
 		component.Target.find('.topbar-searchIcon').on('click', function(){
-			var target = $(this);
-			if(target.hasClass('active')){
-				target.removeClass('active');
-				component.Target.find('.topbar-GlobalSearchBox').slideUp(200);
+			if(component.Target.hasClass('search-active')){
+				component.Target.removeClass('search-active');
+			} else{
+				component.Target.addClass('search-active');
 			}
-			else{
-				target.addClass('active');
-				component.Target.find('.topbar-GlobalSearchBox').slideDown(200);
+		});
+
+		component.Target.find('.topbar-closeSearchIcon').on('click', function(){
+			if(component.Target.hasClass('search-active')){
+				component.Target.removeClass('search-active');
+			} else{
+				component.Target.addClass('search-active');
 			}
 		});
 		/* End 菜单事件 ]*/

src/Befri.Goldhoo/Befri.Goldhoo.Mobile.MvcUI/Content/themes/SUI/extend/topbar/themes/sui.topbar.Goldhoo.css

@@ -3,7 +3,7 @@
 	* SUI Topbar
     * 顶栏 默认样式
 	* 基于 SUI 库开发的组件，适用于 Web 应用程序
-	* 最后更新日期：2024年08月5日
+	* 最后更新日期：2024年08月16日
 */
 
 /* ------ Topbar [ ------ */
@@ -30,7 +30,11 @@
     text-decoration: none !important;
 }
 
-.sui-topbar .topbar-logo, .sui-topbar .topbar-menu, .sui-topbar .topbar-menu > a, .sui-topbar .topbar-menu > span, .sui-topbar > .topbar-link {
+.sui-topbar .topbar-logo,
+.sui-topbar .topbar-menu,
+.sui-topbar .topbar-menu>a,
+.sui-topbar .topbar-menu>span,
+.sui-topbar>.topbar-link {
     display: inline-block;
     height: 54px;
 }
@@ -40,24 +44,33 @@
     width: 130px;
 }
 
-.sui-topbar .topbar-logo img, .sui-topbar .topbar-searchBox {
+.sui-topbar .topbar-logo img,
+.sui-topbar .topbar-searchBox {
     width: auto;
     height: 60%;
-    vertical-align: middle;
 }
 
-.sui-topbar .topbar-logo:before, .sui-topbar .topbar-menu > a:before, .sui-topbar .topbar-menu > span:before, .sui-topbar > .topbar-functions:before, .sui-topbar > .topbar-functions > a, .sui-topbar > .topbar-functions > span, .sui-topbar > .topbar-functions > a:before, .sui-topbar > .topbar-functions > span:before, .sui-topbar > .topbar-link:before {
+.sui-topbar .topbar-logo:before,
+.sui-topbar .topbar-menu>a:before,
+.sui-topbar .topbar-menu>span:before,
+.sui-topbar>.topbar-functions:before,
+.sui-topbar>.topbar-functions>a,
+.sui-topbar>.topbar-functions>span,
+.sui-topbar>.topbar-functions>a:before,
+.sui-topbar>.topbar-functions>span:before,
+.sui-topbar>.topbar-link:before {
     display: inline-block;
     content: '';
     height: 54px;
     vertical-align: middle;
 }
 
-.sui-topbar .topbar-menu > a, .sui-topbar .topbar-menu > span {
+.sui-topbar .topbar-menu>a,
+.sui-topbar .topbar-menu>span {
     padding: 0 24px;
 }
 
-.sui-topbar > .topbar-functions {
+.sui-topbar>.topbar-functions {
     position: absolute;
     top: 0;
     right: 0;
@@ -65,6 +78,13 @@
 }
 
 .sui-topbar .topbar-searchBox {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.sui-topbar .topbar-searchBox-body {
     position: relative;
     display: inline-flex;
     width: 350px;
@@ -183,11 +203,13 @@
     background-color: #2f0808;
 }
 
-.topbar-functions > * + * {
+.topbar-functions>*+* {
     padding-left: 6px;
 }
 
-.sui-topbar .topbar-link:hover, .sui-topbar > .topbar-functions > a:hover, .sui-topbar > .topbar-functions > span:hover {
+.sui-topbar .topbar-link:hover,
+.sui-topbar>.topbar-functions>a:hover,
+.sui-topbar>.topbar-functions>span:hover {
     color: #581818;
 }
 
@@ -198,15 +220,17 @@
     padding: 12px 0;
 }
 
-.topbar-GlobalSearchBox, .sui-topbar > .topbar-functions > a.topbar-searchIcon, .sui-topbar > .topbar-functions > a.topbar-loginIcon {
+.topbar-GlobalSearchBox,
+.sui-topbar>.topbar-functions>a.topbar-loginIcon {
     display: none;
 }
 
-.sui-topbar > .topbar-link {
+.sui-topbar>.topbar-link {
     padding-right: 12px;
 }
 
-.sui-topbar > .topbar-link:hover, .topbar-loginLink:hover {
+.sui-topbar>.topbar-link:hover,
+.topbar-loginLink:hover {
     text-decoration: underline;
 }
 
@@ -214,6 +238,24 @@
     background-color: #9a3d3d;
 }
 
+.topbar-searchIcon,
+.topbar-closeSearchIcon {
+    position: relative;
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
+
+.topbar-searchIcon {
+    width: 20px;
+    height: 20px;
+}
+
+.topbar-closeSearchIcon {
+    width: 40px;
+    height: 40px;
+}
+
 /* mobile */
 .mobile.sui-topbar {
     font-size: 12px;
@@ -222,7 +264,35 @@
     box-sizing: border-box;
 }
 
-.mobile.sui-topbar .topbar-searchBox {
-    max-width: 280px;
-    min-width: 200px;
+.mobile.search-active .topbar-searchBox {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: #f2f2f2;
+    z-index: 10;
+    padding: 10px;
+}
+
+.mobile .topbar-searchBox-body {
+    display: none;
+    flex-grow: 1;
 }
+
+.mobile .topbar-searchIcon,
+.mobile.search-active .topbar-searchBox-body,
+.mobile.search-active .topbar-closeSearchIcon {
+    display: inline-flex;
+}
+
+.mobile.search-active .topbar-searchIcon,
+.mobile.search-active .topbar-functions .topbar-loginIcon,
+.mobile.search-active .topbar-functions .topbar-loginLink {
+    display: none;
+}
+
+.mobile.search-active .topbar-functions {
+    left: 0;
+    top: 0;
+}

src/Befri.Goldhoo/Befri.Goldhoo.Mobile.MvcUI/Views/Shared/_Layout.cshtml

@@ -23,13 +23,13 @@
     <title>@ViewBag.Title - @Befri.Goldhoo.Mobile.MvcUI.WebConstants.TITLE_NAME</title>
     <link href="@Url.Content("~/Content/themes/SUI/font-awesome/css/all.css")" rel="stylesheet" />
     <link href="@Url.Content("~/Content/themes/SUI/themes/default/sui.css")?v=1.2.11" rel="stylesheet" />
-    <link href="@Url.Content("~/Content/themes/SUI/extend/topbar/themes/sui.topbar." + Befri.Goldhoo.Mobile.MvcUI.WebConstants.THEMES + ".css")?v=3.2" rel="stylesheet" />
+    <link href="@Url.Content("~/Content/themes/SUI/extend/topbar/themes/sui.topbar." + Befri.Goldhoo.Mobile.MvcUI.WebConstants.THEMES + ".css")?v=1.1.0" rel="stylesheet" />
     <link href="@Url.Content("~/Content/themes/SUI/extend/header/themes/sui.header." + Befri.Goldhoo.Mobile.MvcUI.WebConstants.THEMES + ".css")?v=1.0.1" rel="stylesheet" />
     <link href="@Url.Content("~/Content/themes/Client/version1/themes/" + Befri.Goldhoo.Mobile.MvcUI.WebConstants.THEMES +"/style.css")?v=0.1.2" rel="stylesheet" />
     <script src="@Url.Content("~/Content/themes/Library/jQuery/1.9.1/jquery.min.js")"></script>
     <script src="@Url.Content("~/Content/themes/SUI/src/jquery.mobile.touch.min.js")"></script>
     <script src="@Url.Content("~/Content/themes/SUI/src/sui.main.js")?v=1.2.11"></script>
-    <script src="@Url.Content("~/Content/themes/SUI/extend/topbar/sui.topbar.js")?v=3"></script>
+    <script src="@Url.Content("~/Content/themes/SUI/extend/topbar/sui.topbar.js")?v=1.1.0"></script>
     <script src="@Url.Content("~/Content/themes/SUI/extend/header/sui.header.js")?v=1.0.1"></script>
     <script src="@Url.Content("~/Content/themes/Client/version1/src/system.js")?v=1.1.0"></script>
     <script src="@Url.Content("~/Content/themes/Client/version1/src/base.js")?v=1.3.6"></script>

src/Befri.Goldhoo/Befri.Goldhoo.Mobile.MvcUI/Views/Shared/_PartialTop.cshtml

@@ -58,27 +58,30 @@
             </div>-->
             <div class="topbar-functions">
                 <div class="topbar-searchBox">
-                    <input class="topbar-searchInput" placeholder="品名 料号" />
+                    <div class="topbar-searchBox-body">
+                        <input class="topbar-searchInput" placeholder="品名 料号" />
 
-                    <div class="topbar-search-combobox">
-                        <div class="topbar-search-combobox-view">
-                            <div class="topbar-search-combobox-view-text"></div>
-                            <div class="topbar-search-combobox-view-icon fas fa-caret-down"></div>
+                        <div class="topbar-search-combobox">
+                            <div class="topbar-search-combobox-view">
+                                <div class="topbar-search-combobox-view-text"></div>
+                                <div class="topbar-search-combobox-view-icon fas fa-caret-down"></div>
+                            </div>
+                            <div class="topbar-search-combobox-panel">
+                                <div class="topbar-search-combobox-item" url="@Url.Content("~/Search/Index")" )>全部</div>
+                                @*<div class="topbar-search-combobox-item" url="@Url.Content("~/ProductsShow/Index")">产品展示</div>*@
+                                <div class="topbar-search-combobox-item" url="@Url.Content("~/Product/Index")">产品中心</div>
+                                @*<div class="topbar-search-combobox-item" url="@Url.Content("~/Replenish/Index")">补件中心</div>*@
+                                <div class="topbar-search-combobox-item" url="@Url.Content("~/Clearance/Index")">清仓区</div>
+                                <div class="topbar-search-combobox-item" url="@Url.Content("~/Discount/Index")">折扣区</div>
+                            </div>
                         </div>
-                        <div class="topbar-search-combobox-panel">
-                            <div class="topbar-search-combobox-item" url="@Url.Content("~/Search/Index")" )>全部</div>
-                            @*<div class="topbar-search-combobox-item" url="@Url.Content("~/ProductsShow/Index")">产品展示</div>*@
-                            <div class="topbar-search-combobox-item" url="@Url.Content("~/Product/Index")">产品中心</div>
-                            @*<div class="topbar-search-combobox-item" url="@Url.Content("~/Replenish/Index")">补件中心</div>*@
-                            <div class="topbar-search-combobox-item" url="@Url.Content("~/Clearance/Index")">清仓区</div>
-                            <div class="topbar-search-combobox-item" url="@Url.Content("~/Discount/Index")">折扣区</div>
+                        <div class="topbar-searchBox-icon">
+                            <span class="fa fa-search"></span>
                         </div>
-                    </div>  
-                    <div class="topbar-searchBox-icon">
-                        <span class="fa fa-search"></span>
                     </div>
+                    <div class="topbar-searchIcon fa fa-search"></div>
+                    <div class="topbar-closeSearchIcon fas fa-times"></div>
                 </div>
-                <a class="topbar-searchIcon" href="javascript:void(0)"><span class="fa fa-search"></span></a>
                 @foreach (var item in user.ShopFunctions)
                 {
                     if (item.FunctionId == Befri.Goldhoo.Models.FunctionInfo.Cart && item.HasPrivilege)
@@ -115,14 +118,14 @@
                     <form class="hide" id="Logoff" method="post" action="@Url.Content("~/Account/LogOff")">@Html.AntiForgeryToken()</form>
                 }
             </div>
-            <div class="topbar-GlobalSearchBox">
+            @*<div class="topbar-GlobalSearchBox">
                 <div class="topbar-searchBox">
                     <input class="topbar-searchInput" placeholder="品名 料号" />
                     <div class="topbar-searchBox-icon">
                         <span class="fa fa-search"></span>
                     </div>
                 </div>
-            </div>
+            </div>*@
         </div>
     </div>
 </div>