Skip to content

D
DoorLock
Commit 0ab0e0a6 by wangying
Options

1.0.2 / 2017-09-15 

==================
 * 1.上传设备控制、记录列表、门锁管理、修改名称页面样式
parent 61c5bd7c
Showing with 1140 additions and 182 deletions
History.md
1.0.2 / 2017-09-15
1.0.3 / 2017-09-18
==================
* 1.上传用户列表、绑定用户、loading+成功/失败页面样式
1.0.2 / 2017-09-15
==================
* 1.上传设备控制、记录列表、门锁管理、修改名称页面样式
......
dev/src/lang/zh.json
{
"loading": "请耐心等待...",
"loading": "loading...",
"scroll": {
"clickToLoadMore": "点击加载更多",
"loading": "loading..."
......
dev/src/view/addDevice/v_wifiAdd.js
......@@ -86,7 +86,7 @@ function initComponentsConfig() {
},
ucommstatusloading: {
initParam: {
class: '',
class: 'custom-commstatus-loading',
buttonText: Vue.t('btn.confirm')
}
}
......
dev/src/view/bindUser/r_userList.vue
......@@ -69,12 +69,12 @@
initParam: {
class: 'custom-swipe-list',
list: [
{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: 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: 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: 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: 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: 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": ""}],}
],
tip: Vue.t('userList.noUserTip')
}
......
dev/src/view/device/v_remoteOpendoor.js
......@@ -12,17 +12,34 @@ import {iot, uPublic, uComponents} from '../../public/public.js';
iot.ready(init);
function init() {
//通用 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({
data:{
textPassword: null,
textErrorTip: null,
textLoading: 'loading...',
status: 0,
//配置组件
componentsConfig: initComponentsConfig()
},
mounted(){
},
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){
passwordChange(this,text);
},
......@@ -32,7 +49,11 @@ function init() {
},
//tap 确定
onConfirmButtonTap(){
confirmButtonTap();
confirmButtonTap(this);
},
//tap loading button
onCommstatusLoadingButtonTap(){
commstatusLoadingButtonTap(this);
}
}
}).$mount('#app');
......@@ -64,6 +85,12 @@ function initComponentsConfig() {
initParam: {
class: 'custom-loading'
}
},
ucommstatusloading: {
initParam: {
class: 'custom-commstatus-loading',
buttonText: Vue.t('btn.confirm')
}
}
}
}
......@@ -79,6 +106,27 @@ function backTap(){
}
//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();
//绑定失败
//uComponents.hideCommstatusloading(self);
}
\ No newline at end of file
web/lib/less/addDevice/addDevice.less
......@@ -145,130 +145,6 @@
.buttonPosition();
}
.u-commstatus-loading();
.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
.custom-commstatus-loading();
\ No newline at end of file
web/lib/less/bindUser/bindUser.less
......@@ -15,8 +15,126 @@
.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();
.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();
.custom-swipe-list{
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 @@
.button();
}
.u-commstatus-loading();
.custom-commstatus-loading();
//智能指纹锁
.u-carousel();
......@@ -240,13 +244,7 @@
}
.followServiceNumber-dialog{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1051;
background-color: rgba(0, 0, 0, 0.9);
.mask(1051,rgba(0, 0, 0, 0.9));
.followServiceNumber-dialog-box{
ul{
margin: 35px 0 -15px;
......
web/lib/less/public/core.less
......@@ -142,14 +142,14 @@ p{
}
//遮罩蒙版
.mask(@zIndex:1051){
.mask(@zIndex:1051,@bgColor:@BACKDROP-BG-COLOR){
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: @zIndex;
background-color: @BACKDROP-BG-COLOR;
background-color: @bgColor;
}
......@@ -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{
......
web/lib/less/public/public.less
......@@ -7,7 +7,8 @@
.u-loading{
.mask(1050);
.u-loading-box{
.transform_center();
.transformV_center(left,0);
right: 0;
.u-loading-icon{
width: 30px;/*no*/
height: 30px;/*no*/
......@@ -16,7 +17,7 @@
.bgImg("white_loading_icon.png");
.background-size(cover);
margin: 0 auto;
.animation(uLoading 1s steps(12, end) infinite);
.animation(loading 1s steps(12, end) infinite);
}
.u-loading-text{
color: @LOADING-COMPONENT-TEXT-COLOR;
......@@ -26,7 +27,7 @@
}
}
.keyframes(uLoading,{
.keyframes(loading,{
0%{
.transform(rotate3d(0,0,1,0deg));
}
......@@ -35,7 +36,7 @@
}
});
//.custom-loading();
.custom-loading();
//弹出框
.u-dialog{
......@@ -734,6 +735,7 @@
}
}
//走马灯
.u-marquee(){
.u-marquee{
width: 100%;
......@@ -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-text{
width: 100%;
......
web/lib/less/public/variables.less
......@@ -229,3 +229,14 @@
//修改名称
@CUSTOM-EDITNAMETEXT-COMPONENT-INPUT-FONTSIZE: @F_SIZE_18;
@CUSTOM-EDITNAMETEXT-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_20;
//绑定用户
@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":"绑定失败"}}
\ No newline at end of file
{"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
web/view/device/recordList.css
......@@ -51,9 +51,10 @@ p {
.u-loading .u-loading-box {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
.u-loading .u-loading-box .u-loading-icon {
......@@ -65,8 +66,8 @@ p {
-webkit-background-size: cover;
background-size: cover;
margin: 0 auto;
-webkit-animation: uLoading 1s steps(12, end) infinite;
animation: uLoading 1s steps(12, end) infinite;
-webkit-animation: loading 1s steps(12, end) infinite;
animation: loading 1s steps(12, end) infinite;
}
.u-loading .u-loading-box .u-loading-text {
......@@ -75,7 +76,7 @@ p {
text-align: center;
}
@-webkit-keyframes uLoading {
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
......@@ -87,7 +88,7 @@ p {
}
}
@keyframes uLoading {
@keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
......@@ -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 {
position: fixed;
top: 0;
......
web/view/device/remoteOpendoor.html
......@@ -32,6 +32,11 @@
</div>
<u-button :init-param="componentsConfig.confirmButton.initParam" v-on:u-button-tap="onConfirmButtonTap"></u-button>
</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-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div>
......
web/view/doorlockManage/doorlockManage.css
......@@ -51,9 +51,10 @@ p {
.u-loading .u-loading-box {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
.u-loading .u-loading-box .u-loading-icon {
......@@ -65,8 +66,8 @@ p {
-webkit-background-size: cover;
background-size: cover;
margin: 0 auto;
-webkit-animation: uLoading 1s steps(12, end) infinite;
animation: uLoading 1s steps(12, end) infinite;
-webkit-animation: loading 1s steps(12, end) infinite;
animation: loading 1s steps(12, end) infinite;
}
.u-loading .u-loading-box .u-loading-text {
......@@ -75,7 +76,7 @@ p {
text-align: center;
}
@-webkit-keyframes uLoading {
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
......@@ -87,7 +88,7 @@ p {
}
}
@keyframes uLoading {
@keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
......@@ -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 {
position: fixed;
top: 0;
......
web/view/login/login.css
......@@ -51,9 +51,10 @@ p {
.u-loading .u-loading-box {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
.u-loading .u-loading-box .u-loading-icon {
......@@ -65,8 +66,8 @@ p {
-webkit-background-size: cover;
background-size: cover;
margin: 0 auto;
-webkit-animation: uLoading 1s steps(12, end) infinite;
animation: uLoading 1s steps(12, end) infinite;
-webkit-animation: loading 1s steps(12, end) infinite;
animation: loading 1s steps(12, end) infinite;
}
.u-loading .u-loading-box .u-loading-text {
......@@ -75,7 +76,7 @@ p {
text-align: center;
}
@-webkit-keyframes uLoading {
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
......@@ -87,7 +88,7 @@ p {
}
}
@keyframes uLoading {
@keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
......@@ -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 {
position: fixed;
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