Skip to content

D
DoorLock
Commit c0436304 by wangying
Options

1.1.3 / 2017-11-06 

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