add: 系统设置 setting.html

css/common.css

@@ -1,5 +1,5 @@
 @import "../lib/fonts/iconfont.css";
-html{
+/*html{
     webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
@@ -7,7 +7,7 @@ html{
     filter: grayscale(100%);
     filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
     filter: gray;
-}
+}*/
 [v-cloak]{display:none!important}
 .ok-body{padding:10px}
 

css/okadmin.animate.css

@@ -3598,7 +3598,7 @@
 }
 
 @media (print), (prefers-reduced-motion: reduce) {
-    .ok-anim {
+    .ok-anim, .layui-layer-oksetting {
         -webkit-animation-duration: 1ms !important;
         animation-duration: 1ms !important;
         -webkit-transition-duration: 1ms !important;
@@ -3607,3 +3607,21 @@
         animation-iteration-count: 1 !important;
     }
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

css/okadmin.css

@@ -1,8 +1,9 @@
 @import "../lib/layui/css/layui.css";
 @import "../lib/fonts/iconfont.css";
 @import "./okadmin.theme.css";
+@import "./okadmin.animate.css";
 @import "../lib/layui/css/okmodules/jquery.contextMenu.css";
-html{
+/*html{
     webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
@@ -10,7 +11,7 @@ html{
     filter: grayscale(100%);
     filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
     filter: gray;
-}
+}*/
 /*边距*/
 .ptb20{
     padding-top: 20px;
@@ -302,6 +303,7 @@ html{
     padding-left: 45px;
     padding-right: 30px;
     color: #FFF;
+    position: relative;
     /*color: #f2f2f2;*/
 }
 
@@ -627,6 +629,19 @@ html{
     left: 0;
 }
 
+/**
+ 弹出系统设置
+*/
+.layui-layer.ok-setting{
+    -webkit-animation-duration: .25s;
+    animation-duration: .25s;
+    top: 50px!important;
+    bottom: 0;
+    height: 100%;
+    min-height: 500px;
+    overflow-y: auto;
+}
+
 
 /*
 * 以下都是移动端的处理响应

css/okadmin.theme.css

@@ -21,3 +21,43 @@
 
 .okadmin.blue_theme .ok-tab .okadmin-tabs-control:hover, .okadmin.blue_theme .ok-tab .layui-tab-title li.layui-this {
     color: #2D8CF0; }
+
+/**============================导航菜单的箭头 start============================*/
+#navBar.ok-arrow2 .layui-nav-item a span,
+#navBar.ok-arrow2 .layui-nav-item.layui-nav-itemed dd a span{
+    top: 14px!important;
+}
+#navBar.ok-arrow2 .layui-nav-item.layui-nav-itemed a span,
+#navBar.ok-arrow2 .layui-nav-item dd.layui-nav-itemed a span {
+    top: 20px!important;
+}
+
+#navBar.ok-arrow2 .layui-nav-item a span.layui-nav-more {
+    font-family: ok-icon !important;
+    font-size: 12px;
+    font-weight: 600;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    width: 12px;
+    height: 12px;
+    color: #FFFFFF;
+    border: 0;
+    display: block;
+}
+#navBar.ok-arrow2 .layui-nav-item a span.layui-nav-more:before {
+    content: "\e661";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 12px;
+    line-height: 12px;
+    width: 100%;
+    font-size: 12px;
+    color: #FFFFFF;
+}
+#navBar.ok-arrow2 .layui-nav-itemed > a > span.layui-nav-more:before{
+    content: "\e6de";
+}
+/**============================导航菜单的箭头 end============================*/

css/okadmin.theme.scss

@@ -12,9 +12,9 @@ $color: #FF4806, #2D8CF0;
 
 .okadmin {
 
-  @each $c in $name{
+  @each $c in $name {
-    $i:index($name,$c);
+    $i: index($name, $c);
-    &.#{$c}_theme{
+    &.#{$c}_theme {
       /**头部导航*/
       /* .okadmin-header {
         .layui-nav-item a {
@@ -39,18 +39,20 @@ $color: #FF4806, #2D8CF0;
       /**左侧菜单*/
       .ok-left .okadmin-nav {
         .layui-nav-bar {
-          background: nth($color,$i);
+          background: nth($color, $i);
         }
+
         .layui-nav-item {
           &.layui-this {
             a {
-              background: nth($color,$i);
+              background: nth($color, $i);
             }
           }
+
           .layui-nav-child {
             .layui-this {
               a {
-                background: nth($color,$i);
+                background: nth($color, $i);
               }
             }
           }
@@ -61,7 +63,7 @@ $color: #FF4806, #2D8CF0;
       .ok-tab {
         .okadmin-tabs-control:hover,
         .layui-tab-title li.layui-this {
-          color: nth($color,$i);
+          color: nth($color, $i);
         }
       }
     }
@@ -69,3 +71,41 @@ $color: #FF4806, #2D8CF0;
   }
 }
 
+/**============================导航菜单的箭头 start============================*/
+#navBar.ok-arrow2 .layui-nav-item a span,
+#navBar.ok-arrow2 .layui-nav-item.layui-nav-itemed dd a span{
+  top: 14px!important;
+}
+#navBar.ok-arrow2 .layui-nav-item.layui-nav-itemed a span,
+#navBar.ok-arrow2 .layui-nav-item dd.layui-nav-itemed a span {
+  top: 20px!important;
+}
+
+#navBar.ok-arrow2 .layui-nav-item a span.layui-nav-more {
+  font-family: ok-icon !important;
+  font-size: 12px;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  width: 12px;
+  height: 12px;
+  color: #FFFFFF;
+  border: 0;
+  display: block;
+}
+#navBar.ok-arrow2 .layui-nav-item a span.layui-nav-more:before {
+  content: "\e661";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 12px;
+  line-height: 12px;
+  width: 100%;
+  font-size: 12px;
+  color: #FFFFFF;
+}
+#navBar.ok-arrow2 .layui-nav-itemed > a > span.layui-nav-more:before{
+  content: "\e6de";
+}

