@import './reset.less'; @import './roll.css'; .container{ height: 100%; } .tips{ width: 420px; height: 24px; position: relative; background: #EDEEEF; top: -19px; text-align: left; & img{ margin-left: 16px; margin-right: 4px; } & span{ font-size: 12px; font-weight: 400; color: #999999; line-height: 24px; text-align: left; } } .header{ /*position: fixed;*/ width: 100%; height:@headerHt; line-height: @headerHt; font-size: 16px; border-bottom: 1px #E2E5EF solid; background: #fff; /*top:0; background:linear-gradient(123deg,#00A1FF 0%,rgba(126,171,255,1) 100%);; text-indent: 20px; color: #fff;*/ .login{ margin-right: 20px; height: @headerHt; line-height: @headerHt; position: relative; &:after{ content: " "; display: inline-block; cursor: pointer; position: absolute; right: 0; top:22px; width: 10px; height: 6px; background: url("../images/arrow_down.png") no-repeat; background-size: 10px 6px; } //设置 .userAction { background-color: #fff; border-radius: 2px; display: none; text-indent: 0; width: 100px; position: absolute; right: -15px; top:42px; box-shadow:0px 4px 20px -3px rgba(59,89,126,0.3); li { line-height: 36px; text-align: center; cursor: pointer; color: #777777; a{ color: #777777; display: block; } &:hover,a:hover{ color: @activeColor; } } } } .setting{ display: inline-block; height:26px; line-height: 26px; margin: 12px 0 0 0; background: url("../images/head.png") no-repeat; padding:0 22px 0 35px; /*color: #fff;*/ text-decoration: none; } img{ vertical-align: middle; margin-right: 10px; } .title span{ display: inline-block; height: 20px; line-height: 20px; color: #333; // font-weight: bold; font-size: 16px; text-indent: 15px; } .title .qiehuan { border: 1px solid #506597; height: 28px; line-height: 28px; font-size: 14px; border-radius: 14px; padding: 0 15px 0 0; margin-left: 20px; cursor: pointer; i { color: #A5ADBF; } img { width: 12px; margin-right: 5px; } &:hover { i { color: #00A1FF; } border: 1px solid #00A1FF; } } } .console-cont { .header { background: @themeColor; border-bottom: 1px @themeBorderClr solid; .title span, .login a { color: @fstColor; } } .login:after{ background: url("../images/icon_down.png") no-repeat; background-size: 10px 6px; } .main-body { background: @activeBg; } } .main-body{ height: 100%; /*margin-top:@headerHt;*/ } .menu{ width: @menuWt; height: 100%; background: @themeColor; border-right: 1px @darkLightBorderColor solid; box-sizing: border-box; overflow: hidden; padding-top: 5px; position: relative; padding-bottom: 50px; .logo{ margin-bottom: 44px; text-indent: 22px; height: 45px; img { width: 150px; position: relative; top: 5px; } } &>a{ position: absolute; top: 50%; right: 0; // z-index: 1; } &>ul{ overflow-x: hidden; overflow-y: auto; white-space: nowrap; height: calc(100% - 90px); &>li{ text-indent: 42px; background: url("../images/module.png") 16px 12px no-repeat; margin-bottom: 10px; /*background-color: red;*/ } } // .menuList{ // overflow-x: hidden; // overflow-y: hidden; // white-space: nowrap; // // height: calc(100% - 90px); // &>li{ // text-indent: 42px; // // background: url("../images/module.png") 16px 12px no-repeat; // margin-bottom: 10px; // } // } .YH-KZT,.YH-KZTKS{ background: url("../images/home.png") 16px 10px no-repeat; &.active{ background: url("../images/home_a.png") @activeBg 16px 10px no-repeat; } } .YH-ZKK,.YH-KSZR{ background: url("../images/data.png") 16px 10px no-repeat; &.active{ background: url("../images/data_a.png") @activeBg 16px 10px no-repeat; } } .YH-JCSJWH{ background: url("../images/item.png") 16px 13px no-repeat; &.active{ background: url("../images/item_a.png") @activeBg 16px 13px no-repeat; } } .YH-BLZK{ background: url("../images/ba.png") 16px 10px no-repeat; &.active{ background: url("../images/ba_a.png") @activeBg 16px 10px no-repeat; } } .YH-QXGL{ background: url("../images/qxgl.png") 16px 11px no-repeat; &.active{ background: url("../images/qxgl_a.png") @activeBg 16px 11px no-repeat; } } .YH-YCSJJK{ background: url("../images/un.png") 16px 11px no-repeat; &.active,&.list-1-show{ background: url("../images/un_a.png") @activeBg 16px 11px no-repeat; } } .YH-SJFX{ background: url("../images/un.png") 16px 11px no-repeat; &.active{ background: url("../images/un_a.png") @activeBg 16px 11px no-repeat; } } .YH-SJFXKS,.YH-SJFX{ background: url("../images/data-sys.png") 16px 11px no-repeat; &.active{ background: url("../images/data-sys_a.png") @activeBg 16px 11px no-repeat; } } .YH-SJBJ{ background: url("../images/data-edit.png") 16px 11px no-repeat; &.active{ background: url("../images/data-edit_a.png") @activeBg 16px 11px no-repeat; } } .slide-btn{ display: inline-block; } .active{ color: @activeColor; /*background: @activeBg; border-right: 3px @activeColor solid;*/ } .page:hover{ color: @activeColor; } .list-1,.list-1-show{ position: relative; &:after{ content: " "; display: inline-block; position: absolute; left: @menuWt+(-30px); top:18px; width: 10px; height: 6px; background: url("../images/arrow_down.png") no-repeat 50% 50%; background-size: 10px 6px; } p{ color: @fstColor; } p:hover { color: @activeColor; } &.slide-up:after{ transform: rotate(180deg); -webkit-transform: rotate(180deg); } ul{ display: none; li.page{ text-indent: 52px; color: @secColor; &.active{ color: @activeColor; opacity: 1; } &:hover { color: @activeColor; } } } } .list-1-show{ background-color: @activeBg; &:after{ transform: rotate(180deg); -webkit-transform: rotate(180deg); } } li{ line-height: @menuLiHt; text-indent: 15px; cursor: pointer; color: @fstColor; } .copy-right{ /*position: fixed; bottom: 0px;*/ width: @menuWt+(-1px); text-align: center; height: 50px; line-height: 50px; background: @themeColor; border-top: 1px @themeBorderClr solid; border-right: 1px rgba(74, 93, 142, 0.5) solid; box-sizing: border-box; p{ font-size:12px; color: @trdColor; white-space: nowrap; } } } .menu-mini{ display: none; width: 60px; height: 100%; background: @themeColor; position: relative; border-right: 1px @themeBorderClr solid; box-sizing: border-box; .logo{ height: 50px; line-height: 50px; text-align: center; color: #DEE5EF; margin-bottom: 44px; } &>a{ position: absolute; top: 50%; right: 0; // z-index: 1; } &>ul>li{ width: 100%; height: 40px; line-height: 40px; margin-bottom: 8px; background: url("../images/module.png") center no-repeat; position: relative; cursor: pointer; &:hover{ ul{ display: block; } } & ul{ display: none; left: 60px; position: absolute; width: 186px; background: @themeColor; border-radius:4px; box-shadow:1px 2px 20px -3px #000512; margin-left: 3px; &:before{ content: ""; display: inline-block; width: 8px; height: 32px; background: url("../images/ar.png") no-repeat; position: absolute; left: -8px; } li{ height: 38px; line-height: 38px; color: #A5ADBF; text-indent: 30px; border-radius: 4px; &:hover,&.active{ background: @activeBg; color: @activeColor; } } } } .YH-KZT,.YH-KZTKS{ background: url("../images/home.png") 20px 10px no-repeat; &:hover,&.active{ background: url("../images/home_a.png") @activeBg 20px 10px no-repeat; } } .YH-ZKK,.YH-KSZR{ background: url("../images/data.png") 21px 10px no-repeat; &:hover,&.active{ background: url("../images/data_a.png") @activeBg 21px 10px no-repeat; } } .YH-JCSJWH{ background: url("../images/item.png") 22px 13px no-repeat; &:hover,&.active{ background: url("../images/item_a.png") @activeBg 22px 13px no-repeat; } } .YH-BLZK{ background: url("../images/ba.png") 23px 10px no-repeat; &:hover,&.active{ background: url("../images/ba_a.png") @activeBg 23px 10px no-repeat; } } .YH-QXGL{ background: url("../images/qxgl.png") 25px 11px no-repeat; &:hover,&.active{ background: url("../images/qxgl_a.png") @activeBg 25px 11px no-repeat; } } .YH-YCSJJK{ background: url("../images/un.png") 25px 11px no-repeat; &:hover,&.active,&.list-1-show{ background: url("../images/un_a.png") @activeBg 25px 11px no-repeat; } } .YH-SJFX{ background: url("../images/un.png") 24px 11px no-repeat; &.active{ background: url("../images/un_a.png") @activeBg 24px 11px no-repeat; } } .YH-SJFXKS,.YH-SJFX{ background: url("../images/data-sys.png") 24px 11px no-repeat; &.active{ background: url("../images/data-sys_a.png") @activeBg 24px 11px no-repeat; } } } .main{ margin-left:@menuWt; height: 100%; // overflow: auto; /*border: 10px solid #f5f5f5;*/ iframe { width: 100%; height: 100%; overflow: auto; } .dateDetail { font-size: 12px; color: @secColor; margin-right: 30px; font-weight: normal; } } .moduleMsgBox{ .moduleMsgContent{ position: fixed; left: 50%; top: 50%; width: 400px; height:208px; margin: -104px 0 0 -200px; background: #fff; border-radius:4px; } .moduleMsgTitle{ position: relative; height: 40px; padding: 0 0 0 20px; line-height: 40px; border-bottom: 1px solid #E2E5EF; font-size: 14px; color: #1E1E1E; } .iconClose{ width: 40px; position: absolute; right: 0; cursor: pointer; } .moduleMsgInfo{ text-align: center; position: relative; top: 30px; } .moduleMsgBtn{ position: relative; text-align: center; top: 81px; } .saveModuleEdit{ display: inline-block; color: #fff; width:80px; height:36px; line-height: 36px; text-align: center; background:#00A1FF; border-radius:4px; cursor: pointer; } } .midifyMsgBox{ .midifyMsgContent{ position: fixed; left: 50%; top: 50%; width: 400px; height:256px; margin: -128px 0 0 -200px; background: #fff; border-radius:4px; } .midifyMsgContentDel { margin: -110px 0 0 -150px; } .remidifyMsgContent{ position: fixed; left: 50%; top: 50%; width: 700px; height:256px; margin: -128px 0 0 -200px; background: #fff; border-radius:4px; .disL { float: left; } .disR { float: left; } .abnormalTxtS { width: 638px; margin-left: 30px; position: relative; top: -14px; } .abnormalStatusLis { width: 218px; max-height: 200px; overflow: auto; li { width: 218px; } } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .abnormalAlls { background-color: #f5f5f5; padding: 0 10px; box-sizing: border-box; display: inline-block; height: 34px; line-height: 34px; width: 220px; } .neck { width: 20px; position: relative; left: 15px; top: 25px; } .abnormalAll { width: 220px !important; } .abnormalBtn { top: -10px; } .abnormalLeft { padding-left: 30px; text-align: left; width: auto !important; } .itemInfoRight { display: block; width: auto; } } .midifyMsgTitle{ position: relative; height: 40px; padding: 0 0 0 20px; line-height: 40px; border-bottom: 1px solid #E2E5EF; font-size: 14px; color: #1E1E1E; } .itemMsgInfoBox{ line-height: 34px; margin: 0 0 10px 0; position: relative; top: 10px; } .itemInfoRight{ display: inline-block; width: 190px; input{ width: 100px; box-sizing: border-box; border: 1px solid #E2E5EF; height: 34px; line-height: 34px; border-radius: 2px; padding: 0 10px; &:focus{ border-color: @activeColor; outline: 0; -webkit-box-shadow:@activeColor 0px 0px 2px; -moz-box-shadow: @activeColor 0px 0px 2px; box-shadow: @activeColor 0px 0px 2px; } } } .itemMsgLab{ display: inline-block; width: 180px; text-align: right; color: #777; } .iconClose{ width: 40px; position: absolute; right: 0; cursor: pointer; } .itemMsgInfoTips{ color: red; font-size: 14px; text-align: center; display: none; position: absolute; width: 100%; } .midifyMsgBtn{ position: relative; text-align: center; top: 36px; } .midifyEdit{ display: inline-block; color: #fff; width:80px; height:36px; line-height: 36px; text-align: center; background:#00A1FF; border-radius:4px; cursor: pointer; } } .itemMsgBox{ .itemMsgContent{ position: fixed; left: 50%; top: 50%; width: 500px; height:458px; margin: -234px 0 0 -250px; background: #fff; border-radius:4px; } .itemMsgTitle{ position: relative; height: 40px; padding: 0 0 0 20px; line-height: 40px; border-bottom: 1px solid #E2E5EF; font-size: 14px; color: #1E1E1E; } .iconClose{ width: 40px; position: absolute; right: 0; cursor: pointer; } .itemMsgContentBox{ margin: 30px 0 0 0; } .itemMsgInfoBox{ line-height: 34px; margin: 0 0 10px 0; position: relative; } .itemInfoRight{ display: inline-block; width: 300px; input{ width: 280px; box-sizing: border-box; border: 1px solid #E2E5EF; height: 34px; line-height: 34px; border-radius: 2px; padding: 0 10px; &:focus{ border-color: @activeColor; outline: 0; -webkit-box-shadow:@activeColor 0px 0px 2px; -moz-box-shadow: @activeColor 0px 0px 2px; box-shadow: @activeColor 0px 0px 2px; } } } .itemMsgLab{ display: inline-block; width: 150px; text-align: right; color: #777; } .itemMsgInfoTips{ position: absolute; color: red; font-size: 14px; text-align: center; width: 100%; height: 14px; top: 27px; display: none; } .switchImg{ position: relative; top: 3px; width: 30px; } .imgInfo{ display: inline-block; margin: 0 0 0 10px; } .confirmEditBox{ position: relative; text-align: center; top: 20px; } .confirmEdit{ display: inline-block; color: #fff; width:80px; height:36px; line-height: 36px; text-align: center; background:#00A1FF; border-radius:4px; cursor: pointer; } } .dialogBox{ .dialogBoxMask{ width: 100%; height: 100%; position: absolute; background: #000; opacity: 0.5; z-index: 1; border-radius: 10px; } .dialogBoxMsg{ position: absolute; z-index: 2; width: 100%; height: 100%; color: #fff; text-align: center; line-height: 50px; } position: fixed; left: 50%; top: 50%; width: 300px; height: 50px; margin: -25px 0 0 -150px; text-align: center; line-height: 50px; border-radius: 10px; } .cloInfobox{ position: fixed; width: 400px; height: 496px; top: 50%; margin-top: -248px; left: 50%; margin-left: -200px; /* z-index: 155; */ background: #fff; border-radius:4px; .cloInfoTitle{ height: 40px; line-height: 40px; border-bottom: 1px solid #E2E5EF; position: relative; } .cloInfo{ position: relative; left: 50%; margin-left: -150px; margin-top: 30px; width: 300px; height: 330px; } .closePort { height: 180px; } .cloInfoTitleTxt{ display: inline-block; height: 40px; line-height: 40px; margin-left: 20px; } .colTabInfoBox{ height: 302px; overflow-y: auto; border: 1px solid #E2E5EF; box-sizing: border-box; } .colTabTitle{ background: #EFF0F9; .colName{ text-align: center; } } .colTabTitle,.colTabInfo{ height: 30px; box-sizing: border-box; line-height: 30px; } .colOpera,.colName{ display: inline-block; width: 92px; position: relative; } .colName{ width: 182px; } .iconClose{ position: absolute; right: 0; cursor: pointer; } .colTabInfo:nth-child(2n){ background: #EFF1F6; } .toggleSelectCol,.toggleSelectColAll img{ position: relative; margin:0 10px 0 24px; top: 3px; width: 14px; cursor: pointer; } .toggleSelectColAll{ cursor: pointer; } .pageSetUp,.pageSetDown{ width: 10px; cursor: pointer; } .pageOrder{ display: inline-block; position: absolute; right: 32px; } .pageSetUpBox,.pageSetDownBox{ position: relative; display: inline-block; width: 15px; } .btnBox{ position: absolute; cursor: pointer; bottom: 0px; height: 64px; } .cancalColSet,.saveColSet{ display: inline-block; width:80px; height:34px; text-align: center; line-height: 32px; border-radius:4px; border: 1px solid #00A1FF; color: #00A1FF; position: relative; left: 110px; } .saveColSet{ background: #00A1FF; color: #fff; margin-left: 20px; } .savePort { margin-left: 30px; } .canclePort { left: 100px; } .selectDateTip { position: relative; left: -30px; top: -15px; } .selectDate { padding-left: 15px; margin: 8px 0; cursor: pointer; input { cursor: pointer; margin-right: 10px; } label { cursor: pointer; } } .defaultColSet{ position: relative; left: 50px; cursor: pointer; } } .cloInfoPort { height: auto; margin-top: -140px; } .mask { position: fixed; width: 100%; height: 100%; background: #000; opacity: 0.5; left: 0; top: 0; } .loadingImg{ position: fixed; left: 50%; top: 50%; width: 60px; margin: -30px 0 0 -30px; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance: textfield; } .itemContentBoxLis { width: 220px; height: 365px; margin: 30px 20px 20px 70px; border: 1px solid #EFF0F9; .title { height: 40px; line-height: 40px; background-color: #EFF0F9; text-align: center; } .partPub { padding-top: 10px; height: 315px; overflow: auto; li { padding: 8px 20px; cursor: pointer; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } img { width: 14px; height: 14px; position: relative; top: 2px; margin-right: 10px; } } input:focus{ border: 1px solid @activeColor ; outline: 0; -webkit-box-shadow:@activeColor 0px 0px 2px; -moz-box-shadow: @activeColor 0px 0px 2px; box-shadow: @activeColor 0px 0px 2px; } } .itemContentBoxLisL { float: left; } .itemContentBoxLisR { margin-left: 20px; margin-right: 70px; float: right; } .activeGo { position: absolute; width: 40px; height: 60px; left: 50%; top: 50%; margin-left: -20px; margin-top: -45px; img { width: 40px; height: 22px; cursor: pointer; } .btm { margin-top: 15px; } } //abnormal .abnormalStatusLis { position: absolute; left: 104px; top: 35px; border: 1px solid #E2E5EF; z-index: 999; background-color: #fff; width: 158px; display: none; li { height: 34px; line-height: 34px; width: 160px; padding-left: 10px; box-sizing: border-box; width: 160px; &:hover { background-color: #EEF4FF; cursor: pointer; } } input:focus{ border: 1px solid @activeColor ; outline: 0; -webkit-box-shadow:@activeColor 0px 0px 2px; -moz-box-shadow: @activeColor 0px 0px 2px; box-shadow: @activeColor 0px 0px 2px; } } .abnormalAll { width: 160px !important; height: 34px; line-height: 34px; border: 1px solid #E2E5EF; padding: 0 20px 0 10px; display: inline-block; box-sizing: border-box; border-radius:4px; position: relative; img { width: 10px; float: left; position: absolute; top: 14px; right: 7px; } } .abnormalLeft { width: 100px !important; } .abnormalMark { vertical-align: top; position: relative; top: -12px; } .abnormalTxt { width: 240px; height: 120px; border: 1px solid #E2E5EF; border-radius: 4px; resize: none; padding: 10px; box-sizing: border-box; overflow: auto; } textarea:focus{ border: 1px solid @activeColor ; outline: 0; -webkit-box-shadow:@activeColor 0px 0px 2px; -moz-box-shadow: @activeColor 0px 0px 2px; box-shadow: @activeColor 0px 0px 2px; } .midifyMsgContent.abnormal { height: 320px; } .midifyMsgContent.abnormalDel { height: 280px; } .midifyMsgBtn.abnormalBtn { top: 22px; } .midifyEditDel{ background-color: #fff !important; color: #FF4D4F !important; border: 1px solid #FF4D4F !important; margin-right: 15px; } .midifyEditQuite{ color: #fff !important; border: 1px solid #00A1FF !important; background-color: #00A1FF !important; } .delTips { text-align: center; padding: 40px 0; } .midifyMsgBtnDel { top: 10px !important; } .midifyMsgContentDel { height: 220px !important; width: 300px !important; } /**********修改密码框*********/ .modalAction{ position: relative; // padding: 20px; input { border: 1px solid #E2E5EF; width: 300px; height: 34px; line-height: 34px; border-radius: 3px; margin: 5px 0; padding: 0 10px; box-sizing: border-box; } p {position: relative;} p span { width: 94px; display: inline-block; text-align: right; color: #3A3A3A; } .label{ i{ margin-right: 3px; color:#EE3232 ; } } & img{ margin-right: 5px; } & b{ font-weight: 400; } .eye{ margin-left: 5px; cursor: pointer; } .warning{ display: none; color: #FF4D4F; text-align: left; margin:0 0 0 90px; font-size: 12px; img{ width: 16px; vertical-align: text-bottom; } } } .alertModal{ .toast{ position: absolute; top: 50%; left: 50%; background: #666; text-align: center; width: 184px; height: 112px; margin:-56px 0 0 -92px; border-radius: 4px; img{ width: 40px; height: 40px; margin-top: 20px; } p{ color: #fff; } } .btns{ margin-top:30px; .sure{ background: #E4E3E3; border-color: #E4E3E3; cursor: not-allowed; &.active{ background: #00A1FF; border-color: #1E9FFF; cursor: pointer; } } } .psd-checkbox{ position: absolute; left: 50%; top:50%; margin-left: 255px; margin-top: -47px; padding: 22px 19px; background: #fff; border-radius:4px; width: 149px; height: 154px; color: #333; .label{ color: #999; } p{ margin-bottom: 4px; i{ margin:0 5px 0 30px; display: inline-block; width: 14px; height: 14px; background: url("../images/unok.png") no-repeat; } &.active i{ background: url("../images/ok.png") no-repeat; } } } }