新增成功、新增失敗、

修改管理員帳號、新增管理員帳號、表格

css/style.css

@@ -41,6 +41,11 @@ ul {
   cursor: pointer;
 }
 
+.btn-wt img {
+  margin-right: 5px;
+  padding-bottom: 3px;
+}
+
 .btn-wt:hover {
   background-color: #f1f8fb;
   text-decoration: none;
@@ -55,10 +60,12 @@ ul {
 .btn-wt.blue {
   background-color: #35a9e1;
   color: #fff;
+  outline: none;
 }
 
 .btn-wt.blue:hover {
   background-color: #5dbae7;
+  outline: none;
 }
 
 .loginBG {
@@ -297,6 +304,20 @@ label.btn input[type="radio"].with-gap:checked + label:after {
 
 .pagination {
   font-size: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: end;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-top: 65px;
 }
 
 .pagination .pren, .pagination .pren:hover {
@@ -311,8 +332,16 @@ label.btn input[type="radio"].with-gap:checked + label:after {
   cursor: pointer;
 }
 
-.pagination .pren.active, .pagination .pren.active:hover, .pagination .pren.all, .pagination .pren.all:hover, .pagination .pren:hover.active, .pagination .pren:hover.active:hover, .pagination .pren:hover.all, .pagination .pren:hover.all:hover {
-  background-image: url("../images/icon/icon-pren.svg");
+.pagination .pren.active, .pagination .pren.active:hover, .pagination .pren:hover.active, .pagination .pren:hover.active:hover {
+  background-image: url("../images/icon/icon-pren2.svg");
+}
+
+.pagination .pren.all, .pagination .pren.all:hover, .pagination .pren:hover.all, .pagination .pren:hover.all:hover {
+  background-image: url("../images/icon/icon-front.svg");
+}
+
+.pagination .pren.all.active, .pagination .pren.all.active:hover, .pagination .pren:hover.all.active, .pagination .pren:hover.all.active:hover {
+  background-image: url("../images/icon/icon-front2.svg");
 }
 
 .pagination .next, .pagination .next:hover {
@@ -327,25 +356,35 @@ label.btn input[type="radio"].with-gap:checked + label:after {
   cursor: pointer;
 }
 
-.pagination .next.active, .pagination .next.active:hover, .pagination .next.all, .pagination .next.all:hover, .pagination .next:hover.active, .pagination .next:hover.active:hover, .pagination .next:hover.all, .pagination .next:hover.all:hover {
+.pagination .next.active, .pagination .next.active:hover, .pagination .next:hover.active, .pagination .next:hover.active:hover {
+  background-image: url("../images/icon/icon-next2.svg");
+}
+
+.pagination .next.all, .pagination .next.all:hover, .pagination .next:hover.all, .pagination .next:hover.all:hover {
+  background-image: url("../images/icon/icon-end.svg");
+}
+
+.pagination .next.all.active, .pagination .next.all.active:hover, .pagination .next:hover.all.active, .pagination .next:hover.all.active:hover {
   background-image: url("../images/icon/icon-end2.svg");
 }
 
 .pagination .page-number {
   display: inline-block;
   vertical-align: middle;
-  width: 48px;
-  height: 24px;
-  margin-right: 10px;
+  width: 32px;
+  height: 32px;
+  margin-right: 2px;
+  margin-left: 2px;
+  line-height: 28px;
   font-size: 16px;
-  color: #fff;
   text-align: center;
-  background-color: #35a9e1;
+  background-color: #fff;
+  color: #35a9e1;
 }
 
 .pagination .page-number.active {
-  background-color: #fff;
-  color: #35a9e1;
+  background-color: #35a9e1;
+  color: #fff;
 }
 
 .pagination .page-total {
@@ -736,6 +775,18 @@ h1 {
   padding: 0;
 }
 
+.modal .modal-content .modal-body .adminbg {
+  background-color: rgba(14, 67, 93, 0.05);
+  padding: 15px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
 .modal .modal-content .modal-footer {
   border-top: 1px;
   border-top: 0px solid #dee2e6;
@@ -756,6 +807,11 @@ h1 {
   .NB-show {
     display: none;
   }
+  .pagination {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
   .table {
     color: #0e435d;
   }

css/style.scss

@@ -127,7 +127,7 @@ ul {
 //             height: 100vh;
 //         }
 //     }
-
+   
 // }
 
 .btn-wt {
@@ -140,6 +140,10 @@ ul {
     background-color: #fff;
     outline: none;
     cursor: pointer;
+    img {
+        margin-right: 5px;
+        padding-bottom: 3px;
+    }
     &:hover {
         // color: #fff;
         // opacity: 85%;
@@ -155,9 +159,11 @@ ul {
     &.blue {
         background-color: #35a9e1;
         color: #fff;
+        outline: none;
         // border-radius: 0px;
         &:hover {
             background-color: #5dbae7;
+            outline: none;
         }
     }
     
@@ -402,7 +408,11 @@ label.btn input[type="radio"].with-gap:checked + label:after {
 
 .pagination {
     font-size: 0;
-    // flex-direction: row-reverse!important;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    align-items: center;
+    margin-top: 65px;
 
     .pren, .pren:hover {
         display: inline-block;
@@ -414,8 +424,14 @@ label.btn input[type="radio"].with-gap:checked + label:after {
         background-repeat: none;
         background-position: center;
         cursor: pointer;
-        &.active, &.active:hover, &.all, &.all:hover {
-            background-image: url("../images/icon/icon-pren.svg");
+        &.active, &.active:hover {
+            background-image: url("../images/icon/icon-pren2.svg");
+        }
+        &.all, &.all:hover {
+            background-image: url("../images/icon/icon-front.svg");
+        }
+        &.all.active, &.all.active:hover {
+            background-image: url("../images/icon/icon-front2.svg");
         }
     }
 
@@ -429,7 +445,13 @@ label.btn input[type="radio"].with-gap:checked + label:after {
         background-repeat: none;
         background-position: center;
         cursor: pointer;
-        &.active, &.active:hover, &.all, &.all:hover {
+        &.active, &.active:hover {
+            background-image: url("../images/icon/icon-next2.svg");
+        }
+        &.all, &.all:hover {
+            background-image: url("../images/icon/icon-end.svg");
+        }
+        &.all.active, &.all.active:hover {
             background-image: url("../images/icon/icon-end2.svg");
         }
     }
@@ -438,18 +460,21 @@ label.btn input[type="radio"].with-gap:checked + label:after {
     .page-number {
         display: inline-block;
         vertical-align: middle;
-        width: 48px;
-        height: 24px;
-        margin-right: 10px;
+        width: 32px;
+        height: 32px;
+        margin-right: 2px;
+        margin-left: 2px;
+        line-height: 28px;
         // border: 1px solid #ddd;
         // border-radius: 4px;
+        // padding: 2px 14px;
         font-size: 16px;
-        color: #fff;
-        text-align: center;
-        background-color: #35a9e1;
+        text-align: center;        
+        background-color: #fff;
+        color: #35a9e1;
         &.active {
-            background-color: #fff;
-            color: #35a9e1;
+            background-color: #35a9e1;
+            color: #fff;
         }
     }
 
@@ -871,6 +896,12 @@ h1 {
                 }
                 
             }
+            .adminbg {
+                background-color: rgba(14, 67, 93, 0.05);
+                padding: 15px;
+                display: flex;
+                flex-direction: column;
+            }
 
         }
         
@@ -899,6 +930,10 @@ h1 {
         display: none;
     }
 
+    .pagination {
+        justify-content: center;
+    }
+
     .table {
         color: #0e435d;
         &.table-hrm {