Skip to content

D
DoorLock
Commit 4d5df41a by wangying
Options

1.0.9 / 2017-10-12 

==================
 * 1.上传门锁管理、门锁用户、邀请绑定、绑定开锁信息页面样式
parent fd68d264
Showing with 1524 additions and 210 deletions
History.md
1.0.8 / 2017-10-11
1.0.9 / 2017-10-12
==================
* 1.上传门锁管理、门锁用户、邀请绑定、绑定开锁信息页面样式
1.0.8 / 2017-10-11
==================
* 1.上传主页绑定门锁样式
......
web/lib/js/p.js
......@@ -22099,8 +22099,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
staticClass: "u-select",
class: _vm.initClass
}, [_c('ul', {
staticClass: "u-select-scroll",
class: _vm.initClass
staticClass: "u-select-scroll"
}, [_vm._l((_vm.selectList), function(item, index) {
return _c('v-touch', {
key: index,
......
web/lib/less/doorlockManage/doorlockManage.less
......@@ -136,13 +136,12 @@
.u-text();
.inputBox{
width: 275px;
margin: 0 auto;
margin: 0 42px;
padding-bottom: 40px;
}
.custom-editName-text{
.textInput(0,17px,16px);
.textInput(0,17px,@CUSTOM-EDITTEXT-COMPONENT-INPUT-FONTSIZE);
}
.errorTip{
......@@ -152,6 +151,33 @@
.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 @@
.u-text();
.inputBox{
width: 275px;
margin: 0 auto;
margin: 0 42px;
padding-bottom: 40px;
}
.custom-editName-text{
.textInput(0,17px,16px);
.textInput(0,17px,@CUSTOM-EDITTEXT-COMPONENT-INPUT-FONTSIZE);
}
.errorTip{
......@@ -28,10 +27,289 @@
.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{
.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/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();
.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();
.custom-button{
.button();
.buttonPosition();
}
\ No newline at end of file
web/lib/less/doorlockUsers/userList.less
......@@ -25,6 +25,7 @@
.display-box();
.box-vertical-alignment();
z-index: 2;
//管理员头像
.user-list-image{
width: 27px;
height: 27px;
......@@ -39,12 +40,14 @@
.text_oneRow_ellipsis();
margin-bottom: 5px;
}
//昵称
.user-list-subtitle span{
display: inline-block;
width: 182px;
.text_oneRow_ellipsis();
vertical-align: middle;
max-width: 182px;
.text_oneRow_ellipsis();
}
//绑定/未绑定 头像
.user-list-subimage{
width: 20px;
height: 20px;
......@@ -89,9 +92,9 @@
z-index: 2;
.white_gradient_border();
}
&:active .user-list-handle:not(.user-list-selected){
background-color: @USERLIST-ROW-ACTIVE-BG;
}
// &:active .user-list-handle:not(.user-list-selected){
// background-color: @USERLIST-ROW-ACTIVE-BG;
// }
}
}
......
web/lib/less/public/core.less
......@@ -330,36 +330,37 @@ p{
.custom-dialog{
background-color: @CUSTOM-BACKDROP-BG;
.u-dialog-box{
width: 355px;
width: 335px;
border-radius: 5px;
background-color: @CUSTOM-DIALOG-COMPONENT-BOX-BG;
border: 1px solid;/*no*/
color: @CUSTOM-DIALOG-COMPONENT-COLOR;
padding-bottom: 35px;
padding-bottom: 15px;
.u-dialog-content{
width: 100%;
height: 140px;
height: 158px;
.display-box();
.box-arrangement();
.box-horizontal-alignment();
.box-vertical-alignment();
font-size: @CUSTOM-DIALOG-COMPONENT-CONTENT-FONTSIZE;
line-height: 22px;
padding: 0 15px;
line-height: 24px;
padding: 0 22px;
span{
margin-right: 12px;
.bgImgSize(51px,51px,"green_unbind_icon.png",center,cover);
margin-bottom: 12px;
display: block;
}
&:after{
display: none;
}
}
.u-dialog-button{
display: block;
text-align: center;
border-spacing: 25px 0;
.u-dialog-cancel,
.u-dialog-confirm{
.button(135px);
.button(130px);
padding: 10px 0;
display: inline-block;
}
//取消 button
.u-dialog-cancel:after{
......@@ -391,13 +392,12 @@ p{
//list 无内容
.listNoCont(){
color: @LIST-NOCONTTIP-COLOR;
font-size: @LIST-NOCONTTIP-FONTSIZE;
// .bgImg("noCont.png");
// background-position: top center;
// background-repeat: no-repeat;
// .background-size(100px 100px);
// padding-top: 126px;
.bgImg("noCont.png");
background-position: top center;
background-repeat: no-repeat;
.background-size(61px 61px);
padding-top: 88px;
}
.white_gradient_border(){
......@@ -419,9 +419,9 @@ p{
.inputBox(@paddingTop,@paddingBottom,@height,@bgImg,@bgYPosition,@bgSize){
.inputBox{
position: relative;
margin: 0 auto;
margin: 0 42px;
padding: @paddingTop 0 @paddingBottom;
.bgImgSize(275px,@height,@bgImg,center @bgYPosition,@bgSize);
.bgImgSize(auto,@height,@bgImg,center @bgYPosition,@bgSize);
}
}
......@@ -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 @@
}
.header-left{
float: left;
padding-left: 9px;
padding-left: 8px;
}
.header-right{
float: right;
padding-right: 9px;
padding-right: 8px;
text-align: right;
}
.icon{
......
web/lib/less/public/public.less
......@@ -150,7 +150,12 @@
//选择列表
.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;
position: relative;
.display-box();
......
web/lib/less/public/variables.less
......@@ -19,6 +19,11 @@
//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;
......@@ -42,6 +47,7 @@
@C_GRAY_3: #91929a;
@C_GRAY_4: #959595;
@C_GRAY_5: #898989;
@C_GRAY_6: #50515d;
@OPACITY: transparent;
@BLACK_OPACITY: fade(@C_BLACK,80%);
@BLACK_OPACITY_1: fade(@C_BLACK,40%);
......@@ -156,11 +162,12 @@
@CUSTOM-TEXT-COMPONENT-ICON-FONTSIZE: @DEFAULT_F_SIZE + 10;
@CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR: @C_BLUE_4;
@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-COLOR: @C_BLUE_4;
@CUSTOM-DIALOG-COMPONENT-CONTENT-FONTSIZE: @F_SIZE_18;
@CUSTOM-DIALOG-COMPONENT-CONTENT-FONTSIZE: @F_SIZE_16;
//header
@HEADER-BG-COLOR: @C_BLUE_3;
......@@ -182,7 +189,7 @@
@LIST-LOAD-COLOR: @C_BLUE_4; //上拉加载
@LIST-LOAD-FONTSIZE: @F_SIZE_16;
@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;
......@@ -256,3 +263,21 @@
@USERLIST-BUTTON-ICON-COLOR: @C_BLUE_4;
@USERLIST-BUTTON-ICON-FONTSIZE: @F_SIZE_15;
@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 @@
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html,
body {
width: 100%;
......@@ -308,33 +313,42 @@ p {
}
.custom-dialog .u-dialog-box {
width: 9.467rem;
width: 8.933rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
padding-bottom: 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 3.733rem;
height: 4.213rem;
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;
font-size: 0.48rem;
line-height: 0.587rem;
padding: 0 0.4rem;
font-size: 0.427rem;
line-height: 0.64rem;
padding: 0 0.587rem;
}
.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 {
......@@ -342,20 +356,18 @@ p {
}
.custom-dialog .u-dialog-box .u-dialog-button {
display: block;
text-align: center;
border-spacing: 0.667rem 0;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem;
width: 3.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
......@@ -411,12 +423,12 @@ p {
.header .header-left {
float: left;
padding-left: 0.24rem;
padding-left: 0.213rem;
}
.header .header-right {
float: right;
padding-right: 0.24rem;
padding-right: 0.213rem;
text-align: right;
}
......@@ -536,9 +548,9 @@ p {
.inputBox {
position: relative;
margin: 0 auto;
margin: 0 1.12rem;
padding: 4.907rem 0 0.587rem;
width: 7.333rem;
width: auto;
height: auto;
background: url("../../resources/image/connectWifi.png") no-repeat center 1.067rem;
-webkit-background-size: 2.053rem 3.253rem;
......
web/view/bindUser/bindUser.css
......@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html,
body {
width: 100%;
......@@ -308,33 +313,42 @@ p {
}
.custom-dialog .u-dialog-box {
width: 9.467rem;
width: 8.933rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
padding-bottom: 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 3.733rem;
height: 4.213rem;
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;
font-size: 0.48rem;
line-height: 0.587rem;
padding: 0 0.4rem;
font-size: 0.427rem;
line-height: 0.64rem;
padding: 0 0.587rem;
}
.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 {
......@@ -342,20 +356,18 @@ p {
}
.custom-dialog .u-dialog-box .u-dialog-button {
display: block;
text-align: center;
border-spacing: 0.667rem 0;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem;
width: 3.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
......@@ -411,12 +423,12 @@ p {
.header .header-left {
float: left;
padding-left: 0.24rem;
padding-left: 0.213rem;
}
.header .header-right {
float: right;
padding-right: 0.24rem;
padding-right: 0.213rem;
text-align: right;
}
......@@ -891,6 +903,11 @@ p {
}
.custom-swipe-list .u-swipeList-tip {
color: #00ffff;
font-size: 0.48rem;
font-size: 0.427rem;
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 @@
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html,
body {
width: 100%;
......@@ -308,33 +313,42 @@ p {
}
.custom-dialog .u-dialog-box {
width: 9.467rem;
width: 8.933rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
padding-bottom: 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 3.733rem;
height: 4.213rem;
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;
font-size: 0.48rem;
line-height: 0.587rem;
padding: 0 0.4rem;
font-size: 0.427rem;
line-height: 0.64rem;
padding: 0 0.587rem;
}
.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 {
......@@ -342,20 +356,18 @@ p {
}
.custom-dialog .u-dialog-box .u-dialog-button {
display: block;
text-align: center;
border-spacing: 0.667rem 0;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem;
width: 3.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
......@@ -411,12 +423,12 @@ p {
.header .header-left {
float: left;
padding-left: 0.24rem;
padding-left: 0.213rem;
}
.header .header-right {
float: right;
padding-right: 0.24rem;
padding-right: 0.213rem;
text-align: right;
}
......
web/view/device/recordList.css
......@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html,
body {
width: 100%;
......@@ -308,33 +313,42 @@ p {
}
.custom-dialog .u-dialog-box {
width: 9.467rem;
width: 8.933rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
padding-bottom: 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 3.733rem;
height: 4.213rem;
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;
font-size: 0.48rem;
line-height: 0.587rem;
padding: 0 0.4rem;
font-size: 0.427rem;
line-height: 0.64rem;
padding: 0 0.587rem;
}
.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 {
......@@ -342,20 +356,18 @@ p {
}
.custom-dialog .u-dialog-box .u-dialog-button {
display: block;
text-align: center;
border-spacing: 0.667rem 0;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem;
width: 3.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
......@@ -411,12 +423,12 @@ p {
.header .header-left {
float: left;
padding-left: 0.24rem;
padding-left: 0.213rem;
}
.header .header-right {
float: right;
padding-right: 0.24rem;
padding-right: 0.213rem;
text-align: right;
}
......@@ -571,6 +583,11 @@ p {
}
.custom-list .u-list-tip {
color: #00ffff;
font-size: 0.48rem;
font-size: 0.427rem;
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 @@
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html,
body {
width: 100%;
......@@ -308,33 +313,42 @@ p {
}
.custom-dialog .u-dialog-box {
width: 9.467rem;
width: 8.933rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
padding-bottom: 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 3.733rem;
height: 4.213rem;
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;
font-size: 0.48rem;
line-height: 0.587rem;
padding: 0 0.4rem;
font-size: 0.427rem;
line-height: 0.64rem;
padding: 0 0.587rem;
}
.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 {
......@@ -342,20 +356,18 @@ p {
}
.custom-dialog .u-dialog-box .u-dialog-button {
display: block;
text-align: center;
border-spacing: 0.667rem 0;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem;
width: 3.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
......@@ -411,12 +423,12 @@ p {
.header .header-left {
float: left;
padding-left: 0.24rem;
padding-left: 0.213rem;
}
.header .header-right {
float: right;
padding-right: 0.24rem;
padding-right: 0.213rem;
text-align: right;
}
......@@ -644,8 +656,13 @@ p {
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #00ffff;
font-size: 0.48rem;
font-size: 0.427rem;
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 {
......@@ -741,8 +758,7 @@ p {
}
.inputBox {
width: 7.333rem;
margin: 0 auto;
margin: 0 1.12rem;
padding-bottom: 1.067rem;
}
......@@ -801,6 +817,44 @@ p {
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 {
position: fixed;
top: 0;
......@@ -808,5 +862,38 @@ p {
width: 100%;
height: 100%;
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/doorlockManage/index.html
......@@ -34,7 +34,7 @@
<transition name="fade">
<v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap">
<div>
<p><img src="../../resources/image/green_unbindSuccess_icon.png">{{ $t('doorlockManage.unbindSuccess') }}</p>
<img src="../../resources/image/green_unbindSuccess_icon.png">{{ $t('doorlockManage.unbindSuccess') }}
</div>
</v-touch>
</transition>
......
web/view/doorlockUsers/doorlockUser.css
......@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html,
body {
width: 100%;
......@@ -308,33 +313,42 @@ p {
}
.custom-dialog .u-dialog-box {
width: 9.467rem;
width: 8.933rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
padding-bottom: 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 3.733rem;
height: 4.213rem;
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;
font-size: 0.48rem;
line-height: 0.587rem;
padding: 0 0.4rem;
font-size: 0.427rem;
line-height: 0.64rem;
padding: 0 0.587rem;
}
.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 {
......@@ -342,20 +356,18 @@ p {
}
.custom-dialog .u-dialog-box .u-dialog-button {
display: block;
text-align: center;
border-spacing: 0.667rem 0;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem;
width: 3.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
......@@ -411,12 +423,12 @@ p {
.header .header-left {
float: left;
padding-left: 0.24rem;
padding-left: 0.213rem;
}
.header .header-right {
float: right;
padding-right: 0.24rem;
padding-right: 0.213rem;
text-align: right;
}
......@@ -533,8 +545,7 @@ p {
}
.inputBox {
width: 7.333rem;
margin: 0 auto;
margin: 0 1.12rem;
padding-bottom: 1.067rem;
}
......@@ -638,6 +649,192 @@ p {
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 {
position: fixed;
top: 0;
......@@ -645,7 +842,40 @@ p {
width: 100%;
height: 100%;
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 {
......@@ -655,5 +885,191 @@ p {
width: 100%;
height: 100%;
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 @@
<transition name="fade">
<v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap">
<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>
</v-touch>
</transition>
......
web/view/doorlockUsers/unlockInfo.css
......@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html,
body {
width: 100%;
......@@ -308,33 +313,42 @@ p {
}
.custom-dialog .u-dialog-box {
width: 9.467rem;
width: 8.933rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
padding-bottom: 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 3.733rem;
height: 4.213rem;
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;
font-size: 0.48rem;
line-height: 0.587rem;
padding: 0 0.4rem;
font-size: 0.427rem;
line-height: 0.64rem;
padding: 0 0.587rem;
}
.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 {
......@@ -342,20 +356,18 @@ p {
}
.custom-dialog .u-dialog-box .u-dialog-button {
display: block;
text-align: center;
border-spacing: 0.667rem 0;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem;
width: 3.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
......@@ -411,12 +423,12 @@ p {
.header .header-left {
float: left;
padding-left: 0.24rem;
padding-left: 0.213rem;
}
.header .header-right {
float: right;
padding-right: 0.24rem;
padding-right: 0.213rem;
text-align: right;
}
......@@ -440,7 +452,132 @@ p {
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;
position: relative;
display: -webkit-box;
......@@ -451,13 +588,13 @@ p {
align-items: center;
}
.u-select .u-select-row .u-select-image {
.u-select-scroll .u-select-row .u-select-image {
width: 1.333rem;
height: 1.333rem;
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;
font-family: iconfont;
font-size: 0.533rem;
......@@ -465,26 +602,26 @@ p {
line-height: 1;
}
.u-select .u-select-row div {
.u-select-scroll .u-select-row div {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
min-width: 0;
}
.u-select .u-select-row .u-select-title {
.u-select-scroll .u-select-row .u-select-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.u-select .u-select-row .u-select-subtitle {
.u-select-scroll .u-select-row .u-select-subtitle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.u-select .u-select-row:before {
.u-select-scroll .u-select-row:before {
content: '\e7a1';
position: absolute;
top: 50%;
......@@ -498,7 +635,7 @@ p {
display: none;
}
.u-select .u-select-row:after {
.u-select-scroll .u-select-row:after {
content: '';
position: absolute;
bottom: 0;
......@@ -508,7 +645,7 @@ p {
background: #bbb;
}
.u-select .u-select-row.active:before {
.u-select-scroll .u-select-row.active:before {
display: block;
}
......@@ -516,6 +653,53 @@ p {
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 {
width: 6.4rem;
color: #fff;
......@@ -538,3 +722,25 @@ p {
.u-button.disabled {
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 @@
<v-touch tag="span" class="header-right" v-on:tap="onAddTap">{{ $t('btn.add') }}</v-touch>
</div>
<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">
<ul class="unlockInfo-list-scroll" v-show="unlockInfoList.length">
<li class="unlockInfo-list-row" v-for="item in unlockInfoList">
{{ item.title }}
<p>ID:{{ item.rightText }}</p>
</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>
<p class="unlockInfo-list-tip" v-show="(unlockInfoList.length == 0)">{{ tip }}</p>
</div>
......
web/view/doorlockUsers/userList.css
......@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html,
body {
width: 100%;
......@@ -308,33 +313,42 @@ p {
}
.custom-dialog .u-dialog-box {
width: 9.467rem;
width: 8.933rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
padding-bottom: 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 3.733rem;
height: 4.213rem;
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;
font-size: 0.48rem;
line-height: 0.587rem;
padding: 0 0.4rem;
font-size: 0.427rem;
line-height: 0.64rem;
padding: 0 0.587rem;
}
.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 {
......@@ -342,20 +356,18 @@ p {
}
.custom-dialog .u-dialog-box .u-dialog-button {
display: block;
text-align: center;
border-spacing: 0.667rem 0;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem;
width: 3.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
......@@ -411,12 +423,12 @@ p {
.header .header-left {
float: left;
padding-left: 0.24rem;
padding-left: 0.213rem;
}
.header .header-right {
float: right;
padding-right: 0.24rem;
padding-right: 0.213rem;
text-align: right;
}
......@@ -494,11 +506,11 @@ p {
.user-list-scroll .user-list-row .user-list-handle .user-list-subtitle span {
display: inline-block;
width: 4.853rem;
vertical-align: middle;
max-width: 4.853rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.user-list-scroll .user-list-row .user-list-handle .user-list-subimage {
......@@ -565,10 +577,6 @@ p {
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 {
text-align: center;
color: #00ffff;
......@@ -581,9 +589,9 @@ p {
.inputBox {
position: relative;
margin: 0 auto;
margin: 0 1.12rem;
padding: 5.333rem 0 1.067rem;
width: 7.333rem;
width: auto;
height: auto;
background: url("../../resources/image/gray_addUser_icon.png") no-repeat center 2.4rem;
-webkit-background-size: 1.733rem 1.733rem;
......
web/view/login/login.css
......@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html,
body {
width: 100%;
......@@ -308,33 +313,42 @@ p {
}
.custom-dialog .u-dialog-box {
width: 9.467rem;
width: 8.933rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
padding-bottom: 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 3.733rem;
height: 4.213rem;
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;
font-size: 0.48rem;
line-height: 0.587rem;
padding: 0 0.4rem;
font-size: 0.427rem;
line-height: 0.64rem;
padding: 0 0.587rem;
}
.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 {
......@@ -342,20 +356,18 @@ p {
}
.custom-dialog .u-dialog-box .u-dialog-button {
display: block;
text-align: center;
border-spacing: 0.667rem 0;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem;
width: 3.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
......@@ -411,12 +423,12 @@ p {
.header .header-left {
float: left;
padding-left: 0.24rem;
padding-left: 0.213rem;
}
.header .header-right {
float: right;
padding-right: 0.24rem;
padding-right: 0.213rem;
text-align: right;
}
......@@ -468,9 +480,9 @@ p {
.inputBox {
position: relative;
margin: 0 auto;
margin: 0 1.12rem;
padding: 4.907rem 0 1.067rem;
width: 7.333rem;
width: auto;
height: 10.133rem;
background: url("../../resources/image/logo.png") no-repeat center 2rem;
-webkit-background-size: 1.707rem 1.707rem;
......
web/view/myInfo/myInfo.css
......@@ -8,6 +8,11 @@
src: url('../../resources/font/iconfont.ttf') format('truetype');
}
@font-face {
font-family: 'tipFont';
src: url('../../resources/font/tipFont.ttf') format('truetype');
}
html,
body {
width: 100%;
......@@ -308,33 +313,42 @@ p {
}
.custom-dialog .u-dialog-box {
width: 9.467rem;
width: 8.933rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.933rem;
padding-bottom: 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
height: 3.733rem;
height: 4.213rem;
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;
font-size: 0.48rem;
line-height: 0.587rem;
padding: 0 0.4rem;
font-size: 0.427rem;
line-height: 0.64rem;
padding: 0 0.587rem;
}
.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 {
......@@ -342,20 +356,18 @@ p {
}
.custom-dialog .u-dialog-box .u-dialog-button {
display: block;
text-align: center;
border-spacing: 0.667rem 0;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
width: 3.6rem;
width: 3.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
display: inline-block;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
......@@ -411,12 +423,12 @@ p {
.header .header-left {
float: left;
padding-left: 0.24rem;
padding-left: 0.213rem;
}
.header .header-right {
float: right;
padding-right: 0.24rem;
padding-right: 0.213rem;
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