修改同类药物样式

src/components/TreatDesc/index.jsx

@@ -65,7 +65,7 @@ class TreatDesc extends Component {
         const  { treatment, treatDesc, setDrugInfo} = this.props
         const { title, basic, otherDrugIndex, drugDesc} = treatDesc
         const { currentIndex, hasEnterImg } = this.state
-        return (treatment && treatment.length >0 && <div  className={style['treat-desc-box']}>
+        return (treatment && treatment.length >0 && <div  className={style['treat-desc-box']+" "+"clearfix" }>
             {title && title === '药品推荐' ? <div className={style['similar-drug-box']} id='treatDescBox'>
                 {/* { basic && basic.length > 0 && <div> //推荐依据不需要展示
                     <h3 className={style['recommend-title']}>推荐依据</h3>
@@ -74,43 +74,45 @@ class TreatDesc extends Component {
                         </div>)
                     })}
                 </div> } */}
-                { otherDrugIndex > -1 && <div  className={style['similar-drug']}>
-                    <h3 className={style['drug-desc-title']}><span className={style['drug-desc-class-title']} title={'同类药物(' + treatment[otherDrugIndex].bigdrugsName + ')'}>同类药物({treatment[otherDrugIndex].bigdrugsName})</span>  <img src={packUp} onClick={this.hideTreatDesc} className={style['close-drug-desc']} /></h3>
-                    {treatment[otherDrugIndex].medicitionsList.map((item, index) =>{
-                        return (<span >
-                        {index === 0 ? '' : ', '}     
-                        <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} 
+                { otherDrugIndex > -1 && <div  className={style['similar-drug-wrapper'] +" "+"clearfix" }>
+                        <h3 className={style['drug-desc-title']}><span className={style['drug-desc-class-title']} title={'同类药物(' + treatment[otherDrugIndex].bigdrugsName + ')'}>同类药物({treatment[otherDrugIndex].bigdrugsName})</span>  <img src={packUp} onClick={this.hideTreatDesc} className={style['close-drug-desc']} /></h3>
+                        <div  className={style['similar-drug'] +" "+"clearfix" }>
+                        {treatment[otherDrugIndex].medicitionsList.map((item, index) =>{
+                            return (<span >
+                            {index === 0 ? '' : ', '}     
+                            <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({name: item.medicitionName, type: 8, position: 5})}}
+                                    />}
+                            </span>              
+                            
+                            {/* {<img className={style['info-img']}    
+                                src={currentIndex === index ? info1 : info} 
                                 onMouseEnter={this.handleMouseEnterImg.bind(this, index)}
                                 onMouseLeave = {this.handleMouseLeaveImg}
-                                onClick={() =>{setDrugInfo({name: item.medicitionName, type: 8, position: 5})}}
-                                />}
-                        </span>              
-                        
-                        {/* {<img className={style['info-img']}    
-                            src={currentIndex === index ? info1 : info} 
-                            onMouseEnter={this.handleMouseEnterImg.bind(this, index)}
-                            onMouseLeave = {this.handleMouseLeaveImg}
-                            onClick={() =>{setDrugInfo(item,8,5);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>
-                        
-                    </span>)
-                    })}
-                </div> }
+                                onClick={() =>{setDrugInfo(item,8,5);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>
+                            
+                        </span>)
+                        })}
+                    </div> 
+                </div>}
             </div>: '' }
             {/* { title !== '药品推荐' ? <div>
                 { drugDesc && drugDesc.length > 0 && <div className={style['drug-desc-wrapper']}>

src/components/TreatDesc/index.less

@@ -36,18 +36,21 @@
 .similar-drug-box {
     display: none;
 }
-.similar-drug {
+.similar-drug-wrapper {
     position: absolute;
-    padding-top: 40px;
-    overflow-y: auto;
+    
     width: 260px;
     left: 680px;
     height: 100%;
     top: 0;
     background: #fff;
-    padding: 60px 20px 80px;
+    padding: 40px  0 20px 20px;
     box-shadow: 2px 0px 5px -2px #7d7c7c;
 }
+.similar-drug {
+    height: 100%;
+    overflow-y: auto;
+}
 .drug-name-box {
     display: inline-block;
     height: 30px;