增加端口号配置

src/pages/20181112o4/config.json

@@ -1,7 +1,10 @@
 {
   "template": "react",
-  "style": "css",
-  "proxy": {
-      "/api": "http://localhost:3000"
-    }
+  "https": false,
+  "port":8088,
+  "proxy":[{
+    "context": ["/api"],
+    "target": "http://localhost:8080/",
+    "secure": false
+  }]
 }

src/pages/20181112o4/src/components/app.css

@@ -2,4 +2,22 @@
   width: 100%;
   height: 100%;
   font-size: 16px;
+  display: flex;
+  justify-content: space-around;
+}
+
+.group {
+  height: 100%;
+  flex: 1;
+}
+
+.row {
+  display: flex;
+  justify-content: space-around;
+}
+
+.item {
+  width: 10px;
+  height: 10px;
+  background-color: lightgreen;
 }

src/pages/20181112o4/src/components/app.js

@@ -4,10 +4,73 @@ import React, { Component } from 'react';
 import './app.css';
 
 class App extends Component {
+   constructor () {
+      super();
+
+            
+      this.front = 2;
+      this.back = 10;
+      this.gap = 2;
+      this.group = 4;
+      this.lines = (this.back - this.front) / this.gap;
+
+      this.state = {
+         seatList:[]
+      }
+   }
+
+   groupName(g) {
+      let name = '';
+      switch(g) {
+         case 0:
+            name = 'A';
+            break;
+         case 1:
+            name = 'B';
+            break;
+         case 2:
+            name = 'C';
+            break;
+         case 3:
+            name = 'D';
+            break;
+      }
+      return name;
+   }
+
+   componentDidMount() {
+      let list = [];
+      for (let g = 0; g < this.group; g++) {
+         for (let line = this.lines; line >= 0; line--) {
+            for (let seat = 0; seat < (this.back - this.gap * (this.lines - line)); seat++) {
+               list.push({
+                  group: this.groupName(g),
+                  number: seat,
+                  row: line,
+                  disable:false
+               });
+            }
+         };
+      }
+      this.setState({
+         seatList:list
+      });
+
+      console.log(list)
+   }
+
+   renderSeat() {
+      
+   }
+
    render() {
       return (
          <div className="app">
-            Hello World!
+            <div className="group">
+               <div className="row">
+                  <div className="item"></div>
+               </div>
+            </div>
          </div>
       );
    }

src/pages/20181112o4/src/index.css

@@ -7,4 +7,6 @@ body {
 #root {
   width: 100%;
   height: 100%;
+  padding: 30px 20px;
+  box-sizing: border-box;
 }