Zhiqim Account(前端账户管理台)是在ZhiqimManager基础上改造成用于前端注册登录的管理系统,增加组织结构和余额,开放注册组织和组织管理员,可以添加组织内的部门和角色和操作员。并增加该管理台上的一些组件,如充值支付等组件。适用于二级代理管理或该大型组织机构
zhiqim_manager.css8KB
/* [全局定义] */
html{overflow-x:auto;}
body,table,td,div{font-size:14px;line-height:120%;}
a,a:visited{color:#333;text-decoration:none;cursor:pointer;}
a:active,a:hover{color:#008bd2;text-decoration:none;}
a.blue,a.blue:visited{color:#0066cc;text-decoration:none;cursor:pointer;}
a.blue:active,a.blue:hover{color:#0066cc;text-decoration:underline;}
/* [顶导航] */
.topnav {position:fixed;top:0;left:0;width:100%;min-width:1349px;color: #fff;background-color:#00a2eb;height:55px;z-index:99;}
.topnav .logoname {float:left;overflow:hidden;font-size:24px;width:200px;padding:0 10px;height:55px;line-height:55px;color:#fff;background-color:#00a2eb;border-right:1px solid #008bd2;}
.topnav .topnavleft {float:left;height:55px;line-height:55px;}
.topnav .topnavleft .nav {float:left;width:110px;height:55px;line-height:55px;font-size:16px;margin-right:5px;text-align:center;letter-spacing:2px;cursor:pointer;}
.topnav .topnavleft .nav:hover{color:#fff;background-color:#008bd2;border-left:1px solid #0583cc;border-right:1px solid #0583cc;}
.topnav .topnavleft .nav.active{color:#fff;background-color:#008bd2;border-left:1px solid #0583cc;border-right:1px solid #0583cc;}
.topnav .topnavright {float:right;height:55px;}
.topnav .topnavright .nav {float:left;height:55px;line-height:55px;font-size:14px;border-left:1px solid #008bd2;}
.topnav .topnavright .nav:hover {background-color:#01a7f2; color:#fff;}
.topnav .topnavright .query{float:left;width:300px;margin-right:15px;height:55px;line-height:50px;text-align:center;}
.topnav .topnavright .query input{width:85%;color:#ffffff;border-bottom:1px solid #f5f5f5;border-top:0px;border-left:0px;border-right:0px; -webkit-box-shadow:none;-moz-box-shadow:none; box-shadow:none;background-color:transparent;}
@media screen and (max-width:1430px){.topnav .topnavleft .nav {width:88px;}.topnav .topnavright .query{width:250px;}}
@media screen and (max-width:1360px){.topnav .topnavleft .nav {width:88px;}.topnav .topnavright .query{width:200px;}}
/* [导航下拉] */
.topnav .topnavright .nav.dropdown{display:block;}
.topnav .topnavright .nav.dropdown:hover .subnav{cursor:pointer;display: block;}
.topnav .topnavright .nav.dropdown .subnav {display:none;position:absolute;right:0px;top:56px;background-color:#fff;border:1px solid #cecece;border-radius:8px;z-index: 9999;width:240px;min-height:230px;color:#666;padding:16px;}
.topnav .topnavright .nav.dropdown .subnav .subnavlist{float:left;font-size:14px;}
.topnav .topnavright .nav.dropdown .subnav .subnavlist li {float:left;width:100%;margin-bottom:5px;text-align:left;line-height:25px;}
.topnav .topnavright .nav.dropdown .subnav .shfont{float:left;width:100%;font-size:14px;margin-bottom:10px;text-align:left;line-height:30px;border-bottom:1px solid #e9e9e9;}
.popuparrow {position: absolute;top:-32px;right:-50px;}
/* [顶导航固定55px] */
.topnav-margin{position:relative;width:100%;height:55px;}
/* banner */
.banner{position:relative;width:100%;}
.bannerfontwarp{position:absolute;width:1200px;height:500px;left:0px;right: 0px;top:0px; bottom: 0px; margin:auto;}
.bannerstars{position:absolute;right:870px;top:235px;z-index:1000;animation-name:fadeIn;animation-duration:2s;animation-iteration-count:infinite;animation-delay: 0s;}
@keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.bannerfont{position:absolute;left:0;top:160px;animation-name:font01;animation-duration:5s;animation-iteration-count:1;animation-delay: 0s;z-index:1000;}
@keyframes font01 {
0% {
opacity: 0;
top:0px;
}
100% {
opacity: 1;
top:160px;
}
}
/* 优势 */
.advantage{position:relative;width:1200px;margin:0 auto;overflow:hidden;}
.advantagebox{float:left;width:400px;text-align:center;padding:20px 65px;}
/* [结果] */
.result{position:relative;width:1250px;margin:100px auto;padding-top:100px;min-height:600px;overflow:hidden;background:#f8f8f8;border-radius:8px;z-index:0;}
.result a{color:#2293e4;}
/**************************************************************************************/
/* 容器内容 */
/**************************************************************************************/
/** [容器定义] */
.container {display: flex;width:100%;min-width:1200px;height:100%;min-height:1000px;overflow:hidden;background-color:#fff;}
.containersy {position:relative;width:100%;min-width:1200px;height:100%;min-height:1000px;overflow:hidden;background-color:#fff;}
/* [主体部分] */
.mainbody{position:relative;width: 100%;}
.mainbody .content{position:relative;float:left;width:100%;padding:25px;}
/* 当前位置 */
.mainbody .breadcrumb{position:relative;float:left;width: 100%;}
/* 优势功能 */
.advantagelist{display: flex;justify-content: space-between;flex-wrap: wrap;}
.advantageitem{text-align:center;border-radius:8px;width:380px; margin:30px 0;border:1px solid #e5e5e5; background-color: #fff;box-shadow: 0 0 5px 3px rgba(0,0,0,0.1);}
.advantageonebox{padding-top:20px;color: #ffffff;height:200px;background-image: -moz-linear-gradient(top, #619bfd, #36b5f8); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #619bfd), color-stop(1, #36b5f8)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#619bfd', endColorstr='#36b5f8', GradientType=0); /* IE*/}
.advantagetwobox{padding-top:20px;color: #ffffff;height:200px;background-image: -moz-linear-gradient(top, #a073ff, #ce92ff); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a073ff), color-stop(1, #ce92ff)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a073ff', endColorstr='#ce92ff', GradientType=0); /* IE*/}
.advantagethreebox{padding-top:20px;color: #ffffff;height:200px;background-image: -moz-linear-gradient(top, #05a7e5, #95e8de); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #05a7e5), color-stop(1, #95e8de)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05a7e5', endColorstr='#95e8de', GradientType=0); /* IE*/}
.introduce{padding:20px;margin-top:10px;margin-bottom:50px;text-align:left;}
.introduce p{line-height:25px;padding-left:15px;}
/* 角色 */
.rolewarp{background-color:#40a3ff;padding-top:60px;overflow: hidden;}
.rolelist{float:left;padding:10px;margin:20px 0;width:500px;margin-right:100px;}
.rolelistdouble{float:left;padding:10px;margin:20px 0;width:500px;margin-left:100px;}
.roleimg{float:left;width:145px;padding-right:20px;}
.rolecontent{float:left;text-align:left;color:#ffffff;width:335px;}
/* 功能模块 */
.functionwarp{position:relative;width:100%;margin:80px 0;overflow:hidden;}
.ueseroperate{position:relative;width:100%;overflow:hidden;padding-top:15px;min-height:200px; padding-left:25px;border-top:1px solid #e5e5e5;}
.ueseroperate .operatemenu{position:relative;cursor: pointer;color: #999;height:40px;line-height:40px;}
.ueseroperate .operatemenu:hover{color:#333;}
/* [主体部分] */
.mainbody{position:relative;width: 100%;}
.mainbody .content{position:relative;float:left;width:100%;padding:25px;}
/* 当前位置 */
.mainbody .breadcrumb{position:relative;float:left;width: 100%;}
/* 图片列表图片透明度改变 */
.imgrotate{transform-style: preserve-3d;transition: all 1s;}
.imgrotate:hover{opacity: 0.7;filter:alpha(opacity=70);}
/* [脚注] */
.footer {position:relative;width:100%;min-width:1250px;z-index:0;display:block;border-top:1px solid #e6e6e6;overflow:hidden;}
.footer-wrap {margin:10px auto;height:160px;width:1250px;text-align:center;color:#333;font-size:14px;}
.footer li {float:left;height:130px;margin:10px 20px 10px 0;text-align:left;line-height:30px;color:#888;}
.footer li a {margin:10px;color:#888;}
.footer li a:hover {color:#1e7eec;}
.footer li.fproduct{width:180px;margin-left:30px;}
.footer li.fhelp{width:222px;}
.footer li.fabout{width:190px;}
.footer li.abountus {width:300px;}
.footer li.fproduct,.footer li.fhelp,.footer li.fabout{border-right:1px dashed #ccc;}
@media screen and (max-width: 1071px) {
.footer li.fproduct{width:140px;}
.footer li.fhelp{width:180px;}
.footer li.fabout{width:150px;}
.footer li.abountus {width:280px;}
}
.footer-cp {position:relative;width:100%;min-width:1250px;height:85px;line-height:85px;background-color:#eee;overflow:hidden;}
.footer-cp-wrap{position:relative;margin:0 auto;width:1250px;height:85px;z-index:0;display:block;overflow:hidden;}
.footer-cp .footer-text{width:1250px;height:85px;line-height:85px;text-align:center;}
@media screen and (max-width: 1071px) {
.footer-cp-wrap{width:1000px;}
.footer-cp .footer-text{width:1000px;margin-left:-100px;}
}