diff --git a/packages/fineui/src/case/pager/pager.direction.js b/packages/fineui/src/case/pager/pager.direction.js
index 53cc51b82..42df73573 100644
--- a/packages/fineui/src/case/pager/pager.direction.js
+++ b/packages/fineui/src/case/pager/pager.direction.js
@@ -40,6 +40,11 @@ export class DirectionPager extends Widget {
     }
     _init() {
         super._init(...arguments);
+
+        this.ITEM_GAP = 2;
+        this.ITEM_WIDTH = this.options.height - 2 * this.ITEM_GAP;
+        this.MIDDLE_GAP = 16;
+
         this._createVPager();
         this._createHPager();
         this.layout = createWidget({
@@ -49,23 +54,23 @@ export class DirectionPager extends Widget {
             items: [
                 {
                     el: this.vpager,
-                    top: 0,
-                    right: 86,
+                    top: this.ITEM_GAP,
+                    right: this.ITEM_WIDTH * 3 + this.MIDDLE_GAP,
                 },
                 {
                     el: this.vlabel,
-                    top: 0,
-                    right: 110,
+                    top: this.ITEM_GAP,
+                    right: this.ITEM_WIDTH * 4 + this.MIDDLE_GAP,
                 },
                 {
                     el: this.hpager,
-                    top: 0,
+                    top: this.ITEM_GAP,
                     right: 0,
                 },
                 {
                     el: this.hlabel,
-                    top: 0,
-                    right: 24,
+                    top: this.ITEM_GAP,
+                    right: this.ITEM_WIDTH,
                 }
             ],
         });
@@ -75,20 +80,20 @@ export class DirectionPager extends Widget {
         const v = this.options.vertical;
         this.vlabel = createWidget({
             type: Label.xtype,
-            width: 24,
-            height: 24,
+            width: this.ITEM_WIDTH,
+            height: this.ITEM_WIDTH,
             value: v.curr,
             title: v.curr,
             invisible: true,
         });
         this.vpager = createWidget({
             type: Pager.xtype,
-            width: 72,
+            width: this.ITEM_WIDTH * 3,
             layouts: [
                 {
                     type: HorizontalLayout.xtype,
                     scrollx: false,
-                    rgap: 24,
+                    rgap: this.ITEM_WIDTH,
                 }
             ],
             invisible: true,
@@ -105,8 +110,8 @@ export class DirectionPager extends Widget {
                 value: "prev",
                 title: i18nText("BI-Up_Page"),
                 warningTitle: i18nText("BI-Current_Is_First_Page"),
-                height: 22,
-                width: 22,
+                height: this.ITEM_WIDTH - 2,
+                width: this.ITEM_WIDTH - 2,
                 cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2",
             },
             next: {
@@ -114,8 +119,8 @@ export class DirectionPager extends Widget {
                 value: "next",
                 title: i18nText("BI-Down_Page"),
                 warningTitle: i18nText("BI-Current_Is_Last_Page"),
-                height: 22,
-                width: 22,
+                height: this.ITEM_WIDTH - 2,
+                width: this.ITEM_WIDTH - 2,
                 cls: "bi-border bi-border-radius direction-pager-next column-next-page-h-font bi-list-item-select2",
             },
 
@@ -137,20 +142,20 @@ export class DirectionPager extends Widget {
         const h = this.options.horizontal;
         this.hlabel = createWidget({
             type: Label.xtype,
-            width: 24,
-            height: 24,
+            width: this.ITEM_WIDTH,
+            height: this.ITEM_WIDTH,
             value: h.curr,
             title: h.curr,
             invisible: true,
         });
         this.hpager = createWidget({
             type: Pager.xtype,
-            width: 72,
+            width: this.ITEM_WIDTH * 3,
             layouts: [
                 {
                     type: HorizontalLayout.xtype,
                     scrollx: false,
-                    rgap: 24,
+                    rgap: this.ITEM_WIDTH,
                 }
             ],
             invisible: true,
@@ -167,8 +172,8 @@ export class DirectionPager extends Widget {
                 value: "prev",
                 title: i18nText("BI-Left_Page"),
                 warningTitle: i18nText("BI-Current_Is_First_Page"),
-                height: 22,
-                width: 22,
+                height: this.ITEM_WIDTH - 2,
+                width: this.ITEM_WIDTH - 2,
                 cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2",
             },
             next: {
@@ -176,8 +181,8 @@ export class DirectionPager extends Widget {
                 value: "next",
                 title: i18nText("BI-Right_Page"),
                 warningTitle: i18nText("BI-Current_Is_Last_Page"),
-                height: 22,
-                width: 22,
+                height: this.ITEM_WIDTH - 2,
+                width: this.ITEM_WIDTH - 2,
                 cls: "bi-border bi-border-radius direction-pager-next row-next-page-h-font bi-list-item-select2",
             },
 
@@ -260,7 +265,7 @@ export class DirectionPager extends Widget {
             vShow = true;
         }
         this.setVisible(hShow || vShow);
-        const num = [86, 110, 0, 24];
+        const num = [this.ITEM_WIDTH * 3 + this.MIDDLE_GAP, this.ITEM_WIDTH * 4 + this.MIDDLE_GAP, 0, this.ITEM_WIDTH];
         const items = this.layout.attr("items");
 
         if (vShow === true && hShow === true) {
diff --git a/packages/fineui/src/core/utils/color.js b/packages/fineui/src/core/utils/color.js
index 718a9e74b..45bd4f1b7 100644
--- a/packages/fineui/src/core/utils/color.js
+++ b/packages/fineui/src/core/utils/color.js
@@ -42,7 +42,7 @@ export function getContrastColor(color) {
         return "#FFFFFF";
     }
 
-    return "#3D4D66";
+    return "#091e40";
 }
 
 export function rgb2hex(rgbColour) {