Skip to content

D
DoorLock
Commit a67d4328 by wangying
Options

#10 修改邀请绑定页面

parent b09d38d7
Showing with 982 additions and 33 deletions
web/lib/less/addDevice/addDevice.less
......@@ -82,6 +82,7 @@
display: table;
position: relative;
margin-top: 17px;
min-height: 35px;
span{
.iconfont(@WIFI-ICON-FONTSIZE);
width: 48px;
......
web/lib/less/device/notify.less 0 → 100644
@import "../public/public.less";
@import "../public/header.less";
.u-android-notify{
margin: 53px 40px 0;
.u-android-notify-row{
color: rgba(204,204,204,.5);
padding-left: 34px;
position: relative;
.u-android-notify-title{
font-size: 16px;
position: relative;
}
.u-android-notify-tip{
font-size: 12px;
line-height: 15px;
padding: 3px 5px 1px;
margin: 6px -4px -7px;
border-radius: 5px;
position: relative;
border: 1px dashed transparent;/*no*/
&:before{
content: '';
position: absolute;
top: -6px;
left: 90px;
.bgImgSize(10px,6px,"blue_arrow_icon.png",center,cover);
display: none;
}
}
.u-android-notify-subtitle{
margin-top: 15px;
}
.u-android-notify-subcontent{
font-size: 12px;
line-height: 15px;
padding-left: 21px;
margin-top: 6px;
}
//1、2、3
.u-android-notify-icon{
position: absolute;
left: 0;
display: inline-block;
width: 22px;
height: 22px;
border: 1px solid;/*no*/
border-radius: 50%;
text-align: center;
.iconfont(12px,22px);
background-color: #242635;
outline: 3px solid #242635;/*no*/
}
// √
.u-android-notify-finish-icon{
position: absolute;
top: 10px;
left: 12px;
&:before{
content:'\e730';
color: #00ffff;
.defaultIconfont(16px);
background-color: #242635;
border-radius: 50%;
.transform(scale(0.6));
display: block;
}
}
.u-android-notify-button{
.transformV_center(right,0);
color: #00ffff;
font-size: 12px;
line-height: 1;
border-bottom: 1px solid;/*no*/
padding-bottom: 1px;/*no*/
// >>
span{
margin-left: 6px;
&:before{
content:'\e6c4';
.iconfont(12px);
}
}
}
&:not(:last-child){
padding-bottom: 55px;
}
&:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 11px;
width: 1px;/*no*/
background-color: #595b63;
}
}
.active{
color: #fff;
.u-android-notify-tip{
color: #91929a;
border-color: #91929a;
&:before{
display: block;
}
}
.u-android-notify-subcontent{
color: #91929a;
}
.u-android-notify-icon{
color: #00ffff;
}
}
.changeBorder:before{
background-color: #00ffff;
}
}
\ No newline at end of file
web/lib/less/device/recordList.less
......@@ -69,3 +69,38 @@
transform: rotate3d(0, 0, 1, 360deg);
}
}
.notice{
height: 62px;
line-height: 62px;
border-bottom: 2px solid #50515D;/*no*/
text-align: center;
color: #00ffff;
font-size: 12px;
> span{
color: #fc2168;
.iconfont(20px);
vertical-align: middle;
margin-right: 9px;
}
p{
display: inline-block;
color: #00ffff;
font-size: 12px;
line-height: 1;
border-bottom: 1px solid;/*no*/
padding-bottom: 1px;/*no*/
margin-left: 24px;
// >>
span{
margin-left: 6px;
&:before{
content:'\e6c4';
.iconfont(12px);
}
}
}
~ .custom-list{
top: 106px;
}
}
\ No newline at end of file
web/lib/less/doorlockUsers/doorlockUser.less
......@@ -142,27 +142,42 @@
//邀请绑定
.inviteBind{
margin: 40px 38px 0;
margin: 41px 42px 0;
li{
&:first-child{
color: @INVITEBIND-TEXT-COLOR;
font-size: @INVITEBIND-TEXT-FONTSIZE;
position: relative;
&.qrcode{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
}
&: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: 32px;
&.title{
color: #fff;
font-size: 18px;
margin: 34px 0 22px;
}
&.tip{
font-size: 12px;
text-align: center;
margin-top: 34px;
}
//1、2、3
> span{
display: inline-block;
width: 22px;/*no*/
height: 22px;/*no*/
border: 1px solid;/*no*/
border-radius: 50%;
text-align: center;
.iconfont(12px,1);
line-height: 22px;/*no*/
background-color: #242635;
outline: 3px solid #242635;/*no*/
color: #00ffff;
margin-right: 14px;
position: relative;
}
//二维码已过期，请重新生成
p{
......@@ -178,6 +193,18 @@
width: 100%;
}
}
&:not(.qrcode):not(.title):not(.tip):not(.noBorder){
padding-bottom: 17px;
&:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 11px;
width: 1px;/*no*/
background-color: #00ffff;
}
}
}
}
......
web/lib/less/public/variables.less
......@@ -10,13 +10,14 @@
@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_j5n6zgpz0py14i.ttf') format('truetype');
//src: url('//at.alicdn.com/t/font_372681_pkbxr0shctzqia4i.ttf') format('truetype');
}
@font-face{
......
web/view/device/notify.css 0 → 100644
@font-face {
font-family: 'defaultIconfont';
src: url('../../resources/font/defaultIconfont.ttf') format('truetype');
}
@font-face {
font-family: 'iconfont';
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%;
height: 100%;
}
body {
-webkit-user-select: none;
user-select: none;
color: #fff;
font-size: 0.373rem;
background-color: #242635;
}
ul {
padding-left: 0;
list-style: none;
margin-bottom: 0;
}
p {
margin-bottom: 0;
}
.u-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
background-color: rgba(0, 0, 0, 0.8);
}
.u-loading .u-loading-box {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
.u-loading .u-loading-box .u-loading-icon {
width: 30px;
height: 30px;
background-position: center;
background-repeat: no-repeat;
background-image: url("../../resources/image/white_loading_icon.png");
-webkit-background-size: cover;
background-size: cover;
margin: 0 auto;
-webkit-animation: loading 1s steps(12, end) infinite;
animation: loading 1s steps(12, end) infinite;
}
.u-loading .u-loading-box .u-loading-text {
color: #fff;
margin-top: 0.32rem;
text-align: center;
}
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes loading {
0% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
.custom-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-loading .u-loading-box {
color: #00ffff;
}
.custom-loading .u-loading-box .u-loading-icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
background: none;
-webkit-animation: none;
animation: none;
}
.custom-loading .u-loading-box .u-loading-icon:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0.5em;
height: 0.5em;
margin: auto;
border-radius: 50%;
-webkit-transform: translateZ(0) scale(0.55);
transform: translateZ(0) scale(0.55);
-webkit-animation: loading 1.3s infinite linear;
animation: loading 1.3s infinite linear;
}
.custom-loading .u-loading-box .u-loading-text {
color: inherit;
font-size: 0.427rem;
margin-top: 0.533rem;
}
@-webkit-keyframes loading {
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;
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% {
-webkit-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;
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% {
-webkit-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;
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% {
-webkit-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;
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% {
-webkit-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;
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% {
-webkit-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;
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% {
-webkit-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;
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% {
-webkit-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;
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;
}
}
@keyframes loading {
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;
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% {
-webkit-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;
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% {
-webkit-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;
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% {
-webkit-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;
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% {
-webkit-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;
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% {
-webkit-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;
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% {
-webkit-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;
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% {
-webkit-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;
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;
}
}
.u-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1051;
background-color: rgba(0, 0, 0, 0.8);
}
.u-dialog .u-dialog-box {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 6.667rem;
background-color: #fff;
border-radius: 0.32rem;
}
.u-dialog .u-dialog-box .u-dialog-content {
padding: 0.4rem;
text-align: center;
position: relative;
}
.u-dialog .u-dialog-box .u-dialog-content:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: #bbb;
}
.u-dialog .u-dialog-box .u-dialog-button {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
.u-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
display: table-cell;
color: #007aff;
text-align: center;
padding: 0.4rem 0;
line-height: 1;
position: relative;
}
.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 1px;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
background-color: #bbb;
}
.fade-enter-active,
.fade-leave-active {
-webkit-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.custom-dialog {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-dialog .u-dialog-box {
width: 8.933rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
padding-bottom: 0.4rem;
}
.custom-dialog .u-dialog-box .u-dialog-content {
width: 100%;
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.427rem;
line-height: 0.64rem;
padding: 0 0.587rem;
}
.custom-dialog .u-dialog-box .u-dialog-content span {
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 {
display: none;
}
.custom-dialog .u-dialog-box .u-dialog-button {
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.467rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
padding: 0.267rem 0;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
background-color: #153D4C;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel.disabled,
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm.disabled {
background-color: transparent;
color: #999;
}
.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
display: none;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 1.173rem;
z-index: 1030;
background-color: #010d19;
}
.header p {
position: absolute;
top: 0;
left: 1.467rem;
right: 1.467rem;
line-height: 1.173rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
font-size: 0.507rem;
text-align: center;
}
.header span {
color: #00ffff;
font-size: 0.427rem;
width: 1.467rem;
line-height: 1.173rem;
display: block;
}
.header span:active {
opacity: 0.5;
}
.header .header-left {
float: left;
padding-left: 0.213rem;
}
.header .header-right {
float: right;
padding-right: 0.213rem;
text-align: right;
}
.header .icon {
color: #fff;
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1.173rem;
}
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content {
padding-top: 1.173rem;
}
.u-android-notify {
margin: 1.413rem 1.067rem 0;
}
.u-android-notify .u-android-notify-row {
color: rgba(204, 204, 204, 0.5);
padding-left: 0.907rem;
position: relative;
}
.u-android-notify .u-android-notify-row .u-android-notify-title {
font-size: 0.427rem;
position: relative;
}
.u-android-notify .u-android-notify-row .u-android-notify-tip {
font-size: 0.32rem;
line-height: 0.4rem;
padding: 0.08rem 0.133rem 0.027rem;
margin: 0.16rem -0.107rem -0.187rem;
border-radius: 0.133rem;
position: relative;
border: 1px dashed transparent;
}
.u-android-notify .u-android-notify-row .u-android-notify-tip:before {
content: '';
position: absolute;
top: -0.16rem;
left: 2.4rem;
width: 0.267rem;
height: 0.16rem;
background: url("../../resources/image/blue_arrow_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
display: none;
}
.u-android-notify .u-android-notify-row .u-android-notify-subtitle {
margin-top: 0.4rem;
}
.u-android-notify .u-android-notify-row .u-android-notify-subcontent {
font-size: 0.32rem;
line-height: 0.4rem;
padding-left: 0.56rem;
margin-top: 0.16rem;
}
.u-android-notify .u-android-notify-row .u-android-notify-icon {
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;
background-color: #242635;
outline: 3px solid #242635;
}
.u-android-notify .u-android-notify-row .u-android-notify-finish-icon {
position: absolute;
top: 0.267rem;
left: 0.32rem;
}
.u-android-notify .u-android-notify-row .u-android-notify-finish-icon:before {
content: '\e730';
color: #00ffff;
font-family: defaultIconfont;
font-size: 0.427rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
background-color: #242635;
border-radius: 50%;
-webkit-transform: scale(0.6);
transform: scale(0.6);
display: block;
}
.u-android-notify .u-android-notify-row .u-android-notify-button {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #00ffff;
font-size: 0.32rem;
line-height: 1;
border-bottom: 1px solid;
padding-bottom: 1px;
}
.u-android-notify .u-android-notify-row .u-android-notify-button span {
margin-left: 0.16rem;
}
.u-android-notify .u-android-notify-row .u-android-notify-button span:before {
content: '\e6c4';
font-family: iconfont;
font-size: 0.32rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.u-android-notify .u-android-notify-row:not(:last-child) {
padding-bottom: 1.467rem;
}
.u-android-notify .u-android-notify-row:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0.293rem;
width: 1px;
background-color: #595b63;
}
.u-android-notify .active {
color: #fff;
}
.u-android-notify .active .u-android-notify-tip {
color: #91929a;
border-color: #91929a;
}
.u-android-notify .active .u-android-notify-tip:before {
display: block;
}
.u-android-notify .active .u-android-notify-subcontent {
color: #91929a;
}
.u-android-notify .active .u-android-notify-icon {
color: #00ffff;
}
.u-android-notify .changeBorder:before {
background-color: #00ffff;
}
\ No newline at end of file
web/view/device/notify.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<title></title>
<link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./notify.css">
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<script type="text/javascript" src="../../lib/js/p.js"></script>
<script type="text/javascript" src="../../lib/js/UIOT.js"></script>
</head>
<body ontouchstart="">
<div id="app" v-cloak>
<div class="header">
<p>开启通知</p>
</div>
<div class="content">
<ul class="u-android-notify">
<li class="u-android-notify-row active changeBorder">
<span class="u-android-notify-icon">&#xe6c1;</span>
<span class="u-android-notify-finish-icon"></span>
<div class="u-android-notify-title">
开启系统通知
<div class="u-android-notify-button">去开启<span></span></div>
</div>
</li>
<li class="u-android-notify-row active">
<span class="u-android-notify-icon">&#xe6c0;</span>
<span class="u-android-notify-finish-icon"></span>
<div class="u-android-notify-title">
检查Android系统设置
<div class="u-android-notify-button">我已阅读</div>
</div>
<div class="u-android-notify-tip">部分安卓系统的手机在开启通知后仍无法收到推送信息，您可以依次检查以下几项设置</div>
<div class="u-android-notify-subtitle">1.&nbsp;&nbsp;应用是否设置为自启动状态</div>
<div class="u-android-notify-subcontent">操作步骤：在软件授权管理或启动管理中（通常在手机管家或设置菜单中）找到本APP并开启自启动。</div>
<div class="u-android-notify-subtitle">2.&nbsp;&nbsp;应用是否已开启后台保护</div>
<div class="u-android-notify-subcontent">操作步骤：在设置中找到电量与性能，点击受保护的后台应用，找到本APP并开启保护。</div>
<div class="u-android-notify-subtitle">3.&nbsp;&nbsp;是否已将应用加入系统白名单</div>
<div class="u-android-notify-subcontent">操作步骤：启动本APP后打开多任务页面（清理后台应用的页面），将本APP加入白名单。</div>
</li>
<li class="u-android-notify-row">
<span class="u-android-notify-icon">&#xe6c2;</span>
<div class="u-android-notify-title">保存设置并开启应用
<div class="u-android-notify-button">进入首页<span></span></div>
</div>
</li>
</ul>
</div>
<u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div>
<script type="text/javascript" src="./notify.js" defer async></script>
</body>
</html>
\ No newline at end of file
web/view/device/recordList.css
......@@ -622,3 +622,48 @@ p {
transform: rotate3d(0, 0, 1, 360deg);
}
}
.notice {
height: 1.653rem;
line-height: 1.653rem;
border-bottom: 2px solid #50515D;
text-align: center;
color: #00ffff;
font-size: 0.32rem;
}
.notice > span {
color: #fc2168;
font-family: iconfont;
font-size: 0.533rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
vertical-align: middle;
margin-right: 0.24rem;
}
.notice p {
display: inline-block;
color: #00ffff;
font-size: 0.32rem;
line-height: 1;
border-bottom: 1px solid;
padding-bottom: 1px;
margin-left: 0.64rem;
}
.notice p span {
margin-left: 0.16rem;
}
.notice p span:before {
content: '\e6c4';
font-family: iconfont;
font-size: 0.32rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.notice ~ .custom-list {
top: 2.827rem;
}
\ No newline at end of file
web/view/doorlockUsers/doorlockUser.css
......@@ -801,29 +801,51 @@ p {
}
.inviteBind {
margin: 1.067rem 1.013rem 0;
margin: 1.093rem 1.12rem 0;
}
.inviteBind li:first-child {
.inviteBind li {
color: #91929a;
font-size: 0.427rem;
position: relative;
}
.inviteBind li.qrcode {
width: 5.333rem;
height: 5.333rem;
margin: 0 auto;
position: relative;
}
.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.title {
color: #fff;
font-size: 0.48rem;
margin: 0.907rem 0 0.587rem;
}
.inviteBind li:not(:first-child):nth-child(2) {
color: inherit;
font-size: 0.48rem;
margin-top: 0.853rem;
.inviteBind li.tip {
font-size: 0.32rem;
text-align: center;
margin-top: 0.907rem;
}
.inviteBind li > span {
display: inline-block;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 50%;
text-align: center;
font-family: iconfont;
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;
}
.inviteBind li p {
......@@ -845,6 +867,20 @@ p {
width: 100%;
}
.inviteBind li:not(.qrcode):not(.title):not(.tip):not(.noBorder) {
padding-bottom: 0.453rem;
}
.inviteBind li:not(.qrcode):not(.title):not(.tip):not(.noBorder):before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0.293rem;
width: 1px;
background-color: #00ffff;
}
.unbindState-dialog {
position: fixed;
top: 0;
......
web/view/doorlockUsers/inviteBind.html
......@@ -27,16 +27,17 @@
</div>
<div class="content">
<ul class="inviteBind">
<li>
<li class="qrcode">
<canvas ref="qrcode"></canvas>
<p v-show="qrCodeDisabled">
<span>{{ $t('inviteBind.qrcodeExpireTip') }}</span>
</p>
</li>
<li>{{ $t('inviteBind.title') }}</li>
<li>{{ $t('inviteBind.cont1') }}</li>
<li>{{ $t('inviteBind.cont2') }}</li>
<li>{{ $t('inviteBind.cont3') }}</li>
<li class="title">{{ $t('inviteBind.title') }}</li>
<li><span>&#xe6c1;</span>{{ $t('inviteBind.cont1') }}</li>
<li><span>&#xe6c0;</span>{{ $t('inviteBind.cont2') }}</li>
<li class="noBorder"><span>&#xe6c2;</span>{{ $t('inviteBind.cont3') }}</li>
<li class="tip">注：二维码有效时间为10分钟，过期请重新生成</li>
</ul>
<u-button :init-param="componentsConfig.qrcodeButton.initParam" v-on:u-button-tap="onQRcodeButtonTap"></u-button>
</div>
......
web/view/test/notify.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webview Example</title>
<script type="text/javascript" src="../../lib/js/start.js"></script>
<script type="text/javascript" src="../../lib/js/p.js"></script>
<script type="text/javascript" src="../../lib/js/UIOT.js"></script>
<script type="text/javascript" src="../../lib/js/SDSPlugin.js"></script>
</head>
<body style="width:100%; height: 100%; background: #FFFFFF;">
<div id="app" v-cloak>
<v-touch tag="div" v-on:tap="onBeginLoopTap">开始调用loop</v-touch>
</div>
<script type="text/javascript" src="./notify.js" defer async></script>
</body>
</html>
\ No newline at end of file
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