Skip to content

D
DoorLock
Commit c0436304 by wangying
Options

1.1.3 / 2017-11-06 

==================
 * 1.上传css样式
parent f659d378
Showing with 464 additions and 100 deletions
History.md
1.1.2 / 2017-11-03 1.1.3 / 2017-11-06
==================
* 1.上传css样式
1.1.2 / 2017-11-03
================== ==================
* 1.修改门锁管理、关联开锁信息、绑定开锁信息、邀请绑定页面样式 * 1.修改门锁管理、关联开锁信息、绑定开锁信息、邀请绑定页面样式
......
web/lib/less/addDevice/addDevice.less
...@@ -29,6 +29,36 @@ ...@@ -29,6 +29,36 @@
//产品型号 //产品型号
.u-list(); .u-list();
.custom-device-list{
position: absolute;
top: 44px;
bottom: 0;
left: 0;
height: auto;
.u-list-scroll .u-list-row{
height: 75px;
padding: 0 35px 0 41px;
.u-list-left-image{
width: 24px;
height: 54px;
margin-right: 39px;
}
.u-list-title{
font-size: 16px;
line-height: 20px;
}
.u-list-right-icon{
font-family: iconfont;
}
&:after{
.white_gradient_border();
}
}
.u-list-load{
.listLoad();
}
}
//配置Wi-Fi //配置Wi-Fi
.wifiAddHelp{ .wifiAddHelp{
.help(); .help();
......
web/lib/less/device/device.less
...@@ -463,4 +463,8 @@ ...@@ -463,4 +463,8 @@
} }
.linkText(); .linkText();
} }
}
.remoteOpendoorPage{
.mask(1051,@BODY-BG-COLOR);
} }
\ No newline at end of file
web/lib/less/device/recordList.less
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
height: auto; height: auto;
.u-list-scroll .u-list-row{ .u-list-scroll .u-list-row{
height: 75px; height: 75px;
padding: 0 41px; padding: 0 38px 0 41px;
.u-list-left-image{ .u-list-left-image{
width: 30px; width: 30px;
height: 30px; height: 30px;
......
web/lib/less/doorlockManage/doorlockManage.less
...@@ -154,14 +154,14 @@ ...@@ -154,14 +154,14 @@
//门锁管理 //门锁管理
.doorlockManage li{ .doorlockManage li{
font-size: 16px; font-size: 16px;
padding: 17px 42px; padding: 0 42px;
position: relative; position: relative;
overflow: hidden; height: 55px;
line-height: 55px;
p{ p{
float: right; float: right;
color: #A0A0A7; color: #A0A0A7;
font-size: 12px; font-size: 12px;
margin-top: 3px;
} }
// > icon // > icon
&.name{ &.name{
...@@ -185,4 +185,36 @@ ...@@ -185,4 +185,36 @@
.u-switch(); .u-switch();
.custom-switch{
position: absolute;
top: 0;
right: 13px;
height: 100%;
.u-switch-handle{
width: 40px;
height: 24px;
&:before{
top: 0;
width: 20px;
height: 20px;
}
}
//开关 开
&.u-switch-on .u-switch-handle{
border-color: @CUSTOM-SWITCH-COMPONENT-ONSTATE-BORDER;
background-color: @CUSTOM-SWITCH-COMPONENT-ONSTATE-BG;
&:before{
left: 16px;
}
}
//开关 关
&.u-switch-off .u-switch-handle{
border-color: @CUSTOM-SWITCH-COMPONENT-OFFSTATE-BORDER;
background-color: @CUSTOM-SWITCH-COMPONENT-OFFSTATE-BG;
&:before{
left: 0;
}
}
}
.unbindState-dialog(); .unbindState-dialog();
\ No newline at end of file
web/lib/less/doorlockUsers/doorlockUser.less
...@@ -31,8 +31,8 @@ ...@@ -31,8 +31,8 @@
.userInfoLink{ .userInfoLink{
li{ li{
&:not(.userInfo){ &:not(.userInfo){
height: 52px; height: 55px;
line-height: 52px; line-height: 55px;
position: relative; position: relative;
padding: 0 65px 0 42px; padding: 0 65px 0 42px;
font-size: @USERINFOLINK-TITLE-FONTSIZE; font-size: @USERINFOLINK-TITLE-FONTSIZE;
......
web/lib/less/doorlockUsers/unlockInfo.less
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
font-size: @UNLOCKINFO-TITLE-FONTSIZE; font-size: @UNLOCKINFO-TITLE-FONTSIZE;
padding-left: 42px; padding-left: 42px;
border-bottom: 2px solid @UNLOCKINFO-TITLE-BOTTOMBORDER;/*no*/ border-bottom: 2px solid @UNLOCKINFO-TITLE-BOTTOMBORDER;/*no*/
~ .custom-unlockInfo-list{ ~ .custom-swipe-list{
top: 92px; top: 92px;
} }
} }
...@@ -51,8 +51,50 @@ ...@@ -51,8 +51,50 @@
.u-swipe-list(); .u-swipe-list();
.custom-swipe-list{ .custom-swipe-list{
.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle{ position: absolute;
background-color: #242635; top: 44px;
bottom: 0;
left: 0;
height: auto;
.u-swipe-list-scroll .u-swipe-list-row{
.u-swipe-list-handle{
background-color: @CUSTOM-UNLOCKINFO-SWIPELIST-COMPONENT-ROW-BG;
padding: 0 42px;
height: 55px;
font-size: @CUSTOM-UNLOCKINFO-SWIPELIST-COMPONENT-TEXT-FONTSIZE;
.u-swipe-list-title{
float: left;
}
.u-swipe-list-subtitle{
float: right;
}
}
.u-swipe-list-button{
right: 32px;
div{
width: 85px;
color: @CUSTOM-UNLOCKINFO-SWIPELIST-COMPONENT-BUTTON-COLOR;
font-size: @CUSTOM-UNLOCKINFO-SWIPELIST-COMPONENT-BUTTON-FONTSIZE;
&:nth-last-of-type(1),
&:nth-last-of-type(2){
background-color: @CUSTOM-UNLOCKINFO-SWIPELIST-COMPONENT-BUTTON-BG;
}
}
}
&:after{
.white_gradient_border();
}
&.active .u-swipe-list-handle{
left: -202px;
}
}
//上拉加载
.u-swipe-list-load{
.listLoad();
}
//swipeList 无内容
.u-swipeList-tip{
.listNoCont("unlockNoCont.png",70px 70px);
} }
} }
...@@ -64,27 +106,27 @@ ...@@ -64,27 +106,27 @@
} }
.modeSelect{ .modeSelect{
padding: 11px 42px; padding: 10px 42px;
font-size: 0; font-size: 0;
margin: 0 -5px; margin: 0 -12px;
li{ li{
color: #00ffff; color: #00ffff;
font-size: 13px; font-size: 14px;
border: 1px solid;/*no*/ border: 1px solid;/*no*/
position: relative; position: relative;
width: 90px; width: 80px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
line-height: 1; line-height: 1;
padding: 8px 0; padding: 8px 0;
border-radius: 5px; border-radius: 5px;
margin: 10px 5px; margin: 10px 12px;
&:before{ &:before{
content: '\e631'; content: '\e631';
position: absolute; position: absolute;
top: 50%; top: 50%;
.transform(translate(-14px,-50%)); .transform(translate(-16px,-50%));
.iconfont(12px); .iconfont(15px);
display: none; display: none;
} }
&.active{ &.active{
...@@ -99,21 +141,24 @@ ...@@ -99,21 +141,24 @@
.u-select(); .u-select();
.custom-select{ .custom-select{
height: 160px; height: 170px;
.u-select-scroll{ .u-select-scroll{
.u-select-row{ .u-select-row{
display: block; display: block;
font-size: 16px; font-size: 16px;
padding: 19px 80px 11px 42px; padding: 22px 80px 11px 42px;
.u-select-title{ .u-select-title{
float: left; float: left;
margin-right: 36px; margin-right: 36px;
} }
&:before{ &:before{
content: '\e6a9'; content: '\e6a9';
top: auto;
bottom: 9px;
right: 42px; right: 42px;
font-family: iconfont; font-family: iconfont;
color: #00ffff; color: #00ffff;
.transform(none);
display: block; display: block;
} }
&:after{ &:after{
...@@ -137,11 +182,59 @@ ...@@ -137,11 +182,59 @@
.tip{ .tip{
text-align: center; text-align: center;
color: #A0A0A7; color: #A0A0A7;
margin-top: 4px; margin-top: 3px;
} }
.u-switch(); .u-switch();
.custom-setHijack-switch{
width: 200px;
height: auto;
text-align: center;
color: #00ffff;
margin: 37px auto 0;
.u-switch-handle{
position: relative;
top: auto;
left: auto;
.transform(none);
width: 17px;
height: 17px;
border: 0;
border-radius: 0;
display: inline-block;
vertical-align: middle;
margin-right: 6px;
&:before{
.iconfont(17px);
top: 0;
width: auto;
height: auto;
border-radius: 0;
background-color: transparent;
.box-shadow(none);
}
}
.u-switch-text{
display: inline-block;
vertical-align: middle;
}
&.u-switch-on .u-switch-handle{
background-color: transparent;
&:before{
content: '\e6a9';
left: 0;
}
}
&.u-switch-off .u-switch-handle{
background-color: transparent;
&:before{
content: '\e6aa';
left: 0;
}
}
}
.u-button(); .u-button();
.custom-button{ .custom-button{
......
web/lib/less/public/core.less
...@@ -391,13 +391,13 @@ p{ ...@@ -391,13 +391,13 @@ p{
} }
//list 无内容 //list 无内容
.listNoCont(@fontSize:@LIST-NOCONTTIP-FONTSIZE,@bgSize:61px 61px,@paddingTop:88px){ .listNoCont(@bgImg:"noCont.png",@bgSize:61px 61px,@fontSize:@LIST-NOCONTTIP-FONTSIZE,@paddingTop:88px){
color: @LIST-NOCONTTIP-COLOR; .bgImg(@bgImg);
font-size: @fontSize;
.bgImg("noCont.png");
background-position: top center; background-position: top center;
background-repeat: no-repeat; background-repeat: no-repeat;
.background-size(@bgSize); .background-size(@bgSize);
color: @LIST-NOCONTTIP-COLOR;
font-size: @fontSize;
padding-top: @paddingTop; padding-top: @paddingTop;
} }
......
web/lib/less/public/public.less
...@@ -106,27 +106,24 @@ ...@@ -106,27 +106,24 @@
height: 30px; height: 30px;
border: 2px solid;/*no*/ border: 2px solid;/*no*/
border-radius: 20px; border-radius: 20px;
background-clip: padding-box; .transition(background-color ease-in-out 0.2s,border ease-in-out 0.2s);
&:before{ &:before{
content: ''; content: '';
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: -1px;/*no*/ top: -1px;/*no*/
width: 28px; width: 28px;
height: 28px; height: 28px;
.transition(left 0.2s ease-in-out); .transition(left 0.2s ease-in-out);
border-radius: 16px; border-radius: 50%;
background-color: @SWITCH-COMPONENT-CIRCLE-BG; background-color: @SWITCH-COMPONENT-CIRCLE-BG;
background-clip: padding-box;
.box-shadow(0 2px 5px @SWITCH-COMPONENT-CIRCLE-BOXSHADOW); .box-shadow(0 2px 5px @SWITCH-COMPONENT-CIRCLE-BOXSHADOW);
} }
} }
//开关 开 //开关 开
&.u-switch-on .u-switch-handle{ &.u-switch-on .u-switch-handle{
border-color: @SWITCH-COMPONENT-ONSTATE-BORDER; border-color: @SWITCH-COMPONENT-ONSTATE-BORDER;
.box-shadow(inset 0 0 0 16px @SWITCH-COMPONENT-ONSTATE-BOXSHADOW); background-color: @SWITCH-COMPONENT-ONSTATE-BG;
background-color: @SWITCH-COMPONENT-ONSTATE-BG;
.transition(border ease 0.4s,box-shadow ease 0.4s,background-color ease 1.2s);
&:before{ &:before{
left: 18px; left: 18px;
} }
...@@ -134,9 +131,7 @@ ...@@ -134,9 +131,7 @@
//开关 关 //开关 关
&.u-switch-off .u-switch-handle{ &.u-switch-off .u-switch-handle{
border-color: @SWITCH-COMPONENT-OFFSTATE-BORDER; border-color: @SWITCH-COMPONENT-OFFSTATE-BORDER;
.box-shadow(inset 0 0 0 0 @SWITCH-COMPONENT-OFFSTATE-BOXSHADOW);
background-color: @SWITCH-COMPONENT-OFFSTATE-BG; background-color: @SWITCH-COMPONENT-OFFSTATE-BG;
.transition(border cubic-bezier(0, 0, 0, 1) 0.4s,box-shadow cubic-bezier(0, 0, 0, 1) 0.4s);
&:before{ &:before{
left: -1px;/*no*/ left: -1px;/*no*/
} }
...@@ -358,7 +353,7 @@ ...@@ -358,7 +353,7 @@
position: relative; position: relative;
overflow: auto; overflow: auto;
} }
.u-swipe-list-scroll .u-swipe-list-row{ .u-swipe-list-scroll .u-swipe-list-row{
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.u-swipe-list-handle{ .u-swipe-list-handle{
......
web/lib/less/public/variables.less
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,7 @@
@C_GRAY_4: #959595; @C_GRAY_4: #959595;
@C_GRAY_5: #898989; @C_GRAY_5: #898989;
@C_GRAY_6: #50515d; @C_GRAY_6: #50515d;
@C_GRAY_7: #C2C2C2;
@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%);
...@@ -97,10 +98,8 @@ ...@@ -97,10 +98,8 @@
@SWITCH-COMPONENT-CIRCLE-BG: @C_WHITE; //开关 @SWITCH-COMPONENT-CIRCLE-BG: @C_WHITE; //开关
@SWITCH-COMPONENT-CIRCLE-BOXSHADOW: @BLACK_OPACITY_1; @SWITCH-COMPONENT-CIRCLE-BOXSHADOW: @BLACK_OPACITY_1;
@SWITCH-COMPONENT-ONSTATE-BORDER: @C_GREEN; //开关 开 @SWITCH-COMPONENT-ONSTATE-BORDER: @C_GREEN; //开关 开
@SWITCH-COMPONENT-ONSTATE-BOXSHADOW: @SWITCH-COMPONENT-ONSTATE-BORDER;
@SWITCH-COMPONENT-ONSTATE-BG: @SWITCH-COMPONENT-ONSTATE-BORDER; @SWITCH-COMPONENT-ONSTATE-BG: @SWITCH-COMPONENT-ONSTATE-BORDER;
@SWITCH-COMPONENT-OFFSTATE-BORDER: @C_GRAY; //开关 关 @SWITCH-COMPONENT-OFFSTATE-BORDER: @C_GRAY; //开关 关
@SWITCH-COMPONENT-OFFSTATE-BOXSHADOW: @SWITCH-COMPONENT-OFFSTATE-BORDER;
@SWITCH-COMPONENT-OFFSTATE-BG: @SWITCH-COMPONENT-OFFSTATE-BORDER; @SWITCH-COMPONENT-OFFSTATE-BG: @SWITCH-COMPONENT-OFFSTATE-BORDER;
@SELECT-COMPONENT-ICON-FONTSIZE: @F_SIZE_20; //选择列表 @SELECT-COMPONENT-ICON-FONTSIZE: @F_SIZE_20; //选择列表
@SELECT-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_25; @SELECT-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_25;
...@@ -280,5 +279,15 @@ ...@@ -280,5 +279,15 @@
//绑定开锁信息 //绑定开锁信息
@UNLOCKINFO-TITLE-FONTSIZE: @F_SIZE_16; @UNLOCKINFO-TITLE-FONTSIZE: @F_SIZE_16;
@UNLOCKINFO-TITLE-BOTTOMBORDER: @C_GRAY_6; @UNLOCKINFO-TITLE-BOTTOMBORDER: @C_GRAY_6;
@UNLOCKINFOLIST-TEXT-COLOR: @C_GRAY_3; // @UNLOCKINFOLIST-TEXT-COLOR: @C_GRAY_3;
@UNLOCKINFOLIST-TEXT-FONTSIZE: @F_SIZE_16; // @UNLOCKINFOLIST-TEXT-FONTSIZE: @F_SIZE_16;
\ No newline at end of file @CUSTOM-UNLOCKINFO-SWIPELIST-COMPONENT-ROW-BG: @BODY-BG-COLOR;
@CUSTOM-UNLOCKINFO-SWIPELIST-COMPONENT-TEXT-FONTSIZE: @F_SIZE_16;
@CUSTOM-UNLOCKINFO-SWIPELIST-COMPONENT-BUTTON-COLOR: @C_BLUE_4;
@CUSTOM-UNLOCKINFO-SWIPELIST-COMPONENT-BUTTON-FONTSIZE: @F_SIZE_16;
@CUSTOM-UNLOCKINFO-SWIPELIST-COMPONENT-BUTTON-BG: @OPACITY;
@CUSTOM-SWITCH-COMPONENT-ONSTATE-BORDER: @C_BLUE_4;
@CUSTOM-SWITCH-COMPONENT-ONSTATE-BG: @C_BLUE_4;
@CUSTOM-SWITCH-COMPONENT-OFFSTATE-BORDER: @C_GRAY_7;
@CUSTOM-SWITCH-COMPONENT-OFFSTATE-BG: @OPACITY;
\ No newline at end of file
web/view/addDevice/addDevice.css
...@@ -559,6 +559,48 @@ p { ...@@ -559,6 +559,48 @@ p {
text-align: center; text-align: center;
} }
.custom-device-list {
position: absolute;
top: 1.173rem;
bottom: 0;
left: 0;
height: auto;
}
.custom-device-list .u-list-scroll .u-list-row {
height: 2rem;
padding: 0 0.933rem 0 1.093rem;
}
.custom-device-list .u-list-scroll .u-list-row .u-list-left-image {
width: 0.64rem;
height: 1.44rem;
margin-right: 1.04rem;
}
.custom-device-list .u-list-scroll .u-list-row .u-list-title {
font-size: 0.427rem;
line-height: 0.533rem;
}
.custom-device-list .u-list-scroll .u-list-row .u-list-right-icon {
font-family: iconfont;
}
.custom-device-list .u-list-scroll .u-list-row:after {
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.custom-device-list .u-list-load {
color: #00ffff;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
height: 0.933rem;
line-height: 0.933rem;
}
.wifiAddHelp { .wifiAddHelp {
margin: 0.8rem 1.013rem 1.547rem; margin: 0.8rem 1.013rem 1.547rem;
} }
......
web/view/bindUser/bindUser.css
...@@ -898,12 +898,12 @@ p { ...@@ -898,12 +898,12 @@ p {
} }
.custom-swipe-list .u-swipeList-tip { .custom-swipe-list .u-swipeList-tip {
color: #91929a;
font-size: 0.427rem;
background-image: url("../../resources/image/noCont.png"); background-image: url("../../resources/image/noCont.png");
background-position: top center; background-position: top center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-background-size: 1.627rem 1.627rem; -webkit-background-size: 1.627rem 1.627rem;
background-size: 1.627rem 1.627rem; background-size: 1.627rem 1.627rem;
color: #91929a;
font-size: 0.427rem;
padding-top: 2.347rem; padding-top: 2.347rem;
} }
\ No newline at end of file
web/view/device/device.css
...@@ -1350,7 +1350,8 @@ p { ...@@ -1350,7 +1350,8 @@ p {
height: 0.8rem; height: 0.8rem;
border: 2px solid; border: 2px solid;
border-radius: 0.533rem; border-radius: 0.533rem;
background-clip: padding-box; -webkit-transition: background-color ease-in-out 0.2s, border ease-in-out 0.2s;
transition: background-color ease-in-out 0.2s, border ease-in-out 0.2s;
} }
.u-switch .u-switch-handle:before { .u-switch .u-switch-handle:before {
...@@ -1362,20 +1363,15 @@ p { ...@@ -1362,20 +1363,15 @@ p {
height: 0.747rem; height: 0.747rem;
-webkit-transition: left 0.2s ease-in-out; -webkit-transition: left 0.2s ease-in-out;
transition: left 0.2s ease-in-out; transition: left 0.2s ease-in-out;
border-radius: 0.427rem; border-radius: 50%;
background-color: #fff; background-color: #fff;
background-clip: padding-box;
-webkit-box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4); box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
} }
.u-switch.u-switch-on .u-switch-handle { .u-switch.u-switch-on .u-switch-handle {
border-color: #4cd964; border-color: #4cd964;
-webkit-box-shadow: inset 0 0 0 0.427rem #4cd964;
box-shadow: inset 0 0 0 0.427rem #4cd964;
background-color: #4cd964; background-color: #4cd964;
-webkit-transition: border ease 0.4s, -webkit-box-shadow ease 0.4s, background-color ease 1.2s;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
} }
.u-switch.u-switch-on .u-switch-handle:before { .u-switch.u-switch-on .u-switch-handle:before {
...@@ -1384,11 +1380,7 @@ p { ...@@ -1384,11 +1380,7 @@ p {
.u-switch.u-switch-off .u-switch-handle { .u-switch.u-switch-off .u-switch-handle {
border-color: #bbb; border-color: #bbb;
-webkit-box-shadow: inset 0 0 0 0 #bbb;
box-shadow: inset 0 0 0 0 #bbb;
background-color: #bbb; background-color: #bbb;
-webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.4s, -webkit-box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
} }
.u-switch.u-switch-off .u-switch-handle:before { .u-switch.u-switch-off .u-switch-handle:before {
...@@ -1618,4 +1610,14 @@ p { ...@@ -1618,4 +1610,14 @@ p {
height: 1px; height: 1px;
background: -webkit-linear-gradient(left, #242635, #00ffff, #242635); background: -webkit-linear-gradient(left, #242635, #00ffff, #242635);
background: linear-gradient(to right, #242635, #00ffff, #242635); background: linear-gradient(to right, #242635, #00ffff, #242635);
}
.remoteOpendoorPage {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1051;
background-color: #242635;
} }
\ No newline at end of file
web/view/device/recordList.css
...@@ -542,7 +542,7 @@ p { ...@@ -542,7 +542,7 @@ p {
.custom-list .u-list-scroll .u-list-row { .custom-list .u-list-scroll .u-list-row {
height: 2rem; height: 2rem;
padding: 0 1.093rem; padding: 0 1.013rem 0 1.093rem;
} }
.custom-list .u-list-scroll .u-list-row .u-list-left-image { .custom-list .u-list-scroll .u-list-row .u-list-left-image {
...@@ -578,12 +578,12 @@ p { ...@@ -578,12 +578,12 @@ p {
} }
.custom-list .u-list-tip { .custom-list .u-list-tip {
color: #91929a;
font-size: 0.427rem;
background-image: url("../../resources/image/noCont.png"); background-image: url("../../resources/image/noCont.png");
background-position: top center; background-position: top center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-background-size: 1.627rem 1.627rem; -webkit-background-size: 1.627rem 1.627rem;
background-size: 1.627rem 1.627rem; background-size: 1.627rem 1.627rem;
color: #91929a;
font-size: 0.427rem;
padding-top: 2.347rem; padding-top: 2.347rem;
} }
\ No newline at end of file
web/view/doorlockManage/doorlockManage.css
...@@ -650,13 +650,13 @@ p { ...@@ -650,13 +650,13 @@ p {
transform: translateY(-50%); transform: translateY(-50%);
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #91929a;
font-size: 0.427rem;
background-image: url("../../resources/image/noCont.png"); background-image: url("../../resources/image/noCont.png");
background-position: top center; background-position: top center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-background-size: 1.627rem 1.627rem; -webkit-background-size: 1.627rem 1.627rem;
background-size: 1.627rem 1.627rem; background-size: 1.627rem 1.627rem;
color: #91929a;
font-size: 0.427rem;
padding-top: 2.347rem; padding-top: 2.347rem;
} }
...@@ -814,16 +814,16 @@ p { ...@@ -814,16 +814,16 @@ p {
.doorlockManage li { .doorlockManage li {
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.453rem 1.12rem; padding: 0 1.12rem;
position: relative; position: relative;
overflow: hidden; height: 1.467rem;
line-height: 1.467rem;
} }
.doorlockManage li p { .doorlockManage li p {
float: right; float: right;
color: #A0A0A7; color: #A0A0A7;
font-size: 0.32rem; font-size: 0.32rem;
margin-top: 0.08rem;
} }
.doorlockManage li.name { .doorlockManage li.name {
...@@ -870,7 +870,8 @@ p { ...@@ -870,7 +870,8 @@ p {
height: 0.8rem; height: 0.8rem;
border: 2px solid; border: 2px solid;
border-radius: 0.533rem; border-radius: 0.533rem;
background-clip: padding-box; -webkit-transition: background-color ease-in-out 0.2s, border ease-in-out 0.2s;
transition: background-color ease-in-out 0.2s, border ease-in-out 0.2s;
} }
.u-switch .u-switch-handle:before { .u-switch .u-switch-handle:before {
...@@ -882,20 +883,15 @@ p { ...@@ -882,20 +883,15 @@ p {
height: 0.747rem; height: 0.747rem;
-webkit-transition: left 0.2s ease-in-out; -webkit-transition: left 0.2s ease-in-out;
transition: left 0.2s ease-in-out; transition: left 0.2s ease-in-out;
border-radius: 0.427rem; border-radius: 50%;
background-color: #fff; background-color: #fff;
background-clip: padding-box;
-webkit-box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4); box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
} }
.u-switch.u-switch-on .u-switch-handle { .u-switch.u-switch-on .u-switch-handle {
border-color: #4cd964; border-color: #4cd964;
-webkit-box-shadow: inset 0 0 0 0.427rem #4cd964;
box-shadow: inset 0 0 0 0.427rem #4cd964;
background-color: #4cd964; background-color: #4cd964;
-webkit-transition: border ease 0.4s, -webkit-box-shadow ease 0.4s, background-color ease 1.2s;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
} }
.u-switch.u-switch-on .u-switch-handle:before { .u-switch.u-switch-on .u-switch-handle:before {
...@@ -904,11 +900,7 @@ p { ...@@ -904,11 +900,7 @@ p {
.u-switch.u-switch-off .u-switch-handle { .u-switch.u-switch-off .u-switch-handle {
border-color: #bbb; border-color: #bbb;
-webkit-box-shadow: inset 0 0 0 0 #bbb;
box-shadow: inset 0 0 0 0 #bbb;
background-color: #bbb; background-color: #bbb;
-webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.4s, -webkit-box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
} }
.u-switch.u-switch-off .u-switch-handle:before { .u-switch.u-switch-off .u-switch-handle:before {
...@@ -919,6 +911,42 @@ p { ...@@ -919,6 +911,42 @@ p {
opacity: 0.3; opacity: 0.3;
} }
.custom-switch {
position: absolute;
top: 0;
right: 0.347rem;
height: 100%;
}
.custom-switch .u-switch-handle {
width: 1.067rem;
height: 0.64rem;
}
.custom-switch .u-switch-handle:before {
top: 0;
width: 0.533rem;
height: 0.533rem;
}
.custom-switch.u-switch-on .u-switch-handle {
border-color: #00ffff;
background-color: #00ffff;
}
.custom-switch.u-switch-on .u-switch-handle:before {
left: 0.427rem;
}
.custom-switch.u-switch-off .u-switch-handle {
border-color: #C2C2C2;
background-color: transparent;
}
.custom-switch.u-switch-off .u-switch-handle:before {
left: 0;
}
.unbindState-dialog { .unbindState-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
......
web/view/doorlockUsers/doorlockUser.css
...@@ -644,8 +644,8 @@ p { ...@@ -644,8 +644,8 @@ p {
} }
.userInfoLink li:not(.userInfo) { .userInfoLink li:not(.userInfo) {
height: 1.387rem; height: 1.467rem;
line-height: 1.387rem; line-height: 1.467rem;
position: relative; position: relative;
padding: 0 1.733rem 0 1.12rem; padding: 0 1.733rem 0 1.12rem;
font-size: 0.427rem; font-size: 0.427rem;
......
web/view/doorlockUsers/unlockInfo.css
...@@ -455,7 +455,7 @@ p { ...@@ -455,7 +455,7 @@ p {
border-bottom: 2px solid #50515d; border-bottom: 2px solid #50515d;
} }
.title ~ .custom-unlockInfo-list { .title ~ .custom-swipe-list {
top: 2.453rem; top: 2.453rem;
} }
...@@ -615,8 +615,71 @@ p { ...@@ -615,8 +615,71 @@ p {
text-align: center; text-align: center;
} }
.custom-swipe-list {
position: absolute;
top: 1.173rem;
bottom: 0;
left: 0;
height: auto;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle { .custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle {
background-color: #242635; background-color: #242635;
padding: 0 1.12rem;
height: 1.467rem;
font-size: 0.427rem;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle .u-swipe-list-title {
float: left;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle .u-swipe-list-subtitle {
float: right;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-button {
right: 0.853rem;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-button div {
width: 2.267rem;
color: #00ffff;
font-size: 0.427rem;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-button div:nth-last-of-type(1),
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-button div:nth-last-of-type(2) {
background-color: transparent;
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row:after {
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.custom-swipe-list .u-swipe-list-scroll .u-swipe-list-row.active .u-swipe-list-handle {
left: -5.387rem;
}
.custom-swipe-list .u-swipe-list-load {
color: #00ffff;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
height: 0.933rem;
line-height: 0.933rem;
}
.custom-swipe-list .u-swipeList-tip {
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;
color: #91929a;
font-size: 0.427rem;
padding-top: 2.347rem;
} }
.opendoorMode { .opendoorMode {
...@@ -626,33 +689,33 @@ p { ...@@ -626,33 +689,33 @@ p {
} }
.modeSelect { .modeSelect {
padding: 0.293rem 1.12rem; padding: 0.267rem 1.12rem;
font-size: 0; font-size: 0;
margin: 0 -0.133rem; margin: 0 -0.32rem;
} }
.modeSelect li { .modeSelect li {
color: #00ffff; color: #00ffff;
font-size: 0.347rem; font-size: 0.373rem;
border: 1px solid; border: 1px solid;
position: relative; position: relative;
width: 2.4rem; width: 2.133rem;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
line-height: 1; line-height: 1;
padding: 0.213rem 0; padding: 0.213rem 0;
border-radius: 0.133rem; border-radius: 0.133rem;
margin: 0.267rem 0.133rem; margin: 0.267rem 0.32rem;
} }
.modeSelect li:before { .modeSelect li:before {
content: '\e631'; content: '\e631';
position: absolute; position: absolute;
top: 50%; top: 50%;
-webkit-transform: translate(-0.373rem, -50%); -webkit-transform: translate(-0.427rem, -50%);
transform: translate(-0.373rem, -50%); transform: translate(-0.427rem, -50%);
font-family: iconfont; font-family: iconfont;
font-size: 0.32rem; font-size: 0.4rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1; line-height: 1;
display: none; display: none;
...@@ -760,13 +823,13 @@ p { ...@@ -760,13 +823,13 @@ p {
} }
.custom-select { .custom-select {
height: 4.267rem; height: 4.533rem;
} }
.custom-select .u-select-scroll .u-select-row { .custom-select .u-select-scroll .u-select-row {
display: block; display: block;
font-size: 0.427rem; font-size: 0.427rem;
padding: 0.507rem 2.133rem 0.293rem 1.12rem; padding: 0.587rem 2.133rem 0.293rem 1.12rem;
} }
.custom-select .u-select-scroll .u-select-row .u-select-title { .custom-select .u-select-scroll .u-select-row .u-select-title {
...@@ -776,9 +839,13 @@ p { ...@@ -776,9 +839,13 @@ p {
.custom-select .u-select-scroll .u-select-row:before { .custom-select .u-select-scroll .u-select-row:before {
content: '\e6a9'; content: '\e6a9';
top: auto;
bottom: 0.24rem;
right: 1.12rem; right: 1.12rem;
font-family: iconfont; font-family: iconfont;
color: #00ffff; color: #00ffff;
-webkit-transform: none;
transform: none;
display: block; display: block;
} }
...@@ -804,20 +871,20 @@ p { ...@@ -804,20 +871,20 @@ p {
top: 2.133rem; top: 2.133rem;
-webkit-transform: none; -webkit-transform: none;
transform: none; transform: none;
color: #91929a; background-image: url("../../resources/image/inherit");
font-size: inherit;
background-image: url("../../resources/image/noCont.png");
background-position: top center; background-position: top center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-background-size: 1.2rem 1.2rem; -webkit-background-size: 1.2rem 1.2rem;
background-size: 1.2rem 1.2rem; background-size: 1.2rem 1.2rem;
padding-top: 1.547rem; color: #91929a;
font-size: 1.547rem;
padding-top: 2.347rem;
} }
.tip { .tip {
text-align: center; text-align: center;
color: #A0A0A7; color: #A0A0A7;
margin-top: 0.107rem; margin-top: 0.08rem;
} }
.u-switch { .u-switch {
...@@ -836,7 +903,8 @@ p { ...@@ -836,7 +903,8 @@ p {
height: 0.8rem; height: 0.8rem;
border: 2px solid; border: 2px solid;
border-radius: 0.533rem; border-radius: 0.533rem;
background-clip: padding-box; -webkit-transition: background-color ease-in-out 0.2s, border ease-in-out 0.2s;
transition: background-color ease-in-out 0.2s, border ease-in-out 0.2s;
} }
.u-switch .u-switch-handle:before { .u-switch .u-switch-handle:before {
...@@ -848,20 +916,15 @@ p { ...@@ -848,20 +916,15 @@ p {
height: 0.747rem; height: 0.747rem;
-webkit-transition: left 0.2s ease-in-out; -webkit-transition: left 0.2s ease-in-out;
transition: left 0.2s ease-in-out; transition: left 0.2s ease-in-out;
border-radius: 0.427rem; border-radius: 50%;
background-color: #fff; background-color: #fff;
background-clip: padding-box;
-webkit-box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4); box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
} }
.u-switch.u-switch-on .u-switch-handle { .u-switch.u-switch-on .u-switch-handle {
border-color: #4cd964; border-color: #4cd964;
-webkit-box-shadow: inset 0 0 0 0.427rem #4cd964;
box-shadow: inset 0 0 0 0.427rem #4cd964;
background-color: #4cd964; background-color: #4cd964;
-webkit-transition: border ease 0.4s, -webkit-box-shadow ease 0.4s, background-color ease 1.2s;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
} }
.u-switch.u-switch-on .u-switch-handle:before { .u-switch.u-switch-on .u-switch-handle:before {
...@@ -870,11 +933,7 @@ p { ...@@ -870,11 +933,7 @@ p {
.u-switch.u-switch-off .u-switch-handle { .u-switch.u-switch-off .u-switch-handle {
border-color: #bbb; border-color: #bbb;
-webkit-box-shadow: inset 0 0 0 0 #bbb;
box-shadow: inset 0 0 0 0 #bbb;
background-color: #bbb; background-color: #bbb;
-webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.4s, -webkit-box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
} }
.u-switch.u-switch-off .u-switch-handle:before { .u-switch.u-switch-off .u-switch-handle:before {
...@@ -885,6 +944,66 @@ p { ...@@ -885,6 +944,66 @@ p {
opacity: 0.3; opacity: 0.3;
} }
.custom-setHijack-switch {
width: 5.333rem;
height: auto;
text-align: center;
color: #00ffff;
margin: 0.987rem auto 0;
}
.custom-setHijack-switch .u-switch-handle {
position: relative;
top: auto;
left: auto;
-webkit-transform: none;
transform: none;
width: 0.453rem;
height: 0.453rem;
border: 0;
border-radius: 0;
display: inline-block;
vertical-align: middle;
margin-right: 0.16rem;
}
.custom-setHijack-switch .u-switch-handle:before {
font-family: iconfont;
font-size: 0.453rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
top: 0;
width: auto;
height: auto;
border-radius: 0;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.custom-setHijack-switch .u-switch-text {
display: inline-block;
vertical-align: middle;
}
.custom-setHijack-switch.u-switch-on .u-switch-handle {
background-color: transparent;
}
.custom-setHijack-switch.u-switch-on .u-switch-handle:before {
content: '\e6a9';
left: 0;
}
.custom-setHijack-switch.u-switch-off .u-switch-handle {
background-color: transparent;
}
.custom-setHijack-switch.u-switch-off .u-switch-handle:before {
content: '\e6aa';
left: 0;
}
.u-button { .u-button {
width: 6.4rem; width: 6.4rem;
color: #fff; color: #fff;
......
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