弹窗样式

src/common/components/ConfirmModal/index.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import styles from './index.less';
-import OldPortal from './OldPortal';
 import NewPortal from './NewPortal'
 import PropTypes from 'prop-types';
-import close from "./img/close.png";
+import close from "../../images/close1.png";
+import icon1 from '../../images/icon.png'
 
 /***
  * 弹窗组件
@@ -41,16 +41,8 @@ const propTypes = {
     titleBg: PropTypes.string,
     noFooter: PropTypes.bool,
     okText: PropTypes.string,
-    okColor: PropTypes.string,
-    okBorderColor: PropTypes.string,
-    oKBg: PropTypes.string,
+    okType:PropTypes.string,
     cancelText: PropTypes.string,
-    cancelColor: PropTypes.string,
-    cancelBorderColor: PropTypes.string,
-    cancelBg: PropTypes.string,
-
-
-
 }
 
 const defaultProps = {
@@ -60,16 +52,10 @@ const defaultProps = {
     maskClosable: true,
     closable: true,
     okText: '确认',
-    okColor: 'red',
-    okBorderColor: 'red',
-    oKBg:'#fff',
+    okType:'normal',    //normal蓝色，danger红色
     cancelText: '取消',
-    cancelColor: '#414141',
-    cancelBorderColor: '#414141',
-    cancelBg: '#fff',
-    width: '300px',
-    height: '200px',
-    borderBtm:'0'
+    width: '400px',
+    height: '204px',
 };
 
 class ConfirmModal extends Component {
@@ -113,19 +99,13 @@ class ConfirmModal extends Component {
             mask, 
             maskClosable,
             okText, 
-            okColor,
-            okBorderColor,
-            oKBg,
-            cancelText, 
-            cancelColor,
-            cancelBorderColor,
-            cancelBg,
+            okType,
+            cancelText,
             width, 
             height, 
             closable, 
             noFooter,
             icon,
-            borderBtm
         } = this.props;
         const marginLeft = -parseInt(width)/2
         const marginTop = -parseInt(height)/2
@@ -133,28 +113,26 @@ class ConfirmModal extends Component {
             <NewPortal visible={visible}>
                 <div className={styles['modal-wrapper']} id='confirm'>
                     <div className={styles[['modal']]} style = {{width: width, marginLeft:marginLeft, minHeight:height, marginTop:marginTop}}>
-                        <div className={styles['modal-title']} style={{background: titleBg,borderBottom:borderBtm}}>
+                        <div className={styles['modal-title']} style={{background: titleBg}}>
                             {icon?<img src={icon} className={styles['icon']}/>:''}
                             {title ? title : ''} 
                             {closable ? <img onClick={this.closeModal} className={styles['modal-close']} src = {close}/> : false}
                         </div>
-                        <div className={styles['modal-content']}>{children}</div>
+                        <div className={styles['modal-content']}><img src={icon1}/>{children}</div>
                         {noFooter ? '' : <div className={styles['modal-operator']+' clearfix'}>
                             <div className={styles['modal-btn-box']}>
                                 <div 
                                     onClick={this.confirm} 
-                                    className={styles['modal-operator-confirm']}
-                                    style={{borderColor: okBorderColor, background: oKBg, color: okColor}}>
+                                    className={styles['modal-operator-confirm']+" "+styles[okType]}>
                                     { okText}
                                 </div>
                             </div>
                             <div className={styles['modal-btn-box']}>
-                                <div 
-                                onClick={this.cancel} 
-                                className={styles['modal-operator-close']}
-                                style={{borderColor: cancelBorderColor, background: cancelBg, color: cancelColor}}>
-                                { cancelText}
-                            </div>
+                                <div
+                                    onClick={this.cancel}
+                                    className={styles['modal-operator-close']}>
+                                    { cancelText}
+                                </div>
                             </div>
                         </div>}
                     </div>

src/common/components/ConfirmModal/index.less

@@ -6,18 +6,17 @@
     top: 50%;
     left: 50%;
     margin: auto;
-    border-radius: 5px;
     background: #fff;
     // overflow: hidden;
 }
 
 .modal-title {
     width: 100%;
-    height: 46px;
-    line-height: 46px;
+    height: 40px;
+    line-height: 40px;
     padding: 0 10px;
     background: #e5e5e5;
-    border-radius: 5px 5px 0 0;
+    border-bottom: 1px #EDEDED solid;
 }
 
 .icon{
@@ -27,47 +26,58 @@
 
 .modal-close {
     position: absolute;
-    right: 0px;
-    top: 2px;
-    width: 40px;
-    height: 40px;
+    right: 7px;
+    top: 7px;
+    width: 24px;
+    height: 24px;
     cursor: pointer;
 }
 
 .modal-content {
     width: 100%;
     padding: 0 10px;
+    position: relative;
+    height: 100px;
+    img{
+        position: absolute;
+        top:30px;
+        left: 20px;
+    }
 }
 
 .modal-operator {
     width: 100%;
-    height: 70px;
+    margin-bottom: 30px;
 }
 
 .modal-btn-box {
-    width: 50%;
-    float: left;
+    width: 100px;
+    float: right;
     text-align: center;
 }
 
 .modal-operator-close, .modal-operator-confirm {
     .btnCom;
-    width: 100px;
-    margin: auto;
+    width: 80px;
     height: 34px;
     line-height: 32px;
     opacity: 1;
     color: #fff;
-    margin-top: 6px;
-    border: 1px solid @bannerBg;
+    margin: 0 auto;
+    border: 1px solid @modalCancel;
 }
 .modal-operator-confirm {
     background: @bannerBg;
+    border-color: @bannerBg;
+    &.danger{
+        background: @dangerColor;
+        border-color: @dangerColor;
+    }
 }
 
 .modal-operator-close{
     background: #fff;
-    color: @bannerBg;
+    color: @text-color;
 }
 
 .modal-operator-close:active, .modal-operator-confirm:active {

src/common/less/variables.less

@@ -6,6 +6,8 @@
 @extBlue:#4F9FF3;
 @tab-color:#3B9ED0;
 @dangerColor:#FF7874;   /*删除按钮红色*/
