1
This commit is contained in:
你的名字
930
public/static/plugs/lay-module/layuimini/layuimini.css
Normal file
930
public/static/plugs/lay-module/layuimini/layuimini.css
Normal file
@ -0,0 +1,930 @@
|
||||
/**
|
||||
配色方案（如有需要，请自行配置）
|
||||
*/
|
||||
/**头部-配色*/
|
||||
.layui-layout-admin .layui-header {
|
||||
background-color: #1aa094 !important;
|
||||
}
|
||||
|
||||
.layui-header > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
|
||||
background-color: #197971 !important;
|
||||
}
|
||||
|
||||
.layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
|
||||
background-color: #197971 !important;
|
||||
}
|
||||
|
||||
/**logo-配色*/
|
||||
.layui-layout-admin .layuimini-logo {
|
||||
background-color: #243346 !important;
|
||||
}
|
||||
|
||||
/**左侧-配色*/
|
||||
.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul {
|
||||
background-color: #2f4056 !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-child a:hover:not(.layui-this) {
|
||||
background-color: #3b3f4b;
|
||||
}
|
||||
|
||||
/**左侧菜单选中-配色*/
|
||||
.layui-layout-admin .layui-nav-tree .layui-this, .layui-layout-admin .layui-nav-tree .layui-this > a, .layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this, .layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this a {
|
||||
background-color: #1aa094 !important;
|
||||
}
|
||||
|
||||
|
||||
/**头部样式 */
|
||||
.layui-layout-admin .header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.layuimini-header-menu, .layui-header {
|
||||
height: 60px !important;
|
||||
}
|
||||
|
||||
.layuimini-header-menu > .layui-nav-item {
|
||||
color: #1b1d21;
|
||||
height: 60px !important;
|
||||
line-height: 60px !important;
|
||||
}
|
||||
|
||||
.layui-header > .layui-layout-right > .layui-nav-item {
|
||||
height: 60px !important;
|
||||
line-height: 60px !important;
|
||||
}
|
||||
|
||||
.layui-layout-left {
|
||||
left: 295px !important;
|
||||
}
|
||||
|
||||
.layui-nav.layui-layout-left.layuimini-header-menu.layuimini-pc-show {
|
||||
font-weight: bold;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
|
||||
/**logo演示（通用） */
|
||||
.layui-layout-admin .layuimini-logo {
|
||||
font-weight: bold;
|
||||
color: #ffffff !important;
|
||||
height: 60px !important;
|
||||
line-height: 60px !important;
|
||||
overflow: hidden;
|
||||
line-height: 64px;
|
||||
transition: all .2s !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layuimini-logo img {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layuimini-logo h1 {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 12px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**缩放工具（通用） */
|
||||
.layuimini-tool {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 235px;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
color: #ffffff !important;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
/**缩放工具（缩放） */
|
||||
.layuimini-tool i {
|
||||
display: block;
|
||||
color: #bbe3df;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/**tab选项卡 */
|
||||
.layuimini-tab {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-scroll {
|
||||
position: marker;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-body {
|
||||
height: calc(100% - 37px) !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-body .layui-tabs-item {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header {
|
||||
border: none;
|
||||
border: 1px solid whitesmoke;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header li {
|
||||
border-right: 1px solid whitesmoke;
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-tab-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-this:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layuimini-tab-active {
|
||||
display: inline-block;
|
||||
background-color: lightgray;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 30px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-this .layuimini-tab-active {
|
||||
background-color: var(--ea8-theme-main-color);
|
||||
}
|
||||
|
||||
.layuimini-tab > .layui-tabs-header, .layuimini-tab > .close-box {
|
||||
height: 35px !important;
|
||||
}
|
||||
|
||||
.layuimini-tab > .layui-tabs-header li, .layuimini-tab > .close-box li {
|
||||
line-height: 35px !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header span {
|
||||
color: #acafb1;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-this span {
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-tab-close {
|
||||
font-size: 12px !important;
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
line-height: 16px !important;
|
||||
margin-left: 5px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-tab-close:hover {
|
||||
border-radius: 4em;
|
||||
background: #ff5722;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .disable-close + .layui-tab-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .able-close + .layui-tab-close {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-control > li {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
width: 35px;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
border-top: whitesmoke 1px solid;
|
||||
border-bottom: whitesmoke 1px solid;
|
||||
}
|
||||
|
||||
.layuimini-tab .layuimini-tab-roll-left {
|
||||
left: 0;
|
||||
border-right: whitesmoke 1px solid;
|
||||
border-left: whitesmoke 1px solid;
|
||||
}
|
||||
|
||||
.layuimini-tab .layuimini-tab-roll-right {
|
||||
right: 35px;
|
||||
border-left: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool {
|
||||
right: 0;
|
||||
border-left: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-control .layui-tab-tool,
|
||||
.layuimini-tab .layui-tab-control .layuimini-tab-roll-left,
|
||||
.layuimini-tab .layui-tab-control .layuimini-tab-roll-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab.layui-tab-roll .layui-tab-control .layuimini-tab-roll-left,
|
||||
.layuimini-tab.layui-tab-roll .layui-tab-control .layuimini-tab-roll-right {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-tab.layui-tab-roll .layui-tab-control .layuimini-tab-roll-right {
|
||||
right: 0;
|
||||
border-right: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.layuimini-tab.layui-tab-roll .layui-tabs-header {
|
||||
padding-left: 35px;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-tab.layui-tab-tool .layui-tab-control .layui-tab-tool {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-tab.layui-tab-tool .layui-tabs-header {
|
||||
padding-left: 0;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-tab.layui-tab-rollTool .layui-tabs-header {
|
||||
padding-left: 35px;
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
.layuimini-tab.layui-tab-rollTool .layui-tab-control .layuimini-tab-roll-left,
|
||||
.layuimini-tab.layui-tab-rollTool .layui-tab-control .layuimini-tab-roll-right,
|
||||
.layuimini-tab.layui-tab-rollTool .layui-tab-control .layui-tab-tool {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-nav {
|
||||
position: absolute;
|
||||
height: 43px !important;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-nav-item {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-nav-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-nav-child {
|
||||
left: auto;
|
||||
top: 45px;
|
||||
right: 3px;
|
||||
width: 120px;
|
||||
border: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-this a {
|
||||
background-color: #009688;
|
||||
}
|
||||
|
||||
.layuimini-tab-loading {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: calc(100% - 37px);
|
||||
top: 37px;
|
||||
z-index: 19;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.layuimini-tab-loading.close {
|
||||
animation: close 1s;
|
||||
-webkit-animation: close 1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
/**左侧菜单栏 (通用) */
|
||||
.layui-side.layui-bg-black {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.layui-side.layui-bg-black > .layuimini-menu-left > ul {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.layui-side.layui-bg-black > .layuimini-menu-left > ul > .layui-nav-item:first-child {
|
||||
border-top: 1px solid #4b5461;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item > a {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-child .layui-nav-child {
|
||||
background: 0 0 !important
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-more {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
/**左侧菜单栏 (正常) */
|
||||
.layui-layout-body .layui-nav-itemed .layui-nav-child a, .layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child a {
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child .layui-nav-child a {
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child .layui-nav-child .layui-nav-child a {
|
||||
padding-left: 55px;
|
||||
}
|
||||
|
||||
.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child .layui-nav-child .layui-nav-child .layui-nav-child a {
|
||||
padding-left: 65px;
|
||||
}
|
||||
|
||||
.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-itemed > .layui-nav-child {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
/**内容主体（通用） */
|
||||
.layui-layout-admin .layui-body {
|
||||
overflow: hidden;
|
||||
bottom: 0px !important;
|
||||
top: 60px !important;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
/**选择配色方案 */
|
||||
.layuimini-color .color-title {
|
||||
padding: 10px 0 10px 20px;
|
||||
border-bottom: 1px solid #d9dada;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.layuimini-color .color-content {
|
||||
padding: 10px 5px 0 5px;
|
||||
}
|
||||
|
||||
.layuimini-color .color-content ul {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layuimini-color .color-content ul li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
margin: 0 15px 15px 0;
|
||||
padding: 2px 2px 4px 2px;
|
||||
background-color: #f2f2f2;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layuimini-color .color-content li.layui-this:after, .layuimini-color .color-content li:hover:after {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4px;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
border-color: #d8d8d8;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.layuimini-color .color-content li:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
height: 0;
|
||||
border: 1px solid #f2f2f2;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/**其它 */
|
||||
.layui-tabs-item {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.layui-nav-item.layui-this {
|
||||
background-color: #1b1d21;
|
||||
}
|
||||
|
||||
.layui-width-height {
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.layui-tab {
|
||||
margin: 0;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.layui-nav {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-side {
|
||||
top: 60px !important;
|
||||
}
|
||||
|
||||
.layui-tab-card {
|
||||
box-shadow: 0px 0px 0px #888888;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/**自定义滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
|
||||
|
||||
/*移动端遮罩层*/
|
||||
.layuimini-make {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-header {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
/**初始化加载层*/
|
||||
.layuimini-loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
.layuimini-loader .layuimini-loader-inner {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #1E9FFF;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
.layuimini-loader .layuimini-loader-inner:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #1E9FFF;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
|
||||
.layuimini-loader .layuimini-loader-inner:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #1E9FFF;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
/*系统设置*/
|
||||
|
||||
.layuimini-color .layui-word-aux {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.layuimini-color .layui-input-block {
|
||||
margin-left: 15px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-list {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-color .more-menu-item:first-child {
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-item .layui-icon {
|
||||
font-size: 18px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 16px;
|
||||
padding: 0 25px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
font-style: normal;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-item:after {
|
||||
color: #8c8c8c;
|
||||
right: 16px;
|
||||
content: "\e602";
|
||||
position: absolute;
|
||||
font-family: layui-icon !important;
|
||||
}
|
||||
|
||||
/**
|
||||
鼠标右键
|
||||
*/
|
||||
.layuimini-tab-mousedown {
|
||||
display: none;
|
||||
width: 80px;
|
||||
position: fixed;
|
||||
top: 55px !important;
|
||||
left: 0 !important;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.layuimini-tab-mousedown dd a {
|
||||
padding: 0 15px;
|
||||
color: #484545;
|
||||
}
|
||||
|
||||
.layuimini-tab-make {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: rgb(255, 255, 255, 0);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
菜单缩放
|
||||
*/
|
||||
.popup-tips .layui-layer-TipsG {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup-tips.layui-layer-tips .layui-layer-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.popup-tips .layui-nav-tree {
|
||||
width: 150px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/**左侧菜单字体间距*/
|
||||
.layuimini-menu-left .layui-nav-item a span {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/**头部菜单字体间距*/
|
||||
.layui-layout-admin .layui-header .layuimini-header-menu.layuimini-pc-show, .layui-layout-admin .layui-header .layuimini-header-menu.layuimini-mobile-show {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
||||
/**左侧菜单更多下拉样式*/
|
||||
.layuimini-menu-left .layui-nav-more, .layuimini-menu-left-zoom .layui-nav-more {
|
||||
font-family: layui-icon !important;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow: hidden;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
margin-top: -6px !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-child .layui-nav-more {
|
||||
margin-top: -6px !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-more:before, .layuimini-menu-left-zoom .layui-nav-more:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-itemed > a > .layui-nav-more, .layuimini-menu-left-zoom .layui-nav-itemed > a > .layui-nav-more {
|
||||
transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
width: 12px;
|
||||
text-align: center;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-itemed > a > .layui-nav-more:before, .layuimini-menu-left-zoom .layui-nav-itemed > a > .layui-nav-more:before {
|
||||
content: '\e61a';
|
||||
background-color: transparent;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**修复左侧菜单字体不对齐的问题*/
|
||||
.layuimini-menu-left .layui-nav-item a .fa, .layuimini-menu-left .layui-nav-item a .layui-icon {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
PC版样式
|
||||
*/
|
||||
@media screen and (min-width: 1025px) {
|
||||
/**头部样式（缩放） */
|
||||
.layuimini-mini .layui-layout-left.layuimini-header-menu.layuimini-pc-show {
|
||||
left: 155px !important;
|
||||
}
|
||||
|
||||
/**logo演示（缩放） */
|
||||
.layuimini-mini .layui-layout-admin .layuimini-logo {
|
||||
width: 60px !important;
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-layout-admin .layuimini-logo h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**左侧菜单栏（缩放） */
|
||||
.layuimini-mini .layuimini-menu-left {
|
||||
width: 80px !important;
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-side.layui-bg-black, .layuimini-mini .layuimini-menu-left > ul, .layuimini-mini .layuimini-menu-left > ul li i {
|
||||
width: 60px !important;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-menu-left > ul li span:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-menu-left > ul li span:last-child {
|
||||
float: right;
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-menu-left .layui-nav .layui-nav-item a {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
|
||||
/**内容主体（缩放） */
|
||||
.layuimini-mini .layui-layout-admin .layui-body {
|
||||
left: 60px !important;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-tool {
|
||||
left: 95px !important;
|
||||
}
|
||||
|
||||
.layuimini-pc-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-mobile-show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**菜单缩放*/
|
||||
.layuimini-mini .layuimini-menu-left .layui-nav-more, .layuimini-mini .layuimini-menu-left .layui-nav-child {
|
||||
display: none;
|
||||
!important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
手机自适应样式
|
||||
*/
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
/**
|
||||
todo 修复低版本IOS不能滑动问题, 但还是有问题, 低版本IOS部分情况下子页面无法自适应
|
||||
*/
|
||||
.layuimini-tab .layui-tabs-body .layui-tabs-item {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: scroll;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-body .layui-tabs-item iframe {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layuimini-pc-show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-mobile-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-header-content {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-body .layui-tabs-item.layui-show {
|
||||
border-top: 1px solid #e2e2e2;
|
||||
}
|
||||
|
||||
.layuimini-all .layui-layout-left.layuimini-header-menu {
|
||||
left: 15px !important
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-layout-left.layuimini-header-menu {
|
||||
left: 205px !important
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-nav.layui-layout-right > li:not(.layuimini-setting) {
|
||||
width: 40px !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-nav.layui-layout-right > li:not(.layuimini-setting) a {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.layuimini-all .layui-layout-admin .layui-body {
|
||||
left: 0px !important;
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-layout-admin .layuimini-menu-left, .layuimini-mini .layui-header .layuimini-logo {
|
||||
left: 0;
|
||||
transition: left .2s;
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
.layuimini-all .layui-layout-admin .layuimini-menu-left, .layuimini-all .layui-header .layuimini-logo {
|
||||
left: -200px;
|
||||
transition: left .2s;
|
||||
top: 0;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-layout-admin .layui-body {
|
||||
left: 0 !important;
|
||||
transition: left .2s;
|
||||
top: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-make {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-multi-module .layuimini-header-content .layuimini-tool {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-single-module .layuimini-header-content .layuimini-tool {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-site-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.layuimini-site-mobile {
|
||||
display: block !important;
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
bottom: 15px;
|
||||
left: 15px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layuimini-header-content {
|
||||
z-index: 997;
|
||||
}
|
||||
|
||||
/*修复UC之类的浏览器点击无效*/
|
||||
.layuimini-make {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layuimini-site-mobile {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
|
||||
/**头部右侧数据*/
|
||||
.layuimini-multi-module.layuimini-mini .layuimini-header-content .layui-layout-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
435
public/static/plugs/lay-module/layuimini/miniAdmin.js
Normal file
435
public/static/plugs/lay-module/layuimini/miniAdmin.js
Normal file
@ -0,0 +1,435 @@
|
||||
/**
|
||||
* date:2020/02/27
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini 主体框架扩展
|
||||
*/
|
||||
|
||||
|
||||
define(["jquery", "miniMenu", "miniTheme", "miniTab", "colorMode"], function ($, miniMenu, miniTheme, miniTab, colorMode) {
|
||||
|
||||
var $ = layui.$,
|
||||
layer = layui.layer,
|
||||
element = layui.element;
|
||||
|
||||
if (!/http(s*):\/\//.test(location.href)) {
|
||||
var tips = "请先将项目部署至web容器（Apache/Tomcat/Nginx/IIS/等），否则部分数据将无法显示";
|
||||
return layer.alert(tips);
|
||||
}
|
||||
|
||||
|
||||
var miniAdmin = {
|
||||
|
||||
/**
|
||||
* 后台框架初始化
|
||||
* @param options.iniUrl 后台初始化接口地址
|
||||
* @param options.clearUrl 后台清理缓存接口
|
||||
* @param options.urlHashLocation URL地址hash定位
|
||||
* @param options.bgColorDefault 默认皮肤
|
||||
* @param options.multiModule 是否开启多模块
|
||||
* @param options.menuChildOpen 是否展开子菜单
|
||||
* @param options.loadingTime 初始化加载时间
|
||||
* @param options.pageAnim iframe窗口动画
|
||||
* @param options.maxTabNum 最大的tab打开数量
|
||||
*/
|
||||
render: function (options) {
|
||||
options.iniUrl = options.iniUrl || null;
|
||||
options.clearUrl = options.clearUrl || null;
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.bgColorDefault = options.bgColorDefault || 0;
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.menuChildOpen = options.menuChildOpen || false;
|
||||
options.loadingTime = options.loadingTime || 1;
|
||||
options.pageAnim = options.pageAnim || false;
|
||||
options.maxTabNum = options.maxTabNum || 20;
|
||||
$.getJSON(options.iniUrl, function (data) {
|
||||
if (data == null) {
|
||||
miniAdmin.error('暂无菜单信息')
|
||||
} else {
|
||||
miniAdmin.renderLogo(data.logoInfo);
|
||||
miniAdmin.renderClear(options.clearUrl);
|
||||
miniAdmin.renderHome(data.homeInfo);
|
||||
miniAdmin.renderAnim(options.pageAnim);
|
||||
miniAdmin.listen();
|
||||
miniMenu.render({
|
||||
menuList: data.menuInfo,
|
||||
multiModule: options.multiModule,
|
||||
menuChildOpen: options.menuChildOpen
|
||||
});
|
||||
miniTab.render({
|
||||
filter: 'layuiminiTab',
|
||||
urlHashLocation: options.urlHashLocation,
|
||||
multiModule: options.multiModule,
|
||||
menuChildOpen: options.menuChildOpen,
|
||||
maxTabNum: options.maxTabNum,
|
||||
menuList: data.menuInfo,
|
||||
homeInfo: data.homeInfo,
|
||||
listenSwichCallback: function () {
|
||||
miniAdmin.renderDevice();
|
||||
}
|
||||
});
|
||||
miniTheme.render({
|
||||
bgColorDefault: options.bgColorDefault,
|
||||
listen: true,
|
||||
});
|
||||
miniAdmin.deleteLoader(options.loadingTime);
|
||||
}
|
||||
}).fail(function () {
|
||||
miniAdmin.error('菜单接口有误');
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化logo
|
||||
* @param data
|
||||
*/
|
||||
renderLogo: function (data) {
|
||||
var html = '<a href="' + data.href + '"><img src="' + data.image + '" alt="logo"><h1>' + data.title + '</h1></a>';
|
||||
$('.layuimini-logo').html(html);
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化首页
|
||||
* @param data
|
||||
*/
|
||||
renderHome: function (data) {
|
||||
sessionStorage.setItem('layuiminiHomeHref', data.href);
|
||||
$('#layuiminiHomeTabId').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
|
||||
$('#layuiminiHomeTabId').attr('lay-id', data.href);
|
||||
$('#layuiminiHomeTabIframe').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.href + '"></iframe>');
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化缓存地址
|
||||
* @param clearUrl
|
||||
*/
|
||||
renderClear: function (clearUrl) {
|
||||
$('.layuimini-clear').attr('data-href', clearUrl);
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化iframe窗口动画
|
||||
* @param anim
|
||||
*/
|
||||
renderAnim: function (anim) {
|
||||
if (anim) {
|
||||
$('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
|
||||
'.layui-tab-item.layui-show {animation:moveTop 1s;-webkit-animation:moveTop 1s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}\n' +
|
||||
'@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}' +
|
||||
'</style>');
|
||||
}
|
||||
},
|
||||
|
||||
fullScreen: function () {
|
||||
var el = document.documentElement;
|
||||
var rfs = el.requestFullScreen || el.webkitRequestFullScreen;
|
||||
if (typeof rfs != "undefined" && rfs) {
|
||||
rfs.call(el);
|
||||
} else if (typeof window.ActiveXObject != "undefined") {
|
||||
var wscript = new ActiveXObject("WScript.Shell");
|
||||
if (wscript != null) {
|
||||
wscript.SendKeys("{F11}");
|
||||
}
|
||||
} else if (el.msRequestFullscreen) {
|
||||
el.msRequestFullscreen();
|
||||
} else if (el.oRequestFullscreen) {
|
||||
el.oRequestFullscreen();
|
||||
} else if (el.webkitRequestFullscreen) {
|
||||
el.webkitRequestFullscreen();
|
||||
} else if (el.mozRequestFullScreen) {
|
||||
el.mozRequestFullScreen();
|
||||
} else {
|
||||
miniAdmin.error('浏览器不支持全屏调用！');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 退出全屏
|
||||
*/
|
||||
exitFullScreen: function () {
|
||||
var el = document;
|
||||
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
|
||||
if (typeof cfs != "undefined" && cfs) {
|
||||
cfs.call(el);
|
||||
} else if (typeof window.ActiveXObject != "undefined") {
|
||||
var wscript = new ActiveXObject("WScript.Shell");
|
||||
if (wscript != null) {
|
||||
wscript.SendKeys("{F11}");
|
||||
}
|
||||
} else if (el.msExitFullscreen) {
|
||||
el.msExitFullscreen();
|
||||
} else if (el.oRequestFullscreen) {
|
||||
el.oCancelFullScreen();
|
||||
} else if (el.mozCancelFullScreen) {
|
||||
el.mozCancelFullScreen();
|
||||
} else if (el.webkitCancelFullScreen) {
|
||||
el.webkitCancelFullScreen();
|
||||
} else {
|
||||
miniAdmin.error('浏览器不支持全屏调用！');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化设备端
|
||||
*/
|
||||
renderDevice: function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
$('.layuimini-tool i').attr('data-side-fold', 1);
|
||||
$('.layuimini-tool i').attr('class', 'fa fa-outdent');
|
||||
$('.layui-layout-body').removeClass('layuimini-mini');
|
||||
$('.layui-layout-body').addClass('layuimini-all');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 初始化加载时间
|
||||
* @param loadingTime
|
||||
*/
|
||||
deleteLoader: function (loadingTime) {
|
||||
$('.layuimini-loader').fadeOut();
|
||||
},
|
||||
|
||||
/**
|
||||
* 成功
|
||||
* @param title
|
||||
* @returns {*}
|
||||
*/
|
||||
success: function (title) {
|
||||
return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
|
||||
},
|
||||
|
||||
/**
|
||||
* 失败
|
||||
* @param title
|
||||
* @returns {*}
|
||||
*/
|
||||
error: function (title) {
|
||||
return layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断是否为手机
|
||||
* @returns {boolean}
|
||||
*/
|
||||
checkMobile: function () {
|
||||
var ua = navigator.userAgent.toLocaleLowerCase();
|
||||
var pf = navigator.platform.toLocaleLowerCase();
|
||||
var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
|
||||
|| (/ucweb.*linux/i.test(ua));
|
||||
var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
|
||||
var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
|
||||
var clientWidth = document.documentElement.clientWidth;
|
||||
if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
*/
|
||||
listen: function () {
|
||||
|
||||
layui.form.on('switch(header-theme-mode)', function (data) {
|
||||
let checked = data.elem.checked;
|
||||
let mode = checked ? 'dark' : 'light';
|
||||
changeTheme(mode);
|
||||
});
|
||||
|
||||
/**
|
||||
* 浅色和暗色主题切换
|
||||
*/
|
||||
const theme = colorMode.init({
|
||||
onChanged(mode, defaultHandler) {
|
||||
const isAppearanceTransition =
|
||||
document.startViewTransition && !window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
|
||||
const isDark = mode === 'dark';
|
||||
//跟随windows系统主题色的变化而变化，但没法保存选择的元素风格
|
||||
// var darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
// var preferredDark = darkThemeMediaQuery.matches;
|
||||
// var currMode = preferredDark ? 'dark' : 'light';
|
||||
// changeTheme(currMode);
|
||||
$('#change-theme').attr('class', `layui-icon layui-icon-${isDark ? 'moon' : 'light'}`);
|
||||
|
||||
if (!isAppearanceTransition) {
|
||||
defaultHandler();
|
||||
} else {
|
||||
rippleViewTransition(isDark, function () {
|
||||
// 动画需要
|
||||
document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
|
||||
defaultHandler();
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
//切换特效
|
||||
function rippleViewTransition(isDark, callback) {
|
||||
// 移植自 https://github.com/vuejs/vitepress/pull/2347
|
||||
// 支持 Chrome 111+
|
||||
const x = event.clientX;
|
||||
const y = event.clientY;
|
||||
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
|
||||
const transition = document.startViewTransition(function () {
|
||||
callback && callback();
|
||||
});
|
||||
transition.ready.then(function () {
|
||||
var clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: isDark ? clipPath : [...clipPath].reverse(),
|
||||
},
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'ease-in',
|
||||
pseudoElement: isDark ? '::view-transition-new(root)' : '::view-transition-old(root)',
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
//改变主题
|
||||
function changeTheme(mode) {
|
||||
switch (mode) {
|
||||
case 'dark':
|
||||
localStorage.setItem('layuiminiBgColorId', '1');
|
||||
localStorage.setItem('layuiminiElemStyleName', 'dark');
|
||||
changeBgColor(1);
|
||||
break;
|
||||
case 'light':
|
||||
localStorage.setItem('layuiminiBgColorId', '0');
|
||||
localStorage.setItem('layuiminiElemStyleName', 'normal');
|
||||
changeBgColor(0);
|
||||
break
|
||||
}
|
||||
window.onInitElemStyle()
|
||||
}
|
||||
|
||||
//改变配色
|
||||
function changeBgColor(id) {
|
||||
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
|
||||
$(this).attr('class', 'layui-this');
|
||||
localStorage.setItem('layuiminiBgColorId', id);
|
||||
miniTheme.render({
|
||||
bgColorDefault: id,
|
||||
listen: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理
|
||||
*/
|
||||
$('body').on('click', '[data-clear]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
sessionStorage.clear();
|
||||
|
||||
// 判断是否清理服务端
|
||||
var clearUrl = $(this).attr('data-href');
|
||||
if (clearUrl != undefined && clearUrl != '' && clearUrl != null) {
|
||||
$.getJSON(clearUrl, function (data, status) {
|
||||
layer.close(loading);
|
||||
if (data.code != 1) {
|
||||
return miniAdmin.error(data.msg);
|
||||
} else {
|
||||
return miniAdmin.success(data.msg);
|
||||
}
|
||||
}).fail(function () {
|
||||
layer.close(loading);
|
||||
return miniAdmin.error('清理缓存接口有误');
|
||||
});
|
||||
} else {
|
||||
layer.close(loading);
|
||||
return miniAdmin.success('清除缓存成功');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 刷新
|
||||
*/
|
||||
$('body').on('click', '[data-refresh]', function () {
|
||||
$(".layui-tabs-item.layui-show").find("iframe")[0].contentWindow.location.reload();
|
||||
miniAdmin.success('刷新成功');
|
||||
});
|
||||
|
||||
/**
|
||||
* 监听提示信息
|
||||
*/
|
||||
$("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
return false;
|
||||
}
|
||||
var classInfo = $(this).attr('class'),
|
||||
tips = $(this).prop("innerHTML"),
|
||||
isShow = $('.layuimini-tool i').attr('data-side-fold');
|
||||
if (isShow == 0 && tips) {
|
||||
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>" + tips + "</li></ul>";
|
||||
window.openTips = layer.tips(tips, $(this), {
|
||||
tips: [2, '#2f4056'],
|
||||
time: 300000,
|
||||
skin: "popup-tips",
|
||||
success: function (el) {
|
||||
var left = $(el).position().left - 10;
|
||||
$(el).css({left: left});
|
||||
element.render();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("body").on("mouseleave", ".popup-tips", function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
return false;
|
||||
}
|
||||
var isShow = $('.layuimini-tool i').attr('data-side-fold');
|
||||
if (isShow == 0) {
|
||||
try {
|
||||
layer.close(window.openTips);
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 全屏
|
||||
*/
|
||||
$('body').on('click', '[data-check-screen]', function () {
|
||||
var check = $(this).attr('data-check-screen');
|
||||
if (check == 'full') {
|
||||
miniAdmin.fullScreen();
|
||||
$(this).attr('data-check-screen', 'exit');
|
||||
$(this).html('<i class="fa fa-compress"></i>');
|
||||
} else {
|
||||
miniAdmin.exitFullScreen();
|
||||
$(this).attr('data-check-screen', 'full');
|
||||
$(this).html('<i class="fa fa-arrows-alt"></i>');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 点击遮罩层
|
||||
*/
|
||||
$('body').on('click', '.layuimini-make', function () {
|
||||
miniAdmin.renderDevice();
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return miniAdmin;
|
||||
});
|
||||
257
public/static/plugs/lay-module/layuimini/miniMenu.js
Normal file
257
public/static/plugs/lay-module/layuimini/miniMenu.js
Normal file
@ -0,0 +1,257 @@
|
||||
/**
|
||||
* date:2020/02/27
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini 菜单框架扩展
|
||||
*/
|
||||
define(["jquery"], function ($) {
|
||||
var element = layui.element,
|
||||
$ = layui.$,
|
||||
laytpl = layui.laytpl,
|
||||
layer = layui.layer;
|
||||
|
||||
var miniMenu = {
|
||||
|
||||
/**
|
||||
* 菜单初始化
|
||||
* @param options.menuList 菜单数据信息
|
||||
* @param options.multiModule 是否开启多模块
|
||||
* @param options.menuChildOpen 是否展开子菜单
|
||||
*/
|
||||
render: function (options) {
|
||||
options.menuList = options.menuList || [];
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.menuChildOpen = options.menuChildOpen || false;
|
||||
if (options.multiModule) {
|
||||
miniMenu.renderMultiModule(options.menuList, options.menuChildOpen);
|
||||
} else {
|
||||
miniMenu.renderSingleModule(options.menuList, options.menuChildOpen);
|
||||
}
|
||||
miniMenu.listen();
|
||||
},
|
||||
|
||||
/**
|
||||
* 单模块
|
||||
* @param menuList 菜单数据
|
||||
* @param menuChildOpen 是否默认展开
|
||||
*/
|
||||
renderSingleModule: function (menuList, menuChildOpen) {
|
||||
menuList = menuList || [];
|
||||
var leftMenuHtml = '',
|
||||
childOpenClass = '',
|
||||
leftMenuCheckDefault = 'layui-this';
|
||||
var me = this ;
|
||||
if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
|
||||
leftMenuHtml = this.renderLeftMenu(menuList,{ childOpenClass:childOpenClass }) ;
|
||||
$('.layui-layout-body').addClass('layuimini-single-module'); //单模块标识
|
||||
$('.layuimini-header-menu').remove();
|
||||
$('.layuimini-menu-left').html(leftMenuHtml);
|
||||
|
||||
element.init();
|
||||
},
|
||||
|
||||
/**
|
||||
* 渲染一级菜单
|
||||
*/
|
||||
compileMenu: function(menu,isSub){
|
||||
var menuHtml = '<li {{#if( d.menu){ }} data-menu="{{- d.menu}}" {{#}}} class="layui-nav-item menu-li {{- d.childOpenClass}} {{- d.className}}" {{#if( d.id){ }} id="{{- d.id}}" {{#}}}> <a {{#if( d.href){ }} layuimini-href="{{- d.href}}" {{#}}} {{#if( d.target){ }} target="{{- d.target}}" {{#}}} href="javascript:;">{{#if( d.icon){ }} <i class="{{- d.icon}}"></i> {{#}}} <span class="layui-left-nav">{{- d.title}}</span></a> {{# if(d.children){}} {{- d.children}} {{#}}} </li>' ;
|
||||
if(isSub){
|
||||
menuHtml = '<dd class="menu-dd {{- d.childOpenClass}} {{ d.className }}"> <a href="javascript:;" {{#if( d.menu){ }} data-menu="{{- d.menu}}" {{#}}} {{#if( d.id){ }} id="{{- d.id}}" {{#}}} {{#if(( !d.child || !d.child.length ) && d.href){ }} layuimini-href="{{- d.href}}" {{#}}} {{#if( d.target){ }} target="{{- d.target}}" {{#}}}> {{#if( d.icon){ }} <i class="{{- d.icon}}"></i> {{#}}} <span class="layui-left-nav"> {{- d.title}}</span></a> {{# if(d.children){}} {{- d.children}} {{#}}}</dd>'
|
||||
}
|
||||
return laytpl(menuHtml).render(menu);
|
||||
},
|
||||
compileMenuContainer :function(menu,isSub){
|
||||
var wrapperHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav-tree {{- d.className}}" id="{{- d.id}}">{{- d.children}}</ul>' ;
|
||||
if(isSub){
|
||||
wrapperHtml = '<dl class="layui-nav-child ">{{- d.children}}</dl>' ;
|
||||
}
|
||||
if(!menu.children){
|
||||
return "";
|
||||
}
|
||||
return laytpl(wrapperHtml).render(menu);
|
||||
},
|
||||
|
||||
each:function(list,callback){
|
||||
var _list = [];
|
||||
for(var i = 0 ,length = list.length ; i<length ;i++ ){
|
||||
_list[i] = callback(i,list[i]) ;
|
||||
}
|
||||
return _list ;
|
||||
},
|
||||
renderChildrenMenu:function(menuList,options){
|
||||
var me = this ;
|
||||
menuList = menuList || [] ;
|
||||
var html = this.each(menuList,function (idx,menu) {
|
||||
if(menu.child && menu.child.length){
|
||||
menu.children = me.renderChildrenMenu(menu.child,{ childOpenClass: options.childOpenClass || '' });
|
||||
}
|
||||
menu.className = "" ;
|
||||
menu.childOpenClass = options.childOpenClass || ''
|
||||
return me.compileMenu(menu,true)
|
||||
}).join("");
|
||||
return me.compileMenuContainer({ children:html },true)
|
||||
},
|
||||
renderLeftMenu :function(leftMenus,options){
|
||||
options = options || {};
|
||||
var me = this ;
|
||||
let _i = 0
|
||||
// 左侧菜单遍历
|
||||
var leftMenusHtml = me.each(leftMenus || [],function (idx,leftMenu) {
|
||||
$(leftMenu).each(function (index, child) {
|
||||
options.childOpenClass = ''
|
||||
if (child.child && child.child.length && _i === 0) options.childOpenClass = ' layui-nav-itemed'
|
||||
_i++
|
||||
})
|
||||
var children = me.renderChildrenMenu(leftMenu.child, { childOpenClass:options.childOpenClass });
|
||||
var leftMenuHtml = me.compileMenu({
|
||||
href:leftMenu.href,
|
||||
target:leftMenu.target,
|
||||
childOpenClass:options.childOpenClass,
|
||||
icon:leftMenu.icon,
|
||||
title:leftMenu.title,
|
||||
children:children,
|
||||
className: '',
|
||||
});
|
||||
return leftMenuHtml ;
|
||||
}).join("");
|
||||
|
||||
leftMenusHtml = me.compileMenuContainer({ id:options.parentMenuId,className:options.leftMenuCheckDefault,children:leftMenusHtml }) ;
|
||||
return leftMenusHtml ;
|
||||
},
|
||||
/**
|
||||
* 多模块
|
||||
* @param menuList 菜单数据
|
||||
* @param menuChildOpen 是否默认展开
|
||||
*/
|
||||
renderMultiModule: function (menuList, menuChildOpen) {
|
||||
menuList = menuList || [];
|
||||
var me = this ;
|
||||
var headerMenuHtml = '',
|
||||
headerMobileMenuHtml = '',
|
||||
leftMenuHtml = '',
|
||||
leftMenuCheckDefault = 'layui-this',
|
||||
childOpenClass = '',
|
||||
headerMenuCheckDefault = 'layui-this';
|
||||
|
||||
if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
|
||||
var headerMenuHtml = this.each(menuList, function (index, val) { //顶部菜单渲染
|
||||
var menu = 'multi_module_' + index ;
|
||||
var id = menu+"HeaderId";
|
||||
var topMenuItemHtml = "" ;
|
||||
topMenuItemHtml = me.compileMenu({
|
||||
className:headerMenuCheckDefault,
|
||||
menu:menu,
|
||||
id:id,
|
||||
title:val.title,
|
||||
href:"",
|
||||
target:"",
|
||||
children:""
|
||||
});
|
||||
leftMenuHtml+=me.renderLeftMenu(val.child,{
|
||||
parentMenuId:menu,
|
||||
childOpenClass:childOpenClass,
|
||||
leftMenuCheckDefault:leftMenuCheckDefault
|
||||
});
|
||||
headerMobileMenuHtml +=me.compileMenu({ id:id,menu:menu,id:id,icon:val.icon, title:val.title, },true);
|
||||
headerMenuCheckDefault = "";
|
||||
leftMenuCheckDefault = "layui-hide" ;
|
||||
return topMenuItemHtml ;
|
||||
}).join("");
|
||||
$('.layui-layout-body').addClass('layuimini-multi-module'); //多模块标识
|
||||
$('.layuimini-menu-header-pc').html(headerMenuHtml); //电脑
|
||||
$('.layuimini-menu-left').html(leftMenuHtml);
|
||||
$('.layuimini-menu-header-mobile').html(headerMobileMenuHtml); //手机
|
||||
element.init();
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
*/
|
||||
listen: function () {
|
||||
|
||||
/**
|
||||
* 菜单模块切换
|
||||
*/
|
||||
$('body').on('click', '[data-menu]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var menuId = $(this).attr('data-menu');
|
||||
// header
|
||||
$(".layuimini-header-menu .layui-nav-item.layui-this").removeClass('layui-this');
|
||||
$(this).addClass('layui-this');
|
||||
// left
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this").addClass('layui-hide');
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this.layui-hide").removeClass('layui-this');
|
||||
$("#" + menuId).removeClass('layui-hide');
|
||||
$("#" + menuId).addClass('layui-this');
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 菜单缩放
|
||||
*/
|
||||
$('body').on('click', '.layuimini-site-mobile', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
|
||||
if (isShow == 1) { // 缩放
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent');
|
||||
$('.layui-layout-body').removeClass('layuimini-all');
|
||||
$('.layui-layout-body').addClass('layuimini-mini');
|
||||
} else { // 正常
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent');
|
||||
$('.layui-layout-body').removeClass('layuimini-mini');
|
||||
$('.layui-layout-body').addClass('layuimini-all');
|
||||
layer.close(window.openTips);
|
||||
}
|
||||
element.init();
|
||||
layer.close(loading);
|
||||
});
|
||||
/**
|
||||
* 菜单缩放
|
||||
*/
|
||||
$('body').on('click', '[data-side-fold]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
|
||||
if (isShow == 1) { // 缩放
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent');
|
||||
$('.layui-layout-body').removeClass('layuimini-all');
|
||||
$('.layui-layout-body').addClass('layuimini-mini');
|
||||
// $(".menu-li").each(function (idx,el) {
|
||||
// $(el).addClass("hidden-sub-menu");
|
||||
// });
|
||||
|
||||
} else { // 正常
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent');
|
||||
$('.layui-layout-body').removeClass('layuimini-mini');
|
||||
$('.layui-layout-body').addClass('layuimini-all');
|
||||
// $(".menu-li").each(function (idx,el) {
|
||||
// $(el).removeClass("hidden-sub-menu");
|
||||
// });
|
||||
layer.close(window.openTips);
|
||||
}
|
||||
element.init();
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 手机端点开模块
|
||||
*/
|
||||
$('body').on('click', '.layuimini-header-menu.layuimini-mobile-show dd', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var check = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
|
||||
if(check === "1"){
|
||||
$('.layuimini-site-mobile').trigger("click");
|
||||
element.init();
|
||||
}
|
||||
layer.close(loading);
|
||||
});
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
|
||||
return miniMenu;
|
||||
});
|
||||
579
public/static/plugs/lay-module/layuimini/miniTab.js
Normal file
579
public/static/plugs/lay-module/layuimini/miniTab.js
Normal file
@ -0,0 +1,579 @@
|
||||
/**
|
||||
* date:2020/02/27
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini tab框架扩展
|
||||
*/
|
||||
define(["jquery"], function ($) {
|
||||
var element = layui.element,
|
||||
tabs = layui.tabs,
|
||||
$ = layui.$;
|
||||
|
||||
|
||||
var miniTab = {
|
||||
|
||||
/**
|
||||
* 初始化tab
|
||||
* @param options
|
||||
*/
|
||||
render: function (options) {
|
||||
options.filter = options.filter || null;
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.maxTabNum = options.maxTabNum || 20;
|
||||
options.menuList = options.menuList || []; // todo 后期菜单想改为不操作dom, 而是直接操作初始化传过来的数据
|
||||
options.homeInfo = options.homeInfo || {};
|
||||
options.listenSwichCallback = options.listenSwichCallback || function () {
|
||||
};
|
||||
miniTab.listen(options);
|
||||
miniTab.listenRoll();
|
||||
miniTab.listenSwitch(options);
|
||||
miniTab.listenHash(options);
|
||||
},
|
||||
|
||||
/**
|
||||
* 新建tab窗口
|
||||
* @param options.tabId
|
||||
* @param options.href
|
||||
* @param options.title
|
||||
* @param options.isIframe
|
||||
* @param options.maxTabNum
|
||||
*/
|
||||
create: function (options) {
|
||||
options.tabId = options.tabId || null;
|
||||
options.href = options.href || null;
|
||||
options.title = options.title || null;
|
||||
options.isIframe = options.isIframe || false;
|
||||
options.maxTabNum = options.maxTabNum || 20;
|
||||
if ($(".layuimini-tab .layui-tabs-header li").length >= options.maxTabNum) {
|
||||
layer.msg('Tab窗口已达到限定数量，请先关闭部分Tab');
|
||||
return false;
|
||||
}
|
||||
if (options.isIframe) tabs = parent.layui.tabs;
|
||||
tabs.add('layuiminiTab', {
|
||||
title: `<span class="layuimini-tab-active"></span><span>${options.title}</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>`
|
||||
, content: `<iframe width="100%" height="100%" frameborder="no" border="0" src="${options.href}" style="width: 100%; height:100%;"></iframe>`
|
||||
, id: options.tabId
|
||||
});
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'add');
|
||||
sessionStorage.setItem('layuiminimenu_' + options.tabId, options.title);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 切换选项卡
|
||||
* @param tabId
|
||||
*/
|
||||
change: function (tabId) {
|
||||
tabs.change('layuiminiTab', tabId);
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除tab窗口
|
||||
* @param tabId
|
||||
* @param isParent
|
||||
*/
|
||||
delete: function (tabId, isParent) {
|
||||
if (isParent === true) {
|
||||
parent.layui.tabs.close('layuiminiTab', tabId);
|
||||
} else {
|
||||
tabs.close('layuiminiTab', tabId);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 在iframe层打开新tab方法
|
||||
*/
|
||||
openNewTabByIframe: function (options) {
|
||||
options.href = options.href || null;
|
||||
options.title = options.title || null;
|
||||
var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});
|
||||
if (options.href === null || options.href === undefined) options.href = new Date().getTime();
|
||||
var checkTab = miniTab.check(options.href, true);
|
||||
if (!checkTab) {
|
||||
miniTab.create({
|
||||
tabId: options.href,
|
||||
href: options.href,
|
||||
title: options.title,
|
||||
isIframe: true,
|
||||
});
|
||||
}
|
||||
parent.layui.tabs.change('layuiminiTab', options.href);
|
||||
parent.layer.close(loading);
|
||||
},
|
||||
|
||||
/**
|
||||
* 在iframe层关闭当前tab方法
|
||||
*/
|
||||
deleteCurrentByIframe: function () {
|
||||
var ele = $(".layuimini-tab .layui-tabs-header li.layui-this", parent.document);
|
||||
if (ele.length > 0) {
|
||||
var layId = $(ele[0]).attr('lay-id');
|
||||
miniTab.delete(layId, true);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断tab窗口
|
||||
*/
|
||||
check: function (tabId, isIframe) {
|
||||
// 判断选项卡上是否有
|
||||
var checkTab = false;
|
||||
if (isIframe === undefined || isIframe === false) {
|
||||
$(".layui-tabs-header li").each(function () {
|
||||
var checkTabId = $(this).attr('lay-id');
|
||||
if (checkTabId != null && checkTabId === tabId) {
|
||||
checkTab = true;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
parent.layui.$(".layui-tabs-header li").each(function () {
|
||||
var checkTabId = $(this).attr('lay-id');
|
||||
if (checkTabId != null && checkTabId === tabId) {
|
||||
checkTab = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
return checkTab;
|
||||
},
|
||||
|
||||
/**
|
||||
* 开启tab右键菜单
|
||||
* @param tabId
|
||||
* @param left
|
||||
*/
|
||||
openTabRignMenu: function (tabId, left) {
|
||||
miniTab.closeTabRignMenu();
|
||||
var menuHtml = '<div class="layui-unselect layui-form-select layui-form-selected layuimini-tab-mousedown layui-show" data-tab-id="' + tabId + '" style="left: ' + left + 'px!important">\n' +
|
||||
'<dl>\n' +
|
||||
'<dd><a href="javascript:;" layuimini-tab-menu-close="current">关 闭 当 前</a></dd>\n' +
|
||||
'<dd><a href="javascript:;" layuimini-tab-menu-close="other">关 闭 其 他</a></dd>\n' +
|
||||
'<dd><a href="javascript:;" layuimini-tab-menu-close="all">关 闭 全 部</a></dd>\n' +
|
||||
'</dl>\n' +
|
||||
'</div>';
|
||||
var makeHtml = '<div class="layuimini-tab-make"></div>';
|
||||
$('.layuimini-tab .layui-tabs-header').after(menuHtml);
|
||||
$('.layuimini-tab .layui-tab-content').after(makeHtml);
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭tab右键菜单
|
||||
*/
|
||||
closeTabRignMenu: function () {
|
||||
$('.layuimini-tab-mousedown').remove();
|
||||
$('.layuimini-tab-make').remove();
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询菜单信息
|
||||
* @param href
|
||||
* @param menuList
|
||||
*/
|
||||
searchMenu: function (href, menuList) {
|
||||
var menu;
|
||||
for (key in menuList) {
|
||||
var item = menuList[key];
|
||||
if (item.href === href) {
|
||||
menu = item;
|
||||
break;
|
||||
}
|
||||
if (item.child) {
|
||||
newMenu = miniTab.searchMenu(href, item.child);
|
||||
if (newMenu) {
|
||||
menu = newMenu;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return menu;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
* @param options
|
||||
*/
|
||||
listen: function (options) {
|
||||
options = options || {};
|
||||
options.maxTabNum = options.maxTabNum || 20;
|
||||
|
||||
/**
|
||||
* 打开新窗口
|
||||
*/
|
||||
$('body').on('click', '[layuimini-href]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var tabId = $(this).attr('layuimini-href'),
|
||||
href = $(this).attr('layuimini-href'),
|
||||
title = $(this).text(),
|
||||
target = $(this).attr('target');
|
||||
|
||||
var el = $("[layuimini-href='" + href + "']", ".layuimini-menu-left");
|
||||
layer.close(window.openTips);
|
||||
if (el.length) {
|
||||
$(el).closest(".layui-nav-tree").find(".layui-this").removeClass("layui-this");
|
||||
$(el).parent().addClass("layui-this");
|
||||
}
|
||||
|
||||
if (target === '_blank') {
|
||||
layer.close(loading);
|
||||
window.open(href, "_blank");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (tabId === null || tabId === undefined) tabId = new Date().getTime();
|
||||
var checkTab = miniTab.check(tabId);
|
||||
if (!checkTab) {
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: href,
|
||||
title: title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
}
|
||||
tabs.change('layuiminiTab', tabId);
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 在iframe子菜单上打开新窗口
|
||||
*/
|
||||
$('body').on('click', '[layuimini-content-href]', function () {
|
||||
var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var tabId = $(this).attr('layuimini-content-href'),
|
||||
href = $(this).attr('layuimini-content-href'),
|
||||
title = $(this).attr('data-title'),
|
||||
target = $(this).attr('target');
|
||||
if (target === '_blank') {
|
||||
parent.layer.close(loading);
|
||||
window.open(href, "_blank");
|
||||
return false;
|
||||
}
|
||||
if (tabId === null || tabId === undefined) tabId = new Date().getTime();
|
||||
var checkTab = miniTab.check(tabId, true);
|
||||
if (!checkTab) {
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: href,
|
||||
title: title,
|
||||
isIframe: true,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
}
|
||||
parent.layui.tabs.change('layuiminiTab', tabId);
|
||||
parent.layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭选项卡
|
||||
**/
|
||||
$('body').on('click', '.layuimini-tab .layui-tabs-header .layui-tab-close', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var $parent = $(this).parent();
|
||||
var tabId = $parent.attr('lay-id');
|
||||
if (tabId !== undefined || tabId !== null) {
|
||||
miniTab.delete(tabId);
|
||||
}
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 选项卡操作
|
||||
*/
|
||||
$('body').on('click', '[layuimini-tab-close]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var closeType = $(this).attr('layuimini-tab-close');
|
||||
$(".layuimini-tab .layui-tabs-header li").each(function () {
|
||||
var tabId = $(this).attr('lay-id');
|
||||
var id = $(this).attr('id');
|
||||
var isCurrent = $(this).hasClass('layui-this');
|
||||
if (id !== 'layuiminiHomeTabId') {
|
||||
if (closeType === 'all') {
|
||||
miniTab.delete(tabId);
|
||||
} else {
|
||||
if (closeType === 'current' && isCurrent) {
|
||||
miniTab.delete(tabId);
|
||||
} else if (closeType === 'other' && !isCurrent) {
|
||||
miniTab.delete(tabId);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 禁用网页右键
|
||||
*/
|
||||
$(".layuimini-tab .layui-tabs-header").unbind("mousedown").bind("contextmenu", function (e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 注册鼠标右键
|
||||
*/
|
||||
$('body').on('mousedown', '.layuimini-tab .layui-tabs-header li', function (e) {
|
||||
var left = e.pageX ,
|
||||
tabId = $(this).attr('lay-id');
|
||||
if (e.which === 3) {
|
||||
e.preventDefault();
|
||||
miniTab.openTabRignMenu(tabId, left);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭tab右键菜单
|
||||
*/
|
||||
$('body').on('click', '.layui-body,.layui-header,.layuimini-menu-left,.layuimini-tab-make', function () {
|
||||
miniTab.closeTabRignMenu();
|
||||
});
|
||||
|
||||
/**
|
||||
* tab右键选项卡操作
|
||||
*/
|
||||
$('body').on('click', '[layuimini-tab-menu-close]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var closeType = $(this).attr('layuimini-tab-menu-close'),
|
||||
currentTabId = $('.layuimini-tab-mousedown').attr('data-tab-id');
|
||||
$(".layuimini-tab .layui-tabs-header li").each(function () {
|
||||
var tabId = $(this).attr('lay-id');
|
||||
var id = $(this).attr('id');
|
||||
if (id !== 'layuiminiHomeTabId') {
|
||||
if (closeType === 'all') {
|
||||
miniTab.delete(tabId);
|
||||
} else {
|
||||
if (closeType === 'current' && currentTabId === tabId) {
|
||||
miniTab.delete(tabId);
|
||||
} else if (closeType === 'other' && currentTabId !== tabId) {
|
||||
miniTab.delete(tabId);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
miniTab.closeTabRignMenu();
|
||||
layer.close(loading);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听tab切换
|
||||
* @param options
|
||||
*/
|
||||
listenSwitch: function (options) {
|
||||
options.filter = options.filter || null;
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.listenSwichCallback = options.listenSwichCallback || function () {
|
||||
|
||||
};
|
||||
tabs.on('afterChange(layuiminiTab)', function (data) {
|
||||
var tabId = $(this).attr('lay-id');
|
||||
if (options.urlHashLocation) {
|
||||
location.hash = tabId;
|
||||
}
|
||||
if (typeof options.listenSwichCallback === 'function') {
|
||||
options.listenSwichCallback();
|
||||
}
|
||||
// 判断是否为新增窗口
|
||||
if ($('.layuimini-menu-left').attr('layuimini-tab-tag') === 'add') {
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no')
|
||||
} else {
|
||||
$("[layuimini-href]").parent().removeClass('layui-this');
|
||||
if (options.multiModule) {
|
||||
miniTab.listenSwitchMultiModule(tabId);
|
||||
} else {
|
||||
miniTab.listenSwitchSingleModule(tabId);
|
||||
}
|
||||
}
|
||||
miniTab.rollPosition();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听hash变化
|
||||
* @param options
|
||||
* @returns {boolean}
|
||||
*/
|
||||
listenHash: function (options) {
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.maxTabNum = options.maxTabNum || 20;
|
||||
options.homeInfo = options.homeInfo || {};
|
||||
options.menuList = options.menuList || [];
|
||||
if (!options.urlHashLocation) return false;
|
||||
var tabId = location.hash.replace(/^#/, '');
|
||||
if (tabId === null || tabId === undefined || tabId === '') return false;
|
||||
|
||||
// 判断是否为首页
|
||||
if (tabId === options.homeInfo.href) return false;
|
||||
|
||||
// 判断是否为右侧菜单
|
||||
var menu = miniTab.searchMenu(tabId, options.menuList);
|
||||
if (menu !== undefined) {
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: tabId,
|
||||
title: menu.title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
|
||||
tabs.change('layuiminiTab', tabId);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 判断是否为快捷菜单
|
||||
var isSearchMenu = false;
|
||||
$("[layuimini-content-href]").each(function () {
|
||||
if ($(this).attr("layuimini-content-href") === tabId) {
|
||||
var title = $(this).attr("data-title");
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: tabId,
|
||||
title: title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
|
||||
tabs.change('layuiminiTab', tabId);
|
||||
isSearchMenu = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (isSearchMenu) return false;
|
||||
|
||||
// 既不是右侧菜单、快捷菜单,就直接打开
|
||||
var title = sessionStorage.getItem('layuiminimenu_' + tabId) === null ? tabId : sessionStorage.getItem('layuiminimenu_' + tabId);
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: tabId,
|
||||
title: title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
tabs.change('layuiminiTab', tabId);
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听滚动
|
||||
*/
|
||||
listenRoll: function () {
|
||||
$(".layuimini-tab-roll-left").click(function () {
|
||||
miniTab.rollClick("left");
|
||||
});
|
||||
$(".layuimini-tab-roll-right").click(function () {
|
||||
miniTab.rollClick("right");
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 单模块切换
|
||||
* @param tabId
|
||||
*/
|
||||
listenSwitchSingleModule: function (tabId) {
|
||||
$("[layuimini-href]").each(function () {
|
||||
if ($(this).attr("layuimini-href") === tabId) {
|
||||
// 自动展开菜单栏
|
||||
var addMenuClass = function ($element, type) {
|
||||
if (type === 1) {
|
||||
$element.addClass('layui-this');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
} else {
|
||||
$element.addClass('layui-nav-itemed');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
}
|
||||
};
|
||||
addMenuClass($(this).parent(), 1);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 多模块切换
|
||||
* @param tabId
|
||||
*/
|
||||
listenSwitchMultiModule: function (tabId) {
|
||||
$("[layuimini-href]").each(function () {
|
||||
if ($(this).attr("layuimini-href") === tabId) {
|
||||
|
||||
// 自动展开菜单栏
|
||||
var addMenuClass = function ($element, type) {
|
||||
if (type === 1) {
|
||||
$element.addClass('layui-this');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {
|
||||
var moduleId = $element.parent().attr('id');
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
$("#" + moduleId + "HeaderId").addClass("layui-this");
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');
|
||||
$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
} else {
|
||||
$element.addClass('layui-nav-itemed');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {
|
||||
var moduleId = $element.parent().attr('id');
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
$("#" + moduleId + "HeaderId").addClass("layui-this");
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');
|
||||
$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
}
|
||||
};
|
||||
addMenuClass($(this).parent(), 1);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 自动定位
|
||||
*/
|
||||
rollPosition: function () {
|
||||
var $tabTitle = $('.layuimini-tab .layui-tabs-header');
|
||||
var autoLeft = 0;
|
||||
$tabTitle.children("li").each(function () {
|
||||
if ($(this).hasClass('layui-this')) {
|
||||
return false;
|
||||
} else {
|
||||
autoLeft += $(this).outerWidth();
|
||||
}
|
||||
});
|
||||
$tabTitle.animate({
|
||||
scrollLeft: autoLeft - $tabTitle.width() / 3
|
||||
}, 200);
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击滚动
|
||||
* @param direction
|
||||
*/
|
||||
rollClick: function (direction) {
|
||||
var $tabTitle = $('.layuimini-tab .layui-tabs-header');
|
||||
var left = $tabTitle.scrollLeft();
|
||||
if ('left' === direction) {
|
||||
$tabTitle.animate({
|
||||
scrollLeft: left - 450
|
||||
}, 200);
|
||||
} else {
|
||||
$tabTitle.animate({
|
||||
scrollLeft: left + 450
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return miniTab;
|
||||
});
|
||||
600
public/static/plugs/lay-module/layuimini/miniTheme.js
Normal file
600
public/static/plugs/lay-module/layuimini/miniTheme.js
Normal file
@ -0,0 +1,600 @@
|
||||
/**
|
||||
* date:2020/02/28
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini tab框架扩展
|
||||
*/
|
||||
define(["jquery"], function ($) {
|
||||
var $ = layui.$,
|
||||
layer = layui.layer;
|
||||
|
||||
var miniTheme = {
|
||||
|
||||
/**
|
||||
* 主题配置项
|
||||
* @param bgcolorId
|
||||
* @returns {{headerLogo, menuLeftHover, headerRight, menuLeft, headerRightThis, menuLeftThis}|*|*[]}
|
||||
*/
|
||||
config: function (bgcolorId) {
|
||||
var bgColorConfig = [
|
||||
{
|
||||
headerRightBg: '#ffffff', //头部右侧背景色
|
||||
headerRightBgThis: '#e4e4e4', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(107, 107, 107, 0.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: 'rgba(107, 107, 107, 0.7)', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#565656', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(160, 160, 160, 0.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1E9FFF', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#565656', //头部缩放按钮样式,
|
||||
headerLogoBg: '#192027', //logo背景颜色,
|
||||
headerLogoColor: 'rgb(191, 187, 187)', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#28333E', //左侧菜单背景,
|
||||
leftMenuBgThis: '#1E9FFF', //左侧菜单选中背景,
|
||||
leftMenuChildBg: '#0c0f13', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#23262e', //头部右侧背景色
|
||||
headerRightBgThis: '#0c0c0c', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: 'rgba(255,255,255,.7)', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: 'rgba(255,255,255,.7)', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: 'rgba(255,255,255,.7)', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#23262e', //左侧菜单背景,
|
||||
leftMenuBgThis: '#484849', //左侧菜单选中背景,
|
||||
leftMenuChildBg: '#23262e', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgba(255,255,255,.9)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: 'rgba(255,255,255,.7)', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#23262e', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#ffa4d1', //头部右侧背景色
|
||||
headerRightBgThis: '#bf7b9d', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#ffa4d1', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#e694bd', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#737373', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#ffa4d1', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#1aa094', //头部右侧背景色
|
||||
headerRightBgThis: '#197971', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#23262e', //左侧菜单背景,
|
||||
leftMenuBgThis: '#1aa094', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#1aa094', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#1e9fff', //头部右侧背景色
|
||||
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1e9fff', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#1e9fff', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#ffb800', //头部右侧背景色
|
||||
headerRightBgThis: '#d09600', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#243346', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#8593a7', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#e82121', //头部右侧背景色
|
||||
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#e82121', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#963885', //头部右侧背景色
|
||||
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#243346', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#586473', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#963885', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#2D8CF0', //头部右侧背景色
|
||||
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#0069b7', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0069b7', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#2D8CF0', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#2d8cf0', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#ffb800', //头部右侧背景色
|
||||
headerRightBgThis: '#d09600', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#d09600', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#e82121', //头部右侧背景色
|
||||
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#d91f1f', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#e82121', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#963885', //头部右侧背景色
|
||||
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#772c6a', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#626f7f', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#963885', //tab选项卡选中颜色,
|
||||
}
|
||||
];
|
||||
if (bgcolorId === undefined) {
|
||||
return bgColorConfig;
|
||||
} else {
|
||||
return bgColorConfig[bgcolorId];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
* @param options
|
||||
*/
|
||||
render: function (options) {
|
||||
options.bgColorDefault = options.bgColorDefault || false;
|
||||
options.listen = options.listen || false;
|
||||
var bgcolorId = localStorage.getItem('layuiminiBgColorId');
|
||||
if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') {
|
||||
bgcolorId = options.bgColorDefault;
|
||||
}
|
||||
miniTheme.buildThemeCss(bgcolorId);
|
||||
if (options.listen) miniTheme.listen(options);
|
||||
},
|
||||
|
||||
renderElemStyle(elemStyleDefault) {
|
||||
elemStyleDefault = elemStyleDefault || 'light';
|
||||
let elemStyleName = localStorage.getItem('layuiminiElemStyleName');
|
||||
if (!elemStyleName) elemStyleName = elemStyleDefault;
|
||||
let themeModeEle = $('input[name=theme-mode]')
|
||||
if (themeModeEle.length > 0) {
|
||||
if (elemStyleName == 'dark') {
|
||||
themeModeEle.prop('checked', true);
|
||||
} else {
|
||||
themeModeEle.prop('checked', false);
|
||||
}
|
||||
layui.form.render('checkbox', 'header-theme-mode');
|
||||
}
|
||||
miniTheme.buildBodyElemStyle(elemStyleName);
|
||||
},
|
||||
|
||||
changeThemeMainColor() {
|
||||
let bgcolorId = localStorage.getItem('layuiminiBgColorId');
|
||||
if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') return false;
|
||||
let bgcolorData = miniTheme.config(bgcolorId);
|
||||
let mainColor = bgcolorData.headerRightBg
|
||||
if (bgcolorId == 0) mainColor = '#16b777';
|
||||
const bgColor = window.getComputedStyle(document.documentElement).getPropertyValue('--ea8-theme-main-color');
|
||||
document.documentElement.style.setProperty('--ea8-theme-main-color', mainColor);
|
||||
const iframes = document.getElementsByTagName('iframe');
|
||||
if (iframes.length === 0) return false;
|
||||
$.each(iframes, (i, iframe) => {
|
||||
if (iframe === '' || iframe === undefined) return false;
|
||||
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
|
||||
iframeDocument.documentElement.style.setProperty('--ea8-theme-main-color', mainColor);
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 构建主题样式
|
||||
* @param bgcolorId
|
||||
* @returns {boolean}
|
||||
*/
|
||||
buildThemeCss: function (bgcolorId) {
|
||||
if (!bgcolorId) {
|
||||
return false;
|
||||
}
|
||||
var bgcolorData = miniTheme.config(bgcolorId);
|
||||
var styleHtml = '/*头部右侧背景色 headerRightBg */\n' +
|
||||
'.layui-layout-admin .layui-header {\n' +
|
||||
' background-color: ' + bgcolorData.headerRightBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧选中背景色 headerRightBgThis */\n' +
|
||||
'.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {\n' +
|
||||
' background-color: ' + bgcolorData.headerRightBgThis + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧字体颜色 headerRightColor */\n' +
|
||||
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {\n' +
|
||||
' color: ' + bgcolorData.headerRightColor + ';\n' +
|
||||
'}\n' +
|
||||
'/**头部右侧下拉字体颜色 headerRightChildColor */\n' +
|
||||
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {\n' +
|
||||
' color: ' + bgcolorData.headerRightChildColor + '!important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧鼠标选中 headerRightColorThis */\n' +
|
||||
'.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {\n' +
|
||||
' color: ' + bgcolorData.headerRightColorThis + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
|
||||
'.layui-header .layui-nav .layui-nav-more {\n' +
|
||||
' border-top-color: ' + bgcolorData.headerRightNavMore + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
|
||||
'.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {\n' +
|
||||
' border-color: transparent transparent ' + bgcolorData.headerRightNavMore + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */\n' +
|
||||
'.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav-child dd.layui-this, .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {\n' +
|
||||
' background-color: ' + bgcolorData.headerRightNavMoreBg + ' !important;\n' +
|
||||
' color:' + bgcolorData.headerRightNavMoreColor + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部缩放按钮样式 headerRightToolColor */\n' +
|
||||
'.layui-layout-admin .layui-header .layuimini-tool i {\n' +
|
||||
' color: ' + bgcolorData.headerRightToolColor + ';\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*logo背景颜色 headerLogoBg */\n' +
|
||||
'.layui-layout-admin .layuimini-logo {\n' +
|
||||
' background-color: ' + bgcolorData.headerLogoBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*logo字体颜色 headerLogoColor */\n' +
|
||||
'.layui-layout-admin .layuimini-logo h1 {\n' +
|
||||
' color: ' + bgcolorData.headerLogoColor + ';\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-more,.layuimini-menu-left-zoom.layui-nav .layui-nav-more {\n' +
|
||||
' border-top-color: ' + bgcolorData.leftMenuNavMore + ';\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {\n' +
|
||||
' border-color: transparent transparent ' + bgcolorData.leftMenuNavMore + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单背景 leftMenuBg */\n' +
|
||||
'.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {\n' +
|
||||
' background-color: ' + bgcolorData.leftMenuBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单选中背景 leftMenuBgThis */\n' +
|
||||
'.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {\n' +
|
||||
' background-color: ' + bgcolorData.leftMenuBgThis + ' !important\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单子菜单背景 leftMenuChildBg */\n' +
|
||||
'.layuimini-menu-left .layui-nav-itemed > .layui-nav-child{\n' +
|
||||
' background-color: ' + bgcolorData.leftMenuChildBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单字体颜色 leftMenuColor */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {\n' +
|
||||
' color: ' + bgcolorData.leftMenuColor + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单选中字体颜色 leftMenuColorThis */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a {\n' +
|
||||
' color:' + bgcolorData.leftMenuColorThis + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/**tab选项卡选中颜色 tabActiveColor */\n' +
|
||||
'.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {\n' +
|
||||
' background-color: ' + bgcolorData.tabActiveColor + ';\n' +
|
||||
'}\n';
|
||||
$('#layuimini-bg-color').html(styleHtml);
|
||||
},
|
||||
configElemStyle() {
|
||||
var listElemStyle = [
|
||||
{
|
||||
title: '标准',
|
||||
className: 'normal'
|
||||
},
|
||||
{
|
||||
title: '原型',
|
||||
className: 'demo',
|
||||
defaultColorConfig: '12'
|
||||
},
|
||||
{
|
||||
title: '科幻',
|
||||
className: 'sicfi'
|
||||
},
|
||||
{
|
||||
title: 'GTK',
|
||||
className: 'gtk'
|
||||
},
|
||||
{
|
||||
title: '像素',
|
||||
className: 'nes',
|
||||
defaultColorConfig: '12'
|
||||
},
|
||||
{
|
||||
title: 'WIN7',
|
||||
className: 'win7',
|
||||
defaultColorConfig: '12'
|
||||
},
|
||||
{
|
||||
title: '拟物',
|
||||
className: 'neomorphic',
|
||||
|
||||
},
|
||||
{
|
||||
title: '暗黑',
|
||||
className: 'dark',
|
||||
defaultColorConfig: '1'
|
||||
|
||||
},
|
||||
]
|
||||
return listElemStyle;
|
||||
},
|
||||
buildBodyElemStyle(className) {
|
||||
|
||||
var listElemStyle = miniTheme.configElemStyle()
|
||||
|
||||
$.each(listElemStyle, function (index, item) {
|
||||
var classNameReal = 'elem-style-' + item.className;
|
||||
if ($('body').hasClass(classNameReal)) {
|
||||
$('body').removeClass(classNameReal);
|
||||
}
|
||||
})
|
||||
|
||||
$('body').addClass('elem-style-' + className)
|
||||
},
|
||||
buildElemStyleHtml(options) {
|
||||
var elemStyleName = localStorage.getItem('layuiminiElemStyleName');
|
||||
if (!elemStyleName) elemStyleName = options.elemStyleDefault;
|
||||
var listElemStyle = miniTheme.configElemStyle()
|
||||
var html = '';
|
||||
$.each(listElemStyle, function (key, val) {
|
||||
|
||||
if (typeof val.defaultColorConfig == 'undefined') {
|
||||
val.defaultColorConfig = '0'
|
||||
}
|
||||
|
||||
if (val.className === elemStyleName) {
|
||||
html += '<li class="layui-this style-item" data-select-style="' + val.className + '" data-default-color-config="' + val.defaultColorConfig + '">\n';
|
||||
} else {
|
||||
html += '<li id="' + val.className + '" class="style-item" data-select-style="' + val.className + '" data-default-color-config="' + val.defaultColorConfig + '">\n';
|
||||
}
|
||||
html +=
|
||||
val.title +
|
||||
|
||||
'</li>';
|
||||
});
|
||||
return html;
|
||||
},
|
||||
/**
|
||||
* 构建主题选择html
|
||||
* @param options
|
||||
* @returns {string}
|
||||
*/
|
||||
buildBgColorHtml: function (options) {
|
||||
options.bgColorDefault = options.bgColorDefault || 0;
|
||||
var bgcolorId = parseInt(localStorage.getItem('layuiminiBgColorId'));
|
||||
if (isNaN(bgcolorId)) bgcolorId = options.bgColorDefault;
|
||||
var bgColorConfig = miniTheme.config();
|
||||
var html = '';
|
||||
$.each(bgColorConfig, function (key, val) {
|
||||
if (key === bgcolorId) {
|
||||
html += '<li class="layui-this" data-select-bgcolor="' + key + '">\n';
|
||||
} else {
|
||||
html += '<li data-select-bgcolor="' + key + '">\n';
|
||||
}
|
||||
html += '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">\n' +
|
||||
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: ' + val.headerLogoBg + ';"></span><span style="display:block; width: 80%; float: left; height: 12px; background: ' + val.headerRightBg + ';"></span></div>\n' +
|
||||
'<div><span style="display:block; width: 20%; float: left; height: 40px; background: ' + val.leftMenuBg + ';"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #ffffff;"></span></div>\n' +
|
||||
'</a>\n' +
|
||||
'</li>';
|
||||
});
|
||||
return html;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
* @param options
|
||||
*/
|
||||
listen: function (options) {
|
||||
$('body').on('click', '[data-bgcolor]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var clientHeight = (document.documentElement.clientHeight) - 60;
|
||||
var bgColorHtml = miniTheme.buildBgColorHtml(options);
|
||||
var html = '<div class="layuimini-color">\n' +
|
||||
'<div class="color-title">\n' +
|
||||
'<span>配色方案</span>\n' +
|
||||
'</div>\n' +
|
||||
'<div class="color-content">\n' +
|
||||
'<ul>\n' + bgColorHtml + '</ul>\n' +
|
||||
'</div>\n' +
|
||||
'<div class="more-menu-list">\n' +
|
||||
'<a class="more-menu-item" href="https://gitee.com/wolf18/easyAdmin8" target="_blank"><i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> 开源地址</a>\n' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
closeBtn: 0,
|
||||
shade: 0.2,
|
||||
anim: 2,
|
||||
shadeClose: true,
|
||||
id: 'layuiminiBgColor',
|
||||
area: ['340px', clientHeight + 'px'],
|
||||
offset: 'rb',
|
||||
content: html,
|
||||
success: function (index, layero) {
|
||||
},
|
||||
end: function () {
|
||||
$('.layuimini-select-bgcolor').removeClass('layui-this');
|
||||
}
|
||||
});
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
$('body').on('click', '[data-select-bgcolor]', function () {
|
||||
var bgcolorId = $(this).attr('data-select-bgcolor');
|
||||
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
|
||||
$(this).attr('class', 'layui-this');
|
||||
localStorage.setItem('layuiminiBgColorId', bgcolorId);
|
||||
miniTheme.render({
|
||||
bgColorDefault: bgcolorId,
|
||||
listen: false,
|
||||
});
|
||||
miniTheme.changeThemeMainColor()
|
||||
});
|
||||
$('body').on('click', '[data-select-style]', function () {
|
||||
var elemStyleName = $(this).attr('data-select-style');
|
||||
|
||||
$(this).attr('class', 'layui-this').siblings().removeClass('layui-this');
|
||||
|
||||
var defaultColorConfig = $(this).attr('data-default-color-config');
|
||||
|
||||
if (defaultColorConfig && defaultColorConfig.length > 0) {
|
||||
localStorage.setItem('layuiminiBgColorId', defaultColorConfig);
|
||||
|
||||
}
|
||||
|
||||
localStorage.setItem('layuiminiElemStyleName', elemStyleName);
|
||||
miniTheme.render({
|
||||
listen: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return miniTheme;
|
||||
})
|
||||
;
|
||||
40
public/static/plugs/lay-module/layuimini/miniTongji.js
Normal file
40
public/static/plugs/lay-module/layuimini/miniTongji.js
Normal file
@ -0,0 +1,40 @@
|
||||
/**
|
||||
* date:2020/03/01
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini 统计框架扩展
|
||||
*/
|
||||
define(["jquery"], function ($) {
|
||||
var $ = layui.$;
|
||||
|
||||
var miniTongji = {
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
* @param options
|
||||
*/
|
||||
render: function (options) {
|
||||
options.specific = options.specific || false;
|
||||
options.domains = options.domains || [];
|
||||
var domain = window.location.hostname;
|
||||
if (options.specific === false || (options.specific === true && options.domains.indexOf(domain) >=0)) {
|
||||
miniTongji.listen();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听统计代码
|
||||
*/
|
||||
listen: function () {
|
||||
var _hmt = _hmt || [];
|
||||
(function () {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?d97abf6d61c21d773f97835defbdef4e";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
}
|
||||
};
|
||||
|
||||
return miniTongji;
|
||||
});
|
||||
98
public/static/plugs/lay-module/layuimini/themes/default.css
Normal file
98
public/static/plugs/lay-module/layuimini/themes/default.css
Normal file
@ -0,0 +1,98 @@
|
||||
/*头部右侧背景色 headerRightBg */
|
||||
.layui-layout-admin .layui-header {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/*头部右侧选中背景色 headerRightBgThis */
|
||||
.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
|
||||
background-color: #e4e4e4 !important;
|
||||
}
|
||||
|
||||
/*头部右侧字体颜色 headerRightColor */
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
|
||||
color: rgba(107, 107, 107, 0.7);
|
||||
}
|
||||
|
||||
/**头部右侧下拉字体颜色 headerRightChildColor */
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
|
||||
color: rgba(107, 107, 107, 0.7) !important;
|
||||
}
|
||||
|
||||
/*头部右侧鼠标选中 headerRightColorThis */
|
||||
.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
|
||||
color: #565656 !important;
|
||||
}
|
||||
|
||||
/*头部右侧更多下拉颜色 headerRightNavMore */
|
||||
.layui-header .layui-nav .layui-nav-more {
|
||||
border-top-color: rgba(160, 160, 160, 0.7) !important;
|
||||
}
|
||||
|
||||
/*头部右侧更多下拉颜色 headerRightNavMore */
|
||||
.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {
|
||||
border-color: transparent transparent rgba(160, 160, 160, 0.7) !important;
|
||||
}
|
||||
|
||||
/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */
|
||||
.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav-child dd.layui-this, .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
|
||||
background-color: #1E9FFF !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/*头部缩放按钮样式 headerRightToolColor */
|
||||
.layui-layout-admin .layui-header .layuimini-tool i {
|
||||
color: #565656;
|
||||
}
|
||||
|
||||
/*logo背景颜色 headerLogoBg */
|
||||
.layui-layout-admin .layuimini-logo {
|
||||
background-color: #192027 !important;
|
||||
}
|
||||
|
||||
/*logo字体颜色 headerLogoColor */
|
||||
.layui-layout-admin .layuimini-logo h1 {
|
||||
color: rgb(191, 187, 187);
|
||||
}
|
||||
|
||||
/*左侧菜单更多下拉样式 leftMenuNavMore */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-more {
|
||||
border-top-color: rgb(191, 187, 187);
|
||||
display: inline-block;
|
||||
margin: 0 auto !important;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/*左侧菜单更多下拉样式 leftMenuNavMore */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {
|
||||
border-color: transparent transparent rgb(191, 187, 187) !important;
|
||||
}
|
||||
|
||||
/*左侧菜单背景 leftMenuBg */
|
||||
.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {
|
||||
background-color: #28333E !important;
|
||||
}
|
||||
|
||||
/*左侧菜单选中背景 leftMenuBgThis */
|
||||
.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
|
||||
background-color: #1E9FFF !important
|
||||
}
|
||||
|
||||
/*左侧菜单子菜单背景 leftMenuChildBg */
|
||||
.layuimini-menu-left .layui-nav-itemed > .layui-nav-child {
|
||||
background-color: #0c0f13 !important;
|
||||
}
|
||||
|
||||
/*左侧菜单字体颜色 leftMenuColor */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
|
||||
color: rgb(191, 187, 187) !important;
|
||||
}
|
||||
|
||||
/*左侧菜单选中字体颜色 leftMenuColorThis */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/**tab选项卡选中颜色 tabActiveColor */
|
||||
.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
|
||||
background-color: #1e9fff;
|
||||
}
|
||||
Reference in New Issue
Block a user