.pop{width:100%;height:100%;position:fixed;left:0;top:0;z-index:100000;background:#fff;} .pop iframe{width:100%;height:100%;} .pop .close{width:25px;height:25px;position:absolute;right:20px;top:20px;background:url(timg.jpg) no-repeat center;background-size:contain;} /* iframe上方div样式 */ .pop .iframe-top { position: fixed; z-index: 9999; width: 100%; background: #162F42; color: #f7f7f7; text-align: center; height: 80px; overflow: hidden; } .pop .iframe-top .back { float: left; width: 120px; border: 1px solid; border-radius: 50px; margin: 20px; position: fixed; z-index: 100; } .pop .iframe-top .next { position: fixed; right: 0px; width: 120px; border: 1px solid; border-radius: 50px; margin: 20px; z-index: 100; } .pop .iframe-top .back,.pop .iframe-top .next { font-size: 18px; padding: 10px 0; height: 40px; line-height: 20px; cursor: pointer; } .pop .iframe-top .back:hover,.pop .iframe-top .next { background: #f7f7f7; color: #1D2E3B; } .pop .iframe-top .next:hover{ background: #DFE1E3; color: #1D2E3B; } .pop .iframe-top .iframe-title { position: absolute; font-size: 18px; top: 15px; left: 0; width: 100%; display: inline-block; } .pop .iframe-top .iframe-title .tip { cursor: pointer; width: 50%; display: inline-block; } .pop .iframe-top .tip { margin: 5px; color: rgba(255,255,255,.8); font-size: 14px; } .iframe-top .iframe-title .ruleEditTitle { width: 60%; margin: 13px auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pop .iframe-top .tableEditNext img { display: none; width: 26px; height: 26px; position: relative; top: -2px; } .pop .iframe-top .tableEditNext span { font-size: 18px; position: relative; top: 1px; } /* iframe下方div样式 */ .pop .bottom.show { overflow-y:hidden; height: 223px; } .pop .bottom { position: fixed; z-index: 9999; width: 100%; -webkit-transition: height .3s linear; -moz-transition: height .3s linear; -ms-transition: height .3s linear; -o-transition: height .3s linear; transition: height .3s linear; color: #f7f7f7; text-align: left; height: 0; overflow-y: scroll; bottom: 0; background: #162F42; } .pop .bottom.show .headLine { bottom: 163px; z-index: 10; } .pop .bottom .headLine { position: fixed; transition: bottom .3s linear; height: 20px; padding: 20px; background: #162F42; right: 0; left: 0; cursor: pointer; border-bottom: solid 1px #858f94; } .pop .bottom .headLine .headLineTip.show { opacity: 1; cursor: pointer; } .pop .bottom .headLine .headLineTip { float: right; position: relative; font-size: 14px; /* right: -25px; */ opacity: 0; -webkit-transition: opacity .3s linear; -moz-transition: opacity .3s linear; -ms-transition: opacity .3s linear; -o-transition: opacity .3s linear; transition: opacity .3s linear; } .pop .bottom.show .tableEditThead { bottom: 122px; } .pop .bottom .tableEditThead { height: 41px; overflow: hidden; position: fixed; left: 0; transition: bottom .3s linear; background: #162F42; white-space: nowrap; } .pop .tableEditThead { bottom: -60px; -webkit-transition: bottom .3s linear; -moz-transition: bottom .3s linear; -ms-transition: bottom .3s linear; -o-transition: bottom .3s linear; z-index: 10; } .pop .bottom .table { min-width: 100%; border-spacing: 0; font-size: 0; position: relative; } .bottom .table .thead { background: #162F42; color: #fff; } .bottom .table .thead .tr { white-space: nowrap; } .bottom .table .thead .th { padding: 10px 20px; text-align: left; height: 40px; cursor: pointer; border-right: solid 1px #4d5a60; display: inline-block; width: 280px; } .bottom .table .thead .th { width: 300px; font-size: 16px; border-bottom: solid 1px #4d5a60; white-space: nowrap; line-height: 20px; } .pop .bottom .table .thead .th span { width: 230px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; vertical-align: middle; } .pop .bottom .table .thead .th img, .main .step.urlInput { vertical-align: middle; } .pop .bottom ._dw_editThead { opacity: .5; } .pop .bottom ._dw_editThead:hover,.pop .bottom ._dw_delThead:hover { opacity: 1; } .pop .bottom ._dw_editThead,.pop .bottom ._dw_delThead { width: 14px; top: -1px; right: -5px; display: inline-block; position: relative; cursor: pointer; } .pop .bottom ._dw_delThead { margin-left: 10px; opacity: .5; } .pop .bottom .table .tbody .tr { height: 123px; width: 300px; display: inline-block; vertical-align: top; border-right: solid 1px #4d5a60; } .pop .bottom .table .tbody .tr .td:hover{ background: #0066a2; } .pop .bottom .table .tbody .tr .td { padding: 10px 20px; color: #fff; width: 280px; overflow: hidden; text-overflow: ellipsis; cursor: default; } .pop .bottom .table .tbody .tr .td, .main .step .bottom .table .thead .th { width: 100%; font-size: 16px; border-bottom: solid 1px #4d5a60; white-space: nowrap; line-height: 20px; } .pop .bottom .tableEditBodyBox { /* overflow-y:hidden; */ position: fixed; right: 0; left: 0; z-index: 5; height: 164px; bottom: -162px; overflow: hidden; overflow-y: scroll; transition: bottom .3s linear; } .pop .bottom .tableSliderLeft { -webkit-transition: bottom .3s linear; -moz-transition: bottom .3s linear; -ms-transition: bottom .3s linear; -o-transition: bottom .3s linear; } .pop .bottom .tableEditBody { white-space: nowrap; } .pop .bottom.show .tableEditBodyBox, .pop .bottom.show .tableSliderLeft, .pop .bottom.show .tableSliderRight, .popUp { bottom: 0; } .pop .bottom .tableSliderLeft { height: 19px; border-right: solid 1px #858f94; background: #162f42; transition: bottom .3s linear; } .pop .bottom .tableSliderLeft, .pop .bottom .tableSliderRight { position: fixed; bottom: -162px; padding: 72px 11px; font-size: 18px; display: none; z-index: 10; cursor: pointer; width: 8px; } .bottom .tableSliderRight { right: 0; height: 19px; border-left: solid 1px #858f94; background: #162f42; -webkit-transition: bottom .3s linear; -moz-transition: bottom .3s linear; -ms-transition: bottom .3s linear; -o-transition: bottom .3s linear; transition: bottom .3s linear; } .tableSliderRight { position: fixed; bottom: -162px; padding: 72px 11px; font-size: 18px; display: none; z-index: 10; cursor: pointer; width: 8px; } /************** 弹窗 修改列名 ********************/ .popUp { position: fixed; /*text-align: center;*/ } .popUp.SHOW { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .popUp.showPrompt { overflow-y: auto;/* 滚动条 */ /*overflow-x:scroll;*/ display: block; } .popUp { top: 0; left: 0; right: 0; width: 100%; height: 100%; background: #000; background: rgba(0,0,0,.45); display: none; z-index: 999999; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; -ms-transition: all .1s linear; -o-transition: all .1s linear; transition: all .1s linear; opacity: 0; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .popUp.showPrompt .prompt { display: table-cell; } .popUp .prompt { display: none; vertical-align: middle; font-size: 0; } .popUp .prompt .inner { background: #fff; border-radius: 14px; overflow: hidden; display: inline-block; width: 700px; } .popUp .prompt .promptTitle { font-size: 20px; color: #333; padding: 40px 50px 30px; } .popUp .prompt .text { font-size: 14px; color: #666; padding: 0 50px; } .popUp .prompt input { width: 360px; color: #333; font-size: 16px; outline: 0; vertical-align: top; padding: 16px 5px; height: 18px; border: 1px solid #bbb; border-radius: 5px; margin-top: 30px; font-family: -apple-system,'SFNS Display',' Helvetica Neue',Helvetica,Arial,'PingFang SC','Noto Sans CJK SC','Source Han Sans CN','Hiragino Sans GB','Lantinghei SC','Heiti SC','Microsoft YaHei',sans-serif; font-weight: 300; } .popUp .prompt .promptBtn>div:hover { opacity: .9; } .popUp .prompt .promptBtn>div { display: inline-block; width: 160px; height: 38px; border-radius: 100px; padding: 16px 0; position: relative; line-height: 10px; font-size: 18px; margin: 40px 10px; } .popUp .prompt .promptBtn>div { cursor: pointer; box-shadow: 0 2px 7px 0 rgba(0,0,0,.09); font-weight: 400; } .popUp .prompt .promptBtnCancel { background: #fff; color: #666; } .popUp .prompt .promptBtnConfirm { background: #28c5fc; background-image: linear-gradient(-180deg,#17C5FF 14%,#11C0FA 100%); color: #fff; }