提交 ef5cebf3 编写于 作者: shuzheng5201314's avatar shuzheng5201314

update

上级 136990a9
body, html {height: 100%; position: relative; font-family: 'Microsoft yahei'; font-size: 13px; font-weight: 400;}
img {vertical-align: middle;}
a, a:hover, a:active, a:focus {text-decoration: none;}
/* 头部 */
/** 头部 **/
#header {width: 100%; height: 70px; padding: 0 20px; position: fixed; z-index: 11; left: 0; top: 0; box-shadow: 0 1px 4px rgba(0,0,0,.3);}
#menu {position: relative; list-style: none; padding: 17px 0; margin-bottom: 0; height: 70px;}
#menu>li {float: left;}
/* 头部左侧侧边栏操作按钮 */
.line-trigger {margin-left: -5px; cursor: pointer; position: relative; display: none!important;}
.line-trigger:before {content: ""; position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; border-radius: 50%; background:rgba(255,255,255,.22); -webkit-transition: all; -o-transition: all; transition: all; -webkit-transition-duration: .3s; transition-duration: .3s; transform: scale(0);z-index: 0; margin-top: -22px; margin-left: -22px;}
.line-trigger.toggled:before {-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
.line-wrap {width:18px;height:12px;-webkit-transition:all;transition:all;-webkit-transition-duration:.3s;transition-duration:.3s;margin:12px 20px}
.toggled .line-wrap {-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.line-wrap .line {width:18px;height:2px;-webkit-transition:all;transition:all;-webkit-transition-duration:.3s;transition-duration:.3s;background-color:#fff}
.toggled .line-wrap .line.top {width:12px;transform:translateX(8px) translateY(1px) rotate(45deg);-webkit-transform:translateX(8px) translateY(1px) rotate(45deg)}
.line-wrap .line.center {margin:3px 0}
.toggled .line-wrap .line.bottom {width:12px;transform:translateX(8px) translateY(-1px) rotate(-45deg);-webkit-transform:translateX(8px) translateY(-1px) rotate(-45deg)}
.line-trigger{margin-left:-5px;cursor:pointer;position:relative;display:none!important}
.line-trigger:before{content:"";position:absolute;top:50%;left:50%;width:45px;height:45px;border-radius:50%;background:rgba(255,255,255,.22);-webkit-transition:all;-o-transition:all;transition:all;-webkit-transition-duration:.3s;transition-duration:.3s;transform:scale(0);z-index:0;margin-top:-22px;margin-left:-22px}
.line-trigger.toggled:before{-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
.line-wrap{width:18px;height:12px;-webkit-transition:all;transition:all;-webkit-transition-duration:.3s;transition-duration:.3s;margin:12px 20px}
.toggled .line-wrap{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.line-wrap .line{width:18px;height:2px;-webkit-transition:all;transition:all;-webkit-transition-duration:.3s;transition-duration:.3s;background-color:#fff}
.toggled .line-wrap .line.top{width:12px;transform:translateX(8px) translateY(1px) rotate(45deg);-webkit-transform:translateX(8px) translateY(1px) rotate(45deg)}
.line-wrap .line.center{margin:3px 0}
.toggled .line-wrap .line.bottom{width:12px;transform:translateX(8px) translateY(-1px) rotate(-45deg);-webkit-transform:translateX(8px) translateY(-1px) rotate(-45deg)}
/* 头部左侧logo */
#logo a {margin-left: 10px!important;}
/* 头部右侧工具按钮 */
.pull-right {float: right!important;}
.hi-menu {list-style: none; padding:0;}
......@@ -24,8 +28,10 @@ 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;}
/* 正文 */
/** 正文 **/
#main {height: 100%; padding-top: 70px; padding-bottom: 0;}
/* 侧边栏响应式 */
@media (max-width: 1279px) {
#sidebar {-webkit-transform:translate3d(-288px,0,0); transform: translate3d(-288px,0,0); box-shadow: 0 0 20px rgba(14,18,21,.38) }
......@@ -35,155 +41,40 @@ a, a:hover, a:active, a:focus {text-decoration: none;}
@media (max-width: 767px) {
#header{padding: 0 8px;}
}
/* 侧边栏 */
/** 侧边栏 **/
#sidebar {position: fixed; width: 268px; background: #fff; height: calc(100% - 70px); top: 70px; transition: all; -webkit-transition-duration: .3s; transition-duration: .3s; z-index: 10; overflow-y: auto; box-shadow: 1px 0 4px rgba(0,0,0,.3);}
.s-profile>a {
display: block;
height: 129px;
margin-bottom: 5px;
width: 100%;
background: url(../images/profile-menu.png) left top no-repeat;
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-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;
}
.zmdi {
display: inline-block;
font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.zmdi-caret-down:before {
content: '\f2f2';
}
.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;
}
.sub-menu ul {
list-style: none;
display: none;
padding: 0;
}
.sub-menu ul>li:first-child>a {
padding-top: 14px;
}
.sub-menu ul>li>a {
padding: 8px 20px 8px 65px;
font-weight: 500;
display: block;
color: #989898;
}
.sub-menu.toggled>ul{
display: block;
}
.sub-menu>a:after, .sub-menu>a:before {
position: absolute;
top: 50%;
margin-top: -11px;
font-family: Material-Design-Iconic-Font;
font-size: 17px;
right: 15px;
-webkit-transition: all;
-o-transition: all;
transition: all;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
}
.sub-menu>a:before {
content: "\f278";
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.sub-menu.toggled>a:before {
content: "\f278";
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.sub-menu>a:after, .sub-menu>a:before {
position: absolute;
top: 50%;
margin-top: -11px;
font-family: Material-Design-Iconic-Font;
font-size: 17px;
right: 15px;
-webkit-transition: all;
-o-transition: all;
transition: all;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
}
.sub-menu>a:after {
content: "\f273";
transform: scale(0);
}
.sub-menu.toggled>a:after {
content: "\f273";
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.main-menu a:hover {
color: #262626;
}
/* 侧边栏个人信息 */
.s-profile>a{display:block;height:129px;margin-bottom:5px;width:100%;background:url(../images/profile-menu.png) left top no-repeat;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-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)}
.s-profile .main-menu{display:none;margin:0}
.zmdi{display:inline-block;font:normal normal normal 14px/1 Material-Design-Iconic-Font;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.zmdi-caret-down:before{content:'\f2f2'}
/* 侧边栏菜单 */
.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}
.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}
.sub-menu ul>li>a{padding:8px 20px 8px 65px;font-weight:500;display:block;color:#989898}
.sub-menu.toggled>ul{display:block}
.sub-menu>a:after,.sub-menu>a:before{position:absolute;top:50%;margin-top:-11px;font-family:Material-Design-Iconic-Font;font-size:17px;right:15px;-webkit-transition:all;-o-transition:all;transition:all;-webkit-transition-duration:250ms;transition-duration:250ms}
.sub-menu>a:before{content:"\f278";-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
.sub-menu.toggled>a:before{content:"\f278";-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
.sub-menu>a:after,.sub-menu>a:before{position:absolute;top:50%;margin-top:-11px;font-family:Material-Design-Iconic-Font;font-size:17px;right:15px;-webkit-transition:all;-o-transition:all;transition:all;-webkit-transition-duration:250ms;transition-duration:250ms}
.sub-menu>a:after{content:"\f273";transform:scale(0)}
.sub-menu.toggled>a:after{content:"\f273";-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
.main-menu a:hover{color:#262626}
.upms-version{margin-top: 10px; height: 46px; line-height: 46px; font-size: 12px; color: #777; text-align: center; border-top: 1px solid #eee;}
/* 内容区响应式 */
@media (min-width: 768px) {
#content {padding-left: 0;}
......@@ -195,12 +86,35 @@ a, a:hover, a:active, a:focus {text-decoration: none;}
#content {padding-left: 268px;}
}
#content {height: 100%; padding-right: 0; transition: all;}
/* 内容区 */
.container, .container-fluid{height:100%;padding:0;}
@media (min-width: 1280px) {
#content:not(.content-alt) {padding-left: 268px;padding-right: 0}
}
@media (min-width: 768px) and (max-width:1279px) {
#content {padding-left: 0;padding-right: 0}
}
@media (min-width: 992px) {
.container {width:100%}
}
@media (min-width: 1200px) {
.container {width:100%}
}
#content {height: 100%;}
/* 选项卡 */
/* 底部 */
#footer {display:none;}
/* 滚动条 */
.mCSB_scrollTools .mCSB_dragger_bar {border-radius: 0!important;}
.mCSB_scrollTools{width:5px}
.mCSB_scrollTools .mCSB_dragger_bar{border-radius:0!important}
.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCSB_scrollTools.mCSB_scrollTools_vertical{margin:0!important}
.mCSB_scrollTools.mCSB_scrollTools_horizontal{height:10px}
/** skins **/
#header {background: #29a176;}
#sidebar {background: #f5f5f5;}
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<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>
<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"/>
<style>
#main{padding: 30px; background: #fff; 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>
</section>
</section>
<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>
<!-- Angular.js Libraries -->
<script src="plugins/angular/angular-1.5.8/angular.min.js"></script>
<script src="plugins/angular/angular-1.5.8/angular-animate.min.js"></script>
<script src="plugins/angular/angular-1.5.8/angular-aria.min.js"></script>
<script src="plugins/angular/angular-1.5.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<link href="plugins/angular/angular-material-1.1.1/angular-material.min.css" rel="stylesheet"/>
<script src="plugins/angular/angular-material-1.1.1/angular-material.min.js"></script>
<script src="js/admin.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -11,6 +11,7 @@
<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"/>
<script src="js/admin_header.js"></script>
</head>
<body>
<header id="header">
......@@ -29,8 +30,12 @@
</li>
<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>
<li class="dropdown">
<a class="waves-effect waves-light" data-toggle="dropdown" href="">
<a class="waves-effect waves-light" data-toggle="dropdown" href="javascript:;">
<i class="him-icon zmdi zmdi-dropbox"></i>
</a>
<ul class="dropdown-menu dm-icon pull-right">
......@@ -39,38 +44,38 @@
</li>
<li class="divider hidden-xs"></li>
<li class="hidden-xs">
<a class="waves-effect" href=""><i class="zmdi zmdi-widgets"></i> CMS系统</a>
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> CMS系统</a>
</li>
<li>
<a class="waves-effect" href=""><i class="zmdi zmdi-widgets"></i> OA系统</a>
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> OA系统</a>
</li>
<li>
<a class="waves-effect" href=""><i class="zmdi zmdi-widgets"></i> CRM系统</a>
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> CRM系统</a>
</li>
<li>
<a class="waves-effect" href=""><i class="zmdi zmdi-widgets"></i> QA系统</a>
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-widgets"></i> QA系统</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="waves-effect waves-light" data-toggle="dropdown" href="">
<a class="waves-effect waves-light" data-toggle="dropdown" href="javascript:;">
<i class="him-icon zmdi zmdi-more-vert"></i>
</a>
<ul class="dropdown-menu dm-icon pull-right">
<li class="hidden-xs">
<a class="waves-effect" data-ma-action="fullscreen" href=""><i class="zmdi zmdi-fullscreen"></i> 全屏模式</a>
<a class="waves-effect" data-ma-action="fullscreen" href="javascript:;"><i class="zmdi zmdi-fullscreen"></i> 全屏模式</a>
</li>
<li>
<a class="waves-effect" data-ma-action="clear-localstorage" href=""><i class="zmdi zmdi-delete"></i> 清除缓存</a>
<a class="waves-effect" data-ma-action="clear-localstorage" href="javascript:;"><i class="zmdi zmdi-delete"></i> 清除缓存</a>
</li>
<li>
<a class="waves-effect" href=""><i class="zmdi zmdi-face"></i> 隐私管理</a>
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-face"></i> 隐私管理</a>
</li>
<li>
<a class="waves-effect" href=""><i class="zmdi zmdi-settings"></i> 系统设置</a>
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-settings"></i> 系统设置</a>
</li>
<li>
<a class="waves-effect" href=""><i class="zmdi zmdi-run"></i> 退出登录</a>
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-run"></i> 退出登录</a>
</li>
</ul>
</li>
......@@ -80,12 +85,12 @@
</header>
<section id="main">
<!-- 左侧导航区 -->
<aside id="sidebar" class="sidebar c-overflow">
<aside id="sidebar">
<!-- 个人资料区 -->
<div class="s-profile">
<a class="waves-effect waves-light" href="" data-ma-action="profile-menu-toggle">
<a class="waves-effect waves-light" href="javascript:;">
<div class="sp-pic">
<img src="images/avatar.jpg" alt="">
<img src="images/avatar.jpg"/>
</div>
<div class="sp-info">
张恕征,您好!
......@@ -94,16 +99,16 @@
</a>
<ul class="main-menu">
<li>
<a class="waves-effect" href=""><i class="zmdi zmdi-account"></i> 个人资料</a>
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-account"></i> 个人资料</a>
</li>
<li>
<a class="waves-effect" href=""><i class="zmdi zmdi-face"></i> 隐私管理</a>
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-face"></i> 隐私管理</a>
</li>
<li>
<a class="waves-effect" href=""><i class="zmdi zmdi-settings"></i> 系统设置</a>
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-settings"></i> 系统设置</a>
</li>
<li>
<a class="waves-effect" href=""><i class="zmdi zmdi-run"></i> 退出登录</a>
<a class="waves-effect" href="javascript:;"><i class="zmdi zmdi-run"></i> 退出登录</a>
</li>
</ul>
</div>
......@@ -157,16 +162,26 @@
</aside>
<!-- /左侧导航区 -->
<section id="content">
content
<div class="tab">
<
<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>
</ul>
</div>
<iframe class="tab_iframe" src="home.html" width="100%" frameborder="0" scrolling="auto" onload="changeFrameHeight(this)"></iframe>
</section>
</section>
<footer id="footer">
footer
</footer>
<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="js/admin.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -9,6 +9,11 @@ $(function() {
$(this).next().slideToggle(200);
$(this).parent().toggleClass('toggled');
});
// 个人资料
$('.s-profile a').click(function() {
$(this).next().slideToggle(200);
$(this).parent().toggleClass('toggled');
});
// Waves初始化
Waves.displayEffect();
// 滚动条初始化
......
function changeFrameHeight(ifm) {
ifm.height = document.documentElement.clientHeight - 118;
}
function resizeFrameHeight() {
$('.tab_iframe').css('height', document.documentElement.clientHeight - 118);
$('md-tab-content').css('left', '0');
}
window.onresize = function(){
resizeFrameHeight();
}
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册