update Spin style
This commit is contained in:
parent
ade5dbba52
commit
4fffb066ab
2 changed files with 13 additions and 11 deletions
|
@ -144,11 +144,11 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.demo-spin-article{
|
.demo-spin-article{
|
||||||
width: 400px;
|
/*width: 400px;*/
|
||||||
height: 200px;
|
/*height: 200px;*/
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid #eee;
|
border: 1px solid red;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.demo-spin-article h3{
|
.demo-spin-article h3{
|
||||||
|
@ -174,7 +174,10 @@
|
||||||
<p>三山半落青天外,二水中分白鹭洲。</p>
|
<p>三山半落青天外,二水中分白鹭洲。</p>
|
||||||
<p>总为浮云能蔽日,长安不见使人愁。</p>
|
<p>总为浮云能蔽日,长安不见使人愁。</p>
|
||||||
</article>
|
</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>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
切换显示状态:<i-switch @on-change="spinShow = !spinShow"></i-switch>
|
切换显示状态:<i-switch @on-change="spinShow = !spinShow"></i-switch>
|
||||||
|
|
|
@ -28,19 +28,18 @@
|
||||||
&-fix {
|
&-fix {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
|
||||||
z-index: @zindex-spin;
|
z-index: @zindex-spin;
|
||||||
display: table;
|
|
||||||
.square(100%);
|
.square(100%);
|
||||||
background-color: #fff;
|
background-color: rgba(255,255,255,.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-fix &-main {
|
&-fix &-main {
|
||||||
display: table-cell;
|
position: absolute;
|
||||||
vertical-align: middle;
|
top: 50%;
|
||||||
.square(inherit);
|
left: 50%;
|
||||||
|
-ms-transform: translate(-50%, -50%);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-fix &-dot {
|
&-fix &-dot {
|
||||||
|
|
Loading…
Add table
Reference in a new issue