治疗方案高度自适应

src/components/Treat/DrugTreat/index.jsx

@@ -28,9 +28,10 @@ class DrugTreat extends Component {
         setDrugInfo && setDrugInfo(item);
     }
     showTreatDesc() {
-        $('#treatWrapper').animate({'width': '940px'}, 500);
-        $('#treatDescBox').animate({'width': '260px'}, 500);
+        $('#treatDescBox').css({'display': 'block'});
         $('#treatWrapper').animate({'margin-left': '-470px'}, 300);
+        $('#treatDescBox').animate({'width': '260px'}, 500);
+        
     }
     
 

src/components/Treat/index.jsx

@@ -40,14 +40,12 @@ class Treat extends Component {
     render(){
         const { generalTreat, treatment, treatItem, surgeryTreat, selectDrug, drugInfo, treatDesc, setOtherRecommend, setDrugInfo, showDrug, showDrugInfo,hideDrugInfo, title} = this.props;
         return(
-        <div>
-            <div className={style['treat-mask']}>
-            </div>
+            <div   className={style['treat-wrapper']}>
+                <div className={style['treat-mask']}>
+                </div>
+                <div id='treatWrapper' className={style['treat-box']}>
+                    <div className={style['treat-title']}>治疗方案 ({treatItem.name})<img onClick={this.hideTreat} src={close}/></div>
 
-            <div  id='treatWrapper' className={style['treat-wrapper']}>
-                
-                <div className={style['treat-box']}>
-                    <p className={style['treat-title']}>治疗方案 ({treatItem.name})<img onClick={this.hideTreat} src={close}/></p>
                     <div className={style['treat-inner-box']}>
                         <GeneralTreat icon={generalIcon} title='一般治疗'   generalTreat={generalTreat}></GeneralTreat>
                         <DrugTreat treatment={ treatment } 
@@ -61,9 +59,7 @@ class Treat extends Component {
                     <div className={style['bottom']}>
                         <span className={style['prescription-btn']} onClick={this.handlePrescription}>开处方</span> <span className={style['determine-btn']} onClick={this.handleDetermine}>确定</span>
                     </div>
-                    
-                </div>
-                {treatDesc && <TreatDesc 
+                    {treatDesc && <TreatDesc 
                     treatment={treatment} 
                     treatDesc={treatDesc} 
                     selectDrug={selectDrug} 
@@ -71,12 +67,14 @@ class Treat extends Component {
                     showDrugInfo = {showDrugInfo}
                     showDrug = {showDrug}
                     >
-                </TreatDesc>}
+                    </TreatDesc>}
+                </div>
+                
+                
                 {showDrug && drugInfo && <DrugInfo drugInfo = {drugInfo} hideDrugInfo = {hideDrugInfo}></DrugInfo>}
             </div>
                 
             
-        </div>
         
         )
     }

src/components/Treat/index.less

@@ -1,15 +1,18 @@
 @import "~@less/mixin.less";
 .treat-wrapper{
     position: fixed;
-    background: #fff;
-    z-index: 102;
-    left: 50%;
-    top: 50%;
-    width: 680px;
-    height: 680px;
-    margin-left: -340px;
-    margin-top: -340px;
-    z-index: 301;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    // background: #fff;
+    // left: 50%;
+    // top: 25%;
+    // width: 680px;
+    // margin-left: -340px;
+    // margin-top: -340px;
+    // z-index: 301;
+    z-index: 300;
 }
 .treat-mask {
     position: fixed;
@@ -24,12 +27,22 @@
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
 }
 .treat-box {
+    position: fixed;
+    background: #fff;
     width: 680px;
-    float: left;
-    border-right: 1px solid #e0e2e4;
-    padding-bottom: 100px;
+    left: 50%;
+    top: 20%;
+    height: 60%;
+    margin-left: -340px;
+    z-index: 301;
+    padding-top: 40px;
+    padding-bottom: 80px;
 }
 .treat-title {
+    width: 100%;
+    position: absolute;
+    top: 0px;
+    background: #fff;
     height: 40px;
     line-height: 40px;
     border-bottom: 1px solid #e0e2e4;
@@ -43,18 +56,19 @@
     }
 }
 .treat-inner-box {
-    width: 680px;
-    height: 540px;
+    width: 100%;
+    height: 100%;
     padding: 10px 20px 0 20px;
-    overflow: hidden;
+
     overflow-y: auto;
 }
 
 .bottom {
     position: absolute;
-    bottom: 20px;
-    height: 40px;
+    width: 100%;
+    height: 80px;
     line-height: 40px;
+    background: #fff;
 }
 .prescription-btn,.determine-btn {
     position: absolute;
@@ -65,6 +79,7 @@
     border-radius: 4px;
     text-align: center;
     cursor: pointer;
+    top: 20px;
 }
 
 .prescription-btn {

src/components/TreatDesc/index.jsx

@@ -17,16 +17,16 @@ class TreatDesc extends Component {
         selectDrug && selectDrug(index,ii);
     }
     hideTreatDesc() {
-        $('#treatWrapper').animate({'width': '680px'}, 500);
-        $('#treatDescBox').animate({'width': '0px'}, 500);
+        $('#treatDescBox').css({'display': 'none'});
+        $('#treatDescBox').animate({'display': 'none'}, 500);
         $('#treatWrapper').animate({'margin-left': '-340px'}, 500);
     }
 
     render(){
         const  { treatment, treatDesc, setDrugInfo, showDrugInfo} = this.props
         const { title, basic, otherDrugIndex, drugDesc} = treatDesc
-        return (treatment && treatment.length >0 && <div id='treatDescBox' className={style['treat-desc-box']}>
-            <h3 className={style['drug-desc-title']}>同类药物  <img src={close} onClick={this.hideTreatDesc} className={style['close-drug-desc']} /></h3>
+        return (treatment && treatment.length >0 && <div  className={style['treat-desc-box']}>
+            
             {title && title === '药品推荐' ? <div>
                 {/* { basic && basic.length > 0 && <div> //推荐依据不需要展示
                     <h3 className={style['recommend-title']}>推荐依据</h3>
@@ -36,7 +36,8 @@ class TreatDesc extends Component {
                     })}
                     
                 </div> } */}
-                { otherDrugIndex > -1 && <div className={style['similar-drug']}>
+                { otherDrugIndex > -1 && <div id='treatDescBox' className={style['similar-drug']}>
+                    <h3 className={style['drug-desc-title']}>同类药物  <img src={close} onClick={this.hideTreatDesc} className={style['close-drug-desc']} /></h3>
                     {treatment[otherDrugIndex].medicitionsList.map((item, index) =>{
                         return (<span style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)'} : ''}>
                         {index === 0 ? '' : ', '}                   

src/components/TreatDesc/index.less

@@ -4,8 +4,8 @@
     overflow: hidden;
 }
 .drug-desc-wrapper {
-    max-height: 650px;
-    overflow-y: scroll;
+  height: 100%;
+  overflow-y: auto
 }
 .drug-desc-title {
     height: 40px;
@@ -13,7 +13,10 @@
     border-bottom: 1px solid #e0e2e4;
     padding-left: 20px;
     width: 260px;
-    position: relative;
+    position: absolute;
+    background: #fff;
+    top: 0px;
+    margin-left: -20px;
 }
 .recommend-title, .drug-title {
     padding: 30px 0 15px 20px;
@@ -30,7 +33,16 @@
     right: 0px;
 }
 .similar-drug {
-    padding: 20px;
+    position: absolute;
+    padding-top: 40px;
+    overflow-y: auto;
+    width: 260px;
+    display: none;
+    left: 680px;
+    height: 100%;
+    top: 0;
+    background: #fff;
+    padding: 60px 20px 80px;
 }
 
 .drug-name {
@@ -48,4 +60,4 @@
     line-height: 16px;
     border-radius: 4px;
     text-align: center;
-}
+}