optimize Page style

optimize Page style

src/styles/components/page.less

@@ -14,7 +14,7 @@
         float: left;
         min-width: 28px;
         height: 28px;
-        line-height: 28px;
+        line-height: 26px;
         margin-right: 4px;
         text-align: center;
         list-style: none;
@@ -54,7 +54,7 @@
         &:after {
             content: "•••";
             display: block;
-            letter-spacing: 2px;
+            letter-spacing: 1px;
             color: #ccc;
             text-align: center;
         }
@@ -85,11 +85,19 @@
         }
     }
 
-    &-prev,
+    &-prev{
-    &-item-jump-prev,
-    &-item-jump-next {
         margin-right: 8px;
     }
+
+    &-item-jump-prev,
+    &-item-jump-next{
+        margin-right: 4px;
+    }
+
+    &-next{
+        margin-left: 4px;
+    }
+
     &-prev,
     &-next,
     &-item-jump-prev,
@@ -98,19 +106,19 @@
         float: left;
         min-width: 28px;
         height: 28px;
-        line-height: 28px;
+        line-height: 26px;
         list-style: none;
         text-align: center;
         cursor: pointer;
         color: #666;
         font-family: Arial;
+        border: 1px solid @border-color-base;
         border-radius: @btn-border-radius;
         .transition(all @transition-time @ease-in-out);
     }
 
     &-prev,
     &-next {
-        border: 1px solid @border-color-base;
         background-color: #fff;
 
         a {
@@ -237,6 +245,8 @@
     &.mini &-item-jump-next {
         height: 20px;
         line-height: 20px;
+        border: none;
+        margin-right: 0;
     }
 
     &.mini &-options {

test/routers/page.vue

@@ -1,59 +1,13 @@
-<style>
-
-</style>
 <template>
-    <Page :total="40" size="small"></Page>
+    <Page :total="1000" show-sizer show-elevator show-total></Page>
-    <Page :total="40" size="small" show-elevator show-sizer></Page>
+    <br><br>
-    <Page :total="40" size="small" show-total></Page>
+    <Page :total="1000" show-sizer show-elevator show-total size="small"></Page>
-    <Page :total="100" show-sizer :page-size="5" :page-size-opts="[5,10,15,20]"></Page>
+    <br><br>
+    <Page :current="2" :total="50" simple></Page>
 </template>
 <script>
-    import { Modal, Button, Message, Page } from 'iview';
+    import { Page } from 'iview';
-
     export default {
-        components: { Modal, Button, Page },
+        components: { Page }
-        props: {
-        
-        },
-        data () {
-            return {
-
-            }        
-        },
-        methods: {
-            info () {
-                Modal.info({
-                    title: '这是对话框标题',
-                    content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
-                });
-            },
-            success () {
-                Modal.success();
-            },
-            warning () {
-                Modal.warning();
-            },
-            error () {
-                Modal.error();
-            },
-            confirm () {
-                Modal.confirm({
-//                    okText: 'OK',
-//                    cancelText: 'Cancel',
-                    title: '删除提示',
-                    content: '删除后将不可找回，您确定要删除吗？',
-                    onCancel () {
-                        Message.info('cancel it');
-                    },
-                    onOk () {
-                        setTimeout(() => {
-                            Modal.remove();
-                            Message.success('OK!');
-                        }, 2000);
-                    },
-                    loading: true
-                });
-            }
-        }
     }
 </script>