Skip to content

D
DoorLock
Commit 7413b195 by 朱建香
Options

Merge branch 'wangying' of http://192.168.2.91/gitlab/iot-project-js/doorlock into zjx 

# Conflicts:
#	web/view/doorlockManage/index.html
parents e5dad7c7 4d5df41a
Showing with 1523 additions and 207 deletions
History.md
1.0.8 / 2017-10-11 1.0.9 / 2017-10-12
==================
* 1.上传门锁管理、门锁用户、邀请绑定、绑定开锁信息页面样式
1.0.8 / 2017-10-11
================== ==================
* 1.上传主页绑定门锁样式 * 1.上传主页绑定门锁样式
......
web/lib/less/doorlockManage/doorlockManage.less
...@@ -136,13 +136,12 @@ ...@@ -136,13 +136,12 @@
.u-text(); .u-text();
.inputBox{ .inputBox{
width: 275px; margin: 0 42px;
margin: 0 auto;
padding-bottom: 40px; padding-bottom: 40px;
} }
.custom-editName-text{ .custom-editName-text{
.textInput(0,17px,16px); .textInput(0,17px,@CUSTOM-EDITTEXT-COMPONENT-INPUT-FONTSIZE);
} }
.errorTip{ .errorTip{
...@@ -152,6 +151,33 @@ ...@@ -152,6 +151,33 @@
.errorTip(); .errorTip();
} }
.unbindState-dialog{ //门锁管理
.mask(); .doorlockManage{
font-size: 16px;
padding: 17px 72px 17px 42px;
position: relative;
overflow: hidden;
p{
float: right;
color: #A0A0A7;
font-size: 12px;
margin-top: 3px;
}
// > icon
&:before{
content: '\e6a7';
.transformV_center(right,35px);
.iconfont(@USERINFOLINK-ICON-FONTSIZE);
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
}
} }
.unbindState-dialog();
\ No newline at end of file
web/lib/less/doorlockUsers/doorlockUser.less
...@@ -5,13 +5,12 @@ ...@@ -5,13 +5,12 @@
.u-text(); .u-text();
.inputBox{ .inputBox{
width: 275px; margin: 0 42px;
margin: 0 auto;
padding-bottom: 40px; padding-bottom: 40px;
} }
.custom-editName-text{ .custom-editName-text{
.textInput(0,17px,16px); .textInput(0,17px,@CUSTOM-EDITTEXT-COMPONENT-INPUT-FONTSIZE);
} }
.errorTip{ .errorTip{
...@@ -28,10 +27,289 @@ ...@@ -28,10 +27,289 @@
.buttonPosition(); .buttonPosition();
} }
.unbindState-dialog{ //门锁用户
.mask(); .userInfoLink{
margin-top: 20px;
li{
&:not(.userInfo){
height: 52px;
line-height: 52px;
position: relative;
padding: 0 65px 0 42px;
font-size: @USERINFOLINK-TITLE-FONTSIZE;
// > icon
&:before{
content: '\e6a7';
.transformV_center(right,35px);
.iconfont(@USERINFOLINK-ICON-FONTSIZE);
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
}
}
&.userInfo{
height: 75px;
padding-left: 42px;
.display-box();
.box-vertical-alignment();
position: relative;
//管理员头像
.userInfo-image{
width: 27px;
height: 27px;
margin-right: 14px;
}
> div{
.flex();
min-width: 0;
}
.userInfo-title{
font-size: @USERINFOLINK-TITLE-FONTSIZE;
.text_oneRow_ellipsis();
margin-bottom: 5px;
position: relative;
padding-right: 65px;
// > icon
&:after{
content: '\e6a7';
.transformV_center(right,35px);
.iconfont(@USERINFOLINK-ICON-FONTSIZE);
}
}
.userInfo-subtitle{
position: relative;
}
//绑定/未绑定 头像
.userInfo-subimage{
width: 20px;
height: 20px;
margin-right: 9px;
}
//昵称
.userInfo-name{
display: inline-block;
vertical-align: middle;
max-width: 145px;
.text_oneRow_ellipsis();
}
//邀请绑定
.userInfo-toBind{
position: absolute;
bottom: 0;
display: inline-block;
color: @USERINFOLINK-INVITEBIND-COLOR;
font-size: @USERINFOLINK-INVITEBIND-FONTSIZE;
.transform(scale(0.7));
padding: 0 22px 2px;
margin-left: -15px;
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.blue_gradient_border();
}
}
//解绑
.custom-unbind-button{
position: absolute;
top: -4px;
margin-left: 6px;
.button(72px);
.transform(scale(0.7));
padding: 5px 0;
display: inline-block;
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;/*no*/
background-color: @USERINFOLINK-USERINFO-BOTTOMBORDER;
}
}
}
}
//邀请绑定
.inviteBind{
margin: 40px 38px 0;
li{
p{
width: 200px;
height: 200px;
margin: 0 auto;
}
&:not(:first-child){
color: @INVITEBIND-TEXT-COLOR;
font-size: @INVITEBIND-TEXT-FONTSIZE;
padding-left: 12px;
text-indent: -12px;
line-height: 20px;
margin-top: 18px;
//注意事项
&:nth-child(2){
color: inherit;
font-size: @INVITEBIND-TITLE-FONTSIZE;
margin-top: 33px;
}
}
}
} }
.unbindState-dialog();
.guide-dialog{ .guide-dialog{
.mask(); .mask(1051,@CUSTOM-BACKDROP-BG);
.guideStep1{
position: absolute;
top: 65px;
left: 0;
width: 100%;
.guideStep1Cont{
padding: 13px 0 13px 42px;
position: relative;
p{
&:nth-child(1){
font-size: @USERINFOLINK-TITLE-FONTSIZE;
.text_oneRow_ellipsis();
margin-bottom: 5px;
position: relative;
padding-right: 65px;
// > icon
&:after{
content: '\e6a7';
.transformV_center(right,35px);
.iconfont(@USERINFOLINK-ICON-FONTSIZE);
}
}
&:nth-child(2){
position: relative;
}
//绑定/未绑定 头像
img{
width: 20px;
height: 20px;
margin-right: 13px;
}
//邀请绑定
span{
position: absolute;
bottom: 0;
display: inline-block;
color: @USERINFOLINK-INVITEBIND-COLOR;
font-size: @USERINFOLINK-INVITEBIND-FONTSIZE;
.transform(scale(0.7));
padding: 0 22px 2px;
margin-left: -15px;
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.blue_gradient_border();
}
}
}
//虚线框
&:after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 360px;
height: 100%;
margin: 0 auto;
border: 2px dashed;/*no*/
border-radius: 5px;
}
}
.guideStep1Tip{
.bgImg("guideArrow1.png");
background-position: 190px top;
background-repeat: no-repeat;
.background-size(24px 57px);
padding-top: 68px;
margin-top: -2px;
p{
color: #00ffff;
font-size: 19px;
font-family: tipFont;
text-align: center;
&:nth-child(2){
color: #91929a;
font-size: 16px;
line-height: 19px;
margin-top: 12px;
}
}
}
}
.guideStep2,
.guideStep4{
position: absolute;
bottom: 150px;
left: 0;
width: 100%;
}
.custom-dialog-button{
.button(200px);
}
.guideStep3{
position: absolute;
top: 139px;
left: 0;
width: 100%;
.guideStep3Cont{
height: 52px;
line-height: 52px;
position: relative;
padding: 0 65px 0 42px;
font-size: @USERINFOLINK-TITLE-FONTSIZE;
// > icon
&:before{
content: '\e6a7';
.transformV_center(right,35px);
.iconfont(@USERINFOLINK-ICON-FONTSIZE);
}
//虚线框
&:after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 360px;
height: 100%;
margin: 0 auto;
border: 2px dashed;/*no*/
border-radius: 5px;
}
}
.guideStep3Tip{
.bgImg("guideArrow2.png");
background-position: 56px top;
background-repeat: no-repeat;
.background-size(57px 140px);
padding-top: 122px;
font-size: 19px;
font-family: tipFont;
text-align: center;
line-height: 24px;
margin-top: -2px;
}
}
} }
\ No newline at end of file
web/lib/less/doorlockUsers/unlockInfo.less
@import "../public/public.less"; @import "../public/public.less";
@import "../public/header.less"; @import "../public/header.less";
//开锁信息列表
.title{
height: 48px;
line-height: 48px;
position: relative;
font-size: @UNLOCKINFO-TITLE-FONTSIZE;
padding-left: 42px;
border-bottom: 2px solid @UNLOCKINFO-TITLE-BOTTOMBORDER;/*no*/
~ .unlockInfo-list{
top: 92px;
}
}
.unlockInfo-list{
position: absolute;
top: 44px;
bottom: 0;
left: 0;
width: 100%;
overflow: auto;
}
.unlockInfo-list-scroll{
.unlockInfo-list-row{
position: relative;
color: @UNLOCKINFOLIST-TEXT-COLOR;
font-size: @UNLOCKINFOLIST-TEXT-FONTSIZE;
overflow: hidden;
padding: 18px 42px 8px;
p{
float: right;
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
}
}
}
.unlockInfo-list-load{
text-align: center;
.listLoad();
}
.unlockInfo-list-tip{
.transformV_center(left,0);
width: 100%;
.bgImg("unlockNoCont.png");
background-position: top center;
background-repeat: no-repeat;
.background-size(70px 70px);
padding-top: 88px;
font-size: @LIST-NOCONTTIP-FONTSIZE;
text-align: center;
}
//绑定开锁信
.opendoorMode{
border: solid #50515d;
border-width: 2px 0;/*no*/
ul{
padding: 11px 42px;
font-size: 0;
margin: 0 -12px;
li{
color: #00ffff;
font-size: 14px;
border: 1px solid;/*no*/
position: relative;
width: 80px;
display: inline-block;
text-align: center;
line-height: 1;
padding: 8px 0;
border-radius: 5px;
margin: 10px 12px;
&:after{
content: '\e631';
.transformV_center(left,5px);
.iconfont(16px);
display: none;
}
&.active{
background-color: #153D4C;
&:after{
display: block;
}
}
}
}
}
.u-select(); .u-select();
.custom-select{
height: 160px;
.u-select-scroll{
.u-select-row{
display: block;
font-size: 16px;
padding: 19px 80px 11px 42px;
.u-select-title{
float: left;
margin-right: 36px;
}
&:before{
content: '\e6a9';
right: 42px;
font-family: iconfont;
color: #00ffff;
display: block;
}
&:after{
.white_gradient_border();
}
&.active:before{
content: '\e6aa';
}
}
}
.u-select-load{
.listLoad();
}
}
.tip{
text-align: center;
color: #A0A0A7;
margin-top: 4px;
}
.u-button(); .u-button();
.custom-button{
.button();
.buttonPosition();
}
\ No newline at end of file
web/lib/less/doorlockUsers/userList.less
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
.display-box(); .display-box();
.box-vertical-alignment(); .box-vertical-alignment();
z-index: 2; z-index: 2;
//管理员头像
.user-list-image{ .user-list-image{
width: 27px; width: 27px;
height: 27px; height: 27px;
...@@ -39,12 +40,14 @@ ...@@ -39,12 +40,14 @@
.text_oneRow_ellipsis(); .text_oneRow_ellipsis();
margin-bottom: 5px; margin-bottom: 5px;
} }
//昵称
.user-list-subtitle span{ .user-list-subtitle span{
display: inline-block; display: inline-block;
width: 182px;
.text_oneRow_ellipsis();
vertical-align: middle; vertical-align: middle;
max-width: 182px;
.text_oneRow_ellipsis();
} }
//绑定/未绑定 头像
.user-list-subimage{ .user-list-subimage{
width: 20px; width: 20px;
height: 20px; height: 20px;
...@@ -89,9 +92,9 @@ ...@@ -89,9 +92,9 @@
z-index: 2; z-index: 2;
.white_gradient_border(); .white_gradient_border();
} }
&:active .user-list-handle:not(.user-list-selected){ // &:active .user-list-handle:not(.user-list-selected){
background-color: @USERLIST-ROW-ACTIVE-BG; // background-color: @USERLIST-ROW-ACTIVE-BG;
} // }
} }
} }
......
web/lib/less/public/core.less
...@@ -330,36 +330,37 @@ p{ ...@@ -330,36 +330,37 @@ p{
.custom-dialog{ .custom-dialog{
background-color: @CUSTOM-BACKDROP-BG; background-color: @CUSTOM-BACKDROP-BG;
.u-dialog-box{ .u-dialog-box{
width: 355px; width: 335px;
border-radius: 5px; border-radius: 5px;
background-color: @CUSTOM-DIALOG-COMPONENT-BOX-BG; background-color: @CUSTOM-DIALOG-COMPONENT-BOX-BG;
border: 1px solid;/*no*/ border: 1px solid;/*no*/
color: @CUSTOM-DIALOG-COMPONENT-COLOR; color: @CUSTOM-DIALOG-COMPONENT-COLOR;
padding-bottom: 35px; padding-bottom: 15px;
.u-dialog-content{ .u-dialog-content{
width: 100%; width: 100%;
height: 140px; height: 158px;
.display-box(); .display-box();
.box-arrangement();
.box-horizontal-alignment(); .box-horizontal-alignment();
.box-vertical-alignment(); .box-vertical-alignment();
font-size: @CUSTOM-DIALOG-COMPONENT-CONTENT-FONTSIZE; font-size: @CUSTOM-DIALOG-COMPONENT-CONTENT-FONTSIZE;
line-height: 22px; line-height: 24px;
padding: 0 15px; padding: 0 22px;
span{ span{
margin-right: 12px; .bgImgSize(51px,51px,"green_unbind_icon.png",center,cover);
margin-bottom: 12px;
display: block;
} }
&:after{ &:after{
display: none; display: none;
} }
} }
.u-dialog-button{ .u-dialog-button{
display: block; border-spacing: 25px 0;
text-align: center;
.u-dialog-cancel, .u-dialog-cancel,
.u-dialog-confirm{ .u-dialog-confirm{
.button(135px); .button(130px);
padding: 10px 0; padding: 10px 0;
display: inline-block;
} }
//取消 button //取消 button
.u-dialog-cancel:after{ .u-dialog-cancel:after{
...@@ -391,13 +392,12 @@ p{ ...@@ -391,13 +392,12 @@ p{
//list 无内容 //list 无内容
.listNoCont(){ .listNoCont(){
color: @LIST-NOCONTTIP-COLOR;
font-size: @LIST-NOCONTTIP-FONTSIZE; font-size: @LIST-NOCONTTIP-FONTSIZE;
// .bgImg("noCont.png"); .bgImg("noCont.png");
// background-position: top center; background-position: top center;
// background-repeat: no-repeat; background-repeat: no-repeat;
// .background-size(100px 100px); .background-size(61px 61px);
// padding-top: 126px; padding-top: 88px;
} }
.white_gradient_border(){ .white_gradient_border(){
...@@ -419,9 +419,9 @@ p{ ...@@ -419,9 +419,9 @@ p{
.inputBox(@paddingTop,@paddingBottom,@height,@bgImg,@bgYPosition,@bgSize){ .inputBox(@paddingTop,@paddingBottom,@height,@bgImg,@bgYPosition,@bgSize){
.inputBox{ .inputBox{
position: relative; position: relative;
margin: 0 auto; margin: 0 42px;
padding: @paddingTop 0 @paddingBottom; padding: @paddingTop 0 @paddingBottom;
.bgImgSize(275px,@height,@bgImg,center @bgYPosition,@bgSize); .bgImgSize(auto,@height,@bgImg,center @bgYPosition,@bgSize);
} }
} }
...@@ -465,3 +465,28 @@ p{ ...@@ -465,3 +465,28 @@ p{
} }
} }
} }
.unbindState-dialog(){
.unbindState-dialog{
.mask(1051,@CUSTOM-BACKDROP-BG);
div{
.transform_center();
width: 335px;
height: 213px;
.display-box();
.box-arrangement();
.box-horizontal-alignment();
.box-vertical-alignment();
color: #00ffff;
font-size: 16px;
border: 1px solid;/*no*/
border-radius: 5px;
img{
display: block;
width: 65px;
height: 65px;
margin-bottom: 14px;
}
}
}
}
\ No newline at end of file
web/lib/less/public/header.less
...@@ -35,11 +35,11 @@ ...@@ -35,11 +35,11 @@
} }
.header-left{ .header-left{
float: left; float: left;
padding-left: 9px; padding-left: 8px;
} }
.header-right{ .header-right{
float: right; float: right;
padding-right: 9px; padding-right: 8px;
text-align: right; text-align: right;
} }
.icon{ .icon{
......
web/lib/less/public/public.less
...@@ -150,7 +150,12 @@ ...@@ -150,7 +150,12 @@
//选择列表 //选择列表
.u-select(){ .u-select(){
.u-select .u-select-row{ .u-select{
width: 100%;
height: 100%;
overflow: auto;
}
.u-select-scroll .u-select-row{
padding: 15px 45px 15px 20px; padding: 15px 45px 15px 20px;
position: relative; position: relative;
.display-box(); .display-box();
......
web/lib/less/public/variables.less
...@@ -19,6 +19,11 @@ ...@@ -19,6 +19,11 @@
//src: url('//at.alicdn.com/t/font_372681_j5n6zgpz0py14i.ttf') format('truetype'); //src: url('//at.alicdn.com/t/font_372681_j5n6zgpz0py14i.ttf') format('truetype');
} }
@font-face{
font-family: 'tipFont';
src: url('@{ICONFONT_PATH}/tipFont.ttf') format('truetype');
}
@BODY-TEXT-FONTFAMILY: Helvetica,'Helvetica Neue',sans-serif; @BODY-TEXT-FONTFAMILY: Helvetica,'Helvetica Neue',sans-serif;
...@@ -42,6 +47,7 @@ ...@@ -42,6 +47,7 @@
@C_GRAY_3: #91929a; @C_GRAY_3: #91929a;
@C_GRAY_4: #959595; @C_GRAY_4: #959595;
@C_GRAY_5: #898989; @C_GRAY_5: #898989;
@C_GRAY_6: #50515d;
@OPACITY: transparent; @OPACITY: transparent;
@BLACK_OPACITY: fade(@C_BLACK,80%); @BLACK_OPACITY: fade(@C_BLACK,80%);
@BLACK_OPACITY_1: fade(@C_BLACK,40%); @BLACK_OPACITY_1: fade(@C_BLACK,40%);
...@@ -156,11 +162,12 @@ ...@@ -156,11 +162,12 @@
@CUSTOM-TEXT-COMPONENT-ICON-FONTSIZE: @DEFAULT_F_SIZE + 10; @CUSTOM-TEXT-COMPONENT-ICON-FONTSIZE: @DEFAULT_F_SIZE + 10;
@CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR: @C_BLUE_4; @CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR: @C_BLUE_4;
@CUSTOM-TEXT-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_13; @CUSTOM-TEXT-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_13;
@CUSTOM-EDITTEXT-COMPONENT-INPUT-FONTSIZE: @F_SIZE_16;
//自定义弹出框组件 //自定义弹出框组件
@CUSTOM-DIALOG-COMPONENT-BOX-BG: @OPACITY; @CUSTOM-DIALOG-COMPONENT-BOX-BG: @OPACITY;
@CUSTOM-DIALOG-COMPONENT-COLOR: @C_BLUE_4; @CUSTOM-DIALOG-COMPONENT-COLOR: @C_BLUE_4;
@CUSTOM-DIALOG-COMPONENT-CONTENT-FONTSIZE: @F_SIZE_18; @CUSTOM-DIALOG-COMPONENT-CONTENT-FONTSIZE: @F_SIZE_16;
//header //header
@HEADER-BG-COLOR: @C_BLUE_3; @HEADER-BG-COLOR: @C_BLUE_3;
...@@ -182,7 +189,7 @@ ...@@ -182,7 +189,7 @@
@LIST-LOAD-COLOR: @C_BLUE_4; //上拉加载 @LIST-LOAD-COLOR: @C_BLUE_4; //上拉加载
@LIST-LOAD-FONTSIZE: @F_SIZE_16; @LIST-LOAD-FONTSIZE: @F_SIZE_16;
@LIST-NOCONTTIP-COLOR: @C_BLUE_4; //list 无内容 @LIST-NOCONTTIP-COLOR: @C_BLUE_4; //list 无内容
@LIST-NOCONTTIP-FONTSIZE: @F_SIZE_18; @LIST-NOCONTTIP-FONTSIZE: @F_SIZE_16;
//引导 //引导
@GUIDE-FOOTER-FONTSIZE: @F_SIZE_16; @GUIDE-FOOTER-FONTSIZE: @F_SIZE_16;
...@@ -256,3 +263,21 @@ ...@@ -256,3 +263,21 @@
@USERLIST-BUTTON-ICON-COLOR: @C_BLUE_4; @USERLIST-BUTTON-ICON-COLOR: @C_BLUE_4;
@USERLIST-BUTTON-ICON-FONTSIZE: @F_SIZE_15; @USERLIST-BUTTON-ICON-FONTSIZE: @F_SIZE_15;
@USERLIST-ROW-ACTIVE-BG: @C_BLUE_6; @USERLIST-ROW-ACTIVE-BG: @C_BLUE_6;
//门锁用户
@USERINFOLINK-TITLE-FONTSIZE: @F_SIZE_16;
@USERINFOLINK-ICON-FONTSIZE: @F_SIZE_25;
@USERINFOLINK-INVITEBIND-COLOR: @C_BLUE_4;
@USERINFOLINK-INVITEBIND-FONTSIZE: @F_SIZE_16; //邀请绑定
@USERINFOLINK-USERINFO-BOTTOMBORDER: @C_GRAY_6;
//邀请绑定
@INVITEBIND-TEXT-COLOR: @C_GRAY_3;
@INVITEBIND-TEXT-FONTSIZE: @F_SIZE_16;
@INVITEBIND-TITLE-FONTSIZE: @F_SIZE_18;
//绑定开锁信息
@UNLOCKINFO-TITLE-FONTSIZE: @F_SIZE_16;
@UNLOCKINFO-TITLE-BOTTOMBORDER: @C_GRAY_6;
@UNLOCKINFOLIST-TEXT-COLOR: @C_GRAY_3;
@UNLOCKINFOLIST-TEXT-FONTSIZE: @F_SIZE_16;
\ No newline at end of file
web/view/addDevice/addDevice.css
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html, html,
body { body {
width: 100%; width: 100%;
...@@ -308,33 +313,42 @@ p { ...@@ -308,33 +313,42 @@ p {
} }
.custom-dialog .u-dialog-box { .custom-dialog .u-dialog-box {
width: 9.467rem; width: 8.933rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
padding-bottom: 0.933rem; padding-bottom: 0.4rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content { .custom-dialog .u-dialog-box .u-dialog-content {
width: 100%; width: 100%;
height: 3.733rem; height: 4.213rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
font-size: 0.48rem; font-size: 0.427rem;
line-height: 0.587rem; line-height: 0.64rem;
padding: 0 0.4rem; padding: 0 0.587rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content span { .custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem; width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbind_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: 0.32rem;
display: block;
} }
.custom-dialog .u-dialog-box .u-dialog-content:after { .custom-dialog .u-dialog-box .u-dialog-content:after {
...@@ -342,20 +356,18 @@ p { ...@@ -342,20 +356,18 @@ p {
} }
.custom-dialog .u-dialog-box .u-dialog-button { .custom-dialog .u-dialog-box .u-dialog-button {
display: block; border-spacing: 0.667rem 0;
text-align: center;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm { .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem; width: 3.467rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.267rem 0; padding: 0.267rem 0;
display: inline-block;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
...@@ -411,12 +423,12 @@ p { ...@@ -411,12 +423,12 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.24rem; padding-left: 0.213rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.24rem; padding-right: 0.213rem;
text-align: right; text-align: right;
} }
...@@ -536,9 +548,9 @@ p { ...@@ -536,9 +548,9 @@ p {
.inputBox { .inputBox {
position: relative; position: relative;
margin: 0 auto; margin: 0 1.12rem;
padding: 4.907rem 0 0.587rem; padding: 4.907rem 0 0.587rem;
width: 7.333rem; width: auto;
height: auto; height: auto;
background: url("../../resources/image/connectWifi.png") no-repeat center 1.067rem; background: url("../../resources/image/connectWifi.png") no-repeat center 1.067rem;
-webkit-background-size: 2.053rem 3.253rem; -webkit-background-size: 2.053rem 3.253rem;
......
web/view/addDevice/wifiAdd.html
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<div class="header"> <div class="header">
<v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch> <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
<p>{{ $t('title.wifiAdd') }}</p> <p>{{ $t('title.wifiAdd') }}</p>
</div> </div>
<div class="content"> <div class="content">
<div class="inputBox"> <div class="inputBox">
......
web/view/bindUser/bindUser.css
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html, html,
body { body {
width: 100%; width: 100%;
...@@ -308,33 +313,42 @@ p { ...@@ -308,33 +313,42 @@ p {
} }
.custom-dialog .u-dialog-box { .custom-dialog .u-dialog-box {
width: 9.467rem; width: 8.933rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
padding-bottom: 0.933rem; padding-bottom: 0.4rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content { .custom-dialog .u-dialog-box .u-dialog-content {
width: 100%; width: 100%;
height: 3.733rem; height: 4.213rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
font-size: 0.48rem; font-size: 0.427rem;
line-height: 0.587rem; line-height: 0.64rem;
padding: 0 0.4rem; padding: 0 0.587rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content span { .custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem; width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbind_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: 0.32rem;
display: block;
} }
.custom-dialog .u-dialog-box .u-dialog-content:after { .custom-dialog .u-dialog-box .u-dialog-content:after {
...@@ -342,20 +356,18 @@ p { ...@@ -342,20 +356,18 @@ p {
} }
.custom-dialog .u-dialog-box .u-dialog-button { .custom-dialog .u-dialog-box .u-dialog-button {
display: block; border-spacing: 0.667rem 0;
text-align: center;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm { .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem; width: 3.467rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.267rem 0; padding: 0.267rem 0;
display: inline-block;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
...@@ -411,12 +423,12 @@ p { ...@@ -411,12 +423,12 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.24rem; padding-left: 0.213rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.24rem; padding-right: 0.213rem;
text-align: right; text-align: right;
} }
...@@ -891,6 +903,11 @@ p { ...@@ -891,6 +903,11 @@ p {
} }
.custom-swipe-list .u-swipeList-tip { .custom-swipe-list .u-swipeList-tip {
color: #00ffff; font-size: 0.427rem;
font-size: 0.48rem; background-image: url("../../resources/image/noCont.png");
background-position: top center;
background-repeat: no-repeat;
-webkit-background-size: 1.627rem 1.627rem;
background-size: 1.627rem 1.627rem;
padding-top: 2.347rem;
} }
\ No newline at end of file
web/view/device/device.css
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html, html,
body { body {
width: 100%; width: 100%;
...@@ -308,33 +313,42 @@ p { ...@@ -308,33 +313,42 @@ p {
} }
.custom-dialog .u-dialog-box { .custom-dialog .u-dialog-box {
width: 9.467rem; width: 8.933rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
padding-bottom: 0.933rem; padding-bottom: 0.4rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content { .custom-dialog .u-dialog-box .u-dialog-content {
width: 100%; width: 100%;
height: 3.733rem; height: 4.213rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
font-size: 0.48rem; font-size: 0.427rem;
line-height: 0.587rem; line-height: 0.64rem;
padding: 0 0.4rem; padding: 0 0.587rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content span { .custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem; width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbind_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: 0.32rem;
display: block;
} }
.custom-dialog .u-dialog-box .u-dialog-content:after { .custom-dialog .u-dialog-box .u-dialog-content:after {
...@@ -342,20 +356,18 @@ p { ...@@ -342,20 +356,18 @@ p {
} }
.custom-dialog .u-dialog-box .u-dialog-button { .custom-dialog .u-dialog-box .u-dialog-button {
display: block; border-spacing: 0.667rem 0;
text-align: center;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm { .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem; width: 3.467rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.267rem 0; padding: 0.267rem 0;
display: inline-block;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
...@@ -411,12 +423,12 @@ p { ...@@ -411,12 +423,12 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.24rem; padding-left: 0.213rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.24rem; padding-right: 0.213rem;
text-align: right; text-align: right;
} }
......
web/view/device/recordList.css
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html, html,
body { body {
width: 100%; width: 100%;
...@@ -308,33 +313,42 @@ p { ...@@ -308,33 +313,42 @@ p {
} }
.custom-dialog .u-dialog-box { .custom-dialog .u-dialog-box {
width: 9.467rem; width: 8.933rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
padding-bottom: 0.933rem; padding-bottom: 0.4rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content { .custom-dialog .u-dialog-box .u-dialog-content {
width: 100%; width: 100%;
height: 3.733rem; height: 4.213rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
font-size: 0.48rem; font-size: 0.427rem;
line-height: 0.587rem; line-height: 0.64rem;
padding: 0 0.4rem; padding: 0 0.587rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content span { .custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem; width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbind_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: 0.32rem;
display: block;
} }
.custom-dialog .u-dialog-box .u-dialog-content:after { .custom-dialog .u-dialog-box .u-dialog-content:after {
...@@ -342,20 +356,18 @@ p { ...@@ -342,20 +356,18 @@ p {
} }
.custom-dialog .u-dialog-box .u-dialog-button { .custom-dialog .u-dialog-box .u-dialog-button {
display: block; border-spacing: 0.667rem 0;
text-align: center;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm { .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem; width: 3.467rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.267rem 0; padding: 0.267rem 0;
display: inline-block;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
...@@ -411,12 +423,12 @@ p { ...@@ -411,12 +423,12 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.24rem; padding-left: 0.213rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.24rem; padding-right: 0.213rem;
text-align: right; text-align: right;
} }
...@@ -571,6 +583,11 @@ p { ...@@ -571,6 +583,11 @@ p {
} }
.custom-list .u-list-tip { .custom-list .u-list-tip {
color: #00ffff; font-size: 0.427rem;
font-size: 0.48rem; background-image: url("../../resources/image/noCont.png");
background-position: top center;
background-repeat: no-repeat;
-webkit-background-size: 1.627rem 1.627rem;
background-size: 1.627rem 1.627rem;
padding-top: 2.347rem;
} }
\ No newline at end of file
web/view/doorlockManage/doorlockManage.css
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html, html,
body { body {
width: 100%; width: 100%;
...@@ -308,33 +313,42 @@ p { ...@@ -308,33 +313,42 @@ p {
} }
.custom-dialog .u-dialog-box { .custom-dialog .u-dialog-box {
width: 9.467rem; width: 8.933rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
padding-bottom: 0.933rem; padding-bottom: 0.4rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content { .custom-dialog .u-dialog-box .u-dialog-content {
width: 100%; width: 100%;
height: 3.733rem; height: 4.213rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
font-size: 0.48rem; font-size: 0.427rem;
line-height: 0.587rem; line-height: 0.64rem;
padding: 0 0.4rem; padding: 0 0.587rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content span { .custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem; width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbind_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: 0.32rem;
display: block;
} }
.custom-dialog .u-dialog-box .u-dialog-content:after { .custom-dialog .u-dialog-box .u-dialog-content:after {
...@@ -342,20 +356,18 @@ p { ...@@ -342,20 +356,18 @@ p {
} }
.custom-dialog .u-dialog-box .u-dialog-button { .custom-dialog .u-dialog-box .u-dialog-button {
display: block; border-spacing: 0.667rem 0;
text-align: center;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm { .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem; width: 3.467rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.267rem 0; padding: 0.267rem 0;
display: inline-block;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
...@@ -411,12 +423,12 @@ p { ...@@ -411,12 +423,12 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.24rem; padding-left: 0.213rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.24rem; padding-right: 0.213rem;
text-align: right; text-align: right;
} }
...@@ -644,8 +656,13 @@ p { ...@@ -644,8 +656,13 @@ p {
transform: translateY(-50%); transform: translateY(-50%);
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #00ffff; font-size: 0.427rem;
font-size: 0.48rem; background-image: url("../../resources/image/noCont.png");
background-position: top center;
background-repeat: no-repeat;
-webkit-background-size: 1.627rem 1.627rem;
background-size: 1.627rem 1.627rem;
padding-top: 2.347rem;
} }
.u-text { .u-text {
...@@ -741,8 +758,7 @@ p { ...@@ -741,8 +758,7 @@ p {
} }
.inputBox { .inputBox {
width: 7.333rem; margin: 0 1.12rem;
margin: 0 auto;
padding-bottom: 1.067rem; padding-bottom: 1.067rem;
} }
...@@ -801,6 +817,44 @@ p { ...@@ -801,6 +817,44 @@ p {
line-height: 1.067rem; line-height: 1.067rem;
} }
.doorlockManage {
font-size: 0.427rem;
padding: 0.453rem 1.92rem 0.453rem 1.12rem;
position: relative;
overflow: hidden;
}
.doorlockManage p {
float: right;
color: #A0A0A7;
font-size: 0.32rem;
margin-top: 0.08rem;
}
.doorlockManage:before {
content: '\e6a7';
position: absolute;
top: 50%;
right: 0.933rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.doorlockManage:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.unbindState-dialog { .unbindState-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -808,5 +862,38 @@ p { ...@@ -808,5 +862,38 @@ p {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1051; z-index: 1051;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(36, 38, 53, 0.9);
}
.unbindState-dialog div {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 8.933rem;
height: 5.68rem;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
color: #00ffff;
font-size: 0.427rem;
border: 1px solid;
border-radius: 0.133rem;
}
.unbindState-dialog div img {
display: block;
width: 1.733rem;
height: 1.733rem;
margin-bottom: 0.373rem;
} }
\ No newline at end of file
web/view/doorlockUsers/doorlockUser.css
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html, html,
body { body {
width: 100%; width: 100%;
...@@ -308,33 +313,42 @@ p { ...@@ -308,33 +313,42 @@ p {
} }
.custom-dialog .u-dialog-box { .custom-dialog .u-dialog-box {
width: 9.467rem; width: 8.933rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
padding-bottom: 0.933rem; padding-bottom: 0.4rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content { .custom-dialog .u-dialog-box .u-dialog-content {
width: 100%; width: 100%;
height: 3.733rem; height: 4.213rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
font-size: 0.48rem; font-size: 0.427rem;
line-height: 0.587rem; line-height: 0.64rem;
padding: 0 0.4rem; padding: 0 0.587rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content span { .custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem; width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbind_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: 0.32rem;
display: block;
} }
.custom-dialog .u-dialog-box .u-dialog-content:after { .custom-dialog .u-dialog-box .u-dialog-content:after {
...@@ -342,20 +356,18 @@ p { ...@@ -342,20 +356,18 @@ p {
} }
.custom-dialog .u-dialog-box .u-dialog-button { .custom-dialog .u-dialog-box .u-dialog-button {
display: block; border-spacing: 0.667rem 0;
text-align: center;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm { .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem; width: 3.467rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.267rem 0; padding: 0.267rem 0;
display: inline-block;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
...@@ -411,12 +423,12 @@ p { ...@@ -411,12 +423,12 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.24rem; padding-left: 0.213rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.24rem; padding-right: 0.213rem;
text-align: right; text-align: right;
} }
...@@ -533,8 +545,7 @@ p { ...@@ -533,8 +545,7 @@ p {
} }
.inputBox { .inputBox {
width: 7.333rem; margin: 0 1.12rem;
margin: 0 auto;
padding-bottom: 1.067rem; padding-bottom: 1.067rem;
} }
...@@ -638,6 +649,192 @@ p { ...@@ -638,6 +649,192 @@ p {
color: #999; color: #999;
} }
.userInfoLink {
margin-top: 0.533rem;
}
.userInfoLink li:not(.userInfo) {
height: 1.387rem;
line-height: 1.387rem;
position: relative;
padding: 0 1.733rem 0 1.12rem;
font-size: 0.427rem;
}
.userInfoLink li:not(.userInfo):before {
content: '\e6a7';
position: absolute;
top: 50%;
right: 0.933rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.userInfoLink li:not(.userInfo):after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.userInfoLink li.userInfo {
height: 2rem;
padding-left: 1.12rem;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
}
.userInfoLink li.userInfo .userInfo-image {
width: 0.72rem;
height: 0.72rem;
margin-right: 0.373rem;
}
.userInfoLink li.userInfo > div {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
min-width: 0;
}
.userInfoLink li.userInfo .userInfo-title {
font-size: 0.427rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 0.133rem;
position: relative;
padding-right: 1.733rem;
}
.userInfoLink li.userInfo .userInfo-title:after {
content: '\e6a7';
position: absolute;
top: 50%;
right: 0.933rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.userInfoLink li.userInfo .userInfo-subtitle {
position: relative;
}
.userInfoLink li.userInfo .userInfo-subimage {
width: 0.533rem;
height: 0.533rem;
margin-right: 0.24rem;
}
.userInfoLink li.userInfo .userInfo-name {
display: inline-block;
vertical-align: middle;
max-width: 3.867rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.userInfoLink li.userInfo .userInfo-toBind {
position: absolute;
bottom: 0;
display: inline-block;
color: #00ffff;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
padding: 0 0.587rem 0.053rem;
margin-left: -0.4rem;
}
.userInfoLink li.userInfo .userInfo-toBind: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);
}
.userInfoLink li.userInfo .custom-unbind-button {
position: absolute;
top: -0.107rem;
margin-left: 0.16rem;
width: 1.92rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
padding: 0.133rem 0;
display: inline-block;
}
.userInfoLink li.userInfo .custom-unbind-button:active {
background-color: #153D4C;
}
.userInfoLink li.userInfo .custom-unbind-button.disabled {
background-color: transparent;
color: #999;
}
.userInfoLink li.userInfo:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background-color: #50515d;
}
.inviteBind {
margin: 1.067rem 1.013rem 0;
}
.inviteBind li p {
width: 5.333rem;
height: 5.333rem;
margin: 0 auto;
}
.inviteBind li:not(:first-child) {
color: #91929a;
font-size: 0.427rem;
padding-left: 0.32rem;
text-indent: -0.32rem;
line-height: 0.533rem;
margin-top: 0.48rem;
}
.inviteBind li:not(:first-child):nth-child(2) {
color: inherit;
font-size: 0.48rem;
margin-top: 0.88rem;
}
.unbindState-dialog { .unbindState-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -645,7 +842,40 @@ p { ...@@ -645,7 +842,40 @@ p {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1051; z-index: 1051;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(36, 38, 53, 0.9);
}
.unbindState-dialog div {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 8.933rem;
height: 5.68rem;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
color: #00ffff;
font-size: 0.427rem;
border: 1px solid;
border-radius: 0.133rem;
}
.unbindState-dialog div img {
display: block;
width: 1.733rem;
height: 1.733rem;
margin-bottom: 0.373rem;
} }
.guide-dialog { .guide-dialog {
...@@ -655,5 +885,191 @@ p { ...@@ -655,5 +885,191 @@ p {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1051; z-index: 1051;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(36, 38, 53, 0.9);
}
.guide-dialog .guideStep1 {
position: absolute;
top: 1.733rem;
left: 0;
width: 100%;
}
.guide-dialog .guideStep1 .guideStep1Cont {
padding: 0.347rem 0 0.347rem 1.12rem;
position: relative;
}
.guide-dialog .guideStep1 .guideStep1Cont p:nth-child(1) {
font-size: 0.427rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 0.133rem;
position: relative;
padding-right: 1.733rem;
}
.guide-dialog .guideStep1 .guideStep1Cont p:nth-child(1):after {
content: '\e6a7';
position: absolute;
top: 50%;
right: 0.933rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.guide-dialog .guideStep1 .guideStep1Cont p:nth-child(2) {
position: relative;
}
.guide-dialog .guideStep1 .guideStep1Cont p img {
width: 0.533rem;
height: 0.533rem;
margin-right: 0.347rem;
}
.guide-dialog .guideStep1 .guideStep1Cont p span {
position: absolute;
bottom: 0;
display: inline-block;
color: #00ffff;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
padding: 0 0.587rem 0.053rem;
margin-left: -0.4rem;
}
.guide-dialog .guideStep1 .guideStep1Cont p span: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);
}
.guide-dialog .guideStep1 .guideStep1Cont:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 9.6rem;
height: 100%;
margin: 0 auto;
border: 2px dashed;
border-radius: 0.133rem;
}
.guide-dialog .guideStep1 .guideStep1Tip {
background-image: url("../../resources/image/guideArrow1.png");
background-position: 5.067rem top;
background-repeat: no-repeat;
-webkit-background-size: 0.64rem 1.52rem;
background-size: 0.64rem 1.52rem;
padding-top: 1.813rem;
margin-top: -0.053rem;
}
.guide-dialog .guideStep1 .guideStep1Tip p {
color: #00ffff;
font-size: 0.507rem;
font-family: tipFont;
text-align: center;
}
.guide-dialog .guideStep1 .guideStep1Tip p:nth-child(2) {
color: #91929a;
font-size: 0.427rem;
line-height: 0.507rem;
margin-top: 0.32rem;
}
.guide-dialog .guideStep2,
.guide-dialog .guideStep4 {
position: absolute;
bottom: 4rem;
left: 0;
width: 100%;
}
.guide-dialog .custom-dialog-button {
width: 5.333rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
}
.guide-dialog .custom-dialog-button:active {
background-color: #153D4C;
}
.guide-dialog .custom-dialog-button.disabled {
background-color: transparent;
color: #999;
}
.guide-dialog .guideStep3 {
position: absolute;
top: 3.707rem;
left: 0;
width: 100%;
}
.guide-dialog .guideStep3 .guideStep3Cont {
height: 1.387rem;
line-height: 1.387rem;
position: relative;
padding: 0 1.733rem 0 1.12rem;
font-size: 0.427rem;
}
.guide-dialog .guideStep3 .guideStep3Cont:before {
content: '\e6a7';
position: absolute;
top: 50%;
right: 0.933rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.guide-dialog .guideStep3 .guideStep3Cont:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 9.6rem;
height: 100%;
margin: 0 auto;
border: 2px dashed;
border-radius: 0.133rem;
}
.guide-dialog .guideStep3 .guideStep3Tip {
background-image: url("../../resources/image/guideArrow2.png");
background-position: 1.493rem top;
background-repeat: no-repeat;
-webkit-background-size: 1.52rem 3.733rem;
background-size: 1.52rem 3.733rem;
padding-top: 3.253rem;
font-size: 0.507rem;
font-family: tipFont;
text-align: center;
line-height: 0.64rem;
margin-top: -0.053rem;
} }
\ No newline at end of file
web/view/doorlockUsers/doorlockUser.html
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<transition name="fade"> <transition name="fade">
<v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap"> <v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap">
<div> <div>
<p><img src="../../resources/image/green_unbindSuccess_icon.png">{{ $t('doorlockUser.unbindSuccess') }}</p> <img src="../../resources/image/green_unbindSuccess_icon.png">{{ $t('doorlockUser.unbindSuccess') }}
</div> </div>
</v-touch> </v-touch>
</transition> </transition>
......
web/view/doorlockUsers/unlockInfo.css
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html, html,
body { body {
width: 100%; width: 100%;
...@@ -308,33 +313,42 @@ p { ...@@ -308,33 +313,42 @@ p {
} }
.custom-dialog .u-dialog-box { .custom-dialog .u-dialog-box {
width: 9.467rem; width: 8.933rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
padding-bottom: 0.933rem; padding-bottom: 0.4rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content { .custom-dialog .u-dialog-box .u-dialog-content {
width: 100%; width: 100%;
height: 3.733rem; height: 4.213rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
font-size: 0.48rem; font-size: 0.427rem;
line-height: 0.587rem; line-height: 0.64rem;
padding: 0 0.4rem; padding: 0 0.587rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content span { .custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem; width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbind_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: 0.32rem;
display: block;
} }
.custom-dialog .u-dialog-box .u-dialog-content:after { .custom-dialog .u-dialog-box .u-dialog-content:after {
...@@ -342,20 +356,18 @@ p { ...@@ -342,20 +356,18 @@ p {
} }
.custom-dialog .u-dialog-box .u-dialog-button { .custom-dialog .u-dialog-box .u-dialog-button {
display: block; border-spacing: 0.667rem 0;
text-align: center;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm { .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem; width: 3.467rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.267rem 0; padding: 0.267rem 0;
display: inline-block;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
...@@ -411,12 +423,12 @@ p { ...@@ -411,12 +423,12 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.24rem; padding-left: 0.213rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.24rem; padding-right: 0.213rem;
text-align: right; text-align: right;
} }
...@@ -440,7 +452,132 @@ p { ...@@ -440,7 +452,132 @@ p {
padding-top: 1.173rem; padding-top: 1.173rem;
} }
.u-select .u-select-row { .title {
height: 1.28rem;
line-height: 1.28rem;
position: relative;
font-size: 0.427rem;
padding-left: 1.12rem;
border-bottom: 2px solid #50515d;
}
.title ~ .unlockInfo-list {
top: 2.453rem;
}
.unlockInfo-list {
position: absolute;
top: 1.173rem;
bottom: 0;
left: 0;
width: 100%;
overflow: auto;
}
.unlockInfo-list-scroll .unlockInfo-list-row {
position: relative;
color: #91929a;
font-size: 0.427rem;
overflow: hidden;
padding: 0.48rem 1.12rem 0.213rem;
}
.unlockInfo-list-scroll .unlockInfo-list-row p {
float: right;
}
.unlockInfo-list-scroll .unlockInfo-list-row:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.unlockInfo-list-load {
text-align: center;
color: #00ffff;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
height: 0.933rem;
line-height: 0.933rem;
}
.unlockInfo-list-tip {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
background-image: url("../../resources/image/unlockNoCont.png");
background-position: top center;
background-repeat: no-repeat;
-webkit-background-size: 1.867rem 1.867rem;
background-size: 1.867rem 1.867rem;
padding-top: 2.347rem;
font-size: 0.427rem;
text-align: center;
}
.opendoorMode {
border: solid #50515d;
border-width: 2px 0;
}
.opendoorMode ul {
padding: 0.293rem 1.12rem;
font-size: 0;
margin: 0 -0.32rem;
}
.opendoorMode ul li {
color: #00ffff;
font-size: 0.373rem;
border: 1px solid;
position: relative;
width: 2.133rem;
display: inline-block;
text-align: center;
line-height: 1;
padding: 0.213rem 0;
border-radius: 0.133rem;
margin: 0.267rem 0.32rem;
}
.opendoorMode ul li:after {
content: '\e631';
position: absolute;
top: 50%;
left: 0.133rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: iconfont;
font-size: 0.427rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
display: none;
}
.opendoorMode ul li.active {
background-color: #153D4C;
}
.opendoorMode ul li.active:after {
display: block;
}
.u-select {
width: 100%;
height: 100%;
overflow: auto;
}
.u-select-scroll .u-select-row {
padding: 0.4rem 1.2rem 0.4rem 0.533rem; padding: 0.4rem 1.2rem 0.4rem 0.533rem;
position: relative; position: relative;
display: -webkit-box; display: -webkit-box;
...@@ -451,13 +588,13 @@ p { ...@@ -451,13 +588,13 @@ p {
align-items: center; align-items: center;
} }
.u-select .u-select-row .u-select-image { .u-select-scroll .u-select-row .u-select-image {
width: 1.333rem; width: 1.333rem;
height: 1.333rem; height: 1.333rem;
margin-right: 0.267rem; margin-right: 0.267rem;
} }
.u-select .u-select-row .u-select-icon { .u-select-scroll .u-select-row .u-select-icon {
margin-right: 0.267rem; margin-right: 0.267rem;
font-family: iconfont; font-family: iconfont;
font-size: 0.533rem; font-size: 0.533rem;
...@@ -465,26 +602,26 @@ p { ...@@ -465,26 +602,26 @@ p {
line-height: 1; line-height: 1;
} }
.u-select .u-select-row div { .u-select-scroll .u-select-row div {
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1; -webkit-flex: 1;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
.u-select .u-select-row .u-select-title { .u-select-scroll .u-select-row .u-select-title {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.u-select .u-select-row .u-select-subtitle { .u-select-scroll .u-select-row .u-select-subtitle {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.u-select .u-select-row:before { .u-select-scroll .u-select-row:before {
content: '\e7a1'; content: '\e7a1';
position: absolute; position: absolute;
top: 50%; top: 50%;
...@@ -498,7 +635,7 @@ p { ...@@ -498,7 +635,7 @@ p {
display: none; display: none;
} }
.u-select .u-select-row:after { .u-select-scroll .u-select-row:after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -508,7 +645,7 @@ p { ...@@ -508,7 +645,7 @@ p {
background: #bbb; background: #bbb;
} }
.u-select .u-select-row.active:before { .u-select-scroll .u-select-row.active:before {
display: block; display: block;
} }
...@@ -516,6 +653,53 @@ p { ...@@ -516,6 +653,53 @@ p {
text-align: center; text-align: center;
} }
.custom-select {
height: 4.267rem;
}
.custom-select .u-select-scroll .u-select-row {
display: block;
font-size: 0.427rem;
padding: 0.507rem 2.133rem 0.293rem 1.12rem;
}
.custom-select .u-select-scroll .u-select-row .u-select-title {
float: left;
margin-right: 0.96rem;
}
.custom-select .u-select-scroll .u-select-row:before {
content: '\e6a9';
right: 1.12rem;
font-family: iconfont;
color: #00ffff;
display: block;
}
.custom-select .u-select-scroll .u-select-row:after {
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.custom-select .u-select-scroll .u-select-row.active:before {
content: '\e6aa';
}
.custom-select .u-select-load {
color: #00ffff;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
height: 0.933rem;
line-height: 0.933rem;
}
.tip {
text-align: center;
color: #A0A0A7;
margin-top: 0.107rem;
}
.u-button { .u-button {
width: 6.4rem; width: 6.4rem;
color: #fff; color: #fff;
...@@ -538,3 +722,25 @@ p { ...@@ -538,3 +722,25 @@ p {
.u-button.disabled { .u-button.disabled {
background-color: #bbb; background-color: #bbb;
} }
.custom-button {
width: 7.333rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
position: absolute;
bottom: 1.733rem;
left: 0;
right: 0;
}
.custom-button:active {
background-color: #153D4C;
}
.custom-button.disabled {
background-color: transparent;
color: #999;
}
\ No newline at end of file
web/view/doorlockUsers/unlockInfo.html
...@@ -26,14 +26,14 @@ ...@@ -26,14 +26,14 @@
<v-touch tag="span" class="header-right" v-on:tap="onAddTap">{{ $t('btn.add') }}</v-touch> <v-touch tag="span" class="header-right" v-on:tap="onAddTap">{{ $t('btn.add') }}</v-touch>
</div> </div>
<div class="content"> <div class="content">
<p class="title" v-show="unlockInfoList.length">{{ $t('unlockInfo.bindUnlockInfo') }}</p> <p class="title" v-if="unlockInfoList.length">{{ $t('unlockInfo.bindUnlockInfo') }}</p>
<div class="unlockInfo-list"> <div class="unlockInfo-list">
<ul class="unlockInfo-list-scroll" v-show="unlockInfoList.length"> <ul class="unlockInfo-list-scroll" v-show="unlockInfoList.length">
<li class="unlockInfo-list-row" v-for="item in unlockInfoList"> <li class="unlockInfo-list-row" v-for="item in unlockInfoList">
{{ item.title }} {{ item.title }}
<p>ID:{{ item.rightText }}</p> <p>ID:{{ item.rightText }}</p>
</li> </li>
<v-touch tag="li" class="uunlockInfo-list-load" v-on:tap="onTapLoad" v-show="loadShowFlag">{{ loadText }}</v-touch> <v-touch tag="li" class="unlockInfo-list-load" v-on:tap="onTapLoad" v-show="loadShowFlag">{{ loadText }}</v-touch>
</ul> </ul>
<p class="unlockInfo-list-tip" v-show="(unlockInfoList.length == 0)">{{ tip }}</p> <p class="unlockInfo-list-tip" v-show="(unlockInfoList.length == 0)">{{ tip }}</p>
</div> </div>
......
web/view/doorlockUsers/userList.css
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html, html,
body { body {
width: 100%; width: 100%;
...@@ -308,33 +313,42 @@ p { ...@@ -308,33 +313,42 @@ p {
} }
.custom-dialog .u-dialog-box { .custom-dialog .u-dialog-box {
width: 9.467rem; width: 8.933rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
padding-bottom: 0.933rem; padding-bottom: 0.4rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content { .custom-dialog .u-dialog-box .u-dialog-content {
width: 100%; width: 100%;
height: 3.733rem; height: 4.213rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
font-size: 0.48rem; font-size: 0.427rem;
line-height: 0.587rem; line-height: 0.64rem;
padding: 0 0.4rem; padding: 0 0.587rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content span { .custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem; width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbind_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: 0.32rem;
display: block;
} }
.custom-dialog .u-dialog-box .u-dialog-content:after { .custom-dialog .u-dialog-box .u-dialog-content:after {
...@@ -342,20 +356,18 @@ p { ...@@ -342,20 +356,18 @@ p {
} }
.custom-dialog .u-dialog-box .u-dialog-button { .custom-dialog .u-dialog-box .u-dialog-button {
display: block; border-spacing: 0.667rem 0;
text-align: center;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm { .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem; width: 3.467rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.267rem 0; padding: 0.267rem 0;
display: inline-block;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
...@@ -411,12 +423,12 @@ p { ...@@ -411,12 +423,12 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.24rem; padding-left: 0.213rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.24rem; padding-right: 0.213rem;
text-align: right; text-align: right;
} }
...@@ -494,11 +506,11 @@ p { ...@@ -494,11 +506,11 @@ p {
.user-list-scroll .user-list-row .user-list-handle .user-list-subtitle span { .user-list-scroll .user-list-row .user-list-handle .user-list-subtitle span {
display: inline-block; display: inline-block;
width: 4.853rem; vertical-align: middle;
max-width: 4.853rem;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle;
} }
.user-list-scroll .user-list-row .user-list-handle .user-list-subimage { .user-list-scroll .user-list-row .user-list-handle .user-list-subimage {
...@@ -565,10 +577,6 @@ p { ...@@ -565,10 +577,6 @@ p {
background: linear-gradient(to right, #242635, #fff, #242635); background: linear-gradient(to right, #242635, #fff, #242635);
} }
.user-list-scroll .user-list-row:active .user-list-handle:not(.user-list-selected) {
background-color: #191b25;
}
.user-list-load { .user-list-load {
text-align: center; text-align: center;
color: #00ffff; color: #00ffff;
...@@ -581,9 +589,9 @@ p { ...@@ -581,9 +589,9 @@ p {
.inputBox { .inputBox {
position: relative; position: relative;
margin: 0 auto; margin: 0 1.12rem;
padding: 5.333rem 0 1.067rem; padding: 5.333rem 0 1.067rem;
width: 7.333rem; width: auto;
height: auto; height: auto;
background: url("../../resources/image/gray_addUser_icon.png") no-repeat center 2.4rem; background: url("../../resources/image/gray_addUser_icon.png") no-repeat center 2.4rem;
-webkit-background-size: 1.733rem 1.733rem; -webkit-background-size: 1.733rem 1.733rem;
......
web/view/login/login.css
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html, html,
body { body {
width: 100%; width: 100%;
...@@ -308,33 +313,42 @@ p { ...@@ -308,33 +313,42 @@ p {
} }
.custom-dialog .u-dialog-box { .custom-dialog .u-dialog-box {
width: 9.467rem; width: 8.933rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
padding-bottom: 0.933rem; padding-bottom: 0.4rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content { .custom-dialog .u-dialog-box .u-dialog-content {
width: 100%; width: 100%;
height: 3.733rem; height: 4.213rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
font-size: 0.48rem; font-size: 0.427rem;
line-height: 0.587rem; line-height: 0.64rem;
padding: 0 0.4rem; padding: 0 0.587rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content span { .custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem; width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbind_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: 0.32rem;
display: block;
} }
.custom-dialog .u-dialog-box .u-dialog-content:after { .custom-dialog .u-dialog-box .u-dialog-content:after {
...@@ -342,20 +356,18 @@ p { ...@@ -342,20 +356,18 @@ p {
} }
.custom-dialog .u-dialog-box .u-dialog-button { .custom-dialog .u-dialog-box .u-dialog-button {
display: block; border-spacing: 0.667rem 0;
text-align: center;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm { .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem; width: 3.467rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.267rem 0; padding: 0.267rem 0;
display: inline-block;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
...@@ -411,12 +423,12 @@ p { ...@@ -411,12 +423,12 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.24rem; padding-left: 0.213rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.24rem; padding-right: 0.213rem;
text-align: right; text-align: right;
} }
...@@ -468,9 +480,9 @@ p { ...@@ -468,9 +480,9 @@ p {
.inputBox { .inputBox {
position: relative; position: relative;
margin: 0 auto; margin: 0 1.12rem;
padding: 4.907rem 0 1.067rem; padding: 4.907rem 0 1.067rem;
width: 7.333rem; width: auto;
height: 10.133rem; height: 10.133rem;
background: url("../../resources/image/logo.png") no-repeat center 2rem; background: url("../../resources/image/logo.png") no-repeat center 2rem;
-webkit-background-size: 1.707rem 1.707rem; -webkit-background-size: 1.707rem 1.707rem;
......
web/view/myInfo/myInfo.css
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype'); src: url('../../resources/font/iconfont.ttf') format('truetype');
} }
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html, html,
body { body {
width: 100%; width: 100%;
...@@ -308,33 +313,42 @@ p { ...@@ -308,33 +313,42 @@ p {
} }
.custom-dialog .u-dialog-box { .custom-dialog .u-dialog-box {
width: 9.467rem; width: 8.933rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
padding-bottom: 0.933rem; padding-bottom: 0.4rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content { .custom-dialog .u-dialog-box .u-dialog-content {
width: 100%; width: 100%;
height: 3.733rem; height: 4.213rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center; -webkit-box-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
font-size: 0.48rem; font-size: 0.427rem;
line-height: 0.587rem; line-height: 0.64rem;
padding: 0 0.4rem; padding: 0 0.587rem;
} }
.custom-dialog .u-dialog-box .u-dialog-content span { .custom-dialog .u-dialog-box .u-dialog-content span {
margin-right: 0.32rem; width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbind_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: 0.32rem;
display: block;
} }
.custom-dialog .u-dialog-box .u-dialog-content:after { .custom-dialog .u-dialog-box .u-dialog-content:after {
...@@ -342,20 +356,18 @@ p { ...@@ -342,20 +356,18 @@ p {
} }
.custom-dialog .u-dialog-box .u-dialog-button { .custom-dialog .u-dialog-box .u-dialog-button {
display: block; border-spacing: 0.667rem 0;
text-align: center;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm { .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem; width: 3.467rem;
border-radius: 0.133rem; border-radius: 0.133rem;
background-color: transparent; background-color: transparent;
border: 1px solid; border: 1px solid;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.267rem 0; padding: 0.267rem 0;
display: inline-block;
} }
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active, .custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
...@@ -411,12 +423,12 @@ p { ...@@ -411,12 +423,12 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.24rem; padding-left: 0.213rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.24rem; padding-right: 0.213rem;
text-align: right; text-align: right;
} }
......
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