index.html

@@ -9,7 +9,6 @@
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="css/okadmin.css">
    <link rel="stylesheet" href="lib/loading/okLoading.css"/>
-
    <script type="text/javascript" src="lib/loading/okLoading.js"></script>
 </head>
 <body class="layui-layout-body">
@@ -57,7 +56,7 @@
 
          <!-- 全屏 -->
          <li class="layui-nav-item layui-hide-xs">
-            <a id="fullScreen" class=" pr10 pl10" href="javascript:">
+            <a id="fullScreen" class=" pr10 pl10" href="javascript:;">
                <i class="layui-icon layui-icon-screen-full"></i>
             </a>
          </li>
@@ -79,6 +78,13 @@
                <dd><a href="javascript:void(0)" id="logout">退出登录</a></dd>
             </dl>
          </li>
+
+         <!-- 菜单 -->
+         <li class="layui-nav-item layui-hide-xs">
+            <a id="okSetting" class="pr10 pl10" href="javascript:;">
+               <i style="font-size: 18px" class="ok-icon ok-icon-moreandroid"></i>
+            </a>
+         </li>
       </ul>
    </div>
    <!--遮罩层-->

js/okadmin.js

@@ -19,7 +19,7 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
       }
    });
    objOkTab = okTab;
-	okLoading.close();/**关闭加载动画*/
+   okLoading && okLoading.close();/**关闭加载动画*/
    /**
     * 左侧导航渲染完成之后的操作
     */
@@ -62,6 +62,22 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
       });
    });
 
+   /**系统设置*/
+   $("body").on("click", "#okSetting", function () {
+      layer.open({
+         type: 2,
+         title: "系统设置",
+         shadeClose: true,
+         closeBtn: 0, //不显示关闭按钮
+         skin: "slideInRight ok-setting",
+         area: ['340px', '100%'],
+         offset: 'r', //右边
+         time: 200000, //2秒后自动关闭
+         anim: -1,
+         content: "./pages/system/setting.html"
+      });
+   });
+
    /**
     * 添加新窗口
     */

pages/system/setting.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <title>系统设置</title>
+   <link rel="stylesheet" href="../../css/oksub.css">
+   <style type="text/css">
+      .ok-setting .layui-form-item{
+         margin: 0;
+      }
+      .ok-setting .set-label{
+         padding-left: 0;
+         width: auto;
+         font-size: 16px;
+         padding-right: 10px;
+      }
+      .ok-setting .layui-input-block{
+         margin: 0;
+      }
+   </style>
+</head>
+<body>
+<div class="layui-card-body ok-setting">
+   <form class="layui-form" action="javascript:;">
+      <div class="layui-form-item">
+         <label class="layui-form-label set-label">导航箭头：</label>
+         <div class="layui-input-block">
+            <input lay-filter="arrow" type="radio" name="sex" value="" title="默认" checked>
+            <input lay-filter="arrow" type="radio" name="sex" value="ok-arrow2" title="箭头" >
+         </div>
+      </div>
+   </form>
+</div>
+</body>
+</html>
+<script type="text/javascript" src="../../lib/layui/layui.js"></script>
+<script type="text/javascript">
+   layui.use(['jquery', 'form'], function () {
+      var $ = layui.jquery,
+         form = layui.form,
+         parentBody = parent.document.body;// 父级dom
+
+      let ok_arrow = ['ok-arrow2'];
+      form.on('radio(arrow)', function(data){ //更改导航箭头样式
+         if(data.value){
+            $(parentBody).find("#navBar").addClass(data.value);
+         } else {
+            for(var i = 0; i < ok_arrow.length; i++){
+               $(parentBody).find("#navBar").removeClass(ok_arrow[i]);
+            }
+         }
+      });
+   });
+</script>