前端样式修改 login main 极简模式 精细模式

ruoyi-admin/src/main/resources/static/ruoyi/index.js

@@ -510,29 +510,46 @@ $(function() {
     	location.href  = ctx + "lockscreen";
     });
     var menuFlag = false;//是否隐藏
-    // 隐藏左侧菜单
+    // 极简模式切换
     $('#hideMenu').on('click', function () {
+        hideModel();
+    });
+
+    $('#showMenu').on('click', function () {
+        hideModel();
+    });
+
+    //极简模式切换
+    function hideModel() {
         //找到菜单栏元素以及右侧部分
         let $menu = $("#navMenu");
-        let $right = $("#page-wrapper");
+        let $right = $("#page-wrapper");//此上两元素是控制菜单栏的
+
+        let $comDiv = $("#comDiv");//精细div
+        let $simpleDiv = $("#simpleDiv");//极简div
+
+        let $headMenuDiv = $("#headMenuDiv");
         if(!menuFlag){
             menuFlag = true;
-            $("#hideMenu").text("显示左侧菜单");
-            $menu.hide(300);
-            setTimeout(function () {
-                // $menu.addClass("menuClass");
-                $right.addClass("rightClass");
-            },500);
+            // $menu.addClass("menuClass");
+            $right.addClass("rightClass");
+
+            $menu.hide();
+            $comDiv.hide();
+            $headMenuDiv.hide();
+            $simpleDiv.show();
         }else{
             menuFlag = false;
-            $("#hideMenu").text("隐藏左侧菜单");
-            $menu.show(300);
-            setTimeout(function () {
-                // $menu.removeClass("menuClass");
-                $right.removeClass("rightClass");
-            },500);
+            $right.removeClass("rightClass");
+
+            $menu.show();
+            $comDiv.show();
+            $headMenuDiv.show();
+            $simpleDiv.hide();
         }
-    });
+    }
+
+    hideModel();//默认隐藏
 
     // 页签刷新按钮
     $('.tabReload').on('click', refreshTab);

ruoyi-admin/src/main/resources/templates/index.html

@@ -16,9 +16,12 @@
     <link th:href="@{/css/skins.css}" rel="stylesheet"/>
     <link th:href="@{/ruoyi/css/ry-ui.css?v=4.7.5}" rel="stylesheet"/>
 	<style type="text/css">
+        /*菜单样式*/
 		.menuClass{
 			width: 0px!important;
 		}
+
+        /*右边体样式*/
 		.rightClass{
 			width: 100%px!important;
 			margin: 0px!important;
@@ -193,8 +196,9 @@
     <!--左侧导航结束-->
 
     <!--右侧部分开始-->
-    <div id="page-wrapper" class="gray-bg dashbard-1">
-        <div class="row border-bottom">
+    <div id="page-wrapper" class="gray-bg dashbard-1 rightClass">
+        <!--精细模式-->
+        <div class="row border-bottom" id="comDiv" style="display: none">
             <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                 <div class="navbar-header">
                     <a class="navbar-minimalize minimalize-styl-2" style="color:#FFF;" href="#" title="收起菜单">
@@ -205,7 +209,7 @@
 <!--                    <li><a data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="开发文档" href="http://doc.ruoyi.vip/ruoyi" target="_blank"><i class="fa fa-question-circle"></i> 文档</a></li>-->
                     <li><a data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="锁定屏幕" href="#" id="lockScreen"><i class="fa fa-lock"></i> 锁屏</a></li>
 	                <li><a data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="全屏显示" href="#" id="fullScreen"><i class="fa fa-arrows-alt"></i> 全屏</a></li>
-	                <li><a data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="隐藏左侧菜单" href="#" id="hideMenu"><i class="fa fa-th-list"></i> 隐藏左侧菜单</a></li>
+	                <li><a data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="极简模式" href="#" id="hideMenu"><i class="fa fa-th-list"></i> 极简模式</a></li>
                     <li class="dropdown user-menu">
 						<a href="javascript:void(0)" class="dropdown-toggle" data-hover="dropdown">
 							<img th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="this.src='img/profile.jpg'" class="user-image">
@@ -238,7 +242,18 @@
                 </ul>
             </nav>
         </div>
-        <div class="row content-tabs" th:classappend="${#bools.isFalse(tagsView)} ? |hide|">
+
+        <!--极简模式-->
+        <div class="row border-bottom" id="simpleDiv">
+            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
+                <ul class="nav navbar-top-links navbar-right welcome-message">
+                    <!--                    <li><a data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="开发文档" href="http://doc.ruoyi.vip/ruoyi" target="_blank"><i class="fa fa-question-circle"></i> 文档</a></li>-->
+                    <li><a data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="精细模式" href="#" id="showMenu"><i class="fa fa-th-list"></i> 精细模式</a></li>
+                </ul>
+            </nav>
+        </div>
+
+        <div id="headMenuDiv" style="display: none" class="row content-tabs" th:classappend="${#bools.isFalse(tagsView)} ? |hide|">
             <button class="roll-nav roll-left tabLeft">
                 <i class="fa fa-backward"></i>
             </button>