提示信息位置

src/components/qualityControl/QCTipPop.vue

@@ -1,7 +1,11 @@
 <template>
     <div class="pop" :style="getStyle()">
-        <p>模块类型：{{name}}</p>
-        <p>示例：{{example}}</p>
+        <p class="close"><a href="javascript:void(0);" @click="closePop">×</a></p>
+        <div class="info">
+            <p>模块类型：{{name}}</p>
+            <p>示例：{{example}}</p>
+        </div>
+
     </div>
 </template>
 
@@ -13,12 +17,17 @@
       return {
         getStyle(){
             return {
-                top:(this.top-481)+"px",
-                left:(this.left-10)+"px",
+                top:(this.top-340)+"px",
+                left:(this.left-310)+"px",
                 display:this.show?"block":"none"
             }
         }
       }
+    },
+    methods:{
+      closePop(){
+        this.$emit("close");
+      }
     }
   }
 </script>
@@ -33,8 +42,20 @@
         line-height: 22px;
         z-index: 99;
         width: 300px;
-        height: 295px;
-        word-break: break-all;
-        overflow: auto;
+        .info{
+            max-height: 270px;
+            word-break: break-all;
+            overflow: auto;
+        }
+        .close{
+            text-align:right;
+            a{
+                display: inline-block;
+                font-size: 18px;
+                color: #909090;
+            }
+
+        }
+
     }
 </style>

src/components/qualityControl/QCTypePour.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="qcTypeWrapper commomSymptom clearfix">
-        <QCTipPop :name="curName" :example="curEmp" :show="showPop" :top="popTop" :left="popLeft"></QCTipPop>
+        <QCTipPop :name="curName" :example="curEmp" :show="showPop" :top="popTop" :left="popLeft" @close="closePop"></QCTipPop>
         <div class="bottomPartLeft">
             <p style="height: 26px;"> </p>
           <div class="pool">
@@ -11,9 +11,9 @@
                     :style="getStyle(item)?styles:null"
                     @click='selectLeftTag(item, index, $event)'
                 >
-                    <p class="ellipsis" >
+                    <p class="ellipsis" @click="closePop">
                         <span class="tagName">{{item.name}}</span>
-                        <span :class="activeId==item.id?'tip-icon active':'tip-icon'" @click="showTipPop(item,$event)"></span>
+                        <span :class="activeId==item.id?'tip-icon active':'tip-icon'" @click.stop="showTipPop(item,$event)"></span>
                     </p>
                 </li>
             </ul>
@@ -32,9 +32,9 @@
                     :style="getStyle2(item)?styles:null"
                     @click='selectRightTag(item)'
                 >
-                    <p class="ellipsis">
+                    <p class="ellipsis" @click="closePop">
                         <span class="tagName">{{item.name}}</span>
-                        <span :class="activeId==item.id?'tip-icon active':'tip-icon'" @click="showTipPop(item,$event)"></span>
+                        <span :class="activeId==item.id?'tip-icon active':'tip-icon'" @click.stop="showTipPop(item,$event)"></span>
                     </p>
                 </li>
             </ul>
@@ -97,21 +97,24 @@ export default {
         }*/
     },
     methods: {
+        closePop(){
+          this.activeId = '';
+          this.curName = '';
+          this.curEmp = '';
+          this.popTop = 0;
+          this.popLeft=0;
+          this.showPop=false;
+        },
         showTipPop(item,e){
-          if(this.showPop){
-            this.activeId = '';
-            this.curName = '';
-            this.curEmp = '';
-            this.popTop = 0;
-            this.popLeft=0;
-            this.showPop=false;
+          if(this.showPop&&this.activeId===item.id){
+            this.closePop();
             return;
           }
           this.activeId = item.id;
           this.curName = item.name;
           this.curEmp = item.behospitalCodes;
-          this.popTop = e.clientX;
-          this.popLeft=e.clientY;
+          this.popTop = e.clientY;
+          this.popLeft=e.clientX;
           this.showPop = true;
         },
         handleExclu(){
@@ -312,6 +315,7 @@ export default {
 .qcTypeWrapper {
     padding-left: 60px;
     margin:-20px 0 20px;
+    position: relative;
     .bottomPartLeft {
         width: 40%;
         box-sizing: border-box;