增加样式

src/components/common/schema/Schema.jsx

@@ -67,23 +67,28 @@ class Schema extends Component {
                                 {
                                     this.state.currentTable === '' ?
                                         <div>
-                                            <div onClick={() => {
+                                            <div className={'schema'} onClick={() => {
                                                 this.setState({
                                                     currentTable: ''
                                                 })
                                             }}>
-                                                {this.state.schemaName}
+                                                <span className={'schema-name'}>{this.state.schemaName}</span>
+                                                <Icon style={{marginLeft: 15}} type="edit" theme="twoTone"/>
                                             </div>
-                                            <div>
+                                            <div className={'schema-table-list-title'}>
                                                 <Row>
-                                                    <Col span={8}><span>Name</span></Col>
-                                                    <Col span={8}><span>Remark</span></Col>
+                                                    <Col span={8}><span
+                                                        className={'schema-table-title'}>Name</span></Col>
+                                                    <Col span={8}><span
+                                                        className={'schema-table-title'}>Remark</span></Col>
                                                     <Col span={8}>
-                                                        <span onClick={() => {
-                                                            this.setState({
-                                                                currentTable: 'add'
-                                                            })
-                                                        }}>
+                                                        <span
+                                                            className={'schema-table-title'}
+                                                            onClick={() => {
+                                                                this.setState({
+                                                                    currentTable: 'add'
+                                                                })
+                                                            }}>
                                                             <Icon type="plus"/>
                                                         </span>
                                                     </Col>
@@ -91,19 +96,30 @@ class Schema extends Component {
                                             </div>
                                             {
                                                 data.map(table => (
-                                                    <Row key={table.name} className='show'>
-                                                        <Col span={8}
-                                                             onClick={() => this.switchTable(table.name)}><span>{table.name}</span></Col>
-                                                        <Col span={8}><span>{table.remark}</span></Col>
-                                                        <Col span={8}>
-                                                            <DeleteTableButton
-                                                                currentTable={table.name}
-                                                                currentTableIndex={data.findIndex(obj => obj.name === table.name)}
-                                                                schemaID={this.state.schemaID}
-                                                                userID={userID}
-                                                            />
-                                                        </Col>
-                                                    </Row>
+                                                    <div key={table.name} className={'schema-table-list-content'}>
+                                                        <Row>
+                                                            <Col
+                                                                span={8}
+                                                                onClick={() => this.switchTable(table.name)}
+                                                            >
+                                                                <span className={'schema-table-content'}>{table.name}</span>
+                                                            </Col>
+                                                            <Col span={8}>
+                                                                <span className={'schema-table-content'}>{table.remark}</span>
+                                                            </Col>
+                                                            <Col span={8}>
+                                                                <span className={'schema-table-content'}>
+                                                                    <DeleteTableButton
+                                                                        currentTable={table.name}
+                                                                        currentTableIndex={data.findIndex(obj => obj.name === table.name)}
+                                                                        schemaID={this.state.schemaID}
+                                                                        userID={userID}
+                                                                    />
+                                                                </span>
+                                                            </Col>
+                                                        </Row>
+                                                    </div>
+
                                                 ))
                                             }
                                         </div>

src/components/common/schema/index.css

@@ -1,86 +1,125 @@
 .current {
-    background-color: #0F83E8;
-    color: white;
-    text-align: center;
-    height: 50px;
-    line-height: 50px;
-    margin-top: 3px;
+  background-color: #0F83E8;
+  color: white;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+  margin-top: 3px;
 }
 
 .title {
-    font-weight: bolder;
-    font-size: 18px;
-    margin: 10px 0 0 5px;
+  font-weight: bolder;
+  font-size: 18px;
+  margin: 10px 0 0 5px;
 }
 
 p.show {
-    margin: 5px 0 3px 10px;
-    cursor: pointer;
-    font-size: 16px;
-    font-weight: bold;
+  margin: 5px 0 3px 10px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
 }
 
 .wrapper {
-    position: relative;
+  position: relative;
 }
 
 .add {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 2;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 2;
 }
 
 .add-input {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 .column-menu {
-    /*padding: 0 24px;*/
-    /*position: fixed;*/
-    width: 100%;
-    z-index: 1;
-    line-height:50px;
-    font-weight:600;
-    background-color: white;
-    border-bottom: 1px solid #dcdadb;
+  /*padding: 0 24px;*/
+  /*position: fixed;*/
+  width: 100%;
+  z-index: 1;
+  line-height: 50px;
+  font-weight: 600;
+  background-color: white;
+  border-bottom: 1px solid #dcdadb;
 }
 
 .column-title {
-    /*padding-left: 10px;*/
-    font-weight: 500;
-    font-size: 16px;
-    display: inline-block;
-    width: 168px;
-    height: 35px;
-    color: #3a76c5;
+  /*padding-left: 10px;*/
+  font-weight: 500;
+  font-size: 16px;
+  display: inline-block;
+  width: 168px;
+  height: 35px;
+  color: #3a76c5;
 }
 
 .column-content {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .column-details {
-    width: 120px;
-    margin:10px 48px 10px 0 !important;
+  width: 120px;
+  margin: 10px 48px 10px 0 !important;
 }
 
 .table-title {
-    font-weight: 500;
-    font-size: 20px;
-    display: block;
-    height: 35px;
-    margin: 10px 0;
+  font-weight: 500;
+  font-size: 20px;
+  display: block;
+  height: 35px;
+  margin: 10px 0;
 }
 
 .table-title::before {
-    content: '|';
-    display: inline-block;
-    font-weight: 900;
-    color: #3187FA;
-    /*border-right: */
+  content: '|';
+  display: inline-block;
+  font-weight: 900;
+  color: #3187FA;
+  /*border-right: */
 }
+
 .remark {
-    font-weight: lighter;
-    font-size: smaller;
+  font-weight: lighter;
+  font-size: smaller;
+}
+
+.schema {
+  width: 100%;
+  height: 50px;
+  margin-bottom: 10px;
+}
+
+.schema-name {
+  color: #3187FA;
+  font-weight: bold;
+  font-size: 20px;
+  line-height: 50px;
+}
+
+.schema-table-list-title {
+  background-color: #f7f7f7;
+  height: 40px;
+  padding-left: 10px;
+}
+
+.schema-table-title {
+  line-height: 40px;
+  font-weight: bold;
+}
+
+.schema-table-list-content {
+  height: 40px;
+  padding-left: 10px;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.schema-table-list-content:last-child {
+  border-bottom: none;
+}
+
+.schema-table-content {
+  line-height: 40px;
 }