信息抽取样式

src/css/common.less

@@ -1,8 +1,8 @@
 html, body{
     background: url("../images/bg2.png") no-repeat;
     background-size: cover;
-    height: 100vh;
-    overflow: hidden;
+    /*height: 100vh;
+    overflow: hidden;*/
 }
 *{
     margin: 0;
@@ -150,16 +150,47 @@ input:focus,textarea:focus{
     -moz-box-shadow: #58a6e7 0px 0px 2px;
     box-shadow: #58a6e7 0px 0px 2px;
 }
-input::-webkit-input-placeholder{
-    color: #c3ebf5;
+::-webkit-input-placeholder{
+    color: #6794A8;
 }
     
-input:-moz-placeholder,textarea:-moz-placeholder{
-    color: #c3ebf5;
+:-moz-placeholder,:-moz-placeholder{
+    color: #6794A8;
+}
+::-moz-placeholder,::-moz-placeholder{
+    color: #6794A8;
 }
-input::-moz-placeholder,textarea::-moz-placeholder{
-    color: #c3ebf5;
+:-ms-input-placeholder,:-ms-input-placeholder{
+    color: #6794A8;
+}
+
+/* chrome & safari 浏览器 */
+/*滚动条整体部分,必须要设置*/
+/*滚动条的上下两端的按钮*/
+.right_content::-webkit-scrollbar-button,
+ul::-webkit-scrollbar-button {
+  height: 0;
+  background-color: transparent;
+}
+::-webkit-scrollbar{
+  /*滚动条整体样式*/
+  width: 5px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 5px;
+  background: transparent;
 }
-input:-ms-input-placeholder,textarea:-ms-input-placeholder{
-    color: #c3ebf5;
+
+::-webkit-scrollbar-thumb{
+  /*滚动条里面小方块*/
+  width: 5px;
+  height: 5px;
+  border-radius: 5px;
+  background: #6794A8;
+}
+
+::-webkit-scrollbar-track{
+  /*滚动条里面轨道*/
+  border-radius: 5px;
+  background: transparent;
+  opacity: .2;
 }

src/css/participle.less

@@ -39,21 +39,18 @@
     }*/
     .content{
         position: relative;
-        width: 1200px;
-        left: 50%;
-        margin:10px 0 0  -600px;
+        width: 62.5%;
         cursor: default;
         height: 100%;
-        border: 1px solid #f4f4f4;
         border-radius:2px;
-        // margin: 10px 25px;  
+        margin: 10px auto;
         .contentTitle{
             font-size: 16px;
             height: 44px;
             line-height: 44px;
-            border-bottom: 1px solid #E6E6E6;
+            border-bottom: 1px solid #6794A8;
             font-weight:600;
-            color: #333;
+            color: #fff;
             position: relative;
             img {
                 position: absolute;
@@ -64,7 +61,7 @@
             }
             #toggleImg, #toggleImgs{
                 position: absolute;
-                color: #5A8EEE;
+                color: #5BBBFF;
                 display: block;
                 top: 6px;
                 width: 48px;
@@ -74,7 +71,7 @@
                 cursor: pointer;
                 font-size: 14px;
                 font-weight: 400;
-                border: 1px solid #5A8EEE;
+                border: 1px solid #5BBBFF;
                 box-sizing: border-box;
                 display: none;
             }
@@ -89,14 +86,14 @@
                 // display: block;
             }
             #toggleImg.activeBtn,#toggleImgs.activeBtn{
-                background: #5A8EEE;
+                background: #5BBBFF;
                 color: #fff;
             }
         }
         .contentInfoBox{
-            width: 1160px;
+            width: 100%;
             padding: 0 20px;
-            background: #fff;
+            background: rgba(66, 143, 220, 0.25);;
             margin: 0 0 10px 0;
             position: relative;
         }
@@ -105,15 +102,16 @@
         }
         .infoTxt{
             min-height: 33px;
-            width: 1160px;
+            width: 100%;
             font-size: 14px;
-            color: #333;
+            color: #fff;
             resize: none;
             line-height: 18px;
             // outline: none;
             padding: 10px;
-            background: #F7F8FA;
-            border: 1px solid #ccc;
+            background: #0D2C53;
+            border: 1px solid #6794A8;
+            border-radius: 4px;
             box-sizing: border-box;
             margin: 15px 0 0 0;
         }
@@ -148,8 +146,7 @@
             position: absolute;
             left: 50%;
             margin-left: -48px;
-            background-color: #5A8EEE;
-            border-color: #5A8EEE;
+            background: linear-gradient(270deg, #00B0FE 0%, #006CE7 100%);
             color: #fff;
             padding: 9px 20px;
             text-align: center;
@@ -159,7 +156,7 @@
             cursor: pointer;
         }
         .example-btn{
-            color: #5A8EEE;
+            color: #5BBBFF;
             text-align: center;
             border-radius:4px;
             font-size: 16px;
@@ -180,20 +177,21 @@
             min-height: 155px;
             line-height: 21px;
             padding: 20px 0;
-            width: 1160px;
+            width: 100%;
             position: relative;
             font-size: 14px;
+            color: #fff;
             // css保留换行符
             // white-space: pre-line;
         }
         .star{
-            color: #000;
+            color: #fff;
         }
         .entryItem{
             display: inline-block;
-            color: blue;
+            color: #71FFE6;
             position: relative;
-            border-bottom: 1px solid blue;
+            border-bottom: 1px solid #71FFE6;
         }
         .type{
             position: absolute;
@@ -233,7 +231,7 @@
         }
         table{
             display: none;
-            width: 1160px;
+            width: 100%;
             border: 1px solid #E6E8F0;
             box-sizing: border-box;
             border-collapse: collapse;
@@ -242,38 +240,45 @@
                 tr,td{
                     border: none;
                 }
-                
-                background: #EFF0F9;
+                width: 100%;
+                background: #0D2C53;
+                color: #5BBBFF;
                 top: 0;
-                width: 1160px;
                 display:table;
                 table-layout:fixed;
 
             }
             tbody{
                 display: block;
-                width: 1160px;
+                width: 100%;
                 max-height:570px;
                 overflow-x:hidden;
                 overflow-y:auto;
                 text-align: center;
                 tr{
-                    width: 1160px;
+                    width: 100%;
                     display:table;
                     table-layout:fixed;
                 }
             }
         }
-        tr,td{
+        td{
             border: 1px solid #E6E8F0;
             line-height: 36px;
             height: 37px;
+            color: #fff;
+            border-bottom: none
+        }
+        tr{
+            line-height: 36px;
+            height: 37px;
+            color: #fff;
         }
         .tableTitle{
             width: 100%;
             font-size: 14px;
             font-weight:600;
-            color: #333;
+            color: #fff;
             padding: 20px 0 10px;
             display: none;
         }
@@ -439,7 +444,7 @@
 
         }
         td {
-            border: 1px solid #ccc;
+            border: 1px solid #E6E8F0;
             font-size: 14px;
             text-align: center;
             padding: 5px 10px;

src/html/participle.html

@@ -13,9 +13,9 @@
 	<div class="participleWrappper wrappper">
 		<div class="title">
 			<div class="titleTxt">
-				<img class="titleLogo ltLogo" src="./images/logo.png" alt="logo">
-				 <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo">
-				<span class="titleInfo">|&nbsp;&nbsp;电子病历信息抽取</span>
+				<!--<img class="titleLogo ltLogo" src="./images/logo.png" alt="logo">
+				 <img class="titleLogo titleLogoShaiyifu" src="./images/logo_shaoyifu.png" alt="logo">-->
+				<span class="titleInfo">电子病历信息抽取</span>
 			</div>
 		</div>
 		<div class="content">
@@ -65,7 +65,7 @@
 					</div>
 					<p class="tableTitle">关系列表</p>
 					<div class="tableWrapper">
-						<p class="analying" style="color: #aaa;text-align: center;margin-top:50px;font-size: 14px;">正在分析...</p>
+						<p class="analying" style="color: #fff;text-align: center;margin-top:50px;font-size: 14px;">正在分析...</p>
 						<table>
 							<thead>
 								<tr>
@@ -81,9 +81,9 @@
 				</div>
 				
 			</div>
-			 <div class="footer ltLogo">
+			 <!--<div class="footer ltLogo">
 				杭州朗通信息技术有限公司 & 浙江大学医学院附属邵逸夫医院&nbsp;&nbsp;&nbsp;联合开发
-			</div>
+			</div>-->
 		</div>
 	</div>
 	

webpack.config.js

@@ -6,7 +6,7 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const webpack = require('webpack');
-const proxyHost = "http://192.168.2.241:5050";
+const proxyHost = "http://192.168.2.121:5050";
 // const proxyHost = "http://192.168.3.113:5050";
 module.exports = {
   entry: {