推荐检验检查样式

src/components/PushItems/PushDiag/index.jsx

@@ -46,14 +46,14 @@ class PushDiag extends Component {
             <h1 className={style['push-diag-title']} style={{background:titleBg}}><img className={style['push-diag-icon']} src={icon} />{title}</h1>
             <div className={style['push-diag-box']}>
                 {maxShowNum ? diagList.map((item, index) => {
-                    ItemNum = ItemNum + item.name.length + 2;
+                    ItemNum = ItemNum + item.name.length + 1;
                     if (ItemNum <= moreNum) {
                         return <div key={item.id} className={style['push-diag-item']}><DiagnosticItem item={item}/></div>
                     }
                 }) : diagList.map((item, index) => {
                 return <div key={item.id} className={style['push-diag-item']}><DiagnosticItem item={item}/></div>
                 })}
-                {ItemNum > maxShowNum && <div onClick={() => this.handleShow(ItemNum)} className={style['push-diag-more']}>{showMore ? ' 查看更多': '收起'}<img className={style['push-diag-more-icon']} src={showMore ? showImg : hideImg}/></div>}
+                {ItemNum > maxShowNum && <div onClick={() => this.handleShow(ItemNum)} className={style['push-diag-more']}>{showMore ? ' 更多': '收起'}<img className={style['push-diag-more-icon']} src={showMore ? showImg : hideImg}/></div>}
 
             </div>
             

src/components/PushItems/index.jsx

@@ -109,7 +109,7 @@ class PushItems extends Component {
     let assayNum = 0;
     let assayHide = assay.map((item, index) => {
       assayNum = assayNum + item.name.length + 2;
-      if (assayNum > 22) {
+      if (assayNum > 23) {
         return;
       } else {
         return (
@@ -143,7 +143,7 @@ class PushItems extends Component {
     let checkNum = 0;
     let checkHide = check.map((item, index) => {
       checkNum = checkNum + item.name.length + 2;
-      if (checkNum > 22) {
+      if (checkNum > 23) {
         return;
       } else {
         return (
@@ -199,7 +199,7 @@ class PushItems extends Component {
                 icon={doubtImg}
                 title="疑似诊断"
                 diagList={doubt}
-                maxShowNum={28}
+                maxShowNum={26}
               />
             )}
             {possible && possible.length > 0 && (
@@ -208,7 +208,7 @@ class PushItems extends Component {
                 icon={possibleImg}
                 title="可能诊断"
                 diagList={possible}
-                maxShowNum={28}
+                maxShowNum={26}
               />
             )}
             <div className={style["diagnose"]}>
@@ -238,14 +238,14 @@ class PushItems extends Component {
               </h1>
               <div>
                 {assay.length === 0 && check.length === 0 ? (
-                  "无"
+                  <span>无</span>
                 ) : (
                   <ul>
                     <li className={style["firstLi"]}>
                       <div className={style["title"]}>化验：</div>
                       <div className={style["content"]}>
                         {assay.length === 0
-                          ? "无"
+                          ?<span >无</span>
                           : moreAssay
                           ? assays
                           : assayHide}

src/components/PushItems/index.less

@@ -56,7 +56,7 @@
       }
       div{
         font-size: 14px;
-        padding:6px 15px;
+        padding:6px  0 6px 15px;
         span{
           cursor: pointer;
         }
@@ -96,7 +96,7 @@
     h1{
       font-size: 14px;
       color: #000;
-      padding: 8px 15px;
+      padding: 8px 6px 8px 15px;
       background: #EAF7FA;
       font-weight: bold;
       img {
@@ -122,7 +122,7 @@
     }
     div{
       font-size: 14px;
-      padding:6px 15px;
+      padding:6px 0px 6px 15px;
       ul{
         .firstLi{
           border-bottom: 1px solid #DFDFDF;
@@ -135,13 +135,15 @@
           overflow: hidden;
           .title{
             float: left;
+            height: 26px;
+            line-height: 26px;
             padding: 0px 0px 0px 0px;
           }
           .content{
             float: left;
-            width: 352px;
+            width: 359px;
+            line-height: 26px;
             padding: 0px 0px 0px 0px;
-            margin-top: -2px;
             span{
               font-size: 14px;
               line-height: 14px;

src/components/TreatDesc/DrugInfo/index.jsx

@@ -1,21 +1,71 @@
 import React, { Component } from 'react';
 import style from './index.less';
 import close from './../img/close.png';
+import $ from "jquery";
+
 
 class DrugInfo extends Component {
     constructor(props) {
         super(props);
+        this.state = {
+            currentIndex: 0
+        }
+    }
+    handleClickMenu(index, item, drugDesc) {
+        const that = this
+        setTimeout(function(){
+            that.setState({
+                currentIndex: index
+            })
+        },0)
+        
+        let scrollTop = 60 //标题高度为60px
+        drugDesc.map((it, ii) => {
+            if( ii < index) {
+                scrollTop = scrollTop + parseInt($('#' + it.title.trim()).css('height'))
+            }
+        })
+        $('#drugDesc').scrollTop(scrollTop)
+    }
+    handleScrollModal(drugDesc) {
+        const scrollTop = $('#drugDesc').scrollTop()
+        let divHeight = 60; //标题高度为60px
+        for (let i = 0; i < drugDesc.length; i++) {
+            divHeight = divHeight + parseInt($('#' + drugDesc[i].title.trim()).css('height'))
+            if(divHeight > scrollTop) {
+                this.setState({
+                    currentIndex: i
+                })
+                return
+            }
+        }
     }
 
     render() {
         const { drugInfo, hideDrugInfo, drugInfoList,hideDrugInfoMore } = this.props
+        const { currentIndex } = this.state
         return (<div className={style['drug-info-wrapper']}>
                 <h3 className={style['drug-title']}>{drugInfo.title}说明书  <img src={close} onClick={hideDrugInfo} className={style['close-drug-desc']}/> </h3>
-                { drugInfo && drugInfo.drugDesc.length > 0 && <div className={style['drug-desc-wrapper']}>
-                    <div className={style['drug-title1']}>{drugInfo.title}说明书</div>
+                { drugInfo && drugInfo.drugDesc.length > 0 && <div className={style['drug-desc-wrapper']} id='drugDesc' onScroll={this.handleScrollModal.bind(this,  drugInfo.drugDesc)}>
+                    <div className={style['drug-title1']} >{drugInfo.title}说明书</div>
                     {drugInfo.drugDesc.map((item, index) =>{
-                        return <div className={style['drug-desc-item']}><span className={style['drug-desc-title']}>{item.title.trim()}</span> <div className={style['drug-desc-content']} dangerouslySetInnerHTML ={{__html: item.content}}></div> </div>
+                        return <div className={style['drug-desc-item']} id={item.title.trim()}>
+                            <span className={style['drug-desc-title']} >{item.title.trim()}</span> 
+                            <div className={style['drug-desc-content']} dangerouslySetInnerHTML ={{__html: item.content}}></div> 
+                        </div>
                     })}
+                    <div className={style['content-menu']}>
+                        {drugInfo.drugDesc.map((item, index) => {
+                            return (<div>
+                                <div className={style['details-menu-title-box']}>
+                                    {index === 0 ? '' : <div className={style['details-content-menu-line']}></div>}
+                                    <span onClick={this.handleClickMenu.bind(this, index, item, drugInfo.drugDesc)} className={style['details-content-menu-name']} style = {index === currentIndex ? {color:'#0089be'} : ''}>
+                                        <span className={style['details-content-menu-circle']} style = {index === currentIndex ? {background:'#0089be'} : ''}></span>{item.title}
+                                    </span>
+                                </div>
+                            </div>)
+                        })}
+                    </div>
                 </div> }
                 { !drugInfo || (drugInfo && drugInfo.drugDesc.length === 0) && <div className={style['drug-desc-wrapper']}>
                     <div>

src/components/TreatDesc/DrugInfo/index.less

@@ -1,9 +1,9 @@
 .drug-info-wrapper {
     position: fixed;
     width: 950px;
-    height: 70%;
+    height: 80%;
     left: 50%;
-    top: 15%;
+    top: 10%;
     margin-left: -475px;
     background: #fff;
     z-index: 303;
@@ -66,4 +66,37 @@
 .drug-desc-content {
     /*width: 100%;*/
     margin-left: 210px;
+    margin-right: 180px;
+}
+
+.content-menu {
+    position: absolute;
+    top: 50px;
+    right: 20px;
+    background: #eee;
+    border: 1px solid #eee;
+    width: 160px;
+    padding: 15px 18px;
+}
+.details-content-menu-line {
+    height: 15px;
+    width: 0;
+    border: 1px solid #ccc;
+    background-color: #ccc;
+    margin-left: 4px
+}
+.details-content-menu-name {
+    color: #33475f;
+    font-size: 13px;
+    cursor: pointer;
+}
+.details-content-menu-circle {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    margin-top: 5px;
+    background-color: #eee;
+    margin-right: 10px;
 }