更新zhengAdmin(增加选项卡关闭按钮)

This commit is contained in:
zhangshuzheng 2018-11-21 18:19:28 +08:00
parent e551cd9141
commit b0d1c1c9f8
6 changed files with 43 additions and 37 deletions

View File

@ -57,7 +57,7 @@ a, a:hover, a:active, a:focus {text-decoration: none; -webkit-user-drag: none;}
/* 侧边栏个人信息 */
.s-profile>a{display:block;height:129px;margin-bottom:5px;width:100%;background-size:100%;text-decoration:none}
.s-profile>a .sp-pic{padding:12px}
.s-profile>a .sp-pic>img{width:47px;height:47px;border-radius:50%;border:3px solid rgba(0,0,0,.14);box-sizing:content-box}
.s-profile>a .sp-pic>img{width:47px;height:47px;border-radius:50%;border:3px solid rgba(0,0,0,.14);box-sizing:content-box;background:#fff;}
.s-profile>a .sp-info{background:rgba(0,0,0,.37);padding:7px 14px;color:#fff;margin-top:20px;position:relative}
.s-profile>a .sp-info>i{font-size:19px;line-height:100%;position:absolute;right:15px;top:7px;-webkit-transition:all;-o-transition:all;transition:all;-webkit-transition-duration:.3s;transition-duration:.3s}
.s-profile.toggled .sp-info>i{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
@ -69,7 +69,7 @@ a, a:hover, a:active, a:focus {text-decoration: none; -webkit-user-drag: none;}
.main-menu{list-style:none;padding-left:0;margin:20px 0 0}
.main-menu a{-webkit-transition:color;-o-transition:color;transition:color;-webkit-transition-duration:.3s;transition-duration:.3s}
.main-menu>li>a{padding:14px 20px 14px 65px;display:block;font-weight:500;position:relative;color:#4C4C4C}
.main-menu>li>a>i{position:absolute;left:25px;font-size:18px;top:2px;width:25px;text-align:center;padding:13px 0}
.main-menu>li>a>i{position:absolute;left:25px;font-size:14px;top:2px;width:25px;text-align:center;padding:13px 0}
.sub-menu ul{list-style:none;display:none;padding:0}
.sub-menu ul>li:first-child>a{padding-top:14px}
.sub-menu ul>li:last-child>a{padding-bottom:16px}
@ -114,7 +114,7 @@ a, a:hover, a:active, a:focus {text-decoration: none; -webkit-user-drag: none;}
/* 选项卡 */
.content_tab{width:100%;height:48px;overflow:hidden;}
.content_tab>ul{padding:0;font-size:0;display:block;white-space:nowrap;-webkit-overflow-scrolling:touch;overflow-x:scroll;}
.content_tab>ul{padding:0;font-size:0;display:block;white-space:nowrap;-webkit-overflow-scrolling:touch;overflow-x:scroll;overflow-y:hidden;}
.scroll>ul{margin:0 40px;}
.scroll>.tab_left,.scroll>.tab_right{display:block;}
.tab_left,.tab_right{width:40px;height:48px;line-height:48px;color:#fff;text-align:center;display:none;}
@ -123,12 +123,12 @@ a, a:hover, a:active, a:focus {text-decoration: none; -webkit-user-drag: none;}
.tab_left>a,.tab_right>a{display:block;width:100%;color:rgba(255, 255, 255, 0.5);font-size:22px;}
.tab_left>.active,.tab_right>.active{color:#fff;}
.content_tab{position:relative;}
.content_tab>ul>li{display:inline-block; height: 48px; line-height: 48px; margin:0; font-size:14px;}
.content_tab>ul>li>a{display:block; height: 48px; line-height: 48px;color:rgba(255, 255, 255, 0.9);padding:0 28px;transition:background-color .35s cubic-bezier(.35,0,.25,1);border-bottom:none;position: relative;}
.content_tab>ul>li>a:active{background:rgba(255, 255, 255, 0.1);}
.content_tab>ul>.cur>a{/*border-bottom:3px solid #FFEB3B;*/color:#fff;}
.content_tab>ul>li>a:after{content:"";position:absolute;bottom:0;left:50%;right:50%;width:0;border-bottom:3px solid #FFEB3B;transition:all linear .2s}
.content_tab>ul>.cur>a:after{left:0;bottom:1px;width:100%;opacity:1;transition:all linear .2s}
.content_tab>ul>li{position:relative;display:inline-block; height: 48px; line-height: 48px; margin:0; font-size:14px;}
.content_tab>ul>li>span{display:inline-block; height: 48px; line-height: 48px;color:rgba(255, 255, 255, 0.9);;padding:0 28px;transition:background-color .35s cubic-bezier(.35,0,.25,1);border-bottom:none;position: relative;}
.content_tab>ul>li>i{position:absolute;right:0;top:33%;padding:2px 5px;border-radius:20px;color:#bbb;cursor:pointer;}
.content_tab>ul>li>i:hover{color:#fff;}
.content_tab>ul>li:after{content:"";position:absolute;bottom:0;left:50%;right:50%;width:0;border-bottom:3px solid #FFEB3B;transition:all linear .2s}
.content_tab>ul>.cur:after{left:0;bottom:1px;width:100%;opacity:1;transition:all linear .2s}
.content_main{height:calc(100% - 48px);-webkit-overflow-scrolling:touch;}
.content_main>.cur{display:block;}

View File

@ -3,7 +3,13 @@ img {vertical-align: middle;}
a, a:hover, a:active, a:focus {text-decoration: none; -webkit-user-drag: none; outline: none; color: #000;}
a i{font-size: 13px;}
#main{padding: 10px 20px;}
::-webkit-scrollbar{box-sizing:border-box;width:9px;height:9px}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)}
::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.2)}
#main{padding: 0 10px;}
.style-color{color:#fd521d;}
/* 数据表格 */
body{font-size: 12px;}

View File

@ -5,7 +5,7 @@ a i{font-size: 13px;}
body{background:#ECECEC;}
body:before{height:50%;width:100%;position:absolute;top:0;left:0;background:#29a176;content:"";z-index:0}
#login-window{position:relative;top:50%;left:50%;width:300px;height:200px;margin-left:-150px;margin-top:-100px;padding:35px 55px 35px 25px;z-index:10;background:#fff;box-shadow:0 1px 11px rgba(0,0,0,.27);border-radius:2px;}
#login-window{position:relative;top:50%;left:50%;width:500px;height:200px;margin-left:-250px;margin-top:-100px;padding:35px 55px 35px 25px;z-index:10;background:#fff;box-shadow:0 1px 11px rgba(0,0,0,.27);border-radius:2px;}
.m-b-20{margin-bottom:20px !important;}
#login-bt{position:absolute;width:50px;height:50px;border-radius:50%;line-height:36px!important;top:50%;margin-top:-25px;right:-25px;background:#FF4F0F;}

View File

@ -6,33 +6,33 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用户权限管理系统</title>
<link href="plugins/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<link href="plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
<link href="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<link href="css/admin.css" rel="stylesheet"/>
<link href="resources/plugins/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<link href="resources/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="resources/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="resources/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
<link href="resources/plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<link href="resources/css/admin.css" rel="stylesheet"/>
<style>
/** skins **/
#zheng-upms-server #header {background: #29A176;}
#zheng-upms-server .content_tab{background: #29A176;}
#zheng-upms-server .s-profile>a{background: url(images/zheng-upms.png) left top no-repeat;}
#zheng-upms-server .s-profile>a{background: url(resources/images/zheng-upms.png) left top no-repeat;}
#zheng-cms-admin #header {background: #455EC5;}
#zheng-cms-admin .content_tab{background: #455EC5;}
#zheng-cms-admin .s-profile>a{background: url(images/zheng-cms.png) left top no-repeat;}
#zheng-cms-admin .s-profile>a{background: url(resources/images/zheng-cms.png) left top no-repeat;}
#zheng-pay-admin #header {background: #F06292;}
#zheng-pay-admin .content_tab{background: #F06292;}
#zheng-pay-admin .s-profile>a{background: url(images/zheng-pay.png) left top no-repeat;}
#zheng-pay-admin .s-profile>a{background: url(resources/images/zheng-pay.png) left top no-repeat;}
#zheng-ucenter-home #header {background: #6539B4;}
#zheng-ucenter-home .content_tab{background: #6539B4;}
#zheng-ucenter-home .s-profile>a{background: url(images/zheng-ucenter.png) left top no-repeat;}
#zheng-ucenter-home .s-profile>a{background: url(resources/images/zheng-ucenter.png) left top no-repeat;}
#zheng-oss-web #header {background: #0B8DE5;}
#zheng-oss-web .content_tab{background: #0B8DE5;}
#zheng-oss-web .s-profile>a{background: url(images/zheng-oss.png) left top no-repeat;}
#zheng-oss-web .s-profile>a{background: url(resources/images/zheng-oss.png) left top no-repeat;}
#test #header {background: test;}
#test .content_tab{background: test;}
@ -51,7 +51,7 @@
</li>
<li id="logo" class="hidden-xs">
<a href="index.html">
<img src="images/logo.png"/>
<img src="resources/images/logo.png"/>
</a>
<span id="system_title">权限管理系统</span>
</li>
@ -136,7 +136,7 @@
<div class="s-profile">
<a class="waves-effect waves-light" href="javascript:;">
<div class="sp-pic">
<img src="images/avatar.jpg"/>
<img src="resources/images/avatar.jpg"/>
</div>
<div class="sp-info">
张恕征,您好!
@ -226,7 +226,7 @@
</div>
<ul id="tabs" class="tabs">
<li id="tab_home" data-index="home" data-closeable="false" class="cur">
<a class="waves-effect waves-light">首页</a>
<span class="waves-effect waves-light">首页</span>
</li>
</ul>
</div>
@ -254,16 +254,16 @@
</section>
<footer id="footer"></footer>
<script src="plugins/jquery.1.12.4.min.js"></script>
<script src="plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="plugins/waves-0.7.5/waves.min.js"></script>
<script src="plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="plugins/BootstrapMenu.min.js"></script>
<script src="plugins/device.min.js"></script>
<script src="plugins/fullPage/jquery.fullPage.min.js"></script>
<script src="plugins/fullPage/jquery.jdirk.min.js"></script>
<script src="plugins/jquery.cookie.js"></script>
<script src="resources/plugins/jquery.1.12.4.min.js"></script>
<script src="resources/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="resources/plugins/waves-0.7.5/waves.min.js"></script>
<script src="resources/plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="resources/plugins/BootstrapMenu.min.js"></script>
<script src="resources/plugins/device.min.js"></script>
<script src="resources/plugins/fullPage/jquery.fullPage.min.js"></script>
<script src="resources/plugins/fullPage/jquery.jdirk.min.js"></script>
<script src="resources/plugins/jquery.cookie.js"></script>
<script src="js/admin.js"></script>
<script src="resources/js/admin.js"></script>
</body>
</html>

View File

@ -193,7 +193,7 @@ var Tab = {
if ($('#tab_' + index).length == 0) {
// 添加选项卡
$('.content_tab li').removeClass('cur');
var tab = '<li id="tab_' + index +'" data-index="' + index + '" class="cur"><a class="waves-effect waves-light">' + title + '</a></li>';//<i class="zmdi zmdi-close"></i><
var tab = '<li id="tab_' + index +'" data-index="' + index + '" class="cur"><span class="waves-effect waves-light">' + title + '</span><i class="waves-effect waves-light zmdi zmdi-close" onclick="Tab.closeTab($(\'#tab_' + index +'\'));"></i></li>';
$('.content_tab>ul').append(tab);
// 添加iframe
$('.iframe').removeClass('cur');

View File

@ -174,7 +174,7 @@
</div>
<ul id="tabs" class="tabs">
<li id="tab_home" data-index="home" data-closeable="false" class="cur">
<a class="waves-effect waves-light" href="javascript:;">首页</a>
<span class="waves-effect waves-light" href="javascript:;">首页</span>
</li>
</ul>
</div>