From 091493fa777d911f981d53a007fcefc13857597a Mon Sep 17 00:00:00 2001
From: haiyangcui <cuiocean@gmail.com>
Date: Sat, 17 Oct 2020 11:18:17 +0200
Subject: [PATCH] =?UTF-8?q?=E5=AE=9A=E4=B9=89listpage=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/style.scss       | 33 ++++++++++++++++++++-
 src/assets/scss/theme/dark.scss  | 38 ++++++++++++++++++++++++
 src/assets/scss/theme/green.scss | 40 ++++++++++++++++++++++++-
 src/assets/scss/theme/light.scss | 41 +++++++++++++++++++++++--
 src/assets/scss/theme/pink.scss  | 41 +++++++++++++++++++++++--
 src/components/History.vue       | 51 +++++---------------------------
 6 files changed, 194 insertions(+), 50 deletions(-)

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 89c8f5a..d522891 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -124,7 +124,7 @@
     flex: 1;
     border-bottom: 1px solid;
     overflow: auto;
-    el-table__row>td{
+    .el-table__row td{
       border: none;
     }
     .el-table::before{
@@ -195,6 +195,37 @@
     position: absolute;
   }
 }
+
+// Page of list using el-table
+.listpage{
+  position: absolute;
+  left: 80px;
+  right: 20px;
+  top: 40px;
+  bottom: 20px;
+  width: calc(100% - 100px);
+  height: calc(100% - 60px);
+  border-radius: 5px;
+  .listpage-content{
+    height: 100%;
+    position: relative;
+    .listpage-header{
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .listpage-body{
+      height: calc(100% - 40px);
+      overflow-y: auto;
+      .el-table__body td,.el-table__body th{
+        height: 50px;
+        border-bottom: 1px solid;
+      }
+    }
+  }
+}
 // loading
 .zy-loading{
   width: 100%;
diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index 2ed6192..6dde441 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -373,4 +373,42 @@
     background-color: var(--d-bgc-1);
     box-shadow: var(--d-bsc);
   }
+  // Page of list using el-table
+  .listpage{
+    color: var(--d-fc-2);
+    .listpage-content{
+      .listpage-header{
+        border-bottom-color: var(--d-c-3);
+        .btn{
+          &:hover{
+            color: var(--d-fc-3)
+          }
+        }
+      }
+      .listpage-body{
+        .el-table::before{
+          height: 0px;
+        }
+        /* 设置el-table的样式*/
+        .el-table{
+          color: var(--d-fc-1);
+          background-color: var(--d-bgc-1);
+         }
+        .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
+          color: var(--d-fc-1);
+          background-color: var(--d-bgc-1);
+          border-bottom-color: var(--d-c-2);
+        }
+        .el-table--enable-row-hover .el-table__body tr:hover>td{
+          background-color: var(--d-bgc-2);
+        }
+        .el-button{
+          color: var(--d-fc-1);
+          &:hover{
+            color: var(--d-fc-3)
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/src/assets/scss/theme/green.scss b/src/assets/scss/theme/green.scss
index cf92687..8752c65 100644
--- a/src/assets/scss/theme/green.scss
+++ b/src/assets/scss/theme/green.scss
@@ -269,7 +269,7 @@
               color: var(--g-fc-3);
             }
             &:hover{
-              background-color: var(--d-c-3);
+              background-color: var(--g-c-3);
             }
           }
         }
@@ -370,4 +370,42 @@
     background-color: var(--g-bgc-1);
     box-shadow: var(--g-bsc);
   }
+  // Page of list using el-table
+  .listpage{
+    color: var(--g-fc-2);
+    .listpage-content{
+      .listpage-header{
+        border-bottom-color: var(--g-c-3);
+        .btn{
+          &:hover{
+            color: var(--g-fc-3)
+          }
+        }
+      }
+      .listpage-body{
+        .el-table::before{
+          height: 0px;
+        }
+        /* 设置el-table的样式*/
+        .el-table{
+          color: var(--g-fc-1);
+          background-color: var(--g-bgc-1);
+         }
+        .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
+          color: var(--g-fc-1);
+          background-color: var(--g-bgc-1);
+          border-bottom-color: var(--g-c-2);
+        }
+        .el-table--enable-row-hover .el-table__body tr:hover>td{
+          background-color: var(--g-bgc-2);
+        }
+        .el-button{
+          color: var(--g-fc-1);
+          &:hover{
+            color: var(--g-fc-3)
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index c531ae3..504c0cb 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -77,7 +77,6 @@
         color: var(--l-fc-1);
         background-color: var(--l-bgc-1);
         border-bottom-color: var(--l-c-2);
-        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
         &:hover{
           box-shadow: var(--l-bsc-hover);
         }
@@ -269,7 +268,7 @@
               color: var(--l-fc-3);
             }
             &:hover{
-              background-color: var(--d-c-3);
+              background-color: var(--l-c-3);
             }
           }
         }
@@ -370,4 +369,42 @@
     background-color: var(--l-bgc-1);
     box-shadow: var(--l-bsc);
   }
+  // Page of list using el-table
+  .listpage{
+    color: var(--l-fc-2);
+    .listpage-content{
+      .listpage-header{
+        border-bottom-color: var(--l-c-3);
+        .btn{
+          &:hover{
+            color: var(--l-fc-3)
+          }
+        }
+      }
+      .listpage-body{
+        .el-table::before{
+          height: 0px;
+        }
+        /* 设置el-table的样式*/
+        .el-table{
+          color: var(--l-fc-1);
+          background-color: var(--l-bgc-1);
+         }
+        .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
+          color: var(--l-fc-1);
+          background-color: var(--l-bgc-1);
+          border-bottom-color: var(--l-c-2);
+        }
+        .el-table--enable-row-hover .el-table__body tr:hover>td{
+          background-color: var(--l-bgc-2);
+        }
+        .el-button{
+          color: var(--l-fc-1);
+          &:hover{
+            color: var(--l-fc-3)
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/src/assets/scss/theme/pink.scss b/src/assets/scss/theme/pink.scss
index bc32f4e..e00543e 100644
--- a/src/assets/scss/theme/pink.scss
+++ b/src/assets/scss/theme/pink.scss
@@ -76,7 +76,6 @@
         color: var(--p-fc-1);
         background-color:var(--p-bgc-1);
         border-bottom-color: var(--p-c-2);
-        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
         &:hover{
           box-shadow: var(--p-bsc-hover);
         }
@@ -268,7 +267,7 @@
               color: var(--p-fc-3);
             }
             &:hover{
-              background-color: var(--d-c-3);
+              background-color: var(--p-c-3);
             }
           }
         }
@@ -369,4 +368,42 @@
     background-color: var(--p-bgc-1);
     box-shadow: var(--p-bsc);
   }
+  // Page of list using el-table
+  .listpage{
+    color: var(--p-fc-2);
+    .listpage-content{
+      .listpage-header{
+        border-bottom-color: var(--p-c-3);
+        .btn{
+          &:hover{
+            color: var(--p-fc-3)
+          }
+        }
+      }
+      .listpage-body{
+        .el-table::before{
+          height: 0px;
+        }
+        /* 设置el-table的样式*/
+        .el-table{
+          color: var(--p-fc-1);
+          background-color: var(--p-bgc-1);
+         }
+        .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
+          color: var(--p-fc-1);
+          background-color: var(--p-bgc-1);
+          border-bottom-color: var(--p-c-2);
+        }
+        .el-table--enable-row-hover .el-table__body tr:hover>td{
+          background-color: var(--p-bgc-2);
+        }
+        .el-button{
+          color: var(--p-fc-1);
+          &:hover{
+            color: var(--p-fc-3)
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/src/components/History.vue b/src/components/History.vue
index ed7d6bc..6e6b6d4 100644
--- a/src/components/History.vue
+++ b/src/components/History.vue
@@ -1,14 +1,12 @@
 <template>
-  <div class="detail" id="history">
-    <div class="detail-content">
-      <div class="detail-body zy-scroll">
-       <div class="zy-table" id="history-table">
-        <div class="tHeader">
+  <div class="listpage" id="history">
+    <div class="listpage-content">
+       <div class="listpage-header">
           <span class="btn"></span>
           <span class="btn" @click="clearAllHistory">清空</span>
-        </div>
-        <div class="tBody zy-scroll">
-          <el-table
+       </div>
+      <div class="listpage-body">
+        <el-table
               :data="history"
               height="100%"
               row-key="id"
@@ -47,9 +45,7 @@
                   <el-button @click.stop="removeHistoryItem(scope.row)" type="text">删除</el-button>
                 </template>
               </el-table-column>
-            </el-table>
-        </div>
-      </div>
+        </el-table>
     </div>
    </div>
   </div>
@@ -235,36 +231,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-.detail{
-  position: absolute;
-  left: 80px;
-  right: 20px;
-  top: 40px;
-  bottom: 0;
-  width: calc(100% - 100px);
-  height: calc(100% - 40px);
-  border-radius: 5px;
-  .detail-content{
-    height: 100%;
-    position: relative;
-    .detail-header{
-      width: 100%;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .detail-title{
-        font-size: 16px;
-      }
-      .detail-close{
-        cursor: pointer;
-      }
-    }
-    .detail-body{
-    height: calc(100% - 20px);
-    overflow-y: auto;
-  }
-  }
-}
-</style>