From 4e2112a36c69a610dd25cad25e6ba8c8c63ce5ff Mon Sep 17 00:00:00 2001 From: "Mr.X" Date: Wed, 6 Jun 2018 00:18:57 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8C=89=E7=85=A7layui=E6=A8=A1=E5=9D=97?= =?UTF-8?q?=E5=8C=96=E8=A7=84=E8=8C=83=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/okadmin.css | 260 ++++++++++++++++++++++----------------------- css/scroll-bar.css | 34 ++++++ font-iconfont.html | 18 +++- font-layui.html | 18 +++- index.html | 96 ++++++++++++++++- js/okadmin.js | 184 ++++++++++++++++---------------- user.html | 20 +++- welcome.html | 41 ++++++- 8 files changed, 437 insertions(+), 234 deletions(-) create mode 100644 css/scroll-bar.css diff --git a/css/okadmin.css b/css/okadmin.css index cf81d76..0316b60 100644 --- a/css/okadmin.css +++ b/css/okadmin.css @@ -1,158 +1,158 @@ -@charset "utf-8"; -@import "../lib/layui/css/layui.css"; -@import "//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css"; +/*@charset "utf-8";*/ +/*@import "../lib/layui/css/layui.css";*/ +/*@import "//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css";*/ -/*顶部导航菜单logo样式*/ -.layui-layout-admin .layui-logo { - color: #fff; - font-size: 20px; -} +/*!*顶部导航菜单logo样式*!*/ +/*.layui-layout-admin .layui-logo {*/ + /*color: #fff;*/ + /*font-size: 20px;*/ +/*}*/ -/*顶部导航文字菜单样式*/ -.layui-nav { - padding: 0; -} +/*!*顶部导航文字菜单样式*!*/ +/*.layui-nav {*/ + /*padding: 0;*/ +/*}*/ -/*顶部菜单左边部分菜单样式*/ -.layui-layout-left { - left: 235px; -} +/*!*顶部菜单左边部分菜单样式*!*/ +/*.layui-layout-left {*/ + /*left: 235px;*/ +/*}*/ -/*第一个tan选项卡隐藏取消图标*/ -.layui-tab-title li:first-child .layui-tab-close { - display: none; -} +/*!*第一个tan选项卡隐藏取消图标*!*/ +/*.layui-tab-title li:first-child .layui-tab-close {*/ + /*display: none;*/ +/*}*/ -/*隐藏/显示左边菜单按钮样式*/ -.menu-switch { - width: 30px; - height: 30px; - position: relative; - left: 200px; - top: 18px; - color: #fff; - background-color: #1AA094; - text-align: center; - line-height: 30px; - cursor: pointer; -} +/*!*隐藏/显示左边菜单按钮样式*!*/ +/*.menu-switch {*/ + /*width: 30px;*/ + /*height: 30px;*/ + /*position: relative;*/ + /*left: 200px;*/ + /*top: 18px;*/ + /*color: #fff;*/ + /*background-color: #1AA094;*/ + /*text-align: center;*/ + /*line-height: 30px;*/ + /*cursor: pointer;*/ +/*}*/ -/*主体内容样式*/ -.content-body { - position: absolute; - top: 46px; - right: 0px; - bottom: 42px; - left: 200px; - z-index: 1; - overflow: hidden; -} +/*!*主体内容样式*!*/ +/*.content-body {*/ + /*position: absolute;*/ + /*top: 46px;*/ + /*right: 0px;*/ + /*bottom: 42px;*/ + /*left: 200px;*/ + /*z-index: 1;*/ + /*overflow: hidden;*/ +/*}*/ -/*主体内容选项卡内容样式*/ -.content-body .layui-tab-content { - position: absolute; - top: 50px; - bottom: 0px; - width: 100%; - padding: 0px; - overflow: hidden; -} +/*!*主体内容选项卡内容样式*!*/ +/*.content-body .layui-tab-content {*/ + /*position: absolute;*/ + /*top: 50px;*/ + /*bottom: 0px;*/ + /*width: 100%;*/ + /*padding: 0px;*/ + /*overflow: hidden;*/ +/*}*/ -/*使iframe高度100%,它的父类高度也需要100%*/ -.content-body .layui-tab-content .layui-tab-item { - height: 100%; -} +/*!*使iframe高度100%,它的父类高度也需要100%*!*/ +/*.content-body .layui-tab-content .layui-tab-item {*/ + /*height: 100%;*/ +/*}*/ -/*使iframe高度100*/ -.content-body .layui-tab-content .layui-tab-item iframe { - height: 100%; +/*!*使iframe高度100*!*/ +/*.content-body .layui-tab-content .layui-tab-item iframe {*/ + /*height: 100%;*/ -} +/*}*/ -/*子页面(user.html、article.html等)的主体内容*/ -.ok-body { - padding: 10px; -} +/*!*子页面(user.html、article.html等)的主体内容*!*/ +/*.ok-body {*/ + /*padding: 10px;*/ +/*}*/ -/*子页面面包屑导航样式*/ -.ok-body-breadcrumb { - position: relative; - line-height: 39px; - height: 41px; - border-bottom: 1px solid rgb(229, 229, 229); -} +/*!*子页面面包屑导航样式*!*/ +/*.ok-body-breadcrumb {*/ + /*position: relative;*/ + /*line-height: 39px;*/ + /*height: 41px;*/ + /*border-bottom: 1px solid rgb(229, 229, 229);*/ +/*}*/ -/*子页面面包屑导航刷新按钮*/ -.ok-body-breadcrumb .layui-btn { - line-height: 2.4em; - margin-top: 3px; - float: right -} +/*!*子页面面包屑导航刷新按钮*!*/ +/*.ok-body-breadcrumb .layui-btn {*/ + /*line-height: 2.4em;*/ + /*margin-top: 3px;*/ + /*float: right*/ +/*}*/ -/*子页面面包屑导航刷新按钮图标*/ -.ok-body-breadcrumb .layui-btn .layui-icon { - line-height: 40px; -} +/*!*子页面面包屑导航刷新按钮图标*!*/ +/*.ok-body-breadcrumb .layui-btn .layui-icon {*/ + /*line-height: 40px;*/ +/*}*/ -/* -.ok-search { - text-align: center; -} +/*!**/ +/*.ok-search {*/ + /*text-align: center;*/ +/*}*/ -.ok-search input.layui-input { - width: 190px; -}*/ +/*.ok-search input.layui-input {*/ + /*width: 190px;*/ +/*}*!*/ -/*美化滚动条代码*/ -::-webkit-scrollbar { - width: 10px; - height: 10px; -} +/*!*美化滚动条代码*!*/ +/*::-webkit-scrollbar {*/ + /*width: 10px;*/ + /*height: 10px;*/ +/*}*/ -::-webkit-scrollbar-button:vertical { - display: none; -} +/*::-webkit-scrollbar-button:vertical {*/ + /*display: none;*/ +/*}*/ -::-webkit-scrollbar-track:vertical { - background-color: black; -} +/*::-webkit-scrollbar-track:vertical {*/ + /*background-color: black;*/ +/*}*/ -::-webkit-scrollbar-track-piece { - background-color: #F5F5F5; -} +/*::-webkit-scrollbar-track-piece {*/ + /*background-color: #F5F5F5;*/ +/*}*/ -::-webkit-scrollbar-thumb:vertical { - margin-right: 10px; - background-color: #A6A6A6; -} +/*::-webkit-scrollbar-thumb:vertical {*/ + /*margin-right: 10px;*/ + /*background-color: #A6A6A6;*/ +/*}*/ -::-webkit-scrollbar-thumb:vertical:hover { - background-color: #aaa; -} +/*::-webkit-scrollbar-thumb:vertical:hover {*/ + /*background-color: #aaa;*/ +/*}*/ -::-webkit-scrollbar-corner:vertical { - background-color: #535353; -} +/*::-webkit-scrollbar-corner:vertical {*/ + /*background-color: #535353;*/ +/*}*/ -::-webkit-scrollbar-resizer:vertical { - background-color: #FF6E00; -} +/*::-webkit-scrollbar-resizer:vertical {*/ + /*background-color: #FF6E00;*/ +/*}*/ -/*响应式代码控制*/ -@media screen and (max-width: 768px) { - .layui-layout-admin .layui-bg-black { - left: -200px; - } +/*!*响应式代码控制*!*/ +/*@media screen and (max-width: 768px) {*/ + /*.layui-layout-admin .layui-bg-black {*/ + /*left: -200px;*/ + /*}*/ - .layui-layout-admin .content-body { - left: 0; - } + /*.layui-layout-admin .content-body {*/ + /*left: 0;*/ + /*}*/ - .layui-layout-admin .layui-footer { - left: 0; - } + /*.layui-layout-admin .layui-footer {*/ + /*left: 0;*/ + /*}*/ - .layui-layout-left { - display: none; - } -} + /*.layui-layout-left {*/ + /*display: none;*/ + /*}*/ +/*}*/ diff --git a/css/scroll-bar.css b/css/scroll-bar.css new file mode 100644 index 0000000..9f28e89 --- /dev/null +++ b/css/scroll-bar.css @@ -0,0 +1,34 @@ +/*美化滚动条代码*/ +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-button:vertical { + display: none; +} + +::-webkit-scrollbar-track:vertical { + background-color: black; +} + +::-webkit-scrollbar-track-piece { + background-color: #F5F5F5; +} + +::-webkit-scrollbar-thumb:vertical { + margin-right: 10px; + background-color: #A6A6A6; +} + +::-webkit-scrollbar-thumb:vertical:hover { + background-color: #aaa; +} + +::-webkit-scrollbar-corner:vertical { + background-color: #535353; +} + +::-webkit-scrollbar-resizer:vertical { + background-color: #FF6E00; +} \ No newline at end of file diff --git a/font-iconfont.html b/font-iconfont.html index 87fe925..0696a86 100644 --- a/font-iconfont.html +++ b/font-iconfont.html @@ -3,7 +3,17 @@ 阿里巴巴图标库 - + +
@@ -32,6 +42,10 @@
- + \ No newline at end of file diff --git a/font-layui.html b/font-layui.html index 6ce04f2..3c254aa 100644 --- a/font-layui.html +++ b/font-layui.html @@ -3,7 +3,17 @@ Layui内置图标库 - + +
@@ -32,6 +42,10 @@
- + \ No newline at end of file diff --git a/index.html b/index.html index 4fe0bf3..9777010 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,36 @@ - + + +
@@ -117,6 +146,69 @@
- + \ No newline at end of file diff --git a/js/okadmin.js b/js/okadmin.js index 7e1932d..345a921 100644 --- a/js/okadmin.js +++ b/js/okadmin.js @@ -1,92 +1,92 @@ -layui.use(['element', 'jquery', 'code', 'layer'], function () { - var element = layui.element; - var $ = layui.jquery; - var layer = layui.layer; - // 引用code方法 - layui.code({about: false}); - - /** - * 左边菜单显示/隐藏功能 - * @type {boolean} - */ - $(".menu-switch").click(function () { - if ($(".layui-layout-admin .layui-side").css("left") == '0px') { - $(".layui-layout-admin .layui-side").animate({left: "-200px"}); - $(".layui-layout-admin .content-body").animate({left: "0px"}); - $(".layui-layout-admin .layui-footer").animate({left: "0px"}); - } else { - $(".layui-layout-admin .layui-side").animate({left: "0px"}); - $(".layui-layout-admin .content-body").animate({left: "200px"}); - $(".layui-layout-admin .layui-footer").animate({left: "200px"}); - } - }); - - /** - * 点击左边菜单在右边添加选项卡 - */ - $(".layui-nav-child").find("dd").click(function () { - var title = $(this).text(); - var path = $(this).children('a').attr('path'); - var tabId = $(this).children('a').attr('tab-id'); - // 去重复选项卡 - for (var i = 0; i < $('.ok-frame').length; i++) { - if ($('.ok-frame').eq(i).attr('tab-id') == tabId) { - element.tabChange("ok-tab", tabId); - event.stopPropagation(); - return; - } - } - // 添加选项卡 - element.tabAdd("ok-tab", { - title: title, - content: "", - id: tabId - }); - // 切换选项卡 - element.tabChange("ok-tab", tabId); - }); - - /** - * 捐赠作者 - */ - $(".layui-footer button").click(function () { - layer.tab({ - area: ["330px", "350px"], - tab: [{ - title: "支付宝", - content: "" - }, { - title: "微信", - content: "" - }] - }); - }); -}); - - -/** - * 获取当前时间 - */ -var nowDate1 = ""; - -function setDate() { - var date = new Date(); - var year = date.getFullYear(); - nowDate1 = year + "-" + addZero((date.getMonth() + 1)) + "-" + addZero(date.getDate()) + " "; - nowDate1 += addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds()); - document.getElementById("nowTime").innerHTML = nowDate1; - setTimeout('setDate()', 1000); -} - -/** - * 年月日是分秒为10以下的数字则添加0字符串 - * @param time - * @returns {number | *} - */ -function addZero(time) { - var i = parseInt(time); - if (i / 10 < 1) { - i = "0" + i; - } - return i; -} \ No newline at end of file +// layui.use(['element', 'jquery', 'code', 'layer'], function () { +// var element = layui.element; +// var $ = layui.jquery; +// var layer = layui.layer; +// // 引用code方法 +// layui.code({about: false}); +// +// /** +// * 左边菜单显示/隐藏功能 +// * @type {boolean} +// */ +// $(".menu-switch").click(function () { +// if ($(".layui-layout-admin .layui-side").css("left") == '0px') { +// $(".layui-layout-admin .layui-side").animate({left: "-200px"}); +// $(".layui-layout-admin .content-body").animate({left: "0px"}); +// $(".layui-layout-admin .layui-footer").animate({left: "0px"}); +// } else { +// $(".layui-layout-admin .layui-side").animate({left: "0px"}); +// $(".layui-layout-admin .content-body").animate({left: "200px"}); +// $(".layui-layout-admin .layui-footer").animate({left: "200px"}); +// } +// }); +// +// /** +// * 点击左边菜单在右边添加选项卡 +// */ +// $(".layui-nav-child").find("dd").click(function () { +// var title = $(this).text(); +// var path = $(this).children('a').attr('path'); +// var tabId = $(this).children('a').attr('tab-id'); +// // 去重复选项卡 +// for (var i = 0; i < $('.ok-frame').length; i++) { +// if ($('.ok-frame').eq(i).attr('tab-id') == tabId) { +// element.tabChange("ok-tab", tabId); +// event.stopPropagation(); +// return; +// } +// } +// // 添加选项卡 +// element.tabAdd("ok-tab", { +// title: title, +// content: "", +// id: tabId +// }); +// // 切换选项卡 +// element.tabChange("ok-tab", tabId); +// }); +// +// /** +// * 捐赠作者 +// */ +// $(".layui-footer button").click(function () { +// layer.tab({ +// area: ["330px", "350px"], +// tab: [{ +// title: "支付宝", +// content: "" +// }, { +// title: "微信", +// content: "" +// }] +// }); +// }); +// }); +// +// +// /** +// * 获取当前时间 +// */ +// var nowDate1 = ""; +// +// function setDate() { +// var date = new Date(); +// var year = date.getFullYear(); +// nowDate1 = year + "-" + addZero((date.getMonth() + 1)) + "-" + addZero(date.getDate()) + " "; +// nowDate1 += addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds()); +// document.getElementById("nowTime").innerHTML = nowDate1; +// setTimeout('setDate()', 1000); +// } +// +// /** +// * 年月日是分秒为10以下的数字则添加0字符串 +// * @param time +// * @returns {number | *} +// */ +// function addZero(time) { +// var i = parseInt(time); +// if (i / 10 < 1) { +// i = "0" + i; +// } +// return i; +// } \ No newline at end of file diff --git a/user.html b/user.html index 7eef4a5..cfd8795 100644 --- a/user.html +++ b/user.html @@ -4,7 +4,18 @@ 用户列表 - + + +
@@ -244,6 +255,11 @@
- + \ No newline at end of file diff --git a/welcome.html b/welcome.html index 8e68e04..4b944d0 100644 --- a/welcome.html +++ b/welcome.html @@ -7,7 +7,12 @@ - + + +
@@ -129,10 +134,38 @@
- - \ No newline at end of file