历史数据修改优化

src/app/pages/historical-data/historical-data.component.scss

@@ -1,16 +1,23 @@
 .main-page {
+    position: relative;
     width: 100%;
     height: 100%;
-    overflow-y: scroll;
+    overflow-y: auto;
+    overflow-x: hidden;
     padding: 15px 10px;
     background-color: #fff;
     .page-content {
         border: 1px solid #ccc;
+        height: 100%;
         padding: 10px 20px;
         .search-filter {
+            position: relative;
             padding: 0 15px;
             .first-condition {
                 .line-operator-right {
+                    // position: absolute;
+                    // top: 0;
+                    // right: 0;
                     text-align: right;
                     padding: 0;
                     .btn-info {
@@ -19,7 +26,8 @@
                     }
                 }
             }
-            .second-condition,.third-condition{
+            .second-condition,
+            .third-condition {
                 display: none;
             }
             .input-container {
@@ -29,35 +37,119 @@
                     display: inline-block;
                 }
             }
-            .filterClose-c{
+            .filterClose-c {
                 display: none;
             }
-            .filterClose-o{
+            .filterClose-o {
                 display: flex;
             }
         }
-        .airline-table{
-            .table-container{
-                // border: 1px solid #ccc;
+        .airline-table {
+            .table-container {
+                display: inline-block;
+                // position: relative;
                 width: 100%;
-                height: 700px;
-                overflow: auto;
-                box-shadow: 0 0 1px .5px #ddd;
-                table{
-                    width: max-content;
-                    tr{
-                        cursor: pointer;
-                        &.selected{
-                            background: rgb(181, 215, 255);
+                // overflow-x: auto;
+                overflow-y: hidden;
+                box-shadow: 0 0 1px 0.5px #ddd;
+                .table-head {
+                    overflow: hidden;
+                    overflow-y: scroll;
+                    height: 42px;
+                    table {
+                        margin: 0;
+                        width: max-content;
+                        th {
+                            border-bottom: none;
+                            background-color: #ddd;
+                            color: rgb(0, 0, 255);
+                            text-align: center;
                         }
                     }
-                    th{
-                        background-color: #ddd;
+                    &::-webkit-scrollbar {
+                        width: 15px;
+                        height: 15px;
                     }
-                    th,td{
-                        // border: none;
-                        text-align: center;
+                }
+
+                .table-body {
+                    position: relative;
+                    // height: 600px;
+                    overflow: auto;
+                    width: 100%;
+                    .list-view-phantom {
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        right: 0;
+                        z-index: -1;
                     }
+                    table {
+                        left: 0;
+                        right: 0;
+                        top: 0;
+                        position: absolute;
+                        width: max-content;
+                        tr {
+                            cursor: pointer;
+                            height: 42px;
+                            &.selected {
+                                background: rgb(181, 215, 255);
+                            }
+                        }
+                        td {
+                            white-space: nowrap;
+                            border: 1px solid #dee2e6;
+                            text-align: center;
+                        }
+                    }
+                    &::-webkit-scrollbar {
+                        width: 15px;
+                        height: 15px;
+                    }
+                    &::-webkit-scrollbar-thumb {
+                        /*滚动条里面小方块*/
+                        background: rgba(165, 207, 222, 1);
+                        border-radius: 10px;
+                    }
+                    &::-webkit-scrollbar-track {
+                        background: rgba(0, 0, 0, 0.06);
+                        border-radius: 10px;
+                    }
+                }
+            }
+            .airline-message {
+                display: inline-block;
+                // box-shadow: 0 0 1px .5px #ddd;
+                vertical-align: top;
+                width: 0;
+                margin-left: 1%;
+                height: 700px;
+                /deep/ .ant-tabs-bar {
+                    .ant-tabs-tab {
+                        padding: 0 5px;
+                        &.ant-tabs-tab-active {
+                            background: skyblue;
+                            /* border-color: skyblue; */
+                            color: rgba(0, 0, 0, 0.65);
+                            padding-bottom: 0;
+                        }
+                    }
+                }
+                /deep/ .ant-tabs-content {
+                    height: 100%;
+                    overflow: auto;
+                    border: 1px solid #ccc;
+                    white-space: nowrap;
+                }
+                /deep/ .ant-tabs-tab-prev {
+                    background-color: rgba(221, 221, 221, 0.5);
+                }
+                /deep/ .ant-tabs-tab-next {
+                    background-color: rgba(221, 221, 221, 0.5);
+                }
+                nz-tabset {
+                    height: 100%;
                 }
                 &::-webkit-scrollbar {
                     width: 15px;
@@ -73,6 +165,19 @@
                     border-radius: 10px;
                 }
             }
+            .table-c {
+                width: 75%;
+            }
+            .table-o {
+                width: 100%;
+            }
+            .tab-c {
+                width: 0;
+                display: none;
+            }
+            .tab-o {
+                width: 24%;
+            }
         }
     }
 }