Skip to content

D
DoorLock
Commit 0ab0e0a6 by wangying
Options

1.0.2 / 2017-09-15 

==================
 * 1.上传设备控制、记录列表、门锁管理、修改名称页面样式
parent 61c5bd7c
Showing with 1874 additions and 255 deletions
History.md
1.0.2 / 2017-09-15 1.0.3 / 2017-09-18
==================
* 1.上传用户列表、绑定用户、loading+成功/失败页面样式
1.0.2 / 2017-09-15
================== ==================
* 1.上传设备控制、记录列表、门锁管理、修改名称页面样式 * 1.上传设备控制、记录列表、门锁管理、修改名称页面样式
......
dev/src/lang/zh.json
{ {
"loading": "请耐心等待...", "loading": "loading...",
"scroll": { "scroll": {
"clickToLoadMore": "点击加载更多", "clickToLoadMore": "点击加载更多",
"loading": "loading..." "loading": "loading..."
......
dev/src/view/addDevice/v_wifiAdd.js
...@@ -86,7 +86,7 @@ function initComponentsConfig() { ...@@ -86,7 +86,7 @@ function initComponentsConfig() {
}, },
ucommstatusloading: { ucommstatusloading: {
initParam: { initParam: {
class: '', class: 'custom-commstatus-loading',
buttonText: Vue.t('btn.confirm') buttonText: Vue.t('btn.confirm')
} }
} }
......
dev/src/view/bindUser/r_userList.vue
...@@ -69,12 +69,12 @@ ...@@ -69,12 +69,12 @@
initParam: { initParam: {
class: 'custom-swipe-list', class: 'custom-swipe-list',
list: [ list: [
{value: 1, image: '../../resources/image/white_head_icon.png', title: '姓名：迷失者', subtitle: subtitle, buttons: [{"text": "删除"}]}, {value: 1, image: '../../resources/image/white_head_icon.png', title: '姓名：迷失者', subtitle: subtitle, buttons: [{"text": ""}]},
{value: 2, image: '../../resources/image/white_head_icon.png', title: '姓名：漫步者', subtitle: subtitle, buttons: [{"text": "删除"}],}, {value: 2, image: '../../resources/image/white_head_icon.png', title: '姓名：漫步者', subtitle: subtitle, buttons: [{"text": ""}],},
{value: 3, image: '../../resources/image/white_head_icon.png', title: '姓名：太空旅行者', subtitle: subtitle, buttons: [{"text": "删除"}],}, {value: 3, image: '../../resources/image/white_head_icon.png', title: '姓名：太空旅行者', subtitle: subtitle, buttons: [{"text": ""}],},
{value: 4, image: '../../resources/image/white_head_icon.png', title: '姓名：探索迷失者', subtitle: subtitle, buttons: [{"text": "删除"}],}, {value: 4, image: '../../resources/image/white_head_icon.png', title: '姓名：探索迷失者', subtitle: subtitle, buttons: [{"text": ""}],},
{value: 5, image: '../../resources/image/white_head_icon.png', title: '姓名：麻麻272', subtitle: subtitle, buttons: [{"text": "删除"}],}, {value: 5, image: '../../resources/image/white_head_icon.png', title: '姓名：麻麻272', subtitle: subtitle, buttons: [{"text": ""}],},
{value: 6, image: '../../resources/image/white_head_icon.png', title: '姓名：代号小黄人', subtitle: subtitle, buttons: [{"text": "删除"}],} {value: 6, image: '../../resources/image/white_head_icon.png', title: '姓名：代号小黄人', subtitle: subtitle, buttons: [{"text": ""}],}
], ],
tip: Vue.t('userList.noUserTip') tip: Vue.t('userList.noUserTip')
} }
......
dev/src/view/device/v_remoteOpendoor.js
...@@ -12,17 +12,34 @@ import {iot, uPublic, uComponents} from '../../public/public.js'; ...@@ -12,17 +12,34 @@ import {iot, uPublic, uComponents} from '../../public/public.js';
iot.ready(init); iot.ready(init);
function init() { function init() {
//通用 input、按钮、dialog、loading组件 //通用 input、按钮、dialog、loading组件
uPublic.componentsInit(['u-text','u-button','u-dialog','u-loading']); uPublic.componentsInit(['u-text','u-button','u-commstatus-loading','u-dialog','u-loading']);
const app = new Vue({ const app = new Vue({
data:{ data:{
textPassword: null, textPassword: null,
textErrorTip: null, textErrorTip: null,
textLoading: 'loading...',
status: 0,
//配置组件 //配置组件
componentsConfig: initComponentsConfig() componentsConfig: initComponentsConfig()
}, },
mounted(){ mounted(){
}, },
methods:{ methods:{
getTextLoading(){
return this.textLoading;
},
setTextLoading(text){
this.textLoading = text;
},
getStatus(){
return this.status;
},
setStatus(value){
this.status = value;
},
onPasswordChange(text){
passwordChange(this,text);
},
onPasswordChange(text){ onPasswordChange(text){
passwordChange(this,text); passwordChange(this,text);
}, },
...@@ -32,7 +49,11 @@ function init() { ...@@ -32,7 +49,11 @@ function init() {
}, },
//tap 确定 //tap 确定
onConfirmButtonTap(){ onConfirmButtonTap(){
confirmButtonTap(); confirmButtonTap(this);
},
//tap loading button
onCommstatusLoadingButtonTap(){
commstatusLoadingButtonTap(this);
} }
} }
}).$mount('#app'); }).$mount('#app');
...@@ -64,7 +85,13 @@ function initComponentsConfig() { ...@@ -64,7 +85,13 @@ function initComponentsConfig() {
initParam: { initParam: {
class: 'custom-loading' class: 'custom-loading'
} }
} },
ucommstatusloading: {
initParam: {
class: 'custom-commstatus-loading',
buttonText: Vue.t('btn.confirm')
}
}
} }
} }
...@@ -79,6 +106,27 @@ function backTap(){ ...@@ -79,6 +106,27 @@ function backTap(){
} }
//tap 确定 //tap 确定
function confirmButtonTap(){ function confirmButtonTap(self){
uComponents.showCommstatusloading(self);
setTimeout(function(){
self.setTextLoading(Vue.t('commstatusLoading.connectSuccess'));
setTimeout(function(){
//绑定成功
self.setStatus(1);
self.setTextLoading(Vue.t('commstatusLoading.bindSuccess'));
//绑定失败
//self.setStatus(2);
//self.setTextLoading(Vue.t('commstatusLoading.bindFailed'));
//uComponents.changeCommstatusButtonText(self,Vue.t('btn.reBound'));
},3000);
},3000);
}
//tap loading button
function commstatusLoadingButtonTap(self) {
//绑定成功
uComponents.hideCommstatusloading(self);
iot.navigator.back(); iot.navigator.back();
//绑定失败
//uComponents.hideCommstatusloading(self);
} }
\ No newline at end of file
web/lib/less/addDevice/addDevice.less
...@@ -145,130 +145,6 @@ ...@@ -145,130 +145,6 @@
.buttonPosition(); .buttonPosition();
} }
.u-commstatus-loading();
.custom-commstatus-loading();
\ No newline at end of file
.u-commstatus-loading {
height: 100%;
background: rgba(0,0,0,0.7);
}
.u-commstatus-loading-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.u-commstatus-loading-button {
height: 44px;
width: 80%;
line-height: 44px;
background: #e0dfdf;
text-align: center;
position: absolute;
bottom: 44px;
left: 50%;
transform: translateX(-50%);
}
.u-commstatus-loading-status-0 .u-commstatus-loading-button {
display: none;
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content div ul li{
opacity: 0.2;
-webkit-animation: stretchdelay 1.5s infinite;
animation: stretchdelay 1.5s infinite;
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content{
color: #00ffff;
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader {
font-size: 10px;
margin: 5em auto;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load4 1.3s infinite linear;
animation: load4 1.3s infinite linear;
}
@-webkit-keyframes load4 {
0%,
100% {
box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff;
}
12.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
25% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
37.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
50% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
62.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
75% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
}
87.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
}
}
@keyframes load4 {
0%,
100% {
box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff;
}
12.5% {
ox-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
25% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
37.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
50% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
62.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
75% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
}
87.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
}
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content .icon{
display: none;
}
.u-commstatus-loading-status-0 .u-commstatus-loading-button{
display: none;
}
.u-commstatus-loading-status-1 .u-commstatus-loading-content{
color: #00ffff;
}
.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon{
font-family: SDSIconfont;
font-size: 5em;
}
\ No newline at end of file
web/lib/less/bindUser/bindUser.less
...@@ -15,8 +15,126 @@ ...@@ -15,8 +15,126 @@
.linkText(); .linkText();
//绑定用户
.editHead{
width: 200px;
margin: 70px auto 26px;
li{
color: @EDITHEAD-TEXT-COLOR;
font-size: @EDITHEAD-TEXT-FONTSIZE;
text-align: center;
margin-bottom: 12px;
img{
width: 80px;
height: 80px;
border-radius: 50%;
}
}
}
.inputBox{
width: 250px;
margin: 0 auto;
padding-bottom: 40px;
}
.u-text(); .u-text();
.custom-bindUser-text{
margin-top: 17px;
input{
padding-top: 8px;
padding-bottom: 8px;
padding-right: 38px;
text-align: center;
&::-webkit-input-placeholder{
color: @CUSTOM-TEXT-COMPONENT-INPUT-PLACEHOLDER-COLOR;
}
}
.u-text-title{
width: 120px;
padding-left: 42px;
}
//x icon
.u-text-clear{
right: 7px;
&:before{
content: '\e601';
font-family: iconfont;
color: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR;
font-size: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-FONTSIZE;
}
}
&:after{
.white_gradient_border();
}
}
.errorTip{
position: absolute;
left: 0;
right: 0;
.errorTip();
}
.custom-button{
.buttonPosition();
}
//用户列表
.u-swipe-list();
.u-swipe-list(); .custom-swipe-list{
\ No newline at end of file position: absolute;
top: 44px;
bottom: 0;
left: 0;
height: auto;
.u-swipe-list-scroll .u-swipe-list-row{
.u-swipe-list-handle{
background-color: @CUSTOM-SWIPELIST-COMPONENT-ROW-BG;
height: 75px;
padding: 0 40px;
.u-swipe-list-image{
width: 30px;
height: 30px;
margin-right: 45px;
border-radius: 50%;
}
.u-swipe-list-title{
font-size: @CUSTOM-SWIPELIST-COMPONENT-TITLE-FONTSIZE;
line-height: 20px;
}
span{
margin-right: 18px;
}
&.u-swipe-list-selected{
left: -70px;
}
}
.u-swipe-list-button{
div{
width: 70px;
padding-left: 10px;
.box-horizontal-alignment(start,flex-start);
color: @CUSTOM-SWIPELIST-COMPONENT-BUTTON-COLOR;
&:before{
content: '\e66d';
.iconfont(@CUSTOM-SWIPELIST-COMPONENT-BUTTON-ICON-FONTSIZE);
}
&:nth-last-of-type(1){
background-color: @CUSTOM-SWIPELIST-COMPONENT-DELETEBUTTON-BG;
}
}
}
&:after{
.white_gradient_border();
}
}
.u-swipe-list-load{
.listLoad();
}
.u-swipeList-tip{
.listNoCont();
}
}
\ No newline at end of file
web/lib/less/device/device.less
...@@ -27,6 +27,10 @@ ...@@ -27,6 +27,10 @@
.button(); .button();
} }
.u-commstatus-loading();
.custom-commstatus-loading();
//智能指纹锁 //智能指纹锁
.u-carousel(); .u-carousel();
...@@ -240,13 +244,7 @@ ...@@ -240,13 +244,7 @@
} }
.followServiceNumber-dialog{ .followServiceNumber-dialog{
position: fixed; .mask(1051,rgba(0, 0, 0, 0.9));
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1051;
background-color: rgba(0, 0, 0, 0.9);
.followServiceNumber-dialog-box{ .followServiceNumber-dialog-box{
ul{ ul{
margin: 35px 0 -15px; margin: 35px 0 -15px;
......
web/lib/less/public/core.less
...@@ -142,14 +142,14 @@ p{ ...@@ -142,14 +142,14 @@ p{
} }
//遮罩蒙版 //遮罩蒙版
.mask(@zIndex:1051){ .mask(@zIndex:1051,@bgColor:@BACKDROP-BG-COLOR){
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: @zIndex; z-index: @zIndex;
background-color: @BACKDROP-BG-COLOR; background-color: @bgColor;
} }
...@@ -239,6 +239,91 @@ p{ ...@@ -239,6 +239,91 @@ p{
} }
} }
.custom-loading(){
.custom-loading{
background-color: @CUSTOM-BACKDROP-BG;
.u-loading-box{
color: #00ffff;
.u-loading-icon{
font-size: 16px;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
background: none;
.animation(none);
&:before{
content: '';
.margin_center(0.500em,0.500em);
border-radius: 50%;
.transform(translateZ(0) scale(0.55));
.animation(loading 1.3s infinite linear);
}
}
.u-loading-text{
color: inherit;
font-size: 16px;
margin-top: 20px;
}
}
}
.keyframes(loading,{
0%,
100% {
.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% {
.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% {
.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% {
.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% {
.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% {
.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% {
.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% {
.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-commstatus-loading(){
.custom-commstatus-loading{
background-color: @CUSTOM-BACKDROP-BG;
.u-commstatus-loading-button{
bottom: 134px;
width: 100px;
color: #00ffff;
font-size: 12px;
background-color: transparent;
padding: 18px 0 5px;
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.blue_gradient_border();
}
.tap_row(transparent);
&.disabled{
background-color: transparent;
}
}
}
}
//自定义弹出框组件 //自定义弹出框组件
.custom-dialog(){ .custom-dialog(){
.custom-dialog{ .custom-dialog{
......
web/lib/less/public/public.less
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
.u-loading{ .u-loading{
.mask(1050); .mask(1050);
.u-loading-box{ .u-loading-box{
.transform_center(); .transformV_center(left,0);
right: 0;
.u-loading-icon{ .u-loading-icon{
width: 30px;/*no*/ width: 30px;/*no*/
height: 30px;/*no*/ height: 30px;/*no*/
...@@ -16,7 +17,7 @@ ...@@ -16,7 +17,7 @@
.bgImg("white_loading_icon.png"); .bgImg("white_loading_icon.png");
.background-size(cover); .background-size(cover);
margin: 0 auto; margin: 0 auto;
.animation(uLoading 1s steps(12, end) infinite); .animation(loading 1s steps(12, end) infinite);
} }
.u-loading-text{ .u-loading-text{
color: @LOADING-COMPONENT-TEXT-COLOR; color: @LOADING-COMPONENT-TEXT-COLOR;
...@@ -26,7 +27,7 @@ ...@@ -26,7 +27,7 @@
} }
} }
.keyframes(uLoading,{ .keyframes(loading,{
0%{ 0%{
.transform(rotate3d(0,0,1,0deg)); .transform(rotate3d(0,0,1,0deg));
} }
...@@ -35,7 +36,7 @@ ...@@ -35,7 +36,7 @@
} }
}); });
//.custom-loading(); .custom-loading();
//弹出框 //弹出框
.u-dialog{ .u-dialog{
...@@ -734,6 +735,7 @@ ...@@ -734,6 +735,7 @@
} }
} }
//走马灯
.u-marquee(){ .u-marquee(){
.u-marquee{ .u-marquee{
width: 100%; width: 100%;
...@@ -746,6 +748,150 @@ ...@@ -746,6 +748,150 @@
} }
} }
.u-commstatus-loading(){
.u-commstatus-loading{
.mask(1050);
.u-commstatus-loading-content{
.transformV_center(left,0);
right: 0;
.loader{
font-size: 16px;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
&:before{
content: '';
.margin_center(0.500em,0.500em);
border-radius: 50%;
.transform(translateZ(0) scale(0.55));
}
}
.icon{
font-size: 16px;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
&:before{
.transform_center();
.iconfont(4.125em);
}
}
.u-commstatus-loading-text{
font-size: 16px;
margin-top: 20px;
text-align: center;
}
}
.u-commstatus-loading-button{
position: absolute;
bottom: 65px;
left: 0;
right: 0;
width: 240px;
color: @BUTTON-COMPONENT-COLOR;
font-size: inherit;
background-color: @BUTTON-COMPONENT-BG;
border-radius: 20px;
text-align: center;
line-height: 1;
margin: 0 auto;
padding: 10px 0;
.transition(all 0.2s linear);
background-clip: padding-box;
//按钮 active
.tap_row(@BUTTON-COMPONENT-ACTIVE-BG);
//按钮 不可控
&.disabled{
background-color: @BUTTON-COMPONENT-DISABLED-BG;
}
}
//loading
&.u-commstatus-loading-status-0{
.u-commstatus-loading-content{
color: #00ffff;
.loader{
display: block;
&:before{
.animation(commstatusLoading 1.3s infinite linear);
}
}
.icon{
display: none;
}
}
.u-commstatus-loading-button{
display: none;
}
}
//绑定成功
&.u-commstatus-loading-status-1{
.u-commstatus-loading-content{
color: #00ffff;
.loader{
display: none;
}
.icon{
display: block;
&:before{
content: '\e800';
}
}
}
.u-commstatus-loading-button{
display: block;
}
}
//绑定失败
&.u-commstatus-loading-status-2{
.u-commstatus-loading-content{
color: #fff;
.loader{
display: none;
}
.icon{
display: block;
&:before{
content: '\e646';
}
}
}
.u-commstatus-loading-button{
display: block;
}
}
}
.keyframes(commstatusLoading,{
0%,
100% {
.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% {
.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% {
.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% {
.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% {
.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% {
.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% {
.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% {
.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);
}
});
}
.edit-name(){ .edit-name(){
.edit-name-text{ .edit-name-text{
width: 100%; width: 100%;
......
web/lib/less/public/variables.less
...@@ -228,4 +228,15 @@ ...@@ -228,4 +228,15 @@
//修改名称 //修改名称
@CUSTOM-EDITNAMETEXT-COMPONENT-INPUT-FONTSIZE: @F_SIZE_18; @CUSTOM-EDITNAMETEXT-COMPONENT-INPUT-FONTSIZE: @F_SIZE_18;
@CUSTOM-EDITNAMETEXT-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_20; @CUSTOM-EDITNAMETEXT-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_20;
\ No newline at end of file
//绑定用户
@EDITHEAD-TEXT-COLOR: @C_BLUE_4;
@EDITHEAD-TEXT-FONTSIZE: @F_SIZE_12;
//用户列表
@CUSTOM-SWIPELIST-COMPONENT-ROW-BG: @BODY-BG-COLOR;
@CUSTOM-SWIPELIST-COMPONENT-TITLE-FONTSIZE: @F_SIZE_16;
@CUSTOM-SWIPELIST-COMPONENT-BUTTON-COLOR: @C_BLUE_4;
@CUSTOM-SWIPELIST-COMPONENT-BUTTON-ICON-FONTSIZE: @F_SIZE_16;
@CUSTOM-SWIPELIST-COMPONENT-DELETEBUTTON-BG: @BODY-BG-COLOR;
\ No newline at end of file
web/resources/lang/zh.json
{"loading":"请耐心等待...","scroll":{"clickToLoadMore":"点击加载更多","loading":"loading..."},"btn":{"confirm":"确定","login":"登录","getCode":"获取验证码","register":"注册","logout":"退出系统","save":"保存","qrcode":"生成二维码","wifiAdd":"开始配置Wi-Fi","connect":"连接","bindUser":"绑定姓名","bind":"我要绑定","reBound":"请重新绑定","saveQRcode":"保存二维码到相册"},"dialog":{"confirm":"确认","cancel":"取消"},"title":{"login":"登录","register":"注册","forgetPassword":"忘记密码","device":"智能指纹锁","opendoorRecord":"开门记录","alarmInfo":"报警信息","remoteOpendoor":"远程开门","hijackRecord":"劫持记录","doorlockManage":"门锁管理","editName":"修改名称","qrcode":"生成绑定二维码","addDevice":"添加设备","scanCodeAdd":"扫描绑定设备","wifiAddHelp":"配置Wi-Fi","wifiAdd":"连接Wi-Fi","bindUserHelp":"ID-姓名绑定","bindUser":"绑定用户","userList":"用户列表"},"guide":{"footer":"指纹改变生活"},"login":{"telInputTip":"请输入手机号","passwordInputTip":"请输入密码","register":"快速注册","forgetPassword":"忘记密码","error":{"telNull":"请输入手机号","passWordNull":"请输入密码"}},"register":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"forgetPassword":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"device":{"opendoorRecord":"开门记录","securityAlarm":"安全报警","remoteOpendoor":"远程开门","hijackAlarm":"劫持报警","followTitle":"关注服务号","followCont1":"关注 “i智信” 微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧","followCont2":"1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注","laterFollow":"稍后关注"},"opendoorRecord":{"noRecordTip":"暂无记录"},"alarmInfo":{"noInfoTip":"暂无信息"},"remoteOpendoor":{"passwordInputTip":"请输入远程开门密码","error":{}},"hijackRecord":{"noRecordTip":"暂无记录"},"doorlockManage":{"noDeviceTip":"暂无设备","deleteDialogTip":"<span>{0}</span>将被删除","logoutDialogTip":"确定要退出系统吗？"},"editName":{"nameInputTip":"请输入门锁名称","error":{}},"qrcode":{"helpTitle":"注意事项：","helpCont1":"1.仅超级管理员（通过Wi-Fi配网绑定的用户为超级管理员）可以生成绑定二维码","helpCont2":"2.二维码有效时间为10分钟且只能使用一次","helpCont3":"3.用户只需要扫描该二维码即可绑定指纹锁","helpCont4":"4.绑定失败则需要重新生成二维码进行绑定"},"addDevice":{"scanCodeAdd":"扫描绑定设备","wifiAdd":"配置Wi-Fi"},"wifiAddHelp":{"helpTitle":"配置Wi-Fi说明：","helpCont1":"1.按下指纹锁背面的按钮，进入主菜单，选择Wi-Fi设置→配置Wi-Fi，门锁进入等待配网状态","helpCont2":"2.点击页面 “开始配置Wi-Fi” 按钮，进入Wi-Fi配网画面","helpCont3":"3.输入Wi-Fi密码，点击 “l连接” 按钮，等待锁端相应，直至配网成功","helpCont4":"（提示：如果指纹锁已经绑定过用户，重新绑定成功后会清除之前所有绑定信息）"},"wifiAdd":{"passwordInputTip":"请输入Wi-Fi密码","remindTitle":"配置Wi-Fi提醒：","remindCont1":"1. 请确保Wi-Fi信号良好","remindCont2":"2. 本产品暂不支持5GHz无线网络","error":{}},"bindUserHelp":{"helpTitle":"配对姓名说明：","helpCont1":"1.在指纹锁上录入指纹、密码、卡并获得相应ID","helpCont2":"2.通过姓名绑定将该ID绑定对应用户姓名","helpCont3":"3.绑定成功后，开门记录中将会显示已绑定的用户姓名","helpCont4":"4.用户姓名信息只保存在APP端，不影响锁端设置","boundUser":"查看已绑定ID姓名"},"bindUser":{"editHeadTip":"点击编辑用户头像","nameTitle":"姓名","fingerprintIDTitle":"指纹ID","passwordIDTitle":"密码ID","ICCardIDTitle":"IC卡ID","requiredInputTip":"（必填）","optionalInputTip":"（选填）","error":{}},"userList":{"name":"姓名：{0}","id":"指纹ID:<span>{0}</span>密码ID:<span>{1}</span>IC卡ID:<span>{2}</span>","noUserTip":"暂无用户"},"commstatusLoading":{"connectSuccess":"Wi-Fi连接成功，正在绑定...","bindSuccess":"绑定成功","bindFailed":"绑定失败"}} {"loading":"loading...","scroll":{"clickToLoadMore":"点击加载更多","loading":"loading..."},"btn":{"confirm":"确定","login":"登录","getCode":"获取验证码","register":"注册","logout":"退出系统","save":"保存","qrcode":"生成二维码","wifiAdd":"开始配置Wi-Fi","connect":"连接","bindUser":"绑定姓名","bind":"我要绑定","reBound":"请重新绑定","saveQRcode":"保存二维码到相册"},"dialog":{"confirm":"确认","cancel":"取消"},"title":{"login":"登录","register":"注册","forgetPassword":"忘记密码","device":"智能指纹锁","opendoorRecord":"开门记录","alarmInfo":"报警信息","remoteOpendoor":"远程开门","hijackRecord":"劫持记录","doorlockManage":"门锁管理","editName":"修改名称","qrcode":"生成绑定二维码","addDevice":"添加设备","scanCodeAdd":"扫描绑定设备","wifiAddHelp":"配置Wi-Fi","wifiAdd":"连接Wi-Fi","bindUserHelp":"ID-姓名绑定","bindUser":"绑定用户","userList":"用户列表"},"guide":{"footer":"指纹改变生活"},"login":{"telInputTip":"请输入手机号","passwordInputTip":"请输入密码","register":"快速注册","forgetPassword":"忘记密码","error":{"telNull":"请输入手机号","passWordNull":"请输入密码"}},"register":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"forgetPassword":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"device":{"opendoorRecord":"开门记录","securityAlarm":"安全报警","remoteOpendoor":"远程开门","hijackAlarm":"劫持报警","followTitle":"关注服务号","followCont1":"关注 “i智信” 微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧","followCont2":"1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注","laterFollow":"稍后关注"},"opendoorRecord":{"noRecordTip":"暂无记录"},"alarmInfo":{"noInfoTip":"暂无信息"},"remoteOpendoor":{"passwordInputTip":"请输入远程开门密码","error":{}},"hijackRecord":{"noRecordTip":"暂无记录"},"doorlockManage":{"noDeviceTip":"暂无设备","deleteDialogTip":"<span>{0}</span>将被删除","logoutDialogTip":"确定要退出系统吗？"},"editName":{"nameInputTip":"请输入门锁名称","error":{}},"qrcode":{"helpTitle":"注意事项：","helpCont1":"1.仅超级管理员（通过Wi-Fi配网绑定的用户为超级管理员）可以生成绑定二维码","helpCont2":"2.二维码有效时间为10分钟且只能使用一次","helpCont3":"3.用户只需要扫描该二维码即可绑定指纹锁","helpCont4":"4.绑定失败则需要重新生成二维码进行绑定"},"addDevice":{"scanCodeAdd":"扫描绑定设备","wifiAdd":"配置Wi-Fi"},"wifiAddHelp":{"helpTitle":"配置Wi-Fi说明：","helpCont1":"1.按下指纹锁背面的按钮，进入主菜单，选择Wi-Fi设置→配置Wi-Fi，门锁进入等待配网状态","helpCont2":"2.点击页面 “开始配置Wi-Fi” 按钮，进入Wi-Fi配网画面","helpCont3":"3.输入Wi-Fi密码，点击 “l连接” 按钮，等待锁端相应，直至配网成功","helpCont4":"（提示：如果指纹锁已经绑定过用户，重新绑定成功后会清除之前所有绑定信息）"},"wifiAdd":{"passwordInputTip":"请输入Wi-Fi密码","remindTitle":"配置Wi-Fi提醒：","remindCont1":"1. 请确保Wi-Fi信号良好","remindCont2":"2. 本产品暂不支持5GHz无线网络","error":{}},"bindUserHelp":{"helpTitle":"配对姓名说明：","helpCont1":"1.在指纹锁上录入指纹、密码、卡并获得相应ID","helpCont2":"2.通过姓名绑定将该ID绑定对应用户姓名","helpCont3":"3.绑定成功后，开门记录中将会显示已绑定的用户姓名","helpCont4":"4.用户姓名信息只保存在APP端，不影响锁端设置","boundUser":"查看已绑定ID姓名"},"bindUser":{"editHeadTip":"点击编辑用户头像","nameTitle":"姓名","fingerprintIDTitle":"指纹ID","passwordIDTitle":"密码ID","ICCardIDTitle":"IC卡ID","requiredInputTip":"（必填）","optionalInputTip":"（选填）","error":{}},"userList":{"name":"姓名：{0}","id":"指纹ID:<span>{0}</span>密码ID:<span>{1}</span>IC卡ID:<span>{2}</span>","noUserTip":"暂无用户"},"commstatusLoading":{"connectSuccess":"Wi-Fi连接成功，正在绑定...","bindSuccess":"绑定成功","bindFailed":"绑定失败"}}
\ No newline at end of file \ No newline at end of file
web/view/addDevice/addDevice.css
...@@ -51,9 +51,10 @@ p { ...@@ -51,9 +51,10 @@ p {
.u-loading .u-loading-box { .u-loading .u-loading-box {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 0;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translateY(-50%);
transform: translate(-50%, -50%); transform: translateY(-50%);
right: 0;
} }
.u-loading .u-loading-box .u-loading-icon { .u-loading .u-loading-box .u-loading-icon {
...@@ -65,8 +66,8 @@ p { ...@@ -65,8 +66,8 @@ p {
-webkit-background-size: cover; -webkit-background-size: cover;
background-size: cover; background-size: cover;
margin: 0 auto; margin: 0 auto;
-webkit-animation: uLoading 1s steps(12, end) infinite; -webkit-animation: loading 1s steps(12, end) infinite;
animation: uLoading 1s steps(12, end) infinite; animation: loading 1s steps(12, end) infinite;
} }
.u-loading .u-loading-box .u-loading-text { .u-loading .u-loading-box .u-loading-text {
...@@ -75,7 +76,7 @@ p { ...@@ -75,7 +76,7 @@ p {
text-align: center; text-align: center;
} }
@-webkit-keyframes uLoading { @-webkit-keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -87,7 +88,7 @@ p { ...@@ -87,7 +88,7 @@ p {
} }
} }
@keyframes uLoading { @keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -99,6 +100,132 @@ p { ...@@ -99,6 +100,132 @@ p {
} }
} }
.custom-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-loading .u-loading-box {
color: #00ffff;
}
.custom-loading .u-loading-box .u-loading-icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
background: none;
-webkit-animation: none;
animation: none;
}
.custom-loading .u-loading-box .u-loading-icon: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);
-webkit-animation: loading 1.3s infinite linear;
animation: loading 1.3s infinite linear;
}
.custom-loading .u-loading-box .u-loading-text {
color: inherit;
font-size: 0.427rem;
margin-top: 0.533rem;
}
@-webkit-keyframes loading {
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 loading {
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;
}
}
.u-dialog { .u-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -636,137 +763,273 @@ p { ...@@ -636,137 +763,273 @@ p {
} }
.u-commstatus-loading { .u-commstatus-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.7); z-index: 1050;
background-color: rgba(0, 0, 0, 0.8);
}
.u-commstatus-loading .u-commstatus-loading-content {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
.u-commstatus-loading .u-commstatus-loading-content .loader {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
} }
.u-commstatus-loading-content { .u-commstatus-loading .u-commstatus-loading-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-commstatus-loading .u-commstatus-loading-content .icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
}
.u-commstatus-loading .u-commstatus-loading-content .icon:before {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center; font-family: iconfont;
font-size: 4.125em;
-webkit-font-smoothing: antialiased;
line-height: 1;
} }
.u-commstatus-loading-button { .u-commstatus-loading .u-commstatus-loading-content .u-commstatus-loading-text {
height: 1.173rem; font-size: 0.427rem;
width: 80%; margin-top: 0.533rem;
line-height: 1.173rem;
background: #e0dfdf;
text-align: center; text-align: center;
}
.u-commstatus-loading .u-commstatus-loading-button {
position: absolute; position: absolute;
bottom: 1.173rem; bottom: 1.733rem;
left: 50%; left: 0;
transform: translateX(-50%); right: 0;
width: 6.4rem;
color: #fff;
font-size: inherit;
background-color: #007aff;
border-radius: 0.533rem;
text-align: center;
line-height: 1;
margin: 0 auto;
padding: 0.267rem 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
background-clip: padding-box;
}
.u-commstatus-loading .u-commstatus-loading-button:active {
background-color: #0065ff;
}
.u-commstatus-loading .u-commstatus-loading-button.disabled {
background-color: #bbb;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content {
color: #00ffff;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader:before {
-webkit-animation: commstatusLoading 1.3s infinite linear;
animation: commstatusLoading 1.3s infinite linear;
} }
.u-commstatus-loading-status-0 .u-commstatus-loading-button { .u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .icon {
display: none; display: none;
} }
.u-commstatus-loading-status-0 .u-commstatus-loading-content div ul li { .u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-button {
opacity: 0.2; display: none;
-webkit-animation: stretchdelay 1.5s infinite;
animation: stretchdelay 1.5s infinite;
} }
.u-commstatus-loading-status-0 .u-commstatus-loading-content { .u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content {
color: #00ffff; color: #00ffff;
} }
.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader { .u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .loader {
font-size: 0.267rem; display: none;
margin: 5em auto; }
width: 1em;
height: 1em; .u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon {
border-radius: 50%; display: block;
position: relative; }
text-indent: -9999em;
-webkit-animation: load4 1.3s infinite linear; .u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon:before {
animation: load4 1.3s infinite linear; content: '\e800';
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-button {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content {
color: #fff;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .loader {
display: none;
} }
@-webkit-keyframes load4 { .u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .icon {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .icon:before {
content: '\e646';
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-button {
display: block;
}
@-webkit-keyframes commstatusLoading {
0%, 100% { 0%, 100% {
box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff; -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% { 12.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff; -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% { 25% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff; -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% { 37.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff; -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% { 50% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff; -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% { 62.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff; -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% { 75% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff; -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% { 87.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff; -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 load4 { @keyframes commstatusLoading {
0%, 100% { 0%, 100% {
box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff; -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% { 12.5% {
ox-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff; -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% { 25% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff; -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% { 37.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff; -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% { 50% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff; -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% { 62.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff; -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% { 75% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff; -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% { 87.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff; -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;
} }
} }
.u-commstatus-loading-status-0 .u-commstatus-loading-content .icon { .custom-commstatus-loading {
display: none; background-color: rgba(36, 38, 53, 0.9);
} }
.u-commstatus-loading-status-0 .u-commstatus-loading-button { .custom-commstatus-loading .u-commstatus-loading-button {
display: none; bottom: 3.573rem;
width: 2.667rem;
color: #00ffff;
font-size: 0.32rem;
background-color: transparent;
padding: 0.48rem 0 0.133rem;
} }
.u-commstatus-loading-status-1 .u-commstatus-loading-content { .custom-commstatus-loading .u-commstatus-loading-button:after {
color: #00ffff; content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #00ffff, #242635);
background: linear-gradient(to right, #242635, #00ffff, #242635);
}
.custom-commstatus-loading .u-commstatus-loading-button:active {
background-color: transparent;
} }
.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon { .custom-commstatus-loading .u-commstatus-loading-button.disabled {
font-family: SDSIconfont; background-color: transparent;
font-size: 5em;
} }
\ No newline at end of file
web/view/bindUser/bindUser.css
...@@ -51,9 +51,10 @@ p { ...@@ -51,9 +51,10 @@ p {
.u-loading .u-loading-box { .u-loading .u-loading-box {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 0;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translateY(-50%);
transform: translate(-50%, -50%); transform: translateY(-50%);
right: 0;
} }
.u-loading .u-loading-box .u-loading-icon { .u-loading .u-loading-box .u-loading-icon {
...@@ -65,8 +66,8 @@ p { ...@@ -65,8 +66,8 @@ p {
-webkit-background-size: cover; -webkit-background-size: cover;
background-size: cover; background-size: cover;
margin: 0 auto; margin: 0 auto;
-webkit-animation: uLoading 1s steps(12, end) infinite; -webkit-animation: loading 1s steps(12, end) infinite;
animation: uLoading 1s steps(12, end) infinite; animation: loading 1s steps(12, end) infinite;
} }
.u-loading .u-loading-box .u-loading-text { .u-loading .u-loading-box .u-loading-text {
...@@ -75,7 +76,7 @@ p { ...@@ -75,7 +76,7 @@ p {
text-align: center; text-align: center;
} }
@-webkit-keyframes uLoading { @-webkit-keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -87,7 +88,7 @@ p { ...@@ -87,7 +88,7 @@ p {
} }
} }
@keyframes uLoading { @keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -99,6 +100,132 @@ p { ...@@ -99,6 +100,132 @@ p {
} }
} }
.custom-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-loading .u-loading-box {
color: #00ffff;
}
.custom-loading .u-loading-box .u-loading-icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
background: none;
-webkit-animation: none;
animation: none;
}
.custom-loading .u-loading-box .u-loading-icon: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);
-webkit-animation: loading 1.3s infinite linear;
animation: loading 1.3s infinite linear;
}
.custom-loading .u-loading-box .u-loading-text {
color: inherit;
font-size: 0.427rem;
margin-top: 0.533rem;
}
@-webkit-keyframes loading {
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 loading {
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;
}
}
.u-dialog { .u-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -391,6 +518,30 @@ p { ...@@ -391,6 +518,30 @@ p {
background: linear-gradient(to right, #242635, #00ffff, #242635); background: linear-gradient(to right, #242635, #00ffff, #242635);
} }
.editHead {
width: 5.333rem;
margin: 1.867rem auto 0.693rem;
}
.editHead li {
color: #00ffff;
font-size: 0.32rem;
text-align: center;
margin-bottom: 0.32rem;
}
.editHead li img {
width: 2.133rem;
height: 2.133rem;
border-radius: 50%;
}
.inputBox {
width: 6.667rem;
margin: 0 auto;
padding-bottom: 1.067rem;
}
.u-text { .u-text {
width: 100%; width: 100%;
display: table; display: table;
...@@ -491,6 +642,62 @@ p { ...@@ -491,6 +642,62 @@ p {
} }
} }
.custom-bindUser-text {
margin-top: 0.453rem;
}
.custom-bindUser-text input {
padding-top: 0.213rem;
padding-bottom: 0.213rem;
padding-right: 1.013rem;
text-align: center;
}
.custom-bindUser-text input::-webkit-input-placeholder {
color: #91929a;
}
.custom-bindUser-text .u-text-title {
width: 3.2rem;
padding-left: 1.12rem;
}
.custom-bindUser-text .u-text-clear {
right: 0.187rem;
}
.custom-bindUser-text .u-text-clear:before {
content: '\e601';
font-family: iconfont;
color: #00ffff;
font-size: 0.347rem;
}
.custom-bindUser-text:after {
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.errorTip {
position: absolute;
left: 0;
right: 0;
color: #fc2168;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
text-align: center;
height: 1.067rem;
line-height: 1.067rem;
}
.custom-button {
position: absolute;
bottom: 1.733rem;
left: 0;
right: 0;
}
.u-swipe-list { .u-swipe-list {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -610,4 +817,78 @@ p { ...@@ -610,4 +817,78 @@ p {
transform: translateY(-50%); transform: translateY(-50%);
width: 100%; width: 100%;
text-align: center; text-align: center;
}
.custom-swipe-list {
position: absolute;
top: 1.173rem;
bottom: 0;
left: 0;
height: auto;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle {
background-color: #242635;
height: 2rem;
padding: 0 1.067rem;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle .u-swipe-list-image {
width: 0.8rem;
height: 0.8rem;
margin-right: 1.2rem;
border-radius: 50%;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle .u-swipe-list-title {
font-size: 0.427rem;
line-height: 0.533rem;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle span {
margin-right: 0.48rem;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle.u-swipe-list-selected {
left: -1.867rem;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-button div {
width: 1.867rem;
padding-left: 0.267rem;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
color: #00ffff;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-button div:before {
content: '\e66d';
font-family: iconfont;
font-size: 0.427rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-button div:nth-last-of-type(1) {
background-color: #242635;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row:after {
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.custom-swipe-list .u-swipe-list-load {
color: #00ffff;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
height: 0.933rem;
line-height: 0.933rem;
}
.custom-swipe-list .u-swipeList-tip {
color: #00ffff;
font-size: 0.48rem;
} }
\ No newline at end of file
web/view/device/device.css
...@@ -51,9 +51,10 @@ p { ...@@ -51,9 +51,10 @@ p {
.u-loading .u-loading-box { .u-loading .u-loading-box {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 0;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translateY(-50%);
transform: translate(-50%, -50%); transform: translateY(-50%);
right: 0;
} }
.u-loading .u-loading-box .u-loading-icon { .u-loading .u-loading-box .u-loading-icon {
...@@ -65,8 +66,8 @@ p { ...@@ -65,8 +66,8 @@ p {
-webkit-background-size: cover; -webkit-background-size: cover;
background-size: cover; background-size: cover;
margin: 0 auto; margin: 0 auto;
-webkit-animation: uLoading 1s steps(12, end) infinite; -webkit-animation: loading 1s steps(12, end) infinite;
animation: uLoading 1s steps(12, end) infinite; animation: loading 1s steps(12, end) infinite;
} }
.u-loading .u-loading-box .u-loading-text { .u-loading .u-loading-box .u-loading-text {
...@@ -75,7 +76,7 @@ p { ...@@ -75,7 +76,7 @@ p {
text-align: center; text-align: center;
} }
@-webkit-keyframes uLoading { @-webkit-keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -87,7 +88,7 @@ p { ...@@ -87,7 +88,7 @@ p {
} }
} }
@keyframes uLoading { @keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -99,6 +100,132 @@ p { ...@@ -99,6 +100,132 @@ p {
} }
} }
.custom-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-loading .u-loading-box {
color: #00ffff;
}
.custom-loading .u-loading-box .u-loading-icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
background: none;
-webkit-animation: none;
animation: none;
}
.custom-loading .u-loading-box .u-loading-icon: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);
-webkit-animation: loading 1.3s infinite linear;
animation: loading 1.3s infinite linear;
}
.custom-loading .u-loading-box .u-loading-text {
color: inherit;
font-size: 0.427rem;
margin-top: 0.533rem;
}
@-webkit-keyframes loading {
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 loading {
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;
}
}
.u-dialog { .u-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -504,6 +631,278 @@ p { ...@@ -504,6 +631,278 @@ p {
color: #999; color: #999;
} }
.u-commstatus-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
background-color: rgba(0, 0, 0, 0.8);
}
.u-commstatus-loading .u-commstatus-loading-content {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
.u-commstatus-loading .u-commstatus-loading-content .loader {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
}
.u-commstatus-loading .u-commstatus-loading-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-commstatus-loading .u-commstatus-loading-content .icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
}
.u-commstatus-loading .u-commstatus-loading-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-commstatus-loading .u-commstatus-loading-content .u-commstatus-loading-text {
font-size: 0.427rem;
margin-top: 0.533rem;
text-align: center;
}
.u-commstatus-loading .u-commstatus-loading-button {
position: absolute;
bottom: 1.733rem;
left: 0;
right: 0;
width: 6.4rem;
color: #fff;
font-size: inherit;
background-color: #007aff;
border-radius: 0.533rem;
text-align: center;
line-height: 1;
margin: 0 auto;
padding: 0.267rem 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
background-clip: padding-box;
}
.u-commstatus-loading .u-commstatus-loading-button:active {
background-color: #0065ff;
}
.u-commstatus-loading .u-commstatus-loading-button.disabled {
background-color: #bbb;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content {
color: #00ffff;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader:before {
-webkit-animation: commstatusLoading 1.3s infinite linear;
animation: commstatusLoading 1.3s infinite linear;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .icon {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-button {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content {
color: #00ffff;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .loader {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon:before {
content: '\e800';
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-button {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content {
color: #fff;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .loader {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .icon {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .icon:before {
content: '\e646';
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-button {
display: block;
}
@-webkit-keyframes commstatusLoading {
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 commstatusLoading {
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-commstatus-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-commstatus-loading .u-commstatus-loading-button {
bottom: 3.573rem;
width: 2.667rem;
color: #00ffff;
font-size: 0.32rem;
background-color: transparent;
padding: 0.48rem 0 0.133rem;
}
.custom-commstatus-loading .u-commstatus-loading-button:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #00ffff, #242635);
background: linear-gradient(to right, #242635, #00ffff, #242635);
}
.custom-commstatus-loading .u-commstatus-loading-button:active {
background-color: transparent;
}
.custom-commstatus-loading .u-commstatus-loading-button.disabled {
background-color: transparent;
}
.u-carousel { .u-carousel {
width: 100%; width: 100%;
height: 6.667rem; height: 6.667rem;
......
web/view/device/recordList.css
...@@ -51,9 +51,10 @@ p { ...@@ -51,9 +51,10 @@ p {
.u-loading .u-loading-box { .u-loading .u-loading-box {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 0;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translateY(-50%);
transform: translate(-50%, -50%); transform: translateY(-50%);
right: 0;
} }
.u-loading .u-loading-box .u-loading-icon { .u-loading .u-loading-box .u-loading-icon {
...@@ -65,8 +66,8 @@ p { ...@@ -65,8 +66,8 @@ p {
-webkit-background-size: cover; -webkit-background-size: cover;
background-size: cover; background-size: cover;
margin: 0 auto; margin: 0 auto;
-webkit-animation: uLoading 1s steps(12, end) infinite; -webkit-animation: loading 1s steps(12, end) infinite;
animation: uLoading 1s steps(12, end) infinite; animation: loading 1s steps(12, end) infinite;
} }
.u-loading .u-loading-box .u-loading-text { .u-loading .u-loading-box .u-loading-text {
...@@ -75,7 +76,7 @@ p { ...@@ -75,7 +76,7 @@ p {
text-align: center; text-align: center;
} }
@-webkit-keyframes uLoading { @-webkit-keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -87,7 +88,7 @@ p { ...@@ -87,7 +88,7 @@ p {
} }
} }
@keyframes uLoading { @keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -99,6 +100,132 @@ p { ...@@ -99,6 +100,132 @@ p {
} }
} }
.custom-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-loading .u-loading-box {
color: #00ffff;
}
.custom-loading .u-loading-box .u-loading-icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
background: none;
-webkit-animation: none;
animation: none;
}
.custom-loading .u-loading-box .u-loading-icon: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);
-webkit-animation: loading 1.3s infinite linear;
animation: loading 1.3s infinite linear;
}
.custom-loading .u-loading-box .u-loading-text {
color: inherit;
font-size: 0.427rem;
margin-top: 0.533rem;
}
@-webkit-keyframes loading {
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 loading {
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;
}
}
.u-dialog { .u-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
......
web/view/device/remoteOpendoor.html
...@@ -32,6 +32,11 @@ ...@@ -32,6 +32,11 @@
</div> </div>
<u-button :init-param="componentsConfig.confirmButton.initParam" v-on:u-button-tap="onConfirmButtonTap"></u-button> <u-button :init-param="componentsConfig.confirmButton.initParam" v-on:u-button-tap="onConfirmButtonTap"></u-button>
</div> </div>
<u-commstatus-loading ref="ucommstatusloading" :text="textLoading" :status="status"
:init-param="componentsConfig.ucommstatusloading.initParam" v-on:u-commstatus-loading-tap="onCommstatusLoadingButtonTap()">
<p class="loader"></p>
<p class="icon"></p>
</u-commstatus-loading>
<u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog> <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading> <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div> </div>
......
web/view/doorlockManage/doorlockManage.css
...@@ -51,9 +51,10 @@ p { ...@@ -51,9 +51,10 @@ p {
.u-loading .u-loading-box { .u-loading .u-loading-box {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 0;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translateY(-50%);
transform: translate(-50%, -50%); transform: translateY(-50%);
right: 0;
} }
.u-loading .u-loading-box .u-loading-icon { .u-loading .u-loading-box .u-loading-icon {
...@@ -65,8 +66,8 @@ p { ...@@ -65,8 +66,8 @@ p {
-webkit-background-size: cover; -webkit-background-size: cover;
background-size: cover; background-size: cover;
margin: 0 auto; margin: 0 auto;
-webkit-animation: uLoading 1s steps(12, end) infinite; -webkit-animation: loading 1s steps(12, end) infinite;
animation: uLoading 1s steps(12, end) infinite; animation: loading 1s steps(12, end) infinite;
} }
.u-loading .u-loading-box .u-loading-text { .u-loading .u-loading-box .u-loading-text {
...@@ -75,7 +76,7 @@ p { ...@@ -75,7 +76,7 @@ p {
text-align: center; text-align: center;
} }
@-webkit-keyframes uLoading { @-webkit-keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -87,7 +88,7 @@ p { ...@@ -87,7 +88,7 @@ p {
} }
} }
@keyframes uLoading { @keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -99,6 +100,132 @@ p { ...@@ -99,6 +100,132 @@ p {
} }
} }
.custom-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-loading .u-loading-box {
color: #00ffff;
}
.custom-loading .u-loading-box .u-loading-icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
background: none;
-webkit-animation: none;
animation: none;
}
.custom-loading .u-loading-box .u-loading-icon: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);
-webkit-animation: loading 1.3s infinite linear;
animation: loading 1.3s infinite linear;
}
.custom-loading .u-loading-box .u-loading-text {
color: inherit;
font-size: 0.427rem;
margin-top: 0.533rem;
}
@-webkit-keyframes loading {
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 loading {
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;
}
}
.u-dialog { .u-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
......
web/view/login/login.css
...@@ -51,9 +51,10 @@ p { ...@@ -51,9 +51,10 @@ p {
.u-loading .u-loading-box { .u-loading .u-loading-box {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 0;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translateY(-50%);
transform: translate(-50%, -50%); transform: translateY(-50%);
right: 0;
} }
.u-loading .u-loading-box .u-loading-icon { .u-loading .u-loading-box .u-loading-icon {
...@@ -65,8 +66,8 @@ p { ...@@ -65,8 +66,8 @@ p {
-webkit-background-size: cover; -webkit-background-size: cover;
background-size: cover; background-size: cover;
margin: 0 auto; margin: 0 auto;
-webkit-animation: uLoading 1s steps(12, end) infinite; -webkit-animation: loading 1s steps(12, end) infinite;
animation: uLoading 1s steps(12, end) infinite; animation: loading 1s steps(12, end) infinite;
} }
.u-loading .u-loading-box .u-loading-text { .u-loading .u-loading-box .u-loading-text {
...@@ -75,7 +76,7 @@ p { ...@@ -75,7 +76,7 @@ p {
text-align: center; text-align: center;
} }
@-webkit-keyframes uLoading { @-webkit-keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -87,7 +88,7 @@ p { ...@@ -87,7 +88,7 @@ p {
} }
} }
@keyframes uLoading { @keyframes loading {
0% { 0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);
...@@ -99,6 +100,132 @@ p { ...@@ -99,6 +100,132 @@ p {
} }
} }
.custom-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-loading .u-loading-box {
color: #00ffff;
}
.custom-loading .u-loading-box .u-loading-icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
background: none;
-webkit-animation: none;
animation: none;
}
.custom-loading .u-loading-box .u-loading-icon: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);
-webkit-animation: loading 1.3s infinite linear;
animation: loading 1.3s infinite linear;
}
.custom-loading .u-loading-box .u-loading-text {
color: inherit;
font-size: 0.427rem;
margin-top: 0.533rem;
}
@-webkit-keyframes loading {
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 loading {
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;
}
}
.u-dialog { .u-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
......
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