From 4613c32c930e62a799b85aa97bb8c50142beb4c1 Mon Sep 17 00:00:00 2001
From: xianfuxing <xianfuxing@126.com>
Date: Fri, 3 Aug 2018 12:38:09 +0800
Subject: [PATCH] # up pagination style

---
 src/views/counter/count.vue | 49 +++++++++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/views/counter/count.vue b/src/views/counter/count.vue
index e2fd459..836151d 100644
--- a/src/views/counter/count.vue
+++ b/src/views/counter/count.vue
@@ -46,8 +46,9 @@
     <el-pagination
       class="pagination"
       background
-      layout="prev, pager, next"
+      layout="total, prev, pager, next, jumper"
       @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
       :total="total">
     </el-pagination>
   </div>
@@ -82,6 +83,10 @@ export default {
       // console.log(page)
       this.listLoading = true
       this.getDeviceCount({ page })
+    },
+    handleSizeChange(page) {
+      this.listLoading = true
+      this.getDeviceCount({ page })
     }
   },
   created() {
@@ -96,8 +101,36 @@ export default {
 <style lang="scss">
   .pagination {
       float: right;
+      font-weight: normal;
       padding: 2rem 0 1rem 0;
+      .btn-prev {
+        border: 1px solid #d1dbe5;
+        border-right: 0;
+        border-radius: 0 !important;
+        margin: 0 !important;
+      }
+      .btn-next {
+        border: 1px solid #d1dbe5;
+        // border-left: 0;
+        border-radius: 0!important;
+        margin: 0 !important;
+      }
+      .el-pager li {
+        border: 1px solid #d1dbe5;
+        box-sizing: border-box;
+        border-radius: 0!important;
+        border-right: 0;
+        padding: 0;
+        margin: 0 !important;
+      }
+      .el-pagination__jump {
+        margin-left: .8rem;
+      }
+      .el-pagination__editor.el-input {
+        width: 2.5rem;
+      }
   }
+  // mobile
   @media screen and (max-width: 375px) {
     .pagination {
       display: flex !important;
@@ -105,11 +138,17 @@ export default {
       float: none;
       padding: 1rem 0 1rem 0;
       .el-pager li {
-        height: 1.5rem;
-        line-height: 1.5rem;
+        // height: 1.5rem;
+        // line-height: 1.5rem;
         font-size: .5rem !important;
-        margin: .1rem .1rem !important;
-        min-width: 1.5rem !important;
+        // min-width: 1.5rem !important;
+      }
+      .el-pagination__total {
+        // margin-right: 2rem;
+        display: none !important;
+      }
+      .el-pagination__jump {
+        display: none !important;
       }
     }
   }