add: 系统设置 setting.html

2020-04-05 02:09:05 +08:00 · 2020-04-05 02:09:05 +08:00 · 71a453d54d
parent 5c1bedf714
commit 71a453d54d
8 changed files with 528 additions and 339 deletions
--- a/css/common.css
+++ b/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}

--- a/css/okadmin.animate.css
+++ b/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;
    }
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/css/okadmin.css
+++ b/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;
+}
+

 /*
 * 以下都是移动端的处理响应
--- a/css/okadmin.theme.css
+++ b/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============================*/
--- a/css/okadmin.theme.scss
+++ b/css/okadmin.theme.scss
@ -12,9 +12,9 @@ $color: #FF4806, #2D8CF0;

 .okadmin {

-  @each $c in $name{
-    $i:index($name,$c);
-    &.#{$c}_theme{
+  @each $c in $name {
+    $i: index($name, $c);
+    &.#{$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";
+}
--- a/index.html
+++ b/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>
   <!--遮罩层-->
--- a/js/okadmin.js
+++ b/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"
+      });
+   });
+
   /**
    * 添加新窗口
    */
--- a/pages/system/setting.html
+++ b/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>