| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- /*// 主题色*/
- /*字体主色调*/
- /*线条主色调*/
- /*按钮主色调*/
- /*底纹色*/
- /*个人中心布局*/
- .layout-header {
- position: fixed;
- z-index: 9;
- top: 0;
- left: 0;
- width: 100%;
- height: 55px;
- background: #fff;
- border-bottom: 2px solid #cfcfcf;
- min-width: 900px;
- }
- .layout-header .logo {
- display: inline-block;
- width: 220px;
- height: 100%;
- position: relative;
- vertical-align: middle;
- line-height: 100%;
- border-right: 1px solid #eceff4;
- background:url(../images/logo.png)left center no-repeat;
- }
- .layout-header .c-left-nav {
- position: absolute;
- z-index: 3;
- right: 0;
- display: block;
- width: 30px;
- height: 55px;
- line-height: 55px;
- text-align: center;
- vertical-align: bottom;
- cursor: pointer;
- }
- .layout-header .c-left-nav:hover {
- background: #f5f6fa;
- }
- .layout-header .logo a {
- padding-top: 10px;
- padding-left: 8px;
- display: inline-block;
- }
- .layout-header .logo i {
- border-radius: 2px;
- color: #5775b5;
- font-size: 14px;
- }
- .layout-header .logo i:before {
- content: "\e60d";
- }
- .layout-header .nav,
- .layout-header .logo,
- .layout-header .navright {
- height: 100%;
- }
- .layout-header .navright .navrightlist {
- float: right;
- line-height: 55px;
- padding: 0 18px;
- height: 100%;
- border-left: 1px solid #eceff4;
- cursor: pointer;
- position: relative;
- padding-right: 40px;
- }
- .layout-header .navright .navrightlist .hidenav {
- position: absolute;
- top: 55px;
- right: 0;
- background: #fff;
- border: 1px solid #eceff4;
- width: 140px;
- height: 0;
- overflow: hidden;
- opacity: 0;
- transition: all 0.2s;
- -moz-transition: all 0.2s;
- -webkit-transition: all 0.2s;
- -o-transition: all 0.2s;
- }
- .layout-header .navright .navrightlist.active .hidenav {
- height: auto;
- opacity: 1;
- transition: all 0.2s;
- -moz-transition: all 0.2s;
- -webkit-transition: all 0.2s;
- -o-transition: all 0.2s;
- }
- .layout-header .navright .navrightlist.active i {
- transform: rotate(-180deg);
- -ms-transform: rotate(-180deg);
- /* IE 9 */
- -webkit-transform: rotate(-180deg);
- /* Safari and Chrome */
- -o-transform: rotate(-180deg);
- /* Opera */
- -moz-transform: rotate(-180deg);
- }
- .layout-header .navright .navrightlist .hidenav a {
- display: block;
- padding: 0 20px;
- line-height: 40px;
- text-align: left;
- }
- .layout-header .navright .navrightlist .hidenava:hover,
- .layout-header .navright .navrightlist .hidenav a:hover {
- background: #f5f6fa;
- }
- .layout-header .navright .navrightlist i {
- position: absolute;
- top: 0;
- right: 18px;
- font-size: 13px;
- padding-left: 5px;
- }
- .layout-header .navright .navrightlist:hover {
- background: #f5f6fa;
- }
- .layout-header .nav a {
- display: inline-block;
- float: left;
- line-height: 55px;
- padding: 0 18px;
- height: 100%;
- border-right: 1px solid #eceff4;
- }
- .layout-header .nav a.active,
- .layout-header .nav a:hover {
- background: #f5f6fa;
- color: #5775b5;
- }
- .layout-main {
- z-index: 2;
- padding-top: 55px;
- position: fixed;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- }
- .layout-right {
- position: fixed;
- left: 220px;
- right: 0;
- top: 57px;
- bottom: 0px;
- background: #f7f7f7;
- }
- .layout-right iframe {
- width: 100%;
- height: 100%;
- border: 0;
- background: #f7f7f7;
- }
- .layout-left {
- width: 220px;
- position: absolute;
- z-index: 2;
- height: 100%;
- left: 0;
- top: 57px;
- border-right: 1px solid #cfcfcf;
- }
- .layout-left .navlist i.basicdata:before {
- content: "\e600";
- position: relative;
- z-index: 2;
- }
- .layout-left .navlist i.financialmanage:before {
- content: "\e602";
- position: relative;
- z-index: 2;
- }
- .layout-left .navlist i.accountset:before {
- content: "\e603";
- position: relative;
- z-index: 2;
- }
- .layout-left .navlist {
- height: 45px;
- line-height: 45px;
- width: 100%;
- overflow: hidden;
- border-bottom: 1px solid #eceff4;
- }
- .layout-left .navlist > a {
- display: block;
- width: 100%;
- }
- .layout-left .navlist > a > span {
- float: left;
- padding-left: 10px;
- }
- .layout-left .navlist i.left {
- color: #999999;
- border-right: 1px solid #eceff4;
- line-height: 45px;
- width: 44px;
- float: left;
- font-size: 18px;
- text-align: center;
- position: relative;
- overflow: hidden;
- }
- .layout-left .navlist i.left > b {
- position: absolute;
- left: -42px;
- width: 100%;
- top: 0;
- bottom: 0;
- z-index: 0;
- transition: left .25s;
- }
- .layout-left .navlist a.active,
- .layout-left .navlist a:hover {
- background: #f5f6fa;
- }
- .layout-left .navlist a.active i.left > b,
- .layout-left .navlist a:hover i.left > b {
- left: 0!important;
- }
- .layout-left .navlist a.active i.left,
- .layout-left .navlist a:hover i.left {
- color: #fff;
- }
- .bg-success {
- background-color: #8ec165;
- color: #ebf4e4;
- }
- .bg-info {
- background-color: #4cc0c1;
- color: #d1efef;
- }
- .bg-danger {
- background-color: #fb6b5b;
- color: #fff;
- }
- .bg-warning {
- background-color: #ffc333;
- color: #fff8e5;
- }
- .layout-main.close .layout-left {
- width: 60px;
- }
- .layout-main.close .layout-right {
- left: 60px;
- }
- .layout-main.close .layout-left .navlist a i.left > b {
- left: 0!important;
- width: 59px;
- height: 60px;
- }
- .layout-main.close .layout-left .navlist {
- height: 60px;
- line-height: 60px;
- }
- .layout-main.close .layout-left .navlist a i.left {
- color: #fff;
- line-height: 60px;
- width: 59px;
- font-size: 25px;
- }
|