.participleWrappper{ width: 100%; min-width: 1200px; .title{ width: 100%; min-width: 1200px; position: relative; height: 40px; line-height: 40px; background-image: linear-gradient(to right, #5A8EEE , #7EABFF); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/ -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/ } .titleTxt{ position: relative; width: 1200px; left: 50%; margin-left: -600px; color: #fff; font-size: 14px; } .titleLogo{ position: relative; top: 3px; height: 20px; } .content{ position: relative; width: 1200px; left: 50%; margin:10px 0 0 -600px; cursor: default; height: 100%; border: 1px solid #f4f4f4; border-radius:2px; // margin: 10px 25px; .contentTitle{ font-size: 16px; height: 44px; line-height: 44px; border-bottom: 1px solid #E6E6E6; font-weight:600; color: #333; position: relative; img { position: absolute; right: 0; top: 12px; width: 20px; height: 20px; } #toggleImg { display: none; } #toggleImgs { display: block; } } .contentInfoBox{ width: 1160px; padding: 0 20px; background: #fff; margin: 0 0 10px 0; position: relative; } .infoBox{ display: block; } .infoTxt{ min-height: 33px; width: 1160px; font-size: 14px; color: #333; resize: none; line-height: 18px; // outline: none; padding: 10px; background: #F7F8FA; border: 1px solid #ccc; box-sizing: border-box; margin: 15px 0 0 0; } .infoTxt:focus{ border: 1px solid #58a6e7; outline: 0; -webkit-box-shadow:#58a6e7 0px 0px 2px; -moz-box-shadow: #58a6e7 0px 0px 2px; box-shadow: #58a6e7 0px 0px 2px; } input::-webkit-input-placeholder{ color: #ccc; }     input:-moz-placeholder,textarea:-moz-placeholder{ color: #ccc; }     input::-moz-placeholder,textarea::-moz-placeholder{ color: #ccc; }     input:-ms-input-placeholder,textarea:-ms-input-placeholder{ color: #ccc; } .btnBox{ height: 36px; padding: 20px 0; position: relative; } .btn{ position: absolute; left: 50%; margin-left: -48px; background-color: #5A8EEE; border-color: #5A8EEE; color: #fff; padding: 9px 20px; text-align: center; border-radius:4px; font-size: 14px; display: inline-block; cursor: pointer; } .example-btn{ color: #5A8EEE; text-align: center; border-radius:4px; font-size: 16px; font-weight: 500; display: inline-block; margin: 0 20px 0 0; cursor: pointer; position: absolute; right: 0; } // .example-btn:hover{ // background-color: #5A8EEE; // border-color: #5A8EEE; // color: #fff; // } .resultBox{ white-space: pre-wrap; min-height: 155px; line-height: 21px; padding: 20px 0; width: 1160px; position: relative; font-size: 14px; // css保留换行符 // white-space: pre-line; } .star{ color: #000; } .entryItem{ display: inline-block; color: blue; position: relative; border-bottom: 1px solid blue; } .type{ position: absolute; top: -35px; white-space: nowrap; left: 50%; transform: translateX(-50%); display: inline-block; background: #7F7F7F; padding: 5px; font-size: 14px; color: #fff; display: none; border-radius:4px; } .trangle{ position: absolute; bottom: -12px; left: 50%; margin-left: -6px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color:#7F7F7F transparent transparent transparent; } .entryItem:hover{ span{ display: inline-block; } } .tableBox{ min-height: 195px; position: relative; } table{ display: none; width: 1160px; border: 1px solid #E6E8F0; box-sizing: border-box; border-collapse: collapse; font-size: 14px; thead{ tr,td{ border: none; } background: #EFF0F9; top: 0; width: 1160px; display:table; table-layout:fixed; } tbody{ display: block; width: 1160px; height:570px; overflow-x:hidden; overflow-y:auto; text-align: center; tr{ width: 1160px; display:table; table-layout:fixed; } } } tr,td{ border: 1px solid #E6E8F0; line-height: 36px; height: 37px; } .tableTitle{ width: 100%; font-size: 14px; font-weight:600; color: #333; padding: 20px 0 10px; } .entry1,.entry2,.relationType{ text-align: center; } .disabled{ opacity: 0.5; filter: "alpha(opacity=50)"; filter: alpha(opacity=50); } .empty{ position: absolute; display: none; width: 120px; height: 140px; top: 50%; left: 50%; margin: -50px 0 0 -51px; // display: none; .emptyImg{ position: relative; width: 100px; left: 10px; } .emptyTxt{ width: 120px; font-size:12px; margin: 20px 0 0 0; text-align: center; color: #aaa; } } } } .example{ height: 48px; position: relative; line-height: 48px; text-indent: 15px; cursor: pointer; color: #000; font-size: 14px; &:hover,&.selected{ background: #F0F5FF; } } .exampleInfo{ background: #F0F5FF; padding: 15px; font-size: 14px; line-height: 21px; display: none; } .exampleBtn{ display: inline-block; width:60px; height:28px; line-height: 28px; border-radius:14px; border:1px solid #5A8EEE; color: #5A8EEE; position: absolute; right: 75px; top: 9px; } .iconSlide{ position: absolute; width: 14px; top: 20px; right: 15px; } #svg > svg { width: 100%; } #svg .poplar-annotation-content { // font-family: "PingFang SC", serif; font-size: 16px; } /* Label */ #svg .poplar-annotation-label { // font-family: "PingFang SC", serif; font-size: 12px; } #svg .poplar-annotation-label rect{ rx: 4px; fill: #d8e5ff; color: #cbddff; } #svg .poplar-annotation-label g rect{ rx: 4px; fill: #d8e5ff; stroke: #fff; } #svg .poplar-annotation-label.hover { } #svg .poplar-annotation-label.hover rect{ fill: #93b6f9; } /* Connection */ #svg .poplar-annotation-connection { // font-family: "PingFang SC", serif; font-size: 11px; } /* 例如根元素的id是example时,需要 */ /* 单独的.poplar-annotation-connection-line不会生效 */ #svg .poplar-annotation-connection-line { stroke: #FEAC41; } #svg .poplar-annotation-connection-line.hover { stroke: #5A8EEE; } #svg { display: none; }