增加选项卡
This commit is contained in:
shuzheng
parent
9562c08c05
commit
5a42db75ec
|
|
@ -1,4 +1,4 @@
|
|||
body, html {height: 100%; position: relative; font-family: 'Microsoft yahei'; font-size: 13px; font-weight: 400;}
|
||||
body, html {height: 100%; position: relative; font-family: 'Microsoft yahei'; font-size: 13px; font-weight: 400; overflow-y: hidden;}
|
||||
img {vertical-align: middle;}
|
||||
a, a:hover, a:active, a:focus {text-decoration: none;}
|
||||
|
||||
|
|
@ -28,6 +28,13 @@ a, a:hover, a:active, a:focus {text-decoration: none;}
|
|||
.hi-menu>li>a {color: #fff; display: block; text-align: center; z-index: 1; position: relative; -webkit-transition: background-color; -o-transition: background-color; transition: background-color; -webkit-transition-duration: 250ms; transition-duration: 250ms; border-radius: 2px;}
|
||||
.hi-menu>li>a>.him-icon {font-size: 24px; line-height: 36px;}
|
||||
.dropdown {position: relative;}
|
||||
.dropdown-menu{box-shadow: 0 2px 10px rgba(0,0,0,.2);border: none;}
|
||||
.dropdown-menu .divider{height:1px;margin:8px 0;overflow:hidden;background-color:rgba(0,0,0,.08)}
|
||||
.dropdown-menu>li>a{display:block;clear:both;font-weight:400;color:#333;padding:10px 20px;font-size:13px;-webkit-transition:background-color;-o-transition:background-color;transition:background-color;-webkit-transition-duration:.3s;transition-duration:.3s}
|
||||
.dm-icon>li>a>.zmdi{line-height:100%;vertical-align:top;font-size:18px;width:28px}
|
||||
#header .skin-switch{padding:10px 0 2px;text-align:center;font-size:13px;}
|
||||
#search-form{margin: 6px 15px;}
|
||||
#keywords{min-width:150px}
|
||||
|
||||
/** 正文 **/
|
||||
#main {height: 100%; padding-top: 70px; padding-bottom: 0;}
|
||||
|
|
@ -104,7 +111,19 @@ a, a:hover, a:active, a:focus {text-decoration: none;}
|
|||
#content {height: 100%;}
|
||||
|
||||
/* 选项卡 */
|
||||
|
||||
.content_tab{width:100%;height:48px;background:#25966F;overflow:hidden;}
|
||||
.content_tab>ul{margin:0 40px;padding:0;font-size:0;display:block;white-space:nowrap;overflow:auto;}
|
||||
.tab_left,.tab_right{width:40px;height:48px;line-height:48px;color:#fff;text-align:center}
|
||||
.tab_left{float:left;margin-right:-40px;}
|
||||
.tab_right{float:right;margin-left:-40px;}
|
||||
.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>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:#fff;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;}*/
|
||||
.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 .15s}
|
||||
.content_tab>ul>.cur>a:after{left:0;bottom:1px;width:100%;opacity:1;transition:all linear .15s}
|
||||
|
||||
/* 底部 */
|
||||
#footer {display:none;}
|
||||
|
|
|
|||
|
|
@ -11,32 +11,32 @@
|
|||
<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"/>
|
||||
<style>
|
||||
#main{padding: 30px; background: #fff; font-size: 13px;}
|
||||
body{font-family:'Microsoft yahei';color: #5E5E5E;font-size: 13px;}
|
||||
a{color:#2196F3;text-decoration:none}
|
||||
#main{padding: 15px 30px; font-size: 13px;}
|
||||
#main p{margin-bottom: 5px; line-height: 2em;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="main">
|
||||
<section id="content">
|
||||
<div class="container">
|
||||
<div id="home">
|
||||
<p><h4>通用用户权限管理系统</h4></p>
|
||||
<p><b>演示地址</b>：<a href="http://upms.zhangshuzheng.cn/" target="_blank">http://upms.zhangshuzheng.cn/</a></p>
|
||||
<p><b>系统简介</b>：本系统是基于RBAC授权和基于用户授权的细粒度权限控制通用平台，并提供单点登录、会话管理和日志管理。接入的系统可自由定义组织、角色、权限、资源等。</p><br/>
|
||||
<p><h4>系统功能概述：</h4></p>
|
||||
<p><b>系统组织管理</b>：系统和组织增加、删除、修改、查询功能。</p>
|
||||
<p><b>用户角色管理</b>：用户和角色增加、删除、修改、查询功能。</p>
|
||||
<p><b>资源权限管理</b>：资源和权限增加、删除、修改、查询功能。</p>
|
||||
<p><b>权限分配管理</b>：提供给角色和用户的权限增加、删除、修改、查询功能。</p>
|
||||
<p><b>单点登录(SSO)</b>：提供统一用户单点登录认证、用户鉴权功能。</p>
|
||||
<p><b>用户会话管理</b>：提供分布式用户会话管理</p>
|
||||
<p><b>操作日志管理</b>：提供记录用户登录、操作等日志。</p><br/>
|
||||
<p><h4>对外接口概述：</h4></p>
|
||||
<p><b>系统组织数据接口</b>、<b>用户角色数据接口</b>、<b>资源权限数据接口</b>、<b>单点登录(SSO)接口</b>、<b>用户鉴权接口</b></p><br/>
|
||||
<p><h4>关于作者</h4></p>
|
||||
<p><b>姓 名</b>：张恕征</p>
|
||||
<p><b>电子邮箱</b>：469741414@qq.com</p>
|
||||
</div>
|
||||
<div id="home">
|
||||
<p><h4>通用用户权限管理系统</h4></p>
|
||||
<p><b>演示地址</b>：<a href="http://www.zhangshuzheng.cn/upms" target="_blank">http://www.zhangshuzheng.cn/upms</a></p>
|
||||
<p><b>系统简介</b>：本系统是基于RBAC授权和基于用户授权的细粒度权限控制通用平台，并提供单点登录、会话管理和日志管理。接入的系统可自由定义组织、角色、权限、资源等。</p><br/>
|
||||
<p><h4>系统功能概述：</h4></p>
|
||||
<p><b>系统组织管理</b>：系统和组织增加、删除、修改、查询功能。</p>
|
||||
<p><b>用户角色管理</b>：用户和角色增加、删除、修改、查询功能。</p>
|
||||
<p><b>资源权限管理</b>：资源和权限增加、删除、修改、查询功能。</p>
|
||||
<p><b>权限分配管理</b>：提供给角色和用户的权限增加、删除、修改、查询功能。</p>
|
||||
<p><b>单点登录(SSO)</b>：提供统一用户单点登录认证、用户鉴权功能。</p>
|
||||
<p><b>用户会话管理</b>：提供分布式用户会话管理</p>
|
||||
<p><b>操作日志管理</b>：提供记录用户登录、操作等日志。</p><br/>
|
||||
<p><h4>对外接口概述：</h4></p>
|
||||
<p><b>系统组织数据接口</b>、<b>用户角色数据接口</b>、<b>资源权限数据接口</b>、<b>单点登录(SSO)接口</b>、<b>用户鉴权接口</b></p><br/>
|
||||
<p><h4>关于作者</h4></p>
|
||||
<p><b>姓 名</b>：张恕征</p>
|
||||
<p><b>电子邮箱</b>：469741414@qq.com</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>通用用户权限系统</title>
|
||||
<title>用户权限管理系统</title>
|
||||
|
||||
<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"/>
|
||||
|
|
@ -31,8 +31,20 @@
|
|||
<li class="pull-right">
|
||||
<ul class="hi-menu">
|
||||
<!-- 搜索 -->
|
||||
<li data-ma-action="search-open">
|
||||
<a class="waves-effect waves-light" href="javascript:;"><i class="him-icon zmdi zmdi-search"></i></a>
|
||||
<li class="dropdown">
|
||||
<a class="waves-effect waves-light" data-toggle="dropdown" href="javascript:;">
|
||||
<i class="him-icon zmdi zmdi-search"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dm-icon pull-right">
|
||||
<form id="search-form" class="form-inline">
|
||||
<div class="input-group">
|
||||
<input id="keywords" type="text" name="keywords" class="form-control" placeholder="搜索"/>
|
||||
<div class="input-group-btn">
|
||||
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a class="waves-effect waves-light" data-toggle="dropdown" href="javascript:;">
|
||||
|
|
@ -162,17 +174,70 @@
|
|||
</aside>
|
||||
<!-- /左侧导航区 -->
|
||||
<section id="content">
|
||||
<div class="tab">
|
||||
<
|
||||
<div class="content_tab">
|
||||
<div class="tab_left">
|
||||
<a href="javascript:;"><i class="zmdi zmdi-chevron-left"></i></a>
|
||||
</div>
|
||||
<div class="tab_right">
|
||||
<a class="active" href="javascript:;"><i class="zmdi zmdi-chevron-right"></i></a>
|
||||
</div>
|
||||
<ul>
|
||||
<li><i class="zmdi zmdi-home"></i> 首页</li>
|
||||
<li><i class="zmdi zmdi-home"></i> 首页</li>
|
||||
<li><i class="zmdi zmdi-home"></i> 首页</li>
|
||||
<li><i class="zmdi zmdi-home"></i> 首页</li>
|
||||
<li><i class="zmdi zmdi-home"></i> 首页</li>
|
||||
<li class="cur">
|
||||
<a class="waves-effect waves-light" href="javascript:;">首页</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">系统注册</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">新增标签</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">内容编辑</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">个人详情</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">系统注册</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">新增标签</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">内容编辑</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">个人详情</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">系统注册</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">新增标签</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">内容编辑</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">个人详情</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">系统注册</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">新增标签</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">内容编辑</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="waves-effect waves-light" href="javascript:;">个人详情</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<iframe class="tab_iframe" src="home.html" width="100%" frameborder="0" scrolling="auto" onload="changeFrameHeight(this)"></iframe>
|
||||
<div class="content_main">
|
||||
<iframe class="tab_iframe" src="home.html" width="100%" frameborder="0" scrolling="auto" onload="changeFrameHeight(this)"></iframe>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<footer id="footer"></footer>
|
||||
|
|
|
|||
|
|
@ -27,4 +27,9 @@ $(function() {
|
|||
preventDefault: true
|
||||
}
|
||||
});
|
||||
// 选项卡
|
||||
$('.content_tab li').click(function() {
|
||||
$('.content_tab li').removeClass('cur');
|
||||
$(this).addClass('cur');
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue