Skip to content

D
DoorLock
Commit 9aa6832b by wangying
Options

#17 优化邀请绑定、关联开锁ID页面按钮覆盖文字的样式问题

parent a67d4328
Showing with 434 additions and 124 deletions
web/lib/less/addDevice/addDevice.less
......@@ -82,7 +82,6 @@
display: table;
position: relative;
margin-top: 17px;
min-height: 35px;
span{
.iconfont(@WIFI-ICON-FONTSIZE);
width: 48px;
......@@ -184,9 +183,10 @@
.mediaPosition();
.u-comm-loading();
//.u-comm-loading();
.u-process();
.custom-comm-loading();
//.custom-comm-loading();
//
.scanContent {
......@@ -195,4 +195,76 @@
bottom: 0;
left: 0;
width: 100%;
}
\ No newline at end of file
}
.noticeContent{
color: #c8225b;
line-height: 1.5;
text-align: center;
width: 100%;
display: inline-block;
position: absolute;
bottom: -200px;
font-size: 12px ;
span{
&:first-child{
.iconfont(20px);
}
}
}
.custom-process-button{
position: absolute;
bottom: inherit;
left: 0;
right: 0;
width: 7.333rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
text-align: center;
line-height: 1;
margin: 0 auto;
padding: 0.267rem 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
background-clip: padding-box;
}
.custom-process-cancelButton{
bottom: 0;
width: 100px;
color: #00ffff;
font-size: 12px;
background-color: transparent;
padding: 18px 0 5px;
border: none;
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.blue_gradient_border();
}
.tap_row(transparent);
&.disabled{
background-color: transparent;
}
}
.u-process.u-process-status-1{
.u-process-content{
top: 200px;
}
}
.u-process.u-process-status-2{
.u-process-content{
top: 200px;
}
}
web/lib/less/device/notify.less
......@@ -42,12 +42,13 @@
position: absolute;
left: 0;
display: inline-block;
width: 22px;
height: 22px;
// width: 22px;
// height: 22px;
border: 1px solid;/*no*/
border-radius: 50%;
text-align: center;
.iconfont(12px,22px);
.iconfont(12px);
padding: 4px;
background-color: #242635;
outline: 3px solid #242635;/*no*/
}
......
web/lib/less/doorlockManage/doorlockManage.less
......@@ -288,3 +288,12 @@
.unbindState-dialog();
.custom-dialog{
.u-dialog-box{
.u-dialog-content{
span{
.bgImgSize(51px,51px,"green_unbindSuccess_icon.png",center,cover);
}
}
}
}
web/lib/less/doorlockUsers/doorlockUser.less
......@@ -148,8 +148,8 @@
font-size: @INVITEBIND-TEXT-FONTSIZE;
position: relative;
&.qrcode{
width: 200px;
height: 200px;
width: 160px;
height: 160px;
margin: 0 auto;
position: relative;
}
......@@ -166,18 +166,19 @@
//1、2、3
> span{
display: inline-block;
width: 22px;/*no*/
height: 22px;/*no*/
// width: 22px;/*no*/
// height: 22px;/*no*/
border: 1px solid;/*no*/
border-radius: 50%;
text-align: center;
.iconfont(12px,1);
line-height: 22px;/*no*/
// line-height: 22px;/*no*/
background-color: #242635;
outline: 3px solid #242635;/*no*/
color: #00ffff;
margin-right: 14px;
position: relative;
padding: 4px;
}
//二维码已过期，请重新生成
p{
......@@ -198,7 +199,7 @@
&:before{
content: '';
position: absolute;
top: 0;
top: 2px;
bottom: 0;
left: 11px;
width: 1px;/*no*/
......
web/lib/less/doorlockUsers/unlockInfo.less
......@@ -142,7 +142,11 @@
.u-select();
.custom-select{
height: 170px;
position: absolute;
top: 266px;
bottom: 211px;
left: 0;
height: auto;
.u-select-scroll{
.u-select-row{
display: block;
......@@ -180,10 +184,16 @@
}
}
.position{
position: absolute;
bottom: 122px;
left: 0;
width: 100%;
}
.tip{
text-align: center;
color: #A0A0A7;
margin-top: 3px;
color: #A0A0A7;
}
.u-switch();
......@@ -248,7 +258,7 @@
.mask(1051,@CUSTOM-BACKDROP-BG);
.guideStep1{
position: absolute;
top: 44px;
top: 46px;
left: 0;
width: 100%;
.modeSelect:after{
......@@ -353,7 +363,7 @@
}
.guideStep5{
position: absolute;
top: 248px;
bottom: 116px;
left: 0;
width: 100%;
.guideStep5Tip{
......
web/lib/less/public/core.less
......@@ -200,17 +200,24 @@ p{
&when(@guideStepBool){
.guide-dialog{
.guideStep5{
top: 228px;
.guideStep5Cont p{
padding: 12px 0;
}
bottom: 96px;
// .guideStep5Cont p{
// padding: 12px 0;
// }
}
}
}
&when(@switchBool){
.custom-select{
bottom: 178px;
}
.position{
bottom: 102px;
}
.custom-setHijack-switch{
margin-top: 0;
margin-top: 14px;
}
}
......@@ -368,6 +375,34 @@ p{
}
}
.custom-process(){
.custom-process{
background-color: @CUSTOM-BACKDROP-BG;
.u-process-button{
bottom: 134px;
width: 100px;
color: #00ffff;
font-size: 12px;
background-color: transparent;
padding: 18px 0 5px;
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.blue_gradient_border();
}
.tap_row(transparent);
&.disabled{
background-color: transparent;
}
}
}
}
//自定义弹出框组件
.custom-dialog(){
.custom-dialog{
......
web/lib/less/public/public.less
......@@ -283,7 +283,7 @@
}
}
@media (max-height: 400px/*no*/){
@media (max-height: 450px/*no*/){
#app{
height: 647px;
position: relative;
......@@ -894,6 +894,146 @@
});
}
.u-process(){
.u-process{
.mask(1050);
.u-process-content{
.transformV_center(left,0);
width: 100%;
.loader{
font-size: 16px;
width: 3.750em;
height: 3.750em;
margin: 0 auto;
position: relative;
&:before{
content: '';
.margin_center(0.500em,0.500em);
border-radius: 50%;
.transform(translateZ(0) scale(0.55));
}
}
.icon{
font-size: 16px;
width: 3.750em;
height: 3.750em;
margin: 0 auto;
position: relative;
&:before{
.transform_center();
.iconfont(4.125em);
}
}
.u-process-text{
margin-top: 20px;
text-align: center;
}
}
.u-process-button{
position: absolute;
bottom: 65px;
left: 0;
width: 100%;
display: table;
table-layout: fixed;
border-collapse: separate;
border-spacing: 25px 0;
li{
// display: table-cell;
// color: @BUTTON-COMPONENT-COLOR;
// font-size: inherit;
// background-color: @BUTTON-COMPONENT-BG;
// border-radius: 5px;
// text-align: center;
// line-height: 1;
// padding: 10px 0;
// .transition(all 0.2s linear);
// background-clip: padding-box;
// //按钮 active
// .tap_row(@BUTTON-COMPONENT-ACTIVE-BG);
// //按钮 不可控
// &.disabled{
// background-color: @BUTTON-COMPONENT-DISABLED-BG;
// }
}
}
//loading
&.u-process-status-0{
.u-process-content{
color: #00ffff;
.loader{
display: block;
&:before{
.animation(commLoading 1.3s linear infinite);
}
}
.icon{
display: none;
}
}
}
//成功 state
&.u-process-status-1{
.u-process-content{
color: #00ffff;
.loader{
display: none;
}
.icon{
display: block;
&:before{
content: '\e800';
}
}
}
}
//失败 state
&.u-process-status-2{
.u-process-content{
color: #fff;
.loader{
display: none;
}
.icon{
display: block;
&:before{
content: '\e646';
}
}
}
}
}
.keyframes(commLoading,{
0%,
100% {
.box-shadow(0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0);
}
12.5% {
.box-shadow(0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
}
25% {
.box-shadow(0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
}
37.5% {
.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em);
}
50% {
.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em);
}
62.5% {
.box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em);
}
75% {
.box-shadow(0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0);
}
87.5% {
.box-shadow(0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em);
}
});
}
.edit-name(){
.edit-name-text{
width: 100%;
......
web/lib/less/public/variables.less
......@@ -10,14 +10,13 @@
@font-face{
font-family: 'defaultIconfont';
src: url('@{ICONFONT_PATH}/defaultIconfont.ttf') format('truetype');
//src: url('//at.alicdn.com/t/font_331319_9pmkvldy925ljtt9.ttf') format('truetype');
}
//项目iconfont
@font-face{
font-family: 'iconfont';
src: url('@{ICONFONT_PATH}/iconfont.ttf') format('truetype');
//src: url('//at.alicdn.com/t/font_372681_pkbxr0shctzqia4i.ttf') format('truetype');
//src: url('//at.alicdn.com/t/font_372681_j5n6zgpz0py14i.ttf') format('truetype');
}
@font-face{
......
web/view/addDevice/addDevice.css
......@@ -806,7 +806,7 @@ p {
background: #bbb;
}
@media (max-height: 400px /*no*/) {
@media (max-height: 450px /*no*/) {
#app {
height: 17.253rem;
position: relative;
......@@ -911,7 +911,7 @@ p {
}
}
.u-comm-loading {
.u-process {
position: fixed;
top: 0;
left: 0;
......@@ -921,24 +921,24 @@ p {
background-color: rgba(0, 0, 0, 0.8);
}
.u-comm-loading .u-comm-loading-content {
.u-process .u-process-content {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
width: 100%;
}
.u-comm-loading .u-comm-loading-content .loader {
.u-process .u-process-content .loader {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
margin: 0 auto;
position: relative;
}
.u-comm-loading .u-comm-loading-content .loader:before {
.u-process .u-process-content .loader:before {
content: '';
position: absolute;
top: 0;
......@@ -953,15 +953,15 @@ p {
transform: translateZ(0) scale(0.55);
}
.u-comm-loading .u-comm-loading-content .icon {
.u-process .u-process-content .icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
margin: 0 auto;
position: relative;
}
.u-comm-loading .u-comm-loading-content .icon:before {
.u-process .u-process-content .icon:before {
position: absolute;
top: 50%;
left: 50%;
......@@ -973,100 +973,71 @@ p {
line-height: 1;
}
.u-comm-loading .u-comm-loading-content .u-comm-loading-text {
font-size: 0.427rem;
.u-process .u-process-content .u-process-text {
margin-top: 0.533rem;
text-align: center;
}
.u-comm-loading .u-comm-loading-button {
.u-process .u-process-button {
position: absolute;
bottom: 1.733rem;
left: 0;
right: 0;
width: 6.4rem;
color: #fff;
font-size: inherit;
background-color: #007aff;
border-radius: 0.533rem;
text-align: center;
line-height: 1;
margin: 0 auto;
padding: 0.267rem 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
background-clip: padding-box;
}
.u-comm-loading .u-comm-loading-button:active {
background-color: #0065ff;
}
.u-comm-loading .u-comm-loading-button.disabled {
background-color: #bbb;
width: 100%;
display: table;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0.667rem 0;
}
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content {
.u-process.u-process-status-0 .u-process-content {
color: #00ffff;
}
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .loader {
.u-process.u-process-status-0 .u-process-content .loader {
display: block;
}
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .loader:before {
-webkit-animation: commLoading 1.3s infinite linear;
animation: commLoading 1.3s infinite linear;
.u-process.u-process-status-0 .u-process-content .loader:before {
-webkit-animation: commLoading 1.3s linear infinite;
animation: commLoading 1.3s linear infinite;
}
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .icon {
.u-process.u-process-status-0 .u-process-content .icon {
display: none;
}
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-button {
display: none;
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content {
.u-process.u-process-status-1 .u-process-content {
color: #00ffff;
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .loader {
.u-process.u-process-status-1 .u-process-content .loader {
display: none;
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .icon {
.u-process.u-process-status-1 .u-process-content .icon {
display: block;
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .icon:before {
.u-process.u-process-status-1 .u-process-content .icon:before {
content: '\e800';
}
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-button {
display: block;
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content {
.u-process.u-process-status-2 .u-process-content {
color: #fff;
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .loader {
.u-process.u-process-status-2 .u-process-content .loader {
display: none;
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .icon {
.u-process.u-process-status-2 .u-process-content .icon {
display: block;
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .icon:before {
.u-process.u-process-status-2 .u-process-content .icon:before {
content: '\e646';
}
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-button {
display: block;
}
@-webkit-keyframes commLoading {
0%, 100% {
-webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
......@@ -1151,20 +1122,63 @@ p {
}
}
.custom-comm-loading {
background-color: rgba(36, 38, 53, 0.9);
.scanContent {
position: fixed;
top: 1.173rem;
bottom: 0;
left: 0;
width: 100%;
}
.noticeContent {
color: #c8225b;
line-height: 1.5;
text-align: center;
width: 100%;
display: inline-block;
position: absolute;
bottom: -5.333rem;
font-size: 0.32rem;
}
.noticeContent span:first-child {
font-family: iconfont;
font-size: 0.533rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.custom-process-button {
position: absolute;
bottom: inherit;
left: 0;
right: 0;
width: 7.333rem;
border-radius: 0.133rem;
background-color: transparent;
border: 0.027rem solid;
color: #00ffff;
font-size: 0.427rem;
text-align: center;
line-height: 1;
margin: 0 auto;
padding: 0.267rem 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
background-clip: padding-box;
}
.custom-comm-loading .u-comm-loading-button {
bottom: 3.573rem;
.custom-process-cancelButton {
bottom: 0;
width: 2.667rem;
color: #00ffff;
font-size: 0.32rem;
background-color: transparent;
padding: 0.48rem 0 0.133rem;
border: none;
}
.custom-comm-loading .u-comm-loading-button:after {
.custom-process-cancelButton:after {
content: '';
position: absolute;
bottom: 0;
......@@ -1175,18 +1189,18 @@ p {
background: linear-gradient(to right, #242635, #00ffff, #242635);
}
.custom-comm-loading .u-comm-loading-button:active {
.custom-process-cancelButton:active {
background-color: transparent;
}
.custom-comm-loading .u-comm-loading-button.disabled {
.custom-process-cancelButton.disabled {
background-color: transparent;
}
.scanContent {
position: fixed;
top: 1.173rem;
bottom: 0;
left: 0;
width: 100%;
.u-process.u-process-status-1 .u-process-content {
top: 5.333rem;
}
.u-process.u-process-status-2 .u-process-content {
top: 5.333rem;
}
\ No newline at end of file
web/view/bindUser/bindUser.css
......@@ -643,7 +643,7 @@ p {
background: #bbb;
}
@media (max-height: 400px /*no*/) {
@media (max-height: 450px /*no*/) {
#app {
height: 17.253rem;
position: relative;
......
web/view/device/device.css
......@@ -537,7 +537,7 @@ p {
background: #bbb;
}
@media (max-height: 400px /*no*/) {
@media (max-height: 450px /*no*/) {
#app {
height: 17.253rem;
position: relative;
......
web/view/device/notify.css
......@@ -499,15 +499,14 @@ p {
position: absolute;
left: 0;
display: inline-block;
width: 0.587rem;
height: 0.587rem;
border: 1px solid;
border-radius: 50%;
text-align: center;
font-family: iconfont;
font-size: 0.32rem;
-webkit-font-smoothing: antialiased;
line-height: 0.587rem;
line-height: 1;
padding: 0.107rem;
background-color: #242635;
outline: 3px solid #242635;
}
......
web/view/doorlockManage/doorlockManage.css
......@@ -379,6 +379,14 @@ p {
display: none;
}
.u-dialog-box .u-dialog-content span {
width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbindSuccess_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
}
.header {
position: fixed;
top: 0;
......@@ -751,7 +759,7 @@ p {
background: #bbb;
}
@media (max-height: 400px /*no*/) {
@media (max-height: 450px /*no*/) {
#app {
height: 17.253rem;
position: relative;
......@@ -1060,4 +1068,12 @@ p {
width: 1.733rem;
height: 1.733rem;
margin-bottom: 0.373rem;
}
.custom-dialog .u-dialog-box .u-dialog-content span {
width: 1.36rem;
height: 1.36rem;
background: url("../../resources/image/green_unbindSuccess_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
}
\ No newline at end of file
web/view/doorlockUsers/doorlockUser.css
......@@ -531,7 +531,7 @@ p {
background: #bbb;
}
@media (max-height: 400px /*no*/) {
@media (max-height: 450px /*no*/) {
#app {
height: 17.253rem;
position: relative;
......@@ -811,8 +811,8 @@ p {
}
.inviteBind li.qrcode {
width: 5.333rem;
height: 5.333rem;
width: 4.267rem;
height: 4.267rem;
margin: 0 auto;
position: relative;
}
......@@ -831,8 +831,6 @@ p {
.inviteBind li > span {
display: inline-block;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 50%;
text-align: center;
......@@ -840,12 +838,12 @@ p {
font-size: 0.32rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
line-height: 22px;
background-color: #242635;
outline: 3px solid #242635;
color: #00ffff;
margin-right: 0.373rem;
position: relative;
padding: 0.107rem;
}
.inviteBind li p {
......@@ -874,7 +872,7 @@ p {
.inviteBind li:not(.qrcode):not(.title):not(.tip):not(.noBorder):before {
content: '';
position: absolute;
top: 0;
top: 0.053rem;
bottom: 0;
left: 0.293rem;
width: 1px;
......
web/view/doorlockUsers/unlockInfo.css
......@@ -824,7 +824,11 @@ p {
}
.custom-select {
height: 4.533rem;
position: absolute;
top: 7.093rem;
bottom: 5.627rem;
left: 0;
height: auto;
}
.custom-select .u-select-scroll .u-select-row {
......@@ -882,10 +886,16 @@ p {
padding-top: 1.52rem;
}
.position {
position: absolute;
bottom: 3.253rem;
left: 0;
width: 100%;
}
.tip {
text-align: center;
color: #A0A0A7;
margin-top: 0.08rem;
}
.u-switch {
......@@ -1063,7 +1073,7 @@ p {
.guide-dialog .guideStep1 {
position: absolute;
top: 1.173rem;
top: 1.227rem;
left: 0;
width: 100%;
}
......@@ -1186,7 +1196,7 @@ p {
.guide-dialog .guideStep5 {
position: absolute;
top: 6.613rem;
bottom: 3.093rem;
left: 0;
width: 100%;
}
......@@ -1283,14 +1293,18 @@ p {
}
.guide-dialog .guideStep5 {
top: 6.08rem;
bottom: 2.56rem;
}
.custom-select {
bottom: 4.747rem;
}
.guide-dialog .guideStep5 .guideStep5Cont p {
padding: 0.32rem 0;
.position {
bottom: 2.72rem;
}
.custom-setHijack-switch {
margin-top: 0;
margin-top: 0.373rem;
}
}
\ No newline at end of file
web/view/doorlockUsers/userList.css
......@@ -695,7 +695,7 @@ p {
background: #bbb;
}
@media (max-height: 400px /*no*/) {
@media (max-height: 450px /*no*/) {
#app {
height: 17.253rem;
position: relative;
......
web/view/login/login.css
......@@ -564,7 +564,7 @@ p {
background: #bbb;
}
@media (max-height: 400px /*no*/) {
@media (max-height: 450px /*no*/) {
#app {
height: 17.253rem;
position: relative;
......
web/view/myInfo/myInfo.css
......@@ -622,7 +622,7 @@ p {
background: #bbb;
}
@media (max-height: 400px /*no*/) {
@media (max-height: 450px /*no*/) {
#app {
height: 17.253rem;
position: relative;
......
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