医学知识和全部量表搜索样式修改

src/components/MedicalInfo/index.jsx

@@ -8,6 +8,7 @@ class MedicalInfo extends Component {
         super(props);
         this.$inp = React.createRef();
         this.$cont = React.createRef();
+        this.$contList = React.createRef();
         this.state={
           val:''
         };
@@ -32,7 +33,6 @@ class MedicalInfo extends Component {
       handleChangeValue&&handleChangeValue(val);
     }
   handleChange(){
-      console.log('change')
       this.setState({
         val:this.$inp.current.value
       });
@@ -44,12 +44,14 @@ class MedicalInfo extends Component {
     });
   }
   componentDidMount(){
-    const height = getWindowInnerHeight()-170;
+    const height = getWindowInnerHeight()-234;
     this.$cont.current.style.height = height+"px";
+    this.$contList.current.style.height = height-30+"px";
     if(this.$cont.current){
       windowEventHandler('resize', ()=>{
-        const height = getWindowInnerHeight()-170;
+        const height = getWindowInnerHeight()-234;
         this.$cont.current.style.height = height+"px";
+        this.$contList.current.style.height = height-30+"px";
       });
     }
   }
@@ -57,7 +59,7 @@ class MedicalInfo extends Component {
         const {searchResult} = this.props;
         const {val} = this.state;
         return (
-        <div className={style['mefical-info-wrapper']} ref={this.$cont}>
+        <div className={style['mefical-info-wrapper']}>
             <div className={style['search-cont']}>
                 <p className={style['title']}>医学知识搜索</p>
                 <p className={style['cont']}>
@@ -65,12 +67,16 @@ class MedicalInfo extends Component {
                   {val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
                   <button onClick={this.search}>搜索</button>
                 </p>
-              {searchResult&&searchResult.length>0?<div className={style['result']}>
-                    <p className={style['title']}>查询内容</p>
-                    <ul>
-                      {this.getSearchList()}
-                    </ul>
-              </div>:<p className={style['no-data']}>暂无搜索结果！</p>}
+                <div className={style['result-box']} ref={this.$cont}>
+                  <div className={style['result']} style={searchResult&&searchResult.length>0? {'display': 'block'} : {'display': 'none'}}>
+                      <p className={style['title']}>查询内容</p>
+                      <ul className={style['result-list']} ref={this.$contList}>
+                        {this.getSearchList()}
+                      </ul>
+                  </div>
+                  <p className={style['no-data']} style={searchResult&&searchResult.length>0? {'display': 'none'} : {'display': 'block'}}>暂无搜索结果！</p>
+                </div>
+              
              </div>
         </div>
         

src/components/MedicalInfo/index.less

@@ -41,8 +41,11 @@
         text-align: center;
         border: none;
     }
+    .result-list {
+        overflow: auto;
+    }
     .result{
-        margin-top: 15px;
+        padding-top: 15px;
         li{
             border-bottom:1px #CECECE solid;
             line-height: 42px;

src/components/ScaleSearch/index.jsx

@@ -8,6 +8,7 @@ class ScaleSearch extends Component {
     super(props);
     this.$inp = React.createRef();
     this.$cont = React.createRef();
+    this.$contList = React.createRef();
     this.state={
       val:''
     };
@@ -58,12 +59,14 @@ class ScaleSearch extends Component {
     });
   }
   componentDidMount(){
-    const height = getWindowInnerHeight()-170;
+    const height = getWindowInnerHeight()-234;
     this.$cont.current.style.height = height+"px";
+    this.$contList.current.style.height = height-30+"px";
     if(this.$cont.current){
       windowEventHandler('resize', ()=>{
-        const height = getWindowInnerHeight()-170;
+        const height = getWindowInnerHeight()-234;
         this.$cont.current.style.height = height+"px";
+        this.$contList.current.style.height = height-30+"px";
       });
     }
   }
@@ -71,27 +74,30 @@ class ScaleSearch extends Component {
     const {searchResult} = this.props;
     const {val} = this.state;
     return (
-      <div className={style['mefical-info-wrapper']} ref={this.$cont}>
-        <div className={style['search-cont']}>
-          <p className={style['title']}>量表搜索</p>
-          <p className={style['cont']}>
-            <input type="text" className={style['input']} ref={this.$inp} onInput={this.handleChange}/>
-            {val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
-            <button onClick={this.search}>搜索</button>
-          </p>
-          {searchResult&&searchResult.length>0?<div className={style['result']}>
-            <p className={style['title']}>查询内容</p>
-            <ul>
-              {this.getSearchList()}
-            </ul>
-          </div>:<p className={style['no-data']}>暂无搜索结果！</p>}
+      <div className={style['mefical-info-wrapper']}>
+            <div className={style['search-cont']}>
+                <p className={style['title']}>量表搜索</p>
+                <p className={style['cont']}>
+                  <input type="text" className={style['input']} ref={this.$inp} onInput={this.handleChange}/>
+                  {val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
+                  <button onClick={this.search}>搜索</button>
+                </p>
+                <div className={style['result-box']} ref={this.$cont}>
+                  <div className={style['result']} style={searchResult&&searchResult.length>0? {'display': 'block'} : {'display': 'none'}}>
+                      <p className={style['title']}>查询内容</p>
+                      <ul className={style['result-list']} ref={this.$contList}>
+                        {this.getSearchList()}
+                      </ul>
+                  </div>
+                  <p className={style['no-data']} style={searchResult&&searchResult.length>0? {'display': 'none'} : {'display': 'block'}}>暂无搜索结果！</p>
+                </div>
+              
+             </div>
         </div>
-      </div>
 
     )
 
 
-
   }
 }
 

src/components/ScaleSearch/index.less

@@ -41,8 +41,11 @@
     text-align: center;
     border: none;
   }
+  .result-list {
+    overflow: auto;
+  }
   .result{
-    margin-top: 15px;
+    padding-top: 15px;
     li{
       border-bottom:1px #CECECE solid;
       line-height: 42px;