Browse Source

抽取样式

zhouna 3 years ago
parent
commit
d801c8b3e9
2 changed files with 35 additions and 10 deletions
  1. 32 7
      src/css/participle.less
  2. 3 3
      src/js/participle.js

+ 32 - 7
src/css/participle.less

@@ -377,26 +377,51 @@
     // font-family: "PingFang SC", serif;
     font-size: 16px;
 }
+#svg .poplar-annotation-content tspan{
+    fill: #fff;
+}
 /* Label */
 #svg .poplar-annotation-label {
     // font-family: "PingFang SC", serif;
     font-size: 12px;
 }
+#svg text.poplar-annotation-connection{
+    fill: #fff;
+}
 #svg .poplar-annotation-label rect{
     rx: 4px;
-    fill: #d8e5ff;
-    color: #cbddff;
+    fill: rgba(66, 143, 220, 0.25);
+    color: #71FFE6;
+}
+//箭头
+#svg marker path{
+    fill:#C7B02E;
+    color: #C7B02E;
+    stroke: none;
+}
+#svg g rect{
+    fill: none;
+    color: #fff;
+    stroke: none;
 }
 #svg .poplar-annotation-label g rect{
     rx: 4px;
-    fill: #d8e5ff;
-    stroke: #fff;
+    fill: rgba(66, 143, 220, 0.25);
+    color: #71FFE6;
+}
+#svg .poplar-annotation-label g text{
+    fill: #71FFE6;
+}
+#svg g path{
+    fill: none;
+    stroke: #71FFE6;
 }
 #svg .poplar-annotation-label.hover {
     
 }
 #svg .poplar-annotation-label.hover rect{
-    fill: #93b6f9;
+    fill: #398ee340;
+    color: #71FFE6;
 }
 /* Connection */
 #svg .poplar-annotation-connection {
@@ -406,11 +431,11 @@
 /* 例如根元素的id是example时,需要 */
 /* 单独的.poplar-annotation-connection-line不会生效 */
 #svg .poplar-annotation-connection-line {
-    stroke: #FEAC41;
+    stroke: #C7B02E;
 }
 
 #svg .poplar-annotation-connection-line.hover {
-    stroke: #5A8EEE;
+    stroke: #e7cb2f;
 }
 #svg {
     display: none;

+ 3 - 3
src/js/participle.js

@@ -84,8 +84,8 @@ function getEntityPredict(){
         ]
 
     };
-    $("#resultBoxInfo").html(`<p style="color: #aaa;text-align: center;margin-top:50px;font-size:14px;">正在分析...</p>`);
-    $("#svg").html(`<p style="color: #aaa;text-align: center;margin-top:50px;font-size:14px;">正在分析...</p>`);
+    $("#resultBoxInfo").html(`<p style="color: #fff;text-align: center;margin-top:50px;font-size:14px;">正在分析...</p>`);
+    $("#svg").html(`<p style="color: #fff;text-align: center;margin-top:50px;font-size:14px;">正在分析...</p>`);
  
     $(".analying").css('display','block');
     $('table').css("display","none")
@@ -134,7 +134,7 @@ $("#toggleImg").click(()=>{
 $("#toggleImgs").click(()=>{
     $("#resultBoxInfo").css("display","none");
     $("#svg").css("display","block")
-    $("#svg").html(`<p style="color: #aaa;text-align: center;margin-top:50px;font-size:14px;">正在生成,请稍后~</p>`);
+    $("#svg").html(`<p style="color: #fff;text-align: center;margin-top:50px;font-size:14px;">正在生成,请稍后~</p>`);
     
     $("#toggleImg").removeClass("activeBtn")
     $("#toggleImgs").addClass("activeBtn")