样式重构

public/react/src/modules/courses/members/modal/AddTeacherModal.js

@@ -219,8 +219,7 @@ class AddTeacherModal extends Component{
         }
         .df span.label {
           margin-right: 8px;
-          text-align: right;
-          margin-left: 12px;
+          text-align: left;
         }
         .df .ant-input-affix-wrapper {
           width: 32%;
@@ -232,11 +231,11 @@ class AddTeacherModal extends Component{
         `}
         </style>
         <div className="df">
-          <span className="firstLabel label">姓名:</span>
+          <span className="firstLabel label" style={{ flex: '0 0 40px' }}>姓名:</span>
           <Input allowClear placeholder="请输入真实姓名" value={name} onChange={(e) => {this.setState({name: e.target.value})}} 
-              style={{ width: '200px'}}>
+              style={{ width: '200px', marginRight: '18px' }}>
           </Input>
-          <span className="label" style={{ minWidth: '36px' }}>单位:</span>
+          <span className="label" style={{ minWidth: '36px', flex: '0 0 40px' }}>单位:</span>
           <SchoolSelect
             value={school_name}
             onChange={this.onOrgNameChange}
@@ -256,37 +255,7 @@ class AddTeacherModal extends Component{
           >搜索</a>
         </div>
         {/* graduation_groups && !!graduation_groups.length  */}
-        { this.hasGraduationModule() && <div className="df" style={{ marginTop: '24px' }}  >
-          <span className="firstLabel label">答辩组:</span>
-          <Select style={{ width: 457 }} onChange={this.handleGradationGroupChange} value={graduationGroup}
-            dropdownRender={menu => (
-              <div>
-                {menu}
-                <Divider style={{ margin: '4px 0' }} />
-                {/* <ActionBtn
-                  onMouseDown={() => { debugger; this.refs['addGraduationGroupModal'].setVisible(true) }}
-                >添加答辩组</ActionBtn> */}
-                <div style={{ padding: '8px', cursor: 'pointer' }} 
-                    onMouseDown={() => { debugger; this.refs['addGraduationGroupModal'].setVisible(true) }}
-                >
-                  <Icon type="plus" /> 添加答辩组
-                </div>
-              </div>
-            )}
-          >
-            { graduation_groups && graduation_groups.map((item) => {
-              return <Option value={item.id}>{item.name}</Option>
-            })}
-          </Select>
-        </div>}
-        { course_groups && !!course_groups.length && <div className="df">
-          <span className="firstLabel label">管理权限:</span>
-          <Select style={{ width: 457 }} onChange={this.handleCourseGroupChange} value={courseGroup}>
-            { course_groups && course_groups.map((item) => {
-              return <Option value={item.id}>{item.name}</Option>
-            })}
-          </Select>
-        </div> }
+        
         
         <p className="clearfix mb2" style={{ margin: '0px 15px 6px' }}>
           <Checkbox className="fl" style={{ visibility: 'hidden' }}  ></Checkbox>
@@ -339,6 +308,40 @@ class AddTeacherModal extends Component{
             </InfiniteScroll>
           </div>
         </div>  : <NoneData></NoneData> }
+        <div className="df">
+        { this.hasGraduationModule() && <div className="df" style={{ marginTop: '24px' }}  >
+          <span className="firstLabel label" style={{ flex: '0 0 96px' }}>添加至答辩组:</span>
+          <Select style={{ width: 218, marginRight: '18px' }} onChange={this.handleGradationGroupChange} value={graduationGroup}
+            dropdownRender={menu => (
+              <div>
+                {menu}
+                <Divider style={{ margin: '4px 0' }} />
+                {/* <ActionBtn
+                  onMouseDown={() => { debugger; this.refs['addGraduationGroupModal'].setVisible(true) }}
+                >添加答辩组</ActionBtn> */}
+                <div style={{ padding: '8px', cursor: 'pointer' }} 
+                    onMouseDown={() => { debugger; this.refs['addGraduationGroupModal'].setVisible(true) }}
+                >
+                  <Icon type="plus" /> 添加答辩组
+                </div>
+              </div>
+            )}
+          >
+            { graduation_groups && graduation_groups.map((item) => {
+              return <Option value={item.id}>{item.name}</Option>
+            })}
+          </Select>
+        </div>}
+
+        { course_groups && !!course_groups.length && <div className="df">
+          <span className="firstLabel label">管理权限:</span>
+          <Select style={{ width: 218 }} onChange={this.handleCourseGroupChange} value={courseGroup}>
+            { course_groups && course_groups.map((item) => {
+              return <Option value={item.id}>{item.name}</Option>
+            })}
+          </Select>
+        </div> }
+        </div>
       </ModalWrapper>
     )
   }