update Spin style

梁灏
1 parent ade5dbba
Showing 2 changed files with 13 additions and 11 deletions Show diff stats
examples/routers/spin.vue
src/styles/components/spin.less
@@ -144,11 +144,11 @@
  
 <style>
     .demo-spin-article{
-        width: 400px;
-        height: 200px;
+        /*width: 400px;*/
+        /*height: 200px;*/
         padding: 10px;
         position: relative;
-        border: 1px solid #eee;
+        border: 1px solid red;
         text-align: center;
     }
     .demo-spin-article h3{
@@ -174,7 +174,10 @@
                 <p>三山半落青天外，二水中分白鹭洲。</p>
                 <p>总为浮云能蔽日，长安不见使人愁。</p>
             </article>
-            <Spin size="large" fix v-if="spinShow"></Spin>
+            <Spin size="large" fix v-if="spinShow">
+                <!--<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>-->
+                <!--<div>Loading</div>-->
+            </Spin>
         </div>
         <br>
         切换显示状态：<i-switch @on-change="spinShow = !spinShow"></i-switch>
@@ -28,19 +28,18 @@
     &-fix {
         position: absolute;
         top: 0;
-        bottom: 0;
         left: 0;
-        right: 0;
         z-index: @zindex-spin;
-        display: table;
         .square(100%);
-        background-color: #fff;
+        background-color: rgba(255,255,255,.95);
     }
  
     &-fix &-main {
-        display: table-cell;
-        vertical-align: middle;
-        .square(inherit);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
     }
  
     &-fix &-dot {