Skip to content

D
DoorLock
Commit d441d0ca by 朱建香
Options

loading页面样式增加

parent 384493d7
Showing with 289 additions and 4 deletions
web/custom/custom01/view/device/recordList.css
.custom-list .u-list-scroll .u-list-row .u-list-left-bg-image_3 {
background-image: url("../../resources/image/green_unbind_icon.png");
}
\ No newline at end of file
web/lib/less/login/login.less
...@@ -107,3 +107,46 @@ ...@@ -107,3 +107,46 @@
} }
} }
} }
//loading页面
.u-process();
.custom-process{
.u-process-content{
top: 180px;
bottom: 175px;
.transform(none);
.loader{
&:before{
.transform(translateZ(0) scale(0.7));
}
}
}
}
.u-process.u-process-status-0{
.u-process-content{
.loading{
position: relative;
.loading-text{
position: absolute;
left: 0;
top: 0;
font-size: 16px;
line-height: 3.750em;
width: 100%;
text-align: center;
}
}
}
}
.u-process.u-process-status-1,.u-process.u-process-status-2{
.u-process-content{
.loading{
.loading-text{
display: none;
}
}
}
}
\ No newline at end of file
web/view/login/loading.html
...@@ -19,6 +19,12 @@ ...@@ -19,6 +19,12 @@
</head> </head>
<body ontouchstart=""> <body ontouchstart="">
<div id="app" v-cloak> <div id="app" v-cloak>
<u-process ref="uprocess" :init-param="componentsConfig.processLoading.initParam">
<div class="loading">
<p class="loader"></p>
<p class="loading-text" v-show="downloadPercent">{{ downloadPercent }}%</p>
</div>
</u-process>
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading> <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div> </div>
<script type="text/javascript" src="./loading.js" defer async></script> <script type="text/javascript" src="./loading.js" defer async></script>
......
web/view/login/login.css
...@@ -809,3 +809,241 @@ p { ...@@ -809,3 +809,241 @@ p {
float: right; float: right;
margin-right: -0.667rem; margin-right: -0.667rem;
} }
.u-process {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
background-color: rgba(0, 0, 0, 0.9);
}
.u-process .u-process-content {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
}
.u-process .u-process-content .loader {
font-size: 0.427rem;
width: 3.750em;
height: 3.750em;
margin: 0 auto;
position: relative;
}
.u-process .u-process-content .loader:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0.5em;
height: 0.5em;
margin: auto;
border-radius: 50%;
-webkit-transform: translateZ(0) scale(0.55);
transform: translateZ(0) scale(0.55);
}
.u-process .u-process-content .icon {
font-size: 0.427rem;
width: 3.750em;
height: 3.750em;
margin: 0 auto;
position: relative;
}
.u-process .u-process-content .icon:before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: iconfont;
font-size: 4.125em;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.u-process .u-process-content .u-process-text {
margin-top: 0.533rem;
text-align: center;
}
.u-process .u-process-button {
position: absolute;
bottom: 1.733rem;
left: 0;
width: 100%;
}
.u-process.u-process-status-0 .u-process-content {
color: #00ffff;
}
.u-process.u-process-status-0 .u-process-content .loader {
display: block;
}
.u-process.u-process-status-0 .u-process-content .loader:before {
-webkit-animation: commLoading 1.3s linear infinite;
animation: commLoading 1.3s linear infinite;
}
.u-process.u-process-status-0 .u-process-content .icon {
display: none;
}
.u-process.u-process-status-1 .u-process-content {
color: #00ffff;
}
.u-process.u-process-status-1 .u-process-content .loader {
display: none;
}
.u-process.u-process-status-1 .u-process-content .icon {
display: block;
}
.u-process.u-process-status-1 .u-process-content .icon:before {
content: '\e800';
}
.u-process.u-process-status-2 .u-process-content {
color: #fff;
}
.u-process.u-process-status-2 .u-process-content .loader {
display: none;
}
.u-process.u-process-status-2 .u-process-content .icon {
display: block;
}
.u-process.u-process-status-2 .u-process-content .icon:before {
content: '\e646';
}
@-webkit-keyframes commLoading {
0%, 100% {
-webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
-webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
-webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
-webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
-webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
@keyframes commLoading {
0%, 100% {
-webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
-webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
-webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
-webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
-webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
-webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
.custom-process .u-process-content {
top: 4.8rem;
bottom: 4.667rem;
-webkit-transform: none;
transform: none;
}
.custom-process .u-process-content .loader:before {
-webkit-transform: translateZ(0) scale(0.7);
transform: translateZ(0) scale(0.7);
}
.u-process.u-process-status-0 .u-process-content .loading {
position: relative;
}
.u-process.u-process-status-0 .u-process-content .loading .loading-text {
position: absolute;
left: 0;
top: 0;
font-size: 0.427rem;
line-height: 3.750em;
width: 100%;
text-align: center;
}
.u-process.u-process-status-1 .u-process-content .loading .loading-text,
.u-process.u-process-status-2 .u-process-content .loading .loading-text {
display: none;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment