添加示例弹窗

src/css/common.css

@@ -25,4 +25,76 @@ ul,li{
 }
 table,tr,td{
     list-style: none;
+}
+
+.pop-box{
+    position: fixed;
+    display: none;
+    width: 100%;
+    height: 100%;
+    top:0;
+    left: 0;
+    z-index: 999;
+}
+.pop-box .pop-cover{
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: .4;
+}
+
+.pop-box .pop-container{
+    width: 45%;
+    height: 85%;
+    background: #fff;
+    border-radius: 5px;
+    position: absolute;
+    left: 28%;
+    top:10%;
+}
+.pop-box .pop-title{
+    background: #5A8EEE;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    height: 35px;
+    line-height: 35px;
+    color:#fff;
+}
+.pop-box .pop-title h3{
+    float: left;
+    font-size: 16px;
+    text-indent: 15px;
+}
+.pop-box .pop-title .pop-close{
+    float: right;
+    margin-right: 10px;
+    cursor: pointer;
+}
+.pop-box .pop-ok,.pop-box .pop-cancel{
+    display: inline-block;
+    border: 1px solid #5A8EEE;
+    padding: 9px 20px;
+    text-align: center;
+    border-radius: 4px;
+    font-size: 14px;
+    cursor: pointer;
+}
+.pop-box .pop-body{
+    height: 70%;
+    overflow-y: auto;
+    padding: 15px 0;
+}
+.pop-box .pop-footer{
+    padding: 15px;
+    text-align: center;
+}
+.pop-box .pop-ok{
+    background-color: #5A8EEE;
+    color: #fff;
+}
+.pop-box .pop-cancel{
+    border-color: #5A8EEE;
+    color: #5A8EEE;
+    background: #fff;
+    margin: 0 0 0 50px;
 }

src/css/participle.less

@@ -105,8 +105,7 @@
             display: inline-block;
             cursor: pointer;
         }
-        .example{
-            border-color: #5A8EEE;
+        .example-btn{
             border: 1px solid #5A8EEE;
             color: #5A8EEE;
             padding: 9px 20px;
@@ -117,7 +116,7 @@
             margin: 0 10px 0 0;
             cursor: pointer;
         }
-        .example:hover{
+        .example-btn:hover{
             background-color: #5A8EEE;
             border-color: #5A8EEE;
             color: #fff;
@@ -232,6 +231,7 @@
         }
         .empty{
             position: absolute;
+            display: none;
             width: 120px;
             height: 140px;
             top: 50%;
@@ -254,3 +254,13 @@
     }
 
 }
+.example{
+    height: 30px;
+    line-height: 30px;
+    text-indent: 15px;
+    cursor: pointer;
+    &:hover,&.selected{
+        background: #58a6e7;
+        color: #fff;
+    }
+}

src/html/participle.html

@@ -21,6 +21,7 @@
 					<textarea name="" id="infoTxt" class="infoTxt" cols="30" rows="10" placeholder="请输入病例内容......"></textarea>
 				</div>
 				<div class="btnBox clearfix">
+					<span class="example-btn" id="showEgBtn">引用示例</span>
 					<span class="btn" id="analy">开始分析</span>
 				</div>
 			</div>
@@ -56,7 +57,20 @@
 				
 			</div>
 		</div>
-
+	</div>
+	<div class="exampleList pop-box">
+		<div class="pop-cover"></div>
+		<div class="pop-container">
+			<div class="pop-title">
+				<h3>示例列表</h3>
+				<a class="pop-close">×</a>
+			</div>
+			<div class="pop-body"></div>
+			<div class="pop-footer">
+				<button class="pop-ok">确定</button>
+				<button class="pop-cancel">取消</button>
+			</div>
+		</div>
 	</div>
 
 </body>

src/js/participle.js

@@ -7,15 +7,29 @@ require('./../resources/images/empty2.png');
 const {currentIIData} = require('./data.js')
 const initData = currentIIData[14]
 
-for(let i = 0; i < 3; i++){
-    let str = `<span class="example" id="example${i+1}" data-index=${i}>示例${i+1}</span>`
-    $('.btnBox').append(str)
+for(let i = 0; i < currentIIData.length; i++){
+    let str = `<p class="example" id="example${i+1}" data-index=${i}>示例${i+1}</p>`;
+    $('.exampleList .pop-body').append(str)
 }
 
 $('.example').click(function(){
-    const index = $(this).attr('data-index')
-    $('#infoTxt').val(currentIIData[index])
-    getEntityPredict();
+    $(".example").removeClass("selected");
+    $(this).addClass("selected");
+});
+
+$('.exampleList .pop-ok').click(()=>{
+  $(".pop-box").hide();
+  const index = $(".example.selected").attr('data-index');
+  $('#infoTxt').val(currentIIData[index]);
+  getEntityPredict();
+});
+
+$("#showEgBtn").click(function(){
+  $(".pop-box").show();
+});
+/******弹窗事件******/
+$(".pop-cover,.pop-close,.pop-cancel").click(()=>{
+    $(".pop-box").hide();
 })
 
 $('#infoTxt').val(initData)
@@ -35,7 +49,9 @@ function getEntityPredict(){
     
         ]
 
-    }
+    };
+    $(".resultBoxInfo").html(`<p style="color: #aaa;text-align: center;margin-top:50px;">正在分析...</p>`);
+    $('.empty').hide();
     post(api.entity_predict, param).then(res =>{
         if(res.data.code == '0'){
             const data = JSON.parse(res.data.data)