修改更多同类要药品说明显示方式

src/components/TreatDesc/index.jsx

@@ -4,29 +4,53 @@ import $ from "jquery";
 import close from './img/close.png';
 import info from './img/info.png';
 import info1 from './img/info1.png';
+import info2 from './img/info2.png';
+import info3 from './img/info3.png';
 
 
 class TreatDesc extends Component {
     constructor(props){
         super(props);
         this.state = {
-            currentIndex: -1
+            currentIndex: -1,
+            hasEnterImg: false
         }
         this.hideTreatDesc = this.hideTreatDesc.bind(this);
         this.handleSelect= this.handleSelect.bind(this);
+        this.handleMouseEnterDrug = this.handleMouseEnterDrug.bind(this)
+        this.handleMouseLeaveDrug = this.handleMouseLeaveDrug.bind(this)
+        this.handleMouseEnterImg = this.handleMouseEnterImg.bind(this)
         this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this)
+
     }
 
-    handleMouseEnterImg(index) {
+    handleMouseEnterDrug( index, item) {
+        console.log('item', item)
+        const drugNameWidth = parseInt($('#'+item.medicitionName)[0].offsetWidth)
+        
+        const imgLeft = drugNameWidth/2-10
+        console.log('imgLeft', imgLeft)
+        $('#'+item.medicitionName).find('img').css('left', imgLeft)
+       
         this.setState({
             currentIndex: index,
         })
     }
-    handleMouseLeaveImg() {
+    handleMouseLeaveDrug() {
         this.setState({
             currentIndex: -1,
         })
     }
+    handleMouseEnterImg() {
+        this.setState({
+            hasEnterImg: true
+        })
+    }
+    handleMouseLeaveImg() {
+        this.setState({
+            hasEnterImg: false
+        })
+    }
     handleSelect(index,ii) {
         const { selectDrug } = this.props;
         selectDrug && selectDrug(index,ii);
@@ -40,7 +64,7 @@ class TreatDesc extends Component {
     render(){
         const  { treatment, treatDesc, setDrugInfo, showDrugInfo} = this.props
         const { title, basic, otherDrugIndex, drugDesc} = treatDesc
-        const { currentIndex } = this.state
+        const { currentIndex, hasEnterImg } = this.state
         return (treatment && treatment.length >0 && <div  className={style['treat-desc-box']}>
             
             {title && title === '药品推荐' ? <div className={style['similar-drug-box']} id='treatDescBox'>
@@ -57,22 +81,32 @@ class TreatDesc extends Component {
                     {treatment[otherDrugIndex].medicitionsList.map((item, index) =>{
                         return (<span >
                         {index === 0 ? '' : ', '}     
-                        <span className={style['drug-name-box']}>
+                        <span className={style['drug-name-box']}
+                            onMouseEnter={this.handleMouseEnterDrug.bind(this, index, item )}
+                            onMouseLeave = {this.handleMouseLeaveDrug}
+                            id={item.medicitionName}
+                        >
                             <span className={style['drug-name']} 
                                 // onDoubleClick={() =>{setDrugInfo(item);showDrugInfo();}} 
                                 onClick={()=>{item.forbidden === '2' ? '' : this.handleSelect(otherDrugIndex,index)}} 
                                 style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : item.selected ? {color: '#3B9ED0'}:''}
-                              
                                 >
                                 {item.medicitionName}
                             </span>
+                            {<img className={style['info-img']}  
+                                style ={currentIndex === index ? {display: "inline-block"} : {display: "none"}}
+                                src={currentIndex === index ?  (hasEnterImg ? info3 : info2) : info2} 
+                                onMouseEnter={this.handleMouseEnterImg.bind(this, index)}
+                                onMouseLeave = {this.handleMouseLeaveImg}
+                                onClick={() =>{setDrugInfo(item);showDrugInfo();}}
+                                />}
                         </span>              
                         
-                        {<img className={style['info-img']}    
+                        {/* {<img className={style['info-img']}    
                             src={currentIndex === index ? info1 : info} 
                             onMouseEnter={this.handleMouseEnterImg.bind(this, index)}
                             onMouseLeave = {this.handleMouseLeaveImg}
-                            onClick={() =>{setDrugInfo(item);showDrugInfo();}}/>}
+                            onClick={() =>{setDrugInfo(item);showDrugInfo();}}/>} */}
                         {item.forbidden === '1' ? <span className={style['info-flag']} style={{border: '1px solid #F4C051', background: '#F4C051',marginLeft: '5px'}}>慎用</span>: item.forbidden === '2' ? <span className={style['info-flag']} style={{opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)',border: '1px solid #000',marginLeft: '5px'}}>禁用</span> : ''},
                         <span  style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}> 使用率{item.rate}</span>
                         

src/components/TreatDesc/index.less

@@ -49,6 +49,7 @@
 .drug-name-box {
     display: inline-block;
     height: 30px;
+    position: relative;
 }
 .drug-name {
     border-bottom: 1px solid #666;
@@ -57,9 +58,11 @@
     
 }
 .info-img {
-    width: 12px;
+    width: 15px;
     margin: 0 3px -1px;
     cursor: pointer;
+    position: absolute;
+    top: -10px;
 }
 .info-flag {
     display: inline-block;