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">
+            <Tabs defaultActiveKey="1">
-              <TabPane tab="Tab 1" key="1">
+              <TabPane tab="课堂使用情况" key="1">
                 <DisplayTableData 
                   columns={columns} 
                   datas={datas} 
                   fetchData={handleFetchData}
                 />
               </TabPane>
-              <TabPane tab="Tab 2" key="2">
+              <TabPane tab="实际使用情况" key="2">
-                Content of Tab Pane 2
+                <DisplayTableData 
+                  columns={columns} 
+                  datas={datas} 
+                  fetchData={handleFetchData}
+                />
               </TabPane>
-              <TabPane tab="Tab 3" key="3">
+              <TabPane tab="学习情况" key="3">
-                Content of Tab Pane 3
+                <DisplayTableData 
+                  columns={columns} 
+                  datas={datas} 
+                  fetchData={handleFetchData}
+                />
               </TabPane>
-            </Tabs> */}
+            </Tabs>
-            <DisplayTableData 
+            
-              columns={columns} 
-              datas={datas} 
-              fetchData={handleFetchData}
-            />
           </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;
+      // border-bottom: 2px solid rgba(241,248,255,1);
-      background: green;
+      // background: green;
     }
-    .ant-table-footer .ant-table-content{
+    // .ant-table-footer .ant-table-content{
-      border-top: 1px solid #e8e8e8;
+    //   border-top: 1px solid #e8e8e8;
-      box-sizing: border-box;
+    //   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',
+                name: '湖南长沙中南大学湖南长沙中南大学湖南长沙中南大学湖南长沙中南大学湖南长沙中南大学',
-                age: 32,
+                age: i+1,
-                address: 'New York No. 1 Lake Park',
+                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,
+    width: 200,
-    dataIndex: 'address3',
+    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 };