Commit 5f78b0a662d0ec61bd8052161b3c25027513195d
1 parent
c0478e27
update Page style #1252
Showing
2 changed files
with
19 additions
and
15 deletions
Show diff stats
examples/routers/page.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div style="margin: 100px;"> | ||
| 3 | - <Page :total="100" :current="val" show-sizer placement="top"></Page> | ||
| 4 | - </div> | 2 | + <Page :total="100" show-sizer show-elevator show-total></Page> |
| 5 | </template> | 3 | </template> |
| 6 | <script> | 4 | <script> |
| 7 | export default { | 5 | export default { |
| 8 | - data () { | ||
| 9 | - return { | ||
| 10 | - val: 2 | ||
| 11 | - } | ||
| 12 | - } | 6 | + |
| 13 | } | 7 | } |
| 14 | </script> | 8 | </script> |
src/styles/components/page.less
| @@ -11,7 +11,9 @@ | @@ -11,7 +11,9 @@ | ||
| 11 | } | 11 | } |
| 12 | 12 | ||
| 13 | &-item { | 13 | &-item { |
| 14 | - float: left; | 14 | + display: inline-block; |
| 15 | + //float: left; | ||
| 16 | + vertical-align: middle; | ||
| 15 | min-width: @btn-circle-size; | 17 | min-width: @btn-circle-size; |
| 16 | height: @btn-circle-size; | 18 | height: @btn-circle-size; |
| 17 | line-height: @btn-circle-size - 2px; | 19 | line-height: @btn-circle-size - 2px; |
| @@ -104,7 +106,8 @@ | @@ -104,7 +106,8 @@ | ||
| 104 | &-item-jump-prev, | 106 | &-item-jump-prev, |
| 105 | &-item-jump-next { | 107 | &-item-jump-next { |
| 106 | display: inline-block; | 108 | display: inline-block; |
| 107 | - float: left; | 109 | + vertical-align: middle; |
| 110 | + //float: left; | ||
| 108 | min-width: @btn-circle-size; | 111 | min-width: @btn-circle-size; |
| 109 | height: @btn-circle-size; | 112 | height: @btn-circle-size; |
| 110 | line-height: @btn-circle-size - 2px; | 113 | line-height: @btn-circle-size - 2px; |
| @@ -151,15 +154,20 @@ | @@ -151,15 +154,20 @@ | ||
| 151 | } | 154 | } |
| 152 | 155 | ||
| 153 | &-options { | 156 | &-options { |
| 154 | - float: left; | 157 | + display: inline-block; |
| 158 | + vertical-align: middle; | ||
| 159 | + //float: left; | ||
| 155 | margin-left: 15px; | 160 | margin-left: 15px; |
| 156 | &-sizer { | 161 | &-sizer { |
| 157 | - float: left; | 162 | + display: inline-block; |
| 163 | + //float: left; | ||
| 158 | margin-right: 10px; | 164 | margin-right: 10px; |
| 159 | } | 165 | } |
| 160 | 166 | ||
| 161 | &-elevator { | 167 | &-elevator { |
| 162 | - float: left; | 168 | + display: inline-block; |
| 169 | + vertical-align: middle; | ||
| 170 | + //float: left; | ||
| 163 | height: @btn-circle-size; | 171 | height: @btn-circle-size; |
| 164 | line-height: @btn-circle-size; | 172 | line-height: @btn-circle-size; |
| 165 | 173 | ||
| @@ -173,7 +181,8 @@ | @@ -173,7 +181,8 @@ | ||
| 173 | } | 181 | } |
| 174 | 182 | ||
| 175 | &-total { | 183 | &-total { |
| 176 | - float: left; | 184 | + display: inline-block; |
| 185 | + //float: left; | ||
| 177 | height: @btn-circle-size; | 186 | height: @btn-circle-size; |
| 178 | line-height: @btn-circle-size; | 187 | line-height: @btn-circle-size; |
| 179 | margin-right: 10px; | 188 | margin-right: 10px; |
| @@ -189,7 +198,8 @@ | @@ -189,7 +198,8 @@ | ||
| 189 | } | 198 | } |
| 190 | 199 | ||
| 191 | &-simple &-simple-pager { | 200 | &-simple &-simple-pager { |
| 192 | - float: left; | 201 | + display: inline-block; |
| 202 | + //float: left; | ||
| 193 | margin-right: 8px; | 203 | margin-right: 8px; |
| 194 | 204 | ||
| 195 | input { | 205 | input { |