body{ position: relative; background-color: #eef1f5; } body,html{ /*overflow: hidden;*/ width: 100%; height: 100%; } ul,li,ol{ padding-left: 0; margin-bottom: 0!important; list-style: none; } .display-none{ display: none; } .float-left{ float: left; } .float-right{ float: right; } .marginright32{ margin-right: 32px; } .boder-raduis5{ border-radius: 5px; } .border-bottom1{ border-bottom: 1px solid #e5e5e5; } input,button,select,textarea{outline:none;} /*头部--------------------------------------------------*/ header{ min-width: 1400px; height: 80px; width: 100%; background-color: #fff; box-shadow: 0 1px 10px 0 rgba(50,50,50,.2); } .java-logo{ height: 80px; display: inline-block; background: url("../../image/java-logo.png") no-repeat 32px center; } .java-title{ display: inline-block; height: 80px; width: 167px; margin-left: 101px; background: url("../../image/java-title.png") no-repeat 0px center; } .java-loginout{ cursor: pointer; float: right; width: 27px; height: 28px; background: url("../../image/pladata_close.png") no-repeat; margin-top: 26px; margin-right: 32px; } /*左侧栏--------------------------------------------------*/ .main-wrap{ min-width: 1400px; overflow-x: auto; height: calc(100% - 80px); } nav{ width: 200px; height: 100%; } .nav-ul{ box-shadow: 1px 0 10px 0 rgba(50,50,50,.2); background-color: #fff; height: 100%; } .nav-ul li{ height: 85px; line-height: 85px; text-align: center; color: #1f2b3d; font-size: 20px; cursor: pointer; } .nav-ul li:nth-of-type(1){ box-shadow: 0 -1px 0 rgba(50,50,50,.2); background-color: #f9f9f9; } .nav-ul li:nth-of-type(2){ background-color: #fff; } .nav-ul li:nth-of-type(3){ background-color: #f9f9f9; } .nav-ul li:nth-of-type(4){ background-color: #fff; } .nav-ul li:hover{ background-color: rgba(38,190,150,.1); } .nav-ul li.visitActive{ background-color: #2abb9b; color: #fff; } /*内容--------------------------------------------------*/ section{ overflow-x: auto; overflow-y: auto; /*height: 100%;*/ height: calc(100% - 10px); height: -webkit-calc(100% - 10px); height: -moz-calc(100% - 10px); width:calc(100% - 200px); width:-webkit-calc(100% - 200px); width:-moz-calc(100% - 200px); } .section-wrap{ padding: 18px 32px 0; } .link-div{ margin-left: -10px; } .link-div span{ width: 176px; height: 57px; display: inline-block; text-align: center; line-height: 42px; font-size: 18px; color: #fff; cursor: pointer; } /*.link-div span:nth-of-type(1){*/ /*background:url("../../image/link-div-1.png");*/ /*}*/ .link-div span{ background:url("../../image/link-div-2.png"); } .link-div span.linkActive{ background:url("../../image/link-div-1.png"); } .link-con-left{ padding-right: 32px; width: 734px; box-sizing: content-box; } .link-con-left-wrap{ width: 351px; height: 245px; background-color: #fff; float: left; box-shadow:0 0 10px 0 rgba(50,50,50,.1); } .link-con-bottom-wrap{ box-shadow:0 0 10px 0 rgba(50,50,50,.1); width: 734px; background-color: #fff; height: 304px; margin-top: 32px; } .link-con-title{ height: 46px; padding-left: 24px; line-height: 46px; } .link-con-title span{ padding-left: 11px; border-left: 3px solid #2abb9b; color: #000; font-size: 16px; } .link-con-main{ height: 198px; } .link-con-main-1{ position: relative; text-align: center; background: url("../../image/link-con-main-1.png") no-repeat center center; } .circle-animation{ position: absolute; width: 180px; height: 180px; background: url(../../image/circle-animation.png) no-repeat 0 0; top: 9px; left: 85px; animation: circle 5s infinite linear; -webkit-animation: circle 5s infinite linear; -moz-animation: circle 5s infinite linear; } @keyframes circle{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } @-webkit-keyframes circle{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } @-moz-keyframes circle{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } .link-con-main-1 span{ display: inline-block; width: 100%; } .link-con-main-1 span:nth-of-type(1){ font-size: 52px; color: #1f2b3d; padding-top: 50px; } .link-con-main-2{ background: url("../../image/link-con-main-2.png") no-repeat center center; } .link-con-main-2 span{ display: inline-block; width: 100%; text-align: center; color: #fff; } .link-con-main-2 span:nth-of-type(1){ font-size: 52px; padding-top: 50px; } .echart-main{ width: 734px; height:258px ; padding: 24px 0 24px 24px ; } .link-con-right{ width: 336px; height: 581px; background-color: #fff; box-shadow:0 0 10px 0 rgba(50,50,50,.1); } .ranking-list{ height: 534px; background-color: #f9f9f9; overflow-y: auto; overflow-x: hidden; } .ranking-list li{ padding-left: 24px; height: 56px; line-height: 56px; } .ranking-list li:nth-of-type(odd){ background-color: #fff; } .ranking-list li div:nth-of-type(1){ float: left; width:42px; height: 56px; margin-right: 12px; background: url("../../image/ranking-icon.png") no-repeat 0 14px; color: #fff; font-size: 16px; text-align: center; vertical-align:text-top; } .ranking-list li:nth-of-type(1) div:nth-of-type(1){ background: url("../../image/ranking-icon-1.png") no-repeat center 11px; } .ranking-list li:nth-of-type(2) div:nth-of-type(1){ background: url("../../image/ranking-icon-2.png") no-repeat center 11px; } .ranking-list li:nth-of-type(3) div:nth-of-type(1){ background: url("../../image/ranking-icon-3.png") no-repeat center 11px; } .ranking-list li div:nth-of-type(2){ color: #1f2b3d; float: left; width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; margin-right: 10px; } .ranking-list li div:nth-of-type(3){ color: #1f2b3d; font-size: 14px; float: left; } /*API别表----------------------------------------*/ .list-con-title{ height: 44px; line-height: 44px; background-color: #f6f6f6; width: 1092px; } .list-con-title li{ padding-left: 24px; color: #1f2b3d; font-size: 14px; } .list-con-title li:nth-of-type(1){ width: 658px; } .list-con-title li:nth-of-type(2){ width: 434px; } .list-con-wrap{ width: 1092px; height: 537px; overflow-y: auto; } .list-con-wrap li{ height: 40px; line-height: 40px; background-color: #fff; border-bottom: 1px solid #e5e5e5; font-size: 14px; } .list-con-wrap li div:nth-of-type(1){ width: 658px; padding-left: 24px; border-right: 1px solid #e5e5e5; color: #108ee9; } .list-con-wrap li div:nth-of-type(1) span{ cursor: pointer; } .list-con-wrap li div:nth-of-type(2){ /*width: 434px;*/ padding-left: 24px; color: #888990; } /*API详情----------------------------------------*/ .list-detail-wrap{ height: 581px; overflow-y: auto; } .list-detail-title{ font-size: 20px; margin: 24px 0 12px 0; color: #000; } .list-detail-des{ font-size: 13px; color: #626c72; } /*url*/ .list-detail-url{ font-weight: 500; background-color: #f6f6f6; height: 44px; line-height: 44px; color: #626c72; font-size:14px ; } .list-detail-url li:nth-of-type(1){ padding-left: 24px; width: 200px; } .list-detail-url li:nth-of-type(2){ padding-left: 24px; } .list-detail-url-wrap{ background-color: #fff; color: #888990; font-size: 12px; } .list-detail-url-wrap li{ height: 40px; line-height: 40px; border-bottom: 1px solid #e5e5e5; } .list-detail-url-wrap li div:nth-of-type(1){ width: 200px; padding-left: 24px; border-right: 1px solid #e5e5e5; } .list-detail-url-wrap li div:nth-of-type(2){ padding-left: 24px; } /*请求参数*/ .list-detail-parameter{ height: 44px; line-height: 44px; background-color: #f6f6f6; font-size: 14px; color: #626c72; font-weight: 500; } .list-detail-parameter li{ padding-left: 24px; } .list-detail-parameter li:nth-of-type(1),.list-detail-parameter li:nth-of-type(2),.list-detail-parameter li:nth-of-type(3){ width: 200px; } .list-detail-parameter-wrap li{ height: 40px; line-height: 40px; background-color: #fff; color: #888990; font-size: 12px; border-bottom: 1px solid #e5e5e5; } .list-detail-parameter-wrap li div:nth-of-type(1) ,.list-detail-parameter-wrap li div:nth-of-type(2),.list-detail-parameter-wrap li div:nth-of-type(3){ width: 200px; border-right: 1px solid #e5e5e5; padding-left: 24px; } .list-detail-parameter-wrap li div:nth-of-type(4) { padding-left: 24px; } /*请求类型*/ .list-detail-type{ height: 44px; line-height: 44px; background-color: #f6f6f6; color: #626c72; font-weight: 500; } .list-detail-type li{ padding-left: 24px; } .list-detail-type li:nth-of-type(1),.list-detail-type li:nth-of-type(2){ width: 200px; } .list-detail-type-wrap li{ height: 40px; line-height: 40px; background-color: #fff; font-size: 12px; border-bottom: 1px solid #e5e5e5; color: #888990; } .list-detail-type-wrap li div{ padding-left: 24px; } .list-detail-type-wrap li div:nth-of-type(1),.list-detail-type-wrap li div:nth-of-type(2){ border-right: 1px solid #e5e5e5; width: 200px; } /*第三方*/ .thirdparty-title{ margin: 32px 32px 0 32px; width: 1129px; height:160px; background: url("../../image/thirdparty-title.png") no-repeat; background-size: 100% 100%; } .thirdparty-main{ padding-left: 32px; width: 1195px; overflow: hidden; } .thirdparty-main li{ float: left; margin: 12px 32px 0 0px; }