+@modalCancel:#9C9C9C;     /*弹窗气消按钮边框色*/
+@text-color: #333;
 
 @ipt-color:#E9F5FA;
 @ipt-bg-color:#F0F0F0;
@@ -17,7 +19,6 @@
 @body-bg: @base-color;
 
 @btn-text-color: #fff;
-@text-color: #333;
 
 @placeholder-color: #bfbfbf;
 

src/components/Banner/index.jsx

@@ -243,9 +243,6 @@ class Banner extends Component {
             confirm={this.deleteItem}  
             cancel={this.cancel}
             close={this.close}
-            okBorderColor={'#FF7874'}
-            okColor={'#fff'}
-            oKBg={'#FF7874'}
             >
             <div className={style['changeHos']}>确定要切换至{hosNameTmp}吗？医院切换后将清空当前页面。</div> 
         </ConfirmModal>

src/components/Banner/index.less

@@ -143,7 +143,6 @@
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
 }
 .changeHos {
-  height: 84px;
-  line-height: 20px;
-  padding: 10px 18px;
+  padding: 29px 0 0 33px;
+  line-height: 22px;
 }

src/components/HistoryCaseContainer/HistoryList/index.less

@@ -182,10 +182,8 @@
     }
 }
 .center {
-  text-align: center;
-  font-size: 16px;
-  padding-top: 10px;
-  padding-bottom: 50px;
+    font-size: 14px;
+    padding: 33px 0 0 33px;
 }
 
 .outBox{

src/components/Operation/index.jsx

@@ -1,10 +1,6 @@
 import React, { Component } from "react";
 import style from "./index.less";
-import printImg from '@common/images/icon_print_blue.png';
 import slideDown from '@common/images/slideDown.png';
-import preview from '@common/images/preview.png';
-import saveHistory from '@common/images/saveHistory.png';
-import cancelTag from '@common/images/icon_back.png';
 import PrintPreviewContainer from '@containers/PrintPreviewContainer';
 import PreviewContainer from '@containers/PreviewContainer';
 import { ConfirmModal, Notify } from '@commonComp';
@@ -587,10 +583,8 @@ class Operation extends Component {
         confirm={this.makeSureClear}
         close={this.closeClear}
         cancel={this.closeClear}
-        okText={"清除"}
-        okBorderColor={'#D13C42'}
-        okColor={'#fff'}
-        oKBg={'#D13C42'}
+        okText="清除"
+        okType='danger'
       >
         <div className={style.outBox}>
           <span>是否清空所有内容</span>
@@ -630,7 +624,6 @@ class Operation extends Component {
         okBorderColor={this.state.borderColor}
         okColor={this.state.okColor}
         oKBg={this.state.oKBg}
-        borderBtm={type==3?'1px solid #ccc':null}
         title={type==3?'保存病历模板':type==4?"新建文件夹":type==1?"保存病历":null}
       >
         {this.state.msg}

src/components/Operation/index.less

@@ -328,7 +328,6 @@
           background: #3B9ED0;
         }
         .delCancel{
-          color:#000;
           background: #fff;
           border: 1px solid #1E1E1E;
           color: #1E1E1E;
@@ -341,16 +340,9 @@
   }
 
 .outBox{
-    padding-left: 18px;
-    height: 60px;
-    width: 100%;
-    position: relative;
-    top: 41px;
-    // display: flex;
-    // flex-direction: column;
-    // justify-content: center;
-    margin-bottom: 40px;
+    padding: 33px 0 0 33px;
     .innerInp{
+        margin-top: -11px;
         .innerInput{
             outline-style: none ;
             border: 1px solid #ccc; 

src/components/PushContainer/index.jsx

@@ -649,7 +649,6 @@ class PushContainer extends Component {
         okBorderColor={okBorderColor}
         okColor={okColor}
         oKBg={oKBg}
-        borderBtm={type==5||type==3?'1px solid #ccc':null}
       >
         {message}
         {

src/utils/config.js

@@ -7,7 +7,7 @@ const { func } = require("prop-types");
 
 
 
-const host='http://192.168.2.236:6060';//后端接口访问地址
+const host='http://192.168.2.241:6060';//后端接口访问地址
 // const host='http://192.168.2.241:5050';//后端接口访问地址
 // const host='http://192.168.3.11:5050';//王宇
 //const host='http://192.168.2.164:8080';
@@ -17,7 +17,7 @@ const imageUrlPrefix = 'http://192.168.2.241:82';
 function geturl(){
     if(window.location.href.indexOf('localhost')>-1){
         return {
-            gourl:'http://localhost:8082/cdss.html',
+            gourl:'http://localhost:8080/cdss.html',
             // gourl:'http://192.168.2.236:5654/cdss.html',
             imgurl:host.replace('6060','22')
         }