修改静态信息样式

src/components/PushItems/DetailsModal/index.jsx

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import styles from "./index.less";
 import NewPortal from './NewPortal'
 import close from "./../img/close.png";
+import imgCurrent from '@common/images/icon-current.png';
 import $ from "jquery";
 import { imageUrlPrefix } from '@utils/config.js';
 import { dragBox } from '@utils/drag';
@@ -69,10 +70,10 @@ class DetailsModal extends Component {
                         <h1 id="detailsContentTitle" className={`${styles['details-content-name']} drag-title`} >{tipsDetails && showAllName ? showAllName : tipsDetails &&tipsDetails.name} <img className={styles['details-close']} onClick={this.hideTips} src={close} /></h1>
                         <div className={styles['details-content']} id= 'detailsContent' onScroll={this.handleScrollModal.bind(this, tipsDetails)}>
                             {tipsDetails && tipsDetails.details && tipsDetails.details.map((item, index) => {
-                                return (<div id={item.title}>
+                                return (<div id={item.title} class={styles['details-content-box']}>
                                     <div className={styles['details-content-title-box']} >
                                         <span className={styles['details-content-title-name']}>{item.title}</span>
-                                        <div className={styles['details-content-title-line']}></div>
+                                        <div className={styles['details-content-title-circle-box']}><span className={styles['details-content-title-circle']}></span></div>
                                     </div>
                                     <pre dangerouslySetInnerHTML ={{__html: item.content.replace(/{imageUrlPrefix}/g, imageUrlPrefix)}}></pre>
                                 </div>)
@@ -82,16 +83,24 @@ class DetailsModal extends Component {
                         <div className={styles['content-menu-box']}>
                             <div className={styles['content-menu-wrapper']}>
                                 <div className={styles['content-menu']}>
-                                    {tipsDetails && tipsDetails.details && tipsDetails.details.map((item, index) => {
-                                            return (<div>
+                                    <div className={styles['content-menu-border']}>    
+                                        {tipsDetails && tipsDetails.details && tipsDetails.details.map((item, index) => {
+                                            return (<div class={styles['details-menu-title-wrapper']}>
                                                 <div className={styles['details-menu-title-box']}>
                                                     {index === 0 ? '' : <div className={styles['details-content-menu-line']}></div>}
                                                     <span onClick={this.handleClickMenu.bind(this, index, item, tipsDetails)} className={styles['details-content-menu-name']} style = {index === currentIndex ? {color:'#0089be'} : ''}>
-                                                        <span className={styles['details-content-menu-circle']} style = {index === currentIndex ? {background:'#0089be'} : ''}></span>{item.title}
+                                                        <div className={styles['details-content-menu-circle-box']}>
+                                                            {index !== currentIndex&&<span className={styles['details-content-menu-circle']} ></span>}
+                                                            {index === currentIndex&&<img className={styles['details-content-menu-img']} src ={imgCurrent}/>}
+                                                        </div>
+                                                        {item.title}
                                                     </span>
                                                 </div>
                                             </div>)
                                         })}
+
+                                    </div>
+                                   
                                 </div>
 
                             </div>

src/components/PushItems/DetailsModal/index.less

@@ -38,7 +38,8 @@
     padding: 0 40px;
     height: 50px;
     line-height: 50px;
-    font-size: 24px;
+    font-size: 32px;
+    font-weight: bold;
 }
 
 .details-content-title-box {
@@ -47,22 +48,21 @@
     line-height: 40px;
     font-size: 20px;
 }
+.details-menu-title-wrapper {
+    padding: 0 0 0 15px;
+    position: relative;
+}
 
 .details-content-title-name {
     position: absolute;
+    font-weight: bold;
     background: #fff;
     padding-right: 5px;
-    font-size: 20px;
+    font-size: 22px;
     z-index: 10;
 }
 
-.details-content-title-line {
-    position: absolute;
-    width: 100%;
-    height: 20px;
-    top: 0;
-    border-bottom: 1px dashed #ccc;
-}
+
 .details-close {
     position: absolute;
     right: 0;
@@ -101,32 +101,46 @@
 }
 .content-menu {
     
-    background: #eee;
-    border: 1px solid #eee;
+    background: #F5F6F7;
+    border: 1px solid #F5F6F7;
     width: 160px;
     padding: 15px 18px;
 }
 .details-content-menu-line {
     height: 15px;
     width: 0;
-    border: 1px solid #ccc;
-    background-color: #ccc;
-    margin-left: 4px
+    background-color: #E0E2E3;
+    margin-left: 0px
 }
 .details-content-menu-name {
-    color: #33475f;
+    position: relative;
+    color: #777777;
     font-size: 13px;
     cursor: pointer;
 }
+.details-content-menu-circle-box {
+    display:inline-block;
+    position: absolute;
+    left: -20px;
+    background: #F5F6F7;
+
+}
 .details-content-menu-circle {
+    position: relative;
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 5px;
-    border: 1px solid #ccc;
     margin-top: 5px;
-    background-color: #eee;
+    background-color: #E0E2E3;
     margin-right: 10px;
+   
+}
+.details-content-menu-img {
+    position: relative;
+    z-index: 20;
+    left: -3px;
+    top: 0;
 }
 .details-mask {
     position: fixed;
@@ -139,8 +153,34 @@
     filter:alpha(opacity=60);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
 }
+.details-content-box {
+    border-left: 1px solid #969C9F;
+    padding: 0 0 0 20px;
+}
+.details-content-title-circle-box {
+   position: absolute;
+   z-index: 10;
+   background: #fff;
+   left: -27px;
+   height: 32px;
+   top: 0px;
+}
+.details-content-title-circle {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #3B9ED0;
+    position: relative;
+    top: 2px;
+}
+.content-menu-border{
+    border-left: 2px solid #E0E2E3;
+}
 pre {
     white-space: pre-wrap;
     word-wrap: break-word;
     font-family: inherit;
+    color: #333;
+    margin: 10px 0;
   }

src/components/TreatDesc/DrugInfo/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import style from './index.less';
 import close from './../img/close.png';
+import imgCurrent from '@common/images/icon-current.png';
 import $ from "jquery";
 import {dragBoxs} from '@utils/drag'
 import { imageUrlPrefix } from '@utils/config.js';
@@ -56,28 +57,38 @@ class DrugInfo extends Component {
         const { currentIndex } = this.state
         return (<div className={style['drug-info-wrapper']} id="drugWrapper">
                 <img src={close} onClick={hideDrugInfo} className={style['close-drug-desc']}/>
-                <h3 onMouseDown={this.setDragBox} id="drugTitle" className={style['drug-title']}>{drugInfo.tagType == 8 ? drugInfo.title+'说明书' : drugInfo.tagType == 10 ? drugInfo.title+ '说明': ''}</h3>
+                <h1 onMouseDown={this.setDragBox} id="drugTitle" className={style['drug-title']}>{drugInfo.tagType == 8 ? drugInfo.title+'说明书' : drugInfo.tagType == 10 ? drugInfo.title+ '说明': ''}</h1>
                 { 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.tagType == 8 ? drugInfo.title+'说明书' : drugInfo.tagType == 10 ? drugInfo.title+ '说明': ''}</div>
+                    {/* <div className={style['drug-title1']} >{drugInfo.tagType == 8 ? drugInfo.title+'说明书' : drugInfo.tagType == 10 ? drugInfo.title+ '说明': ''}</div> */}
                     {drugInfo.drugDesc.map((item, index) =>{
                         return <div className={style['drug-desc-item']} id={item.title.trim()}>
-                            <div className={style['drug-desc-title']} >{item.title.trim()}</div> 
+                            <div className={style['details-content-title-box']} >
+                                <span className={style['details-content-title-name']}>{item.title}</span>
+                                <div className={style['details-content-title-circle-box']}><span className={style['details-content-title-circle']}></span></div>
+                            </div>
                             <pre className={style['drug-desc-content']} dangerouslySetInnerHTML ={{__html: item.content.replace(/{imageUrlPrefix}/g, imageUrlPrefix)}}></pre> 
                         </div>
                     })}
                     <div className={style['content-menu-box']}>
                         <div className={style['content-menu-wrapper']}>
                             <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 className={style['content-menu-border']}> 
+                                    {drugInfo.drugDesc.map((item, index) => {
+                                        return (<div class={style['details-menu-title-wrapper']}>
+                                            <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'} : ''}>
+                                                    <div className={style['details-content-menu-circle-box']}>
+                                                        {index !== currentIndex&&<span className={style['details-content-menu-circle']} ></span>}
+                                                        {index === currentIndex&&<img className={style['details-content-menu-img']} src ={imgCurrent}/>}
+                                                    </div>
+                                                    {item.title}
+                                                </span>
+                                            </div>
+                                        </div>)
+                                    })}
+                                </div>
+                                
                             </div>
                         </div>
                     </div>

src/components/TreatDesc/DrugInfo/index.less

@@ -9,7 +9,7 @@
     top: 10%;
     margin-left: -475px;
     background: #fff;
-    padding: 40px 0 60px;
+    padding: 50px 0 60px;
     box-shadow: 0px 0px 5px -2px #7d7c7c;
     word-break: break-all;
     max-width: 100%;
@@ -35,10 +35,11 @@
     position: absolute;
     top: 0;
     width: 100%;
-    height: 40px;
-    line-height: 40px;
+    height: 50px;
+    line-height: 50px;
+    font-size: 32px;
+    font-weight: bold;
     padding: 0 40px;
-    border-bottom: 1px solid #979797;
     cursor: move;
     moz-user-select: -moz-none;
     -moz-user-select: none;
@@ -48,6 +49,7 @@
     -ms-user-select:none;
     user-select:none;
 }
+
 .close-drug-desc {
     .contentZIndex1;
     position: absolute;
@@ -58,7 +60,8 @@
 }
 .drug-desc-item {
     zoom: 1;
-    padding: 5px 0;
+    border-left: 1px solid #969C9F;
+    padding: 0 0 0 20px;
     &:after{
         content: "";
         display: block;
@@ -70,19 +73,14 @@
 .drug-desc-title {
     display: inline-block;
     font-weight: bold;
-    font-size: 14px;
+    font-size: 22px;
     // height: 100%;
     // float: left;
     // width: 190px;
     // text-align-last:justify;    /*chrome*/
     // text-justify: distribute;   /*ff*/
 }
-.drug-desc-title::before {
-    content: '【'
-}
-.drug-desc-title::after {
-    content: '】'
-}
+
 .drug-title1 {
     height: 60px;
     line-height: 60px;
@@ -92,7 +90,7 @@
 }
 .drug-desc-content {
     /*width: 100%;*/
-    margin: 0px 160px 0px 10px;
+    margin: 10px 160px 10px 10px;
 }
 
 .content-menu-box {
@@ -109,37 +107,86 @@
     height: 100%;
     overflow-y: auto;
 }
+.content-menu-border{
+    border-left: 2px solid #E0E2E3;
+    padding: 0 0 0 15px;
+}
 .content-menu {
     
-    background: #eee;
-    border: 1px solid #eee;
+    background: #F5F6F7;
+    border: 1px solid #F5F6F7;
     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;
+    position: relative;
+    color: #777777;
     font-size: 13px;
     cursor: pointer;
 }
+.details-content-menu-circle-box {
+    display:inline-block;
+    position: absolute;
+    left: -20px;
+    background: #F5F6F7;
+
+}
 .details-content-menu-circle {
+    position: relative;
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 5px;
-    border: 1px solid #ccc;
     margin-top: 5px;
-    background-color: #eee;
+    background-color: #E0E2E3;
     margin-right: 10px;
+   
+}
+.details-content-menu-img {
+    position: relative;
+    z-index: 20;
+    left: -3px;
+    top: 0;
+}
+.details-content-title-circle-box {
+    position: absolute;
+    z-index: 10;
+    background: #fff;
+    left: -27px;
+    height: 32px;
+    top: 0px;
+ }
+ .details-content-title-circle {
+     display: inline-block;
+     width: 12px;
+     height: 12px;
+     border-radius: 50%;
+     background: #3B9ED0;
+     position: relative;
+     top: 2px;
+ }
+ .details-content-title-box {
+    position: relative;
+    height: 40px;
+    line-height: 40px;
+    font-size: 20px;
+}
+.details-content-title-name {
+    position: absolute;
+    font-weight: bold;
+    background: #fff;
+    padding-right: 5px;
+    font-size: 22px;
+    z-index: 10;
 }
 pre {
     white-space: pre-wrap;
     word-wrap: break-word;
     font-family: inherit;
+    color: #333;
   }