.lrelate-query-bg { position: fixed; top: 80px; bottom: 0; left: 0; right: 0; background: url(../images/lretate-ic01.png) center no-repeat; background-size: 100% 100%; z-index: -1; } .lrelate-query-bgone { position: fixed; width: 373px; height: 369px; display: inline-block; bottom: 0; right: 0; background: url(../images/lretate-ic02.png) center no-repeat; background-size: 373px 369px; z-index: -1; } .lrelate-con { padding: 49px 0px 50px; } .lrelate-con-header .qua-header-logo { padding-left: 40px; } .lrelate-con-header .qua-header-logo > span { height: 43px; line-height: 43px; } .lrelate-query-con { position: fixed; top: 80px; bottom: 0; left: 0; right: 0; display: flex; display: -webkit-flex; justify-content: center; align-items: center; flex-direction: column; } .lrelate-query-con .lrelate-only-relate { width: 900px; } .lrelate-only-relate { display: flex; display: -webkit-flex; justify-content: flex-start; align-items: flex-start; padding-left: 30px; } .lrelate-only-relate > i { width: 19px; height: 19px; display: inline-block; min-width: 19px; background: url(../images/lretate-ic03.png) center no-repeat; background-size: 19px 19px; } .lrelate-only-relate > p { font-size: 15px; color: #7D92B2; line-height: 20px; font-weight: normal; padding: 0 11px; margin: 0; } .lrelate-query-selinput { padding: 32px 0; } .lrelate-query-selinput .el-input-group { width: 900px; background: #fff; box-shadow: 0 2px 7px #DFE6F1; } .lrelate-query-selinput .el-input-group__prepend { border: none; background: none; } .lrelate-query-selinput .el-input-group__prepend .el-select { width: 157px; position: relative; } .lrelate-query-selinput .el-input-group__prepend .el-select::before { position: absolute; content: ""; width: 1px; height: 38px; display: inline-block; border-right: 1px solid #D3DAE9; right: 0; top: 50%; margin-top: -19px; } .lrelate-query-selinput .el-input-group__prepend .el-select .el-input__inner { font-size: 16px; color: #44494E; padding: 0 40px 0 26px !important; line-height: 60px; } .lrelate-query-selinput .el-input-group__prepend .el-select .el-input__inner::-webkit-input-placeholder { color: #44494e; } .lrelate-query-selinput .el-input-group__prepend .el-select .el-input__inner:-moz-placeholder { color: #44494e; } .lrelate-query-selinput .el-input-group__prepend .el-select .el-input__inner::-moz-placeholder { color: #44494e; } .lrelate-query-selinput .el-input-group__prepend .el-select .el-input__inner:-ms-input-placeholder { color: #44494e; } .lrelate-query-selinput .el-input-group__prepend .el-select .el-input__suffix { right: 19px; } .lrelate-query-selinput .el-select .el-input .el-select__caret { font-size: 17px; color: #000000; } .lrelate-query-selinput .el-input .el-input__inner { border: none; background: none; padding: 0 50px !important; font-size: 16px; color: #44494E; height: 60px; line-height: 60px; } .lrelate-query-selinput .el-input .el-input__inner::-webkit-input-placeholder { color: #9a9a9a; } .lrelate-query-selinput .el-input .el-input__inner:-moz-placeholder { color: #9a9a9a; } .lrelate-query-selinput .el-input .el-input__inner::-moz-placeholder { color: #9a9a9a; } .lrelate-query-selinput .el-input .el-input__inner:-ms-input-placeholder { color: #9a9a9a; } .lrelate-query-selinput .el-input-group__append { background: none; border: none; width: 160px; background: -moz-linear-gradient(left, #2877EB, #5299FF); background: -webkit-linear-gradient(left, #2877EB, #5299FF); background: -o-linear-gradient(left, #2877EB, #5299FF); background: linear-gradient(to right, #2877EB, #5299FF); } .lrelate-query-selinput .el-input-group__append > .el-button { font-size: 20px; color: #fff; font-weight: bold; width: 100%; text-align: center; margin: 0; } .lrelate-query-start { display: flex; display: -webkit-flex; justify-content: flex-start; align-items: center; padding: 13px 0; } .lrelate-query-start .lrelate-query-selinput { flex: auto; padding: 0; text-align: right; } .lrelate-query-start .lrelate-query-selinput .el-input-group { width: 570px; box-shadow: none; } .lrelate-query-start .lrelate-query-selinput .el-input-group__prepend { border: 1px solid #D3DAE9; border-right: none; } .lrelate-query-start .lrelate-query-selinput .el-input-group__prepend .el-select { width: 119px; } .lrelate-query-start .lrelate-query-selinput .el-input-group__prepend .el-select::before { width: 1px; height: 24px; display: inline-block; margin-top: -12px; } .lrelate-query-start .lrelate-query-selinput .el-input-group__prepend .el-select .el-input__inner { font-size: 14px; padding: 0 28px 0 16px !important; border: none; } .lrelate-query-start .lrelate-query-selinput .el-input-group__prepend .el-select .el-input__suffix { right: 5px; } .lrelate-query-start .lrelate-query-selinput .el-input-group__prepend .el-select .el-input__icon { line-height: 32px; } .lrelate-query-start .lrelate-query-selinput .el-select .el-input .el-select__caret { font-size: 12px; color: #000000; } .lrelate-query-start .lrelate-query-selinput .el-input .el-input__inner { border: 1px solid #D3DAE9; border-left: none; border-right: none; padding: 0 10px !important; font-size: 14px; height: 39px; line-height: 39px; } .lrelate-query-start .lrelate-query-selinput .el-input-group__append { width: 100px; } .lrelate-query-start .lrelate-query-selinput .el-input-group__append > .el-button { font-size: 15px; } .lrelate-table-child { width: 22px; height: 22px; display: inline-block; min-width: 22px; background: #DDE8F8; border-radius: 50%; font-size: 12px; color: #3D7DC8; font-weight: bold; text-align: center; line-height: 22px; margin-right: 8px; float: left; } .lrelate-query-table table { width: 100%; border: 1px solid #DFE2E6; } .lrelate-query-table table td { padding: 0 10px; height: 50px; border-bottom: 1px solid #DFE2E6; font-size: 16px; color: #333333; border-left: 1px solid #DFE2E6; } .lrelate-query-table table th { font-size: 15px; color: #555555; height: 46px; border-bottom: 3px solid #348EF8; padding: 0 10px; border-left: 1px solid #DFE2E6; } .lrelate-query-table table th:first-child { border-left: none; } .lrelate-query-table table tbody tr:nth-child(2n-1) { background: #FAFAFA; } .lrelate-query-table table tbody tr td:first-child { border-left: none; } .lrelate-table-check { width: 56px; text-align: center; } .lrelate-table-check > input[type="checkbox"] { width: 18px; height: 18px; border-color: #707070; } .lrelate-table-text { cursor: pointer; } .lrelate-table-text > span { font-size: 16px; color: #333333; max-width: 340px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lrelate-table-text:hover > span { color: #FC787C; } .lrelate-parent-bg { position: fixed; top: 70px; left: 0; right: 0; height: 471px; background: url(../images/lretate-ic05.png) center no-repeat; background-size: 100% 471px; z-index: -1; } .lrelate-parent-task { display: flex; display: -webkit-flex; justify-content: flex-start; align-items: center; } .lrelate-parent-task .lrelate-see-task { margin-left: 5px; } .lrelate-parent-taskleft { display: flex; display: -webkit-flex; justify-content: flex-start; align-items: center; background: #fff; height: 50px; padding: 0 16px; width: 1075px; flex: auto; } .lrelate-parent-taskleft > span { font-size: 16px; color: #000000; font-weight: bold; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; padding: 0 12px; } .lrelate-see-task { background: -moz-linear-gradient(45deg, #FF8800, #F37A00); background: -webkit-linear-gradient(45deg, #FF8800, #F37A00); background: -o-linear-gradient(45deg, #FF8800, #F37A00); background: linear-gradient(45deg, #FF8800, #F37A00); border: none; white-space: nowrap; min-width: 120px; height: 50px; font-size: 15px; color: #fff; font-weight: bold; display: flex; display: -webkit-flex; justify-content: center; align-items: center; padding: 10px; letter-spacing: 1px; } .lrelate-see-task > i { width: 10px; height: 17px; display: inline-block; background: url(../images/lretate-ic06.png) center no-repeat; margin-left: 8px; transition: transform 0.3s linear 0s; -webkit-transition: transform 0.3s linear 0s; -moz-transition: transform 0.3s linear 0s; -ms-transition: transform 0.3s linear 0s; } .lrelate-see-task:hover > i { transform: translateX(5px); -webkit-transform: translateX(5px); -moz-transform: translateX(5px); -ms-transform: translateX(5px); -o-transform: translateX(5px); }