弹窗组件提取

src/common/components/ComplexModal/index.jsx

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import ReactDom from "react-dom";
+import style from "./index.less";
+import Notify from '@commonComp/Notify';
+import close from '@common/images/icon_close.png';
+/**
+ * title:标题
+ * children：弹窗内容
+ * onClose:弹窗关闭事件
+ * shadeClose:点蒙层关闭，默认true
+ *footer:固定在弹窗底部的内容如确定按钮
+ *
+ * **/
+
+class ComplexModal extends Component {
+  constructor(props) {
+    super(props)
+  }
+  render() {
+    const { onclose,title,children,footer,shadeClose} = this.props;
+    const domNode = document.getElementById('root');
+    return ReactDom.createPortal(<div className={style['container']}>
+      <div className={style['shade']} onClick={shadeClose===false?'':onclose}></div>
+      <div className={style['modal']}>
+        <div className={style['close']}>
+          {title}
+          <img src={close} onClick={onclose} />
+        </div>
+        <div className={style["content"]}>{children}</div>
+        <div className={style['footer']}>{footer}</div>
+      </div>
+    </div>,domNode);
+  }
+}
+
+export default ComplexModal;

src/common/components/ComplexModal/index.less

@@ -0,0 +1,66 @@
+.container {
+  position: relative;
+  z-index: 2000;
+  .content{
+    overflow: auto;
+    position: fixed;
+    bottom: 130px;
+    top: 110px;
+    width: 820px;
+  }
+  .footer{
+    width: 820px;
+    position: fixed;
+    bottom:80px;
+    text-align: right;
+  }
+  .shade {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #000;
+    opacity: 0.6;
+    filter:alpha(opacity=60);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
+  }
+  .modal {
+    width: 820px;
+    background: #fff;
+    position: fixed;
+    left: 50%;
+    margin-left: -410px;
+    top: 65px;
+    bottom: 65px;
+  }
+  .close {
+    padding:  15px 15px 15px 20px;
+    border-bottom: 1px solid #EAEDF1;
+    img{
+      float:right;
+      cursor: pointer;
+      margin-top: -5px;
+    }
+  }
+  .button {
+    position: fixed;
+    bottom: 75px;
+    left: 50%;
+    margin-left: 280px;
+    span{
+      display: inline-block;
+      width: 80px;
+      height: 34px;
+      background: #3B9ED0;
+      font-size: 14px;
+      color: #FFFFFF;
+      font-size: 14px;
+      text-align: center;
+      line-height: 34px;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+}
+

src/components/AssessResult/RadioItem/index.jsx

@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+import style from "../index.less";
+import { Radio} from '@commonComp';
+
+class RadioItem extends Component {
+  constructor(props) {
+    super(props)
+  }
+  render() {
+    const {title,data  } = this.props;
+    return <div className={style['assess-item']}>
+        <h2>{title}</h2>
+        <div className={style['item-content']}>
+          <ul>
+            <li>
+              <span>血压控制情况：</span>
+              <div className={style['row']}>
+                <Radio name='正常' handleClick={null} isSelect={true}></Radio>
+                <Radio name='一级' handleClick={null} isSelect={false}></Radio>
+              </div>
+              <div className={style["recommend"]}>
+                推荐选择：正常
+              </div>
+            </li>
+            <li>
+              <span>BMI控制情况：</span>
+              <div className={style['row']}>
+                <Radio name='正常' handleClick={null} isSelect={true}></Radio>
+                <Radio name='一级' handleClick={null} isSelect={false}></Radio>
+              </div>
+              <div className={style["recommend"]}>
+                推荐选择：正常
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>;
+  }
+}
+
+export default RadioItem;