update static style

public/react/src/modules/paths/statics/DisplayTableData.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2020-01-10 13:46:30
  * @LastEditors  : tangjiang
- * @LastEditTime : 2020-01-11 14:02:32
+ * @LastEditTime : 2020-01-11 17:35:03
  */
 import 'antd-table-infinity/dist/index.css';
 import 'antd-table-infinity/index.css';
@@ -58,7 +58,7 @@ const DisplayTableData = ({
       loadingIndicator={loadMoreContent}
       columns={columns}
       sumData={sumData}
-      scroll={{ y: 450 }}
+      scroll={{ y: 500 }}
       dataSource={data}
       // bordered
       // debug

public/react/src/modules/paths/statics/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2020-01-10 09:33:45
  * @LastEditors  : tangjiang
- * @LastEditTime : 2020-01-11 11:18:38
+ * @LastEditTime : 2020-01-11 17:06:56
  */
 import './index.scss';
 import React, { useState } from 'react';
@@ -145,26 +145,30 @@ const App = () => {
             </div>
           </section>
           <section className="static_section_table">
-            {/* <Tabs defaultActiveKey="1">
-              <TabPane tab="Tab 1" key="1">
+            <Tabs defaultActiveKey="1">
+              <TabPane tab="课堂使用情况" key="1">
                 <DisplayTableData 
                   columns={columns} 
                   datas={datas} 
                   fetchData={handleFetchData}
                 />
               </TabPane>
-              <TabPane tab="Tab 2" key="2">
-                Content of Tab Pane 2
-              </TabPane>
-              <TabPane tab="Tab 3" key="3">
-                Content of Tab Pane 3
+              <TabPane tab="实际使用情况" key="2">
+                <DisplayTableData 
+                  columns={columns} 
+                  datas={datas} 
+                  fetchData={handleFetchData}
+                />
               </TabPane>
-            </Tabs> */}
+              <TabPane tab="学习情况" key="3">
                 <DisplayTableData 
                   columns={columns} 
                   datas={datas} 
                   fetchData={handleFetchData}
                 />
+              </TabPane>
+            </Tabs>
+            
           </section> 
         </div>
       </div>

public/react/src/modules/paths/statics/index.scss

@@ -9,6 +9,7 @@
 
   .static_section_table{
     margin-bottom: 140px;
+    padding-top: 5px;
   }
 
   .static_section_header{
@@ -71,6 +72,7 @@
           line-height: 1.5;
           text-align: center;
           color: #909399;
+          margin-top: 20px;
           .icon{
             margin-left: 5px;
             font-size: 16px !important;
@@ -83,12 +85,47 @@
     .ant-table-header{
       overflow-x: hidden !important;
       margin-bottom: 0px !important;
-      border-bottom: 2px solid #e8e8e8;
-      background: green;
+      // border-bottom: 2px solid rgba(241,248,255,1);
+      // background: green;
     }
-    .ant-table-footer .ant-table-content{
-      border-top: 1px solid #e8e8e8;
-      box-sizing: border-box;
+    // .ant-table-footer .ant-table-content{
+    //   border-top: 1px solid #e8e8e8;
+    //   box-sizing: border-box;
+    // }
+
+    .overflow_hidden{
+      max-width: 300px;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+    }
+    table th,
+    table td{
+      line-height: 1;
+      padding: 15px 0
+    }
+    table th{
+      background: rgba(241,248,255,1);
+    }
+
+    table tr:nth-child(2n) td{
+      background: rgba(241,248,255,.4);
+    }
+
+    // .ant-table-thead>tr>th .ant-table-column-sorters:before{
+    //   background: rgba(241,248,255,1);
+    // }
+    .ant-table-thead>tr>th .ant-table-column-sorters:before {
+      position: absolute;
+      content: "";
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(241,248,255,1);
+      -webkit-transition: all .3s;
+      -o-transition: all .3s;
+      transition: all .3s;
     }
   }
 }

public/react/src/modules/paths/statics/mockData.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2020-01-11 10:55:33
  * @LastEditors  : tangjiang
- * @LastEditTime : 2020-01-11 14:01:49
+ * @LastEditTime : 2020-01-11 17:48:02
  */
 import { random } from 'lodash';
 
@@ -28,11 +28,11 @@ const fetchData = (startIndex = 0) =>
               return {
                 key: getGuid(),
                 index: `${index}`,
-                name: 'John Brown',
-                age: 32,
-                address: 'New York No. 1 Lake Park',
+                name: '湖南长沙中南大学湖南长沙中南大学湖南长沙中南大学湖南长沙中南大学湖南长沙中南大学',
+                age: i+1,
+                address: 'New York No. ',
                 address2: 'address2',
-                address3: 'address3'
+                bbb: 'address3'
               };
             }),
       );
@@ -43,45 +43,57 @@ const columns = [
   {
     title: '序号',
     dataIndex: 'index',
-    render: text => text,
+    render: text => text + 1,
     width: 80,
+    align: 'center'
   },
   {
     title: '使用单位',
     dataIndex: 'name',
-    // width: 100,
+    width: 300,
+    className: 'overflow_hidden',
+    align: 'center'
   },
   {
     title: '使用课堂/个',
-    // width: 200,
+    width: 200,
     dataIndex: 'age',
+    align: 'center',
+    sorter: (a, b) => a.age - b.age
   },
   {
     title: '课堂学生/个',
-    // width: 200,
+    width: 200,
     dataIndex: 'address',
+    align: 'center',
+    sorter: (a, b) => a.age - b.age
   },
   {
     title: '选用实训/个',
-    // width: 200,
+    width: 200,
     dataIndex: 'address2',
+    align: 'center',
+    sorter: (a, b) => a.age - b.age
   },
   {
     title: '选用实训/个',
-    // width: 200,
-    dataIndex: 'address3',
+    width: 200,
+    dataIndex: 'bbb',
+    align: 'center',
+    sorter: (a, b) => a.bbb - b.bbb
   }
 ];
 
 const sumData = [
   {
     index: '合计',
+    key: 6,
     name: 'Disabled User',
     age: 99,
-    address: 'Sidney No. 1 Lake Park',
+    address: 'Sidney No.',
     address2: 'address2',
-    addrexs3: 'address3'
-  },
+    bbb: 'address3',
+  }
 ];
 
 export { columns, fetchData, sumData };