增加子组件

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.21.1",
     "babel-loader": "^8.1.0",
     "loadash": "^1.0.0",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",

src/App.css

@@ -3,6 +3,12 @@
   text-align: center;
 }
 
+#root{
+  width: 100%;
+  height: 100%;
+  font-family: Avenir,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji,sans-serif;
+}
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;

src/App.js

@@ -9,7 +9,7 @@ export default class App extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      isLogin: false
+      isLogin: true
     }
   }
 
@@ -42,10 +42,7 @@ export default class App extends React.Component {
   render() {
     return (
       <React.Fragment>
-        {this.state.isLogin ? <Layout></Layout> : <div>
-          <Button type="primary">Button</Button>
-          xxxxs
-          </div>}
+        {this.state.isLogin ? <Layout></Layout> : <div></div>}
       </React.Fragment>
     )
   }

src/component/Layout/Layout.jsx

@@ -1,12 +1,24 @@
 import React from 'react';
-// import { $Axios } from '../common/publish';
-// import './Layout.scss'
-
+import { Radio, Select  } from 'antd';
+import { $Axios } from '../../common/publish';
+import '../Layout/Layout.scss'
+import centerO from '../../../LayoutCenter/center-o/centerO.jsx'
 export default class Layout extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-    
+            headTxt : '商户入网 > 商户基本信息',
+            children : [
+                { txt : '请选择商户签约性质', value : 0 },
+                { txt : '个体工商户',value : 1 },
+                { txt : '事业单位',value : 2 },
+                { txt : '民办非企业组织',value : 3 },
+                { txt : '社会团体',value : 4 },
+                { txt : '非法人企业',value : 5 },
+                { txt : '自然人',value : 6 },
+                { txt : '政府机关',value : 7 },
+                { txt : '其他',value : 8 },
+            ]
         }
         
     }
@@ -15,7 +27,9 @@ export default class Layout extends React.Component {
         
     }
 
-
+    handleChange(value) {
+        console.log(`Selected: ${value}`);
+    }
 
         // let params = {
         //     token : localStorage.getItem('token'),
@@ -42,9 +56,17 @@ export default class Layout extends React.Component {
 
 
     render() {
+        const { headTxt, children } = this.state;
+        const { Option } = Select;
         return(
-            <div className='rootDom'>
-               xasdasd
+            <div className='rootDom'>{console.log(1)}
+               <div className='header_center'>{ headTxt }</div>
+               <div className='main_center'>
+                    <div className='center_ups'>
+                        {/* <centerO></centerO> */}
+                    </div>
+                    <div className='center_bottom'></div>
+               </div>
             </div>
         )
     }

src/component/Layout/Layout.scss

@@ -0,0 +1,27 @@
+.rootDom{
+    width: 100%;
+    height: 100%;
+    .header_center{
+        width: 100%;
+        height: 60px;
+        line-height: 60px;
+        text-indent: 20px;
+        font-size: 18px;
+        font-weight: 600;
+        border-bottom: 1px solid #ccc;
+    }
+    .main_center{
+        width: 100%;
+        height: calc(100% - 60px);
+        padding: 20px;
+        .center_ups{
+            width: 100%;
+            height: 80%;
+        }
+        .center_bottom{
+            width: 100%;
+            height: 20%;
+            background-color: #f60;
+        }
+    }
+}

src/component/LayoutCenter/center-o/centerO.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Radio, Select  } from 'antd';
+import { $Axios } from '@/common/publish';
+import '../center-o/centerO.scss'
+
+export default class centerO extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            children : [
+                { txt : '请选择商户签约性质', value : 0 },
+                { txt : '个体工商户',value : 1 },
+                { txt : '事业单位',value : 2 },
+                { txt : '民办非企业组织',value : 3 },
+                { txt : '社会团体',value : 4 },
+                { txt : '非法人企业',value : 5 },
+                { txt : '自然人',value : 6 },
+                { txt : '政府机关',value : 7 },
+                { txt : '其他',value : 8 },
+            ]
+        }
+        
+    }
+	
+	componentDidMount() {
+        
+    }
+
+    handleChange(value) {
+        console.log(`Selected: ${value}`);
+    }
+
+
+    render() {
+        const { children } = this.state;
+        const { Option } = Select;
+        return(
+            <div className='center_up'>
+                <div className='center_left'>
+                    <div className='c-l'>
+                        商户入网类型 ： <Radio.Group name="radiogroup" defaultValue={1}>
+                                            <Radio value={1}>被分帐方</Radio>
+                                        </Radio.Group>
+                    </div>
+                    <div className='c-l'>
+                        商户签约性质 ： <Select size='default' defaultValue="请选择商户签约性质" onChange={ this.handleChange } style={{ width: 200 }}>
+                                            {children.map((item,index) => {
+                                                {console.log(item)}
+                                                // <Option value={item.value}>{item.txt}</Option>
+                                            })}
+                                        </Select>
+                    </div>
+                </div>
+                <div className='center_right'></div>
+            </div>
+        )
+    }
+}

src/component/LayoutCenter/center-o/centerO.scss

@@ -0,0 +1,20 @@
+.center_up{
+    width: 100%;
+    height: 100%;
+    .center_left{
+        width: 50%;
+        height: 100%;
+        float: left;
+        .c-l{
+            width: 100%;
+            height: 60px;
+            line-height: 60px;
+        }
+    }
+    .center_right{
+        width: 50%;
+        height: 100%;
+        float: left;
+        background-color: #ccc;
+    }
+}