提交 a93d631e 编写于 作者: Neuromancer255's avatar Neuromancer255

登录加载样式

上级 5ff0e333
.app-login{ .app-login{
.app-loading-contant{
height: 100%;
width: 100%;
background: #8e9eab; /* fallback for old browsers */
background: -webkit-linear-gradient(45deg, #8e9eab, #eef2f3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(45deg, #8e9eab, #eef2f3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
display: flex;
justify-content: center;
align-items: center;
.loadingCircle{
width: 80px;
height: 80px;
border-radius: 100%;
border:5px solid rgba(255, 255, 255, .6);
border-top-color: #fff;
animation: loadingRole 2s linear infinite;
background: linear-gradient(30deg, #7BC6CC, #BE93C5);
box-shadow: 0 0 20px #8e9eab;
}
@keyframes loadingRole {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}
}
.app-login-contant{ .app-login-contant{
width: 100%; width: 100%;
height: 100%; height: 100%;
......
<template> <template>
<ion-page :className="{ 'app-login': true }"> <ion-page :className="{ 'app-login': true }">
<ion-content fullscreen v-if="!platform"> <ion-content fullscreen v-if="platform">
<div class="app-login-contant"> <div class="app-login-contant">
<img src="assets/images/logo.png" class="ibizLogo"/> <img src="assets/images/logo.png" class="ibizLogo"/>
<form class="app-login-form"> <form class="app-login-form">
...@@ -23,6 +23,11 @@ ...@@ -23,6 +23,11 @@
</div> --> </div> -->
</div> </div>
</ion-content> </ion-content>
<ion-content v-else>
<div class="app-loading-contant">
<section class="loadingCircle"></section>
</div>
</ion-content>
</ion-page> </ion-page>
</template> </template>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册