Skip to content

D
DoorLock
Commit a67d4328 by wangying
Options

#10 修改邀请绑定页面

parent b09d38d7
Showing with 384 additions and 33 deletions
web/lib/less/addDevice/addDevice.less
...@@ -82,6 +82,7 @@ ...@@ -82,6 +82,7 @@
display: table; display: table;
position: relative; position: relative;
margin-top: 17px; margin-top: 17px;
min-height: 35px;
span{ span{
.iconfont(@WIFI-ICON-FONTSIZE); .iconfont(@WIFI-ICON-FONTSIZE);
width: 48px; 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 @@ ...@@ -69,3 +69,38 @@
transform: rotate3d(0, 0, 1, 360deg); 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 @@ ...@@ -142,27 +142,42 @@
//邀请绑定 //邀请绑定
.inviteBind{ .inviteBind{
margin: 40px 38px 0; margin: 41px 42px 0;
li{ li{
&:first-child{ color: @INVITEBIND-TEXT-COLOR;
font-size: @INVITEBIND-TEXT-FONTSIZE;
position: relative;
&.qrcode{
width: 200px; width: 200px;
height: 200px; height: 200px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
} }
&:not(:first-child){ &.title{
color: @INVITEBIND-TEXT-COLOR; color: #fff;
font-size: @INVITEBIND-TEXT-FONTSIZE; font-size: 18px;
padding-left: 12px; margin: 34px 0 22px;
text-indent: -12px; }
line-height: 20px; &.tip{
margin-top: 18px; font-size: 12px;
//注意事项 text-align: center;
&:nth-child(2){ margin-top: 34px;
color: inherit;
font-size: @INVITEBIND-TITLE-FONTSIZE;
margin-top: 32px;
} }
//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{ p{
...@@ -178,6 +193,18 @@ ...@@ -178,6 +193,18 @@
width: 100%; 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 @@ ...@@ -10,13 +10,14 @@
@font-face{ @font-face{
font-family: 'defaultIconfont'; font-family: 'defaultIconfont';
src: url('@{ICONFONT_PATH}/defaultIconfont.ttf') format('truetype'); src: url('@{ICONFONT_PATH}/defaultIconfont.ttf') format('truetype');
//src: url('//at.alicdn.com/t/font_331319_9pmkvldy925ljtt9.ttf') format('truetype');
} }
//项目iconfont //项目iconfont
@font-face{ @font-face{
font-family: 'iconfont'; font-family: 'iconfont';
src: url('@{ICONFONT_PATH}/iconfont.ttf') format('truetype'); 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{ @font-face{
......
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 { ...@@ -622,3 +622,48 @@ p {
transform: rotate3d(0, 0, 1, 360deg); 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 { ...@@ -801,29 +801,51 @@ p {
} }
.inviteBind { .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; width: 5.333rem;
height: 5.333rem; height: 5.333rem;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
} }
.inviteBind li:not(:first-child) { .inviteBind li.title {
color: #91929a; color: #fff;
font-size: 0.427rem; font-size: 0.48rem;
padding-left: 0.32rem; margin: 0.907rem 0 0.587rem;
text-indent: -0.32rem;
line-height: 0.533rem;
margin-top: 0.48rem;
} }
.inviteBind li:not(:first-child):nth-child(2) { .inviteBind li.tip {
color: inherit; font-size: 0.32rem;
font-size: 0.48rem; text-align: center;
margin-top: 0.853rem; 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 { .inviteBind li p {
...@@ -845,6 +867,20 @@ p { ...@@ -845,6 +867,20 @@ p {
width: 100%; 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 { .unbindState-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
......
web/view/doorlockUsers/inviteBind.html
...@@ -27,16 +27,17 @@ ...@@ -27,16 +27,17 @@
</div> </div>
<div class="content"> <div class="content">
<ul class="inviteBind"> <ul class="inviteBind">
<li> <li class="qrcode">
<canvas ref="qrcode"></canvas> <canvas ref="qrcode"></canvas>
<p v-show="qrCodeDisabled"> <p v-show="qrCodeDisabled">
<span>{{ $t('inviteBind.qrcodeExpireTip') }}</span> <span>{{ $t('inviteBind.qrcodeExpireTip') }}</span>
</p> </p>
</li> </li>
<li>{{ $t('inviteBind.title') }}</li> <li class="title">{{ $t('inviteBind.title') }}</li>
<li>{{ $t('inviteBind.cont1') }}</li> <li><span>&#xe6c1;</span>{{ $t('inviteBind.cont1') }}</li>
<li>{{ $t('inviteBind.cont2') }}</li> <li><span>&#xe6c0;</span>{{ $t('inviteBind.cont2') }}</li>
<li>{{ $t('inviteBind.cont3') }}</li> <li class="noBorder"><span>&#xe6c2;</span>{{ $t('inviteBind.cont3') }}</li>
<li class="tip">注：二维码有效时间为10分钟，过期请重新生成</li>
</ul> </ul>
<u-button :init-param="componentsConfig.qrcodeButton.initParam" v-on:u-button-tap="onQRcodeButtonTap"></u-button> <u-button :init-param="componentsConfig.qrcodeButton.initParam" v-on:u-button-tap="onQRcodeButtonTap"></u-button>
</div> </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