From fb6845f4312f11fbc6aa457959194c30affebb4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 14 Jan 2021 17:06:46 +0800
Subject: [PATCH] Fix the problem that Page sometimes displays garbled
 characters

---
 src/components/page/page.vue    |  4 +--
 src/styles/components/page.less | 45 ++++++++++++++++++++-------------
 2 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/components/page/page.vue b/src/components/page/page.vue
index aef3e54e..dcfccfdb 100644
--- a/src/components/page/page.vue
+++ b/src/components/page/page.vue
@@ -37,7 +37,7 @@
             <a><template v-if="prevText !== ''">{{ prevText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
         </li>
         <li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
-        <li :title="t('i.page.prev5')" v-if="currentPage > 5" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a></li>
+        <li :title="t('i.page.prev5')" v-if="currentPage > 5" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-back"></i><i class="ivu-icon ivu-icon-ios-more"></i></a></li>
         <li :title="currentPage - 3" v-if="currentPage === 5" :class="[prefixCls + '-item']" @click="changePage(currentPage - 3)"><a>{{ currentPage - 3 }}</a></li>
         <li :title="currentPage - 2" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</a></li>
         <li :title="currentPage - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
@@ -45,7 +45,7 @@
         <li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
         <li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li>
         <li :title="currentPage + 3" v-if="allPages - currentPage === 4" :class="[prefixCls + '-item']" @click="changePage(currentPage + 3)"><a>{{ currentPage + 3 }}</a></li>
-        <li :title="t('i.page.next5')" v-if="allPages - currentPage >= 5" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a></li>
+        <li :title="t('i.page.next5')" v-if="allPages - currentPage >= 5" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i><i class="ivu-icon ivu-icon-ios-more"></i></a></li>
         <li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
         <li
             :title="t('i.page.next')"
diff --git a/src/styles/components/page.less b/src/styles/components/page.less
index 26472078..5d44e7fb 100644
--- a/src/styles/components/page.less
+++ b/src/styles/components/page.less
@@ -77,49 +77,58 @@
     }
 
     &-item-jump-prev, &-item-jump-next {
-        &:after {
-            content: "•••";
-            display: block;
-            letter-spacing: 1px;
-            color: #ccc;
-            text-align: center;
-        }
+        //&:after {
+        //    content: "•••";
+        //    display: block;
+        //    letter-spacing: 1px;
+        //    color: #ccc;
+        //    text-align: center;
+        //}
 
-        i{
+        i:first-child{
             display: none;
         }
 
         &:hover {
-            &:after{
-                display: none;
-            }
-            i{
+            //&:after{
+            //    display: none;
+            //}
+            i:first-child{
                 display: inline;
             }
+            i:last-child{
+                display: none;
+            }
         }
     }
 
     &-with-disabled &-item-jump-prev, &-with-disabled &-item-jump-next{
         cursor: @cursor-disabled;
+        i{
+            color: #ccc;
+        }
         &:hover {
-            &:after{
-                display: block;
-            }
-            i{
+            //&:after{
+            //    display: block;
+            //}
+            i:first-child{
                 display: none;
             }
+            i:last-child{
+                display: inline;
+            }
         }
     }
 
     &-item-jump-prev:hover {
-        i:after {
+        i:first-child:after {
             content: "\F115";
             margin-left: -8px;
         }
     }
 
     &-item-jump-next:hover {
-        i:after {
+        i:first-child:after {
             content: "\F11F";
             margin-left: -8px;
         }