@charset "utf-8"; @import "home_variables"; //首页自定义皮肤变量 *{box-sizing: border-box;} // .el-tree-node>.el-tree-node__children{overflow: auto!important;} img{ image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; } body { font-size: 14px; } @mixin triangle { width: 0px; height: 0px; border: 10px solid transparent; border-top-color: transparent; border-bottom-color: #fff; border-left-color: transparent; border-right-color: transparent; position: absolute; z-index: 4; left: 50%; margin-left: -7px; top: -20px; } .indexbody { height: 100%; } #myapp { min-width: 1280px; position: relative; height: 100%; overflow: hidden; #myapp-header { width: 100%; height: 64px; //background: #40444d; background: -webkit-linear-gradient( 270deg, rgba(87, 197, 159, 1) 0%, rgba(78, 116, 242, 1) 37% ); background: -o-linear-gradient( 270deg, rgba(87, 197, 159, 1) 0%, rgba(78, 116, 242, 1) 37% ); background: -ms-linear-gradient( 270deg, rgba(87, 197, 159, 1) 0%, rgba(78, 116, 242, 1) 37% ); background: -moz-linear-gradient( 270deg, rgba(87, 197, 159, 1) 0%, rgba(78, 116, 242, 1) 37% ); background: linear-gradient( 270deg, rgba(87, 197, 159, 1) 0%, rgba(78, 116, 242, 1) 37% ); background: rgb(0, 118, 246); border-bottom: 1px solid #eee; .nav-left-box { width: 46px; height: 64px; //background: $myapp-nav-basics; background: none; border-bottom: none; //border-bottom: 1px solid $color-shark; line-height: 64px; text-align: center; margin-left: 12px; a { vertical-align: middle; } .logo { width: 46px; height: 46px; cursor: auto; } .nav-menu { vertical-align: middle; font-size: 17px; margin-left: 40px; //color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 1); } .nav-menu:hover { color: #fff; } } .domain-box { margin-top: 9px; height: 48px; line-height: 48px; padding-left: 11px; img { margin-right: 12px; width: 46px; height: 46px; border-radius: 4px; } .el-dropdown { color: #fff !important; cursor: pointer; } } .app-bar { //background:#40444d; background: none; .software-navul { .software-navli { display: inline-block; vertical-align: middle; line-height: 51px; a { // color: rgba(255, 255, 255, 0.7); color: #000; display: block; padding: 0 15px; &:hover { color: #fff; } .menu-more { width: 4px; } cite { padding: 0 5px; } } } .flowCenter { //border-right: 1px solid #53575f; border-right: none; position: relative; &:hover { #tabs_flowcenter { display: block; } } } #tabs_flowcenter { position: absolute; // z-index: 999; z-index: 9999; display: none; li { background: rgba(83, 87, 95, 0.85); line-height: 40px; a { width: 124px; } &:hover { background: rgba(83, 87, 95, 1); } } } .other-software { //margin-left: 40px; margin-left: 0px; position: relative; &:hover { .softwarelist { display: block; } } .softwarelist { width: 160px; position: absolute; font-size: 14px; background: #ffff; top: 50px; z-index: 5; margin-left: -60px; display: none; box-shadow: 0px 2px 4px #dce4e4; .triangle { display: none; @include triangle; } .other-software-ul { .other-software-li { a { padding: 0; line-height: 40px; color: #7a7b7b; &:hover { background: $softwarelist-lignt-bg; cite { color: #fff; } } cite { padding: 13px 0 13px 20px; font-size: 1.1em; } } } } } } .regular-use-li { position: relative; &:hover { .regular-use { display: block; } } .offer-use { //background: rgb(102,105,113); background: rgba(39, 190, 138, 1); //color: rgb(179,180,184); color: #ffffff; &:hover { color: #fff; background: rgb(83, 87, 95); } &:focus { outline: none; } } .commonly-used { display: block; width: 50px; height: 24px; line-height: 24px; background: rgba(39, 190, 138, 1); border-radius: 12px; text-align: center; color: #fff; } .regular-use { display: none; position: absolute; background: #60646d; z-index: 5; line-height: 0; margin-left: 20px; max-width: 474px; .widgetsul { line-height: 0; // padding:5px; font-size: 0; .widgetsli { line-height: 30px; padding: 5px; display: inline-block; position: relative; &:hover { i { display: inline-block; } } a { padding: 0; .regular-usename { color: #c0c5c5; width: 106px; height: 30px; font-size: 14px; &:hover { background: #4b5059; cite { color: #fff; } } cite { width: 6em; line-height: 30px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 10px; margin-right: 40px; color: #adaeb0; } } } i { font-size: 10px; position: absolute; right: 10px; top: 50%; margin-top: -5px; color: $regular-use-basics-word; display: none; z-index: 4; &:hover { color: pink; } } } } .regular-use-add { width: 80px; height: 30px; color: #fff; border: 1px dotted #fff; margin: 13px 0 23px 20px; } } } } } .center-nav { //background: #40444d; background: none; margin-right: 22px; position: relative; .center-messinfo { //头部右上角消息滚动与图标 vertical-align: -1px; .platAdspan { color: #fff; cursor: pointer; width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: -5px; text-align: right; button { display: none; } .el-carousel__item { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .messagespan { color: #fff; cursor: pointer; margin-left: 10px; padding-right: 10px; } } .center-navul { margin-bottom: 0px; display: inline-block; //ul标识inline .center-navli { display: inline-block; vertical-align: middle; line-height: 64px; min-width: 50px; text-align: center; a { display: block; color: $center-nav-word; .lock { width: 12px; } .lockScreenicon { color: #fff; } .theme { width: 16px; } .weather { width: 108px; } .bell { width: 18px; } } .mysetup { height: 30px; border-radius: 14px; // background: #666971; background: none; vertical-align: middle; font-size: 0px; line-height: 0px; position: relative; &:hover { .personal-settings { display: block; //position: relative; .cite-num { min-width: 30px; text-align: center; padding-left: 3px; padding-right: 3px; background: #ff0000; border-radius: 10px; color: #fff; font-size: 12px; margin-left: 25px; } } } .centericon { margin-left: 3px; width: 30px; height: 30px; vertical-align: middle; border-radius: 50%; } .personal-name { margin-left: 7px; margin-right: 5px; font-size: 14px; color: #fff; max-width: 5em; line-height: 30px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .pull-down { font-size: 18px; vertical-align: middle; margin-right: 10px; color: #fff; } .personal-settings { display: none; position: absolute; width: 160px; z-index: 10000; right: 0; top: 30px; padding-top: 10px; .triangle { @include triangle; border: 6px solid transparent; border-top-color: transparent; border-bottom-color: #fff; border-left-color: transparent; border-right-color: transparent; // left: auto; // right: -8px; top: -2px; } ul { background: #ffffff; box-shadow: 0px 2px 4px #dce4e4; li { width: 100%; line-height: 40px; text-align: left; vertical-align: top; &:hover { background: $personal-settings-light-bg; i { color: #fff; } cite { color: #fff; } } i { font-size: 14px; margin-left: 20px; margin-right: 10px; color: #60646d; } cite { font-size: 14px; color: #60646d; } } } } } // #mysetup{ // position: relative; // .layui-nav-child{ // position: absolute; // display: none; // } // } .weather { line-height: normal; } } .center-navli-last { margin-left: 10px; } } .message-popup { position: absolute; width: 200px; right: 0px; top: 70px; background: rgba(255, 255, 255, 0.85); line-height: 35px; border-radius: 5px; box-shadow: 1px 1px 5px -1px; z-index: 10; display: none; .message-popup-close { position: absolute; right: 10px; height: 20px; line-height: 19px; padding: 0px 5px; background: #efefef; border-radius: 100px; top: 10px; } ul { list-style-type: none; padding: 5px; margin-bottom: 0px; margin-top: 25px; li span { display: inline-block; margin: 0px 5px; } } .message-popup-num { color: #d6ac00; } .message-popup-active { color: #0c86ca; cursor: pointer; } } } .prompt-popup { position: absolute; right: 20px; top: 105px; z-index: 2005; width: 200px; min-height: 70px; background: rgba(255, 255, 255, 0.85); border-radius: 5px; box-shadow: 1px 1px 5px -1px; .message { width: 100%; height: 100%; padding: 8px 10px; .close-icon { width: 100%; height: 20px; display: -webkit-flex; display: flex; justify-content: flex-end; .message-popup-close { width: 20px; height: 20px; background: #efefef; border-radius: 50%; text-align: center; line-height: 20px; cursor: pointer; } } .tip { width: 100%; height: 40px; line-height: 40px; .tip-first { color: #d6ac00; } .tip-tree { color: #0c86ca; cursor: pointer; } } } } } .myapp-content { .app-name { display: inline-block; line-height: 40px; width: 100%; height: 40px; font-size: 16px; color: #0f71ff; font-weight: 500; padding-left: 0; background: #f5f5fa; padding-left: 20px; box-sizing: border-box; } // .slide-fade-leave-active { // transform: translateX(-250px); // transition: all 0.3s; // } // .slide-fade-enter-active { // transform: translateX(64px); // transition: all 0.3s; // } // .slide-fade-enter { // transform: translateX(-250px); // transition: all 0.3s; // } } .main-content { //background: #eaefef; background: rgba(243, 247, 250, 1); border-left: 1px solid #eee; .main-body { .main-nav { height: 40px; position: absolute; z-index: 4; .homepageN { position: absolute; left: 0; top: 0; line-height: 40px; width: 79px; margin-right: 1px; background: #fff; text-align: center; border-bottom: 1px solid #eee; .a-link { display: -webkit-flex; display: flex; justify-content: center; align-items: center; color: #5a6779; } i { font-size: 16px; margin-right: 3px; color: #8e9aa9; } img { width: 30px; height: 30px; } cite { color: #5a6779; } } .main-tab-con { line-height: 40px; background: #fff; // margin: 0 129px 0 79px; margin: 0 129px 0 0px; border-bottom: 1px solid #eee; .img { height: 40px; display: -webkit-flex; display: flex; align-items: center; img { width: 30px; height: 30px; } } .arrow-upicon, .arrow-downicon { width: 51px; line-height: 40px; font-size: 14px; text-align: center; cursor: pointer; color: #5a6779; } .main-tab-carousel { margin-left: 10px; margin-right: 10px; height: 40px; overflow: auto; overflow-y: hidden; } .main-tab { position: relative; height: 40px; white-space: nowrap; transition: 0.4s linear; li { margin-right: 10px; display: inline-block; .main-sortable { height: 33px; width: 125px; line-height: 33px; background: #f3f7fa; border-radius: 2px; position: relative; cursor: pointer; cite { color: #5a6779; width: 8.5em; line-height: 33px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; padding-left: 11px; padding-right: 14px; } i { font-weight: bold; color: #c0c5c5; font-size: 12px; position: absolute; top: 50%; right: 7px; margin-top: -6px; z-index: 2; } } .sortable-active { background: #7190f5; cite { color: #fff; } i { color: #fff; } } } } } .close-all-tab { position: absolute; right: 0; top: 0; line-height: 40px; text-align: center; width: 129px; margin-left: 1px; background: #fff; cursor: pointer; color: #5a6779; border-bottom: 1px solid #eee; .img { display: inline-block; height: 40px; width: 40px; img { width: 30px; height: 30px; margin-top: -2px; } } } } } .main-tab-content { height: 100%; .myapps-component { position: absolute; left: 0; right: 0; top: 0; bottom: 0; // width: 100%; // height: 100%; //padding:50px 20px 20px 20px; padding: 45px 10px 20px 5px; overflow: auto; //padding: 60px 20px 20px 18px; .myapps-iframe { width: 100%; height: 100%; overflow: hidden; background: #f3f7fa; padding: 5px 5px 0 5px; box-sizing: border-box; box-shadow: none; .myapps-iframe-box { position: relative; width: 100%; height: 100%; border-radius: 6px; // box-shadow: 0px 2px 4px #dce4e4; border: 1px solid #eee; background: rgba(255, 255, 255, 1); overflow: auto; } } } } .footer { position: absolute; bottom: 0; height: 20px; width: 100%; text-align: center; background: pink; p { line-height: 20px; } } } .nav-bar { position: absolute; bottom: 0; left: 0; top: 64px; width: 250px; //background: $nav-bar-class-bg; background: rgba(255, 255, 255, 1); display: flex; .nav-title { display: inline-block; line-height: 64px; width: 100%; height: 64px; font-size: 16px; color: #fff; padding-left: 0; background: rgba(39, 190, 138, 1); } ul { background: rgba(255, 255, 255, 1); height: calc(100%); li { min-height: 40px; line-height: 40px; .total { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; margin-top: 12px; font-weight: bold; color: #fff; line-height: 1; vertical-align: middle; white-space: nowrap; text-align: center; background-color: red; border-radius: 10px; } .pull-right { float: right; } > a { padding-left: 10px; position: relative; display: block; height: 40px; line-height: 40px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: -webkit-flex; display: flex; align-items: center; cite { overflow: hidden; text-overflow: ellipsis; } .cite-children { display: inline-block; width: calc(100% - 45px); overflow: hidden; text-overflow: ellipsis; } img { margin-right: 8px; } .current-icon { margin-right: 8px; } .icom-img { font-size: 16px; position: absolute; right: 0px; //top: 50%; color: #919397; transition: transform 0.2s linear; -webkit-transition: transform 0.2s linear; img { width: 30px; height: 30px; } } &:hover { // opacity:0.7; // background:rgba(78,116,242,.7); cite { color: #3d85c6; //color:#5A6779; } i { color: #3d85c6; //color:#5A6779; } .current-icon { color: #3d85c6 !important; } } cite { font-size: 14px; //color: #adaeb0; color: #5a6779; } i { font-weight: 500; font-size: 19px; margin-top: -9px; position: absolute; right: 20px; top: 50%; //color: #919397; color: #5a6779; transition: transform 0.5s linear; -webkit-transition: transform 0.5s linear; } .down-arrow { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } } .currentFocus { // background: #4E74F2; cite { color: #3d85c6; //color:#5A6779; } i { color: #3d85c6; //color:#5A6779; } .current-icon { color: #3d85c6 !important; } } > dl { display: none; //background: $nav-bar-classb-bg; background: rgba(255, 255, 255, 1); dd { > a { padding-left: 30px; position: relative; display: block; height: 40px; line-height: 40px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; &:hover { // background: #4E74F2; // opacity:0.7; // background:rgba(78,116,242,.7); cite { color: #3d85c6; //color:#5A6779; } i { color: #3d85c6; //color:#5A6779; } .current-icon { color: #3d85c6 !important; } } .total { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; margin-top: 11px; font-weight: bold; color: #fff; line-height: 1; vertical-align: middle; white-space: nowrap; text-align: center; background-color: red; border-radius: 10px; } cite { font-size: 14px; //color: #adaeb0; color: #5a6779; } i { font-size: 19px; margin-top: 10px; position: absolute; right: 20px; top: 50%; //color: #919397; color: #5a6779; transition: transform 0.5s linear; -webkit-transition: transform 0.5s linear; } .icom-img { font-size: 19px; position: absolute; right: 0px; //top: 50%; color: #919397; transition: transform 0.2s linear; -webkit-transition: transform 0.2s linear; img { width: 30px; height: 30px; } } .down-arrow { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } } .currentFocus { // background: #4E74F2; cite { color: #3d85c6; //color:#5A6779; } i { color: #3d85c6; //color:#5A6779; } .current-icon { color: #3d85c6 !important; } } > ol { display: none; width: 100%!important; background: none!important; li { > a { padding-left: 25px; position: relative; display: block; height: 40px; line-height: 40px; text-overflow: inherit; overflow: inherit; white-space: nowrap; font-size: 1px; span { display: inline-block; width: 20px; color: #fff; } .total { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; margin-top: 11px; font-weight: bold; color: #fff; line-height: 1; vertical-align: middle; white-space: nowrap; text-align: center; background-color: red; border-radius: 10px; } .dot-active { font-size: 12px; } cite { font-size: 14px; //color: #adaeb0; color: #5a6779; } } .currentFocus { // background: #4E74F2; cite { color: #3d85c6; //color:#5A6779; } i { color: #3d85c6; //color:#5A6779; } .current-icon { color: #3d85c6 !important; } } &:hover { // opacity:0.7; // background:rgba(78,116,242,.7); font-weight: 500; cite { color: #3d85c6; //color:#5A6779; } i { color: #3d85c6; //color:#5A6779; } .current-icon { color: #3d85c6 !important; } } } } } } } } } .main-content-first { position: absolute; left: 64px!important;//没有菜单,重置,最高基本 top: 64px; bottom: 0; right: 0; animation: changeF 0s; -moz-animation: changeF 0s; -webkit-animation: changeF 0s; -o-animation: changeF 0s; .main-nav{ left:0px; width: calc(100%); } } @keyframes changeF { from { transform: translateX(0px); transition: all 0s; } to { transform: translateX(0px); transition: all 0s; } } .main-content.main-content-second { position: absolute; left: 250px; top: 64px; bottom: 0; right: 0; animation: change 0s; -moz-animation: change 0s; -webkit-animation: change 0s; -o-animation: change 0s; .main-nav{ left:-187px; width: calc(100% + 187px); } } @keyframes change { from { transform: translateX(0px); transition: all 0.3s; } to { transform: translateX(0px); transition: all 0.3s; } } } #lock-box { position: fixed; top: 0; width: 100%; height: 100%; background: #22262e; z-index: 10; display: none; > div { width: 460px; height: 240px; background: #ffffff; border-radius: 3px; margin: 230px auto 0; position: relative; padding-top: 37px; padding-left: 95px; box-sizing: border-box; } .admin-header-lock-img { width: 74px; height: 74px; padding: 7px; border-radius: 50%; position: absolute; left: 50%; top: -37px; margin-left: -37px; img { width: 60px; height: 60px; border-radius: 50%; } } #lockUserName { font-size: 14px; color: #333636; margin-top: 5px; margin-bottom: 57px; text-align: center; margin-left: -95px; } .lockpwd-tip { width: 202px; height: 36px; padding-left: 10px; padding-top: 7px; font-size: 14px; color: #ff6161; //background: url(../../images/lock-tip.png) no-repeat; position: absolute; top: 79px; left: 93px; box-sizing: border-box; display: none; } .input_btn { font-size: 0; #lockPwd { width: 200px; height: 30px; border-radius: 3px; background: #46d2db; display: inline-block; padding-left: 10px; font-size: 14px; color: #fff; border: none; vertical-align: middle; margin-right: 10px; } #lockPwd::-webkit-input-placeholder { color: #fff; } #unlock { width: 60px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #46d2db; border-radius: 3px; font-size: 14px; border: none; outline: none; vertical-align: middle; } #unlock:hover { background: #18b8c2; } } p { margin-top: 18px; font-size: 14px; color: #ff6161; } } //公告样式 .toast-message { .notice_summary { color: #0095ff; margin-right: 5px; } .bg92cf2c { background: #92cf2c; } .fa { font-size: 26px; position: absolute; left: 14px; padding: 5px; border-radius: 3px; color: #ffffff; top: 20%; } .notice_actor { color: #0095ff; margin-right: 5px; } } //左边所有菜单 .nav-MenuAll { display: flex; flex-direction: column; background: rgb(235, 235, 235); width: 64px; height: 100%; align-items: center; } //左边top菜单 .nav-topMenu { display: flex; flex-direction: column; flex: 1; width: 50px; margin-top: 10px; } .nav-topMenu a { color: rgb(127, 128, 129); font-size: 12px; display: flex; flex-direction: column; align-items: center; padding: 5px 0; margin-bottom: 5px; border-radius: 8px; } .nav-topMenu a:hover { background: rgb(209, 211, 213); } .nav-topMenu a i { } .nav-topMenu a cite { font-size: 12px; } .nav-topMenu a.activeTop { background: rgb(209, 211, 213); } //左边bottom菜单 .nav-bottomMenu { display: flex; flex-direction: column; width: 50px; justify-content: center; align-items: center; margin-bottom: 50px; } .nav-bottomMenu a { font-size: 14px; display: flex; flex-direction: column; position: relative; padding: 5px 5px; margin-bottom: 5px; border-radius: 8px; } .nav-bottomMenu a:hover { background: rgb(209, 211, 213); } .nav-bottomMenu a img { width: 31px; height: 31px; } //左边待办top菜单 .nav-waitMenu { display: flex; flex-direction: column; color: #0f71ff; font-size: 14px; width: 184px; align-items: center; margin-top: 60px; .waittitle { display: flex; height: 40px; line-height: 40px; align-items: center; background: #f5f5fa; cursor: pointer; img { margin-left: 16px; margin-right: 16px; width: 16px; height: 16px; } } } .nav-waitMenu a { padding: 10px 20px; color: #808191; font-size: 14px; border-radius: 8px; margin-bottom: 5px; } .nav-waitMenu a:hover { background: rgb(241, 242, 243); } .nav-waitMenu a cite { margin-left: 12px; } .nav-waitMenu a.activeTop { background: rgb(241, 242, 243); } //左边应用菜单 .nav-appMenus { width: 186px; margin-top:40px; .backHome { display: flex; flex-direction: row; justify-content: space-between; color: #1e263c; align-items: center; padding: 10px 0; .backLtitle { padding-left: 32px; display: flex; align-items: center; cursor: pointer; strong { color: #1e263c; margin-left: 8px; } } .backRapp { padding-right: 8px; cursor: pointer; } } } //应用名称 .appnametitle { background: #f5f5fa; height: 40px; line-height: 40px; text-align: center; } .appnametitle .el-dropdown { color: #0f71ff; } .el-popper[x-placement^="bottom"] { margin-top: 5px; } //elementui-css修改 .el-dropdown-menu--small .el-dropdown-menu__item { line-height: 36px !important; } .dropdownApp { max-height: 800px; overflow: auto; text-align: center; margin-top: 0px !important; } //v5底层去掉版权提示 .formHtml table td[title~="SVNNO:"] { display: none !important; } //底部版权 .footerCopyRight { // position: absolute; // bottom: 0; // left: 0; // right: 0; // background: #fff; text-align: center; color: #b3b8bc; } //elmentui--loading .el-loading-spinner { margin-top: 0; } //elmentui--el-dialog 拖动外面不要滚动条 .el-dialog-noscroll { overflow: hidden; pointer-events: none; } .v-modal { opacity: 0.2; } .el-scrollbar__view{overflow-x: auto;} //表格超出文字换行 .el-table .cell.el-tooltip{white-space:normal!important} //文字都显示14px大小 .el-table td.el-table__cell div{font-size: 12px!important;text-align: center;} //tab标签 .el-tabs__header{} .mainNavOpenCloseExpand{left:0px!important;width:calc(100%)!important;}//根据开关按钮覆盖tagview页签的样式--关的样式