Skip to content

D
DoorLock
Commit 31c77ca3 by 朱建香
Options

Merge branch 'wangying' of http://192.168.2.91/gitlab/iot-project-js/doorlock into zjx 

# Conflicts:
#	History.md
#	web/lib/js/p.js
#	web/lib/less/addDevice/addDevice.less
#	web/lib/less/device/device.less
#	web/lib/less/public/animation.less
#	web/lib/less/public/core.less
#	web/lib/less/public/public.less
#	web/resources/font/iconfont.ttf
#	web/resources/lang/zh.json
#	web/view/addDevice/addDevice.css
#	web/view/device/device.css
parents 03b7b6ad 972bcb3f
Showing with 778 additions and 187 deletions
History.md
1.0.4 / 2017-09-20 1.0.6 / 2017-09-25
==================
* 1.修改智能指纹锁页面样式
1.0.5 / 2017-09-22
==================
* 1.修改引导页面样式
1.0.4 / 2017-09-20
================== ==================
* 1.修改生成绑定二维码页面样式 * 1.修改生成绑定二维码页面样式
......
dev/src/lang/zh.json
...@@ -81,8 +81,10 @@ ...@@ -81,8 +81,10 @@
"device":{ "device":{
"opendoorRecord": "开门记录", "opendoorRecord": "开门记录",
"securityAlarm": "安全报警", "securityAlarm": "安全报警",
"doorlockUser": "门锁用户",
"remoteOpendoor": "远程开门", "remoteOpendoor": "远程开门",
"hijackAlarm": "劫持报警", "hijackAlarm": "劫持报警",
"doorlockManage": "门锁管理",
"followTitle": "关注服务号", "followTitle": "关注服务号",
"followCont1": "关注 “i智信” 微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧", "followCont1": "关注 “i智信” 微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧",
"followCont2": "1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注", "followCont2": "1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注",
......
dev/src/view/device/v_index.js
...@@ -19,10 +19,14 @@ function init() { ...@@ -19,10 +19,14 @@ function init() {
valueOpendoorRecord: 1, valueOpendoorRecord: 1,
//安全报警 //安全报警
valueSecurityAlarm: 1, valueSecurityAlarm: 1,
//门锁用户
valueDoorlockUser: 1,
//远程开门 //远程开门
valueRemoteOpendoor: 1, valueRemoteOpendoor: 1,
//劫持报警 //劫持报警
valueHijackAlarm: 1, valueHijackAlarm: 1,
//门锁管理
valueDoorlockManage: 1,
activeFlag: true, activeFlag: true,
followShowFlag: false, followShowFlag: false,
//配置组件 //配置组件
...@@ -74,6 +78,10 @@ function init() { ...@@ -74,6 +78,10 @@ function init() {
onSecurityAlarmTap(){ onSecurityAlarmTap(){
securityAlarmTap(); securityAlarmTap();
}, },
//tap 门锁用户
onDoorlockUserTap(){
doorlockUserTap();
},
//tap 远程开门 //tap 远程开门
onRemoteOpendoorTap(){ onRemoteOpendoorTap(){
remoteOpendoorTap(); remoteOpendoorTap();
...@@ -131,6 +139,13 @@ function initComponentsConfig() { ...@@ -131,6 +139,13 @@ function initComponentsConfig() {
autoChange: false autoChange: false
} }
}, },
doorlockUserSwitch: {
initParam: {
class: 'custom-switch',
text: Vue.t('device.doorlockUser'),
autoChange: false
}
},
//远程开门switch 参数 //远程开门switch 参数
remoteOpendoorSwitch: { remoteOpendoorSwitch: {
initParam: { initParam: {
...@@ -147,6 +162,13 @@ function initComponentsConfig() { ...@@ -147,6 +162,13 @@ function initComponentsConfig() {
autoChange: false autoChange: false
} }
}, },
doorlockManageSwitch: {
initParam: {
class: 'custom-switch',
text: Vue.t('device.doorlockManage'),
autoChange: false
}
},
//确定 button 参数 //确定 button 参数
saveQRcodeButton: { saveQRcodeButton: {
initParam: { initParam: {
...@@ -191,6 +213,11 @@ function securityAlarmTap(){ ...@@ -191,6 +213,11 @@ function securityAlarmTap(){
}); });
} }
//tap 门锁用户
function doorlockUserTap(){
}
//tap 远程开门 //tap 远程开门
function remoteOpendoorTap(){ function remoteOpendoorTap(){
iot.navigator.openWindow({ iot.navigator.openWindow({
......
web/lib/js/p.js
This source diff could not be displayed because it is too large. You can view the blob instead.
web/lib/less/addDevice/addDevice.less
@import "../public/public.less"; @import "../public/public.less";
@import "../public/header.less"; @import "../public/header.less";
.u-text(); //添加设备
.noBottomGradient();
.u-button();
.addDevice li{
.u-commstatus-loading { margin: 10px;
height: 100%; border: 1px solid;/*no*/
background: rgba(0,0,0,0.7); border-radius: 5px;
} color: @ADDDEVICE-TEXT-COLOR;
font-size: @ADDDEVICE-TEXT-FONTSIZE;
.u-commstatus-loading-content { height: 214px;
position: absolute; line-height: 214px;
top: 50%; padding-left: 58px;
left: 50%; &:nth-child(1) img{
transform: translate(-50%,-50%); width: 90px;
text-align: center; height: 90px;
margin-right: 40px;
}
&:nth-child(2) img{
width: 135px;
height: 64px;
margin-right: 25px;
}
.tap_row(@ADDDEVICE-ROW-ACTIVE-BG);
} }
.u-commstatus-loading-button { //配置Wi-Fi
height: 44px; .wifiAddHelp{
width: 80%; .help();
line-height: 44px;
background: #e0dfdf;
text-align: center;
position: absolute;
bottom: 44px;
left: 50%;
transform: translateX(-50%);
} }
.u-button();
.u-commstatus-loading-status-0 .u-commstatus-loading-button { .custom-help-button,
display: none; .custom-button{
.button();
} }
.u-commstatus-loading-status-0 .u-commstatus-loading-content div ul li{ //连接Wi-Fi
opacity: 0.2; .inputBox(184px,22px,auto,"connectWifi.png",40px,77px 122px);
-webkit-animation: stretchdelay 1.5s infinite;
animation: stretchdelay 1.5s infinite; .wifi{
width: 100%;
display: table;
position: relative;
margin-top: 17px;
span{
.iconfont(@WIFI-ICON-FONTSIZE);
width: 48px;
padding-left: 9px;
display: table-cell;
vertical-align: text-bottom;
}
p{
padding: 8px 0;
display: table-cell;
color: @WIFI-TEXT-COLOR;
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
}
} }
.u-commstatus-loading-status-0 .u-commstatus-loading-content{ .u-text();
color: #00ffff;
}
.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader { .custom-password-text{
font-size: 10px; margin-top: 17px;
margin: 5em auto; input{
width: 1em; padding-top: 8px;
height: 1em; padding-bottom: 8px;
border-radius: 50%; padding-right: 70px;
position: relative; &[type = text] ~ .u-text-see:before{
text-indent: -9999em; content: '\e60e';
-webkit-animation: load4 1.3s infinite linear; }
animation: load4 1.3s infinite linear; &::-webkit-input-placeholder{
color: @CUSTOM-TEXT-COMPONENT-INPUT-PLACEHOLDER-COLOR;
}
}
.u-text-icon{
font-size: @CUSTOM-TEXT-COMPONENT-ICON-FONTSIZE;
width: 48px;
padding-left: 9px;
vertical-align: text-bottom;
}
.u-text-clear,
.u-text-see{
&:before{
font-family: iconfont;
color: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR;
font-size: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-FONTSIZE;
}
}
//x icon
.u-text-clear{
right: 37px;
&:before{
content: '\e601';
}
}
//眼睛 icon
.u-text-see{
right: 7px;
&:before{
content: '\e6b2';
}
}
&:after{
.white_gradient_border();
}
} }
@-webkit-keyframes load4 {
0%,
100% {
box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff;
}
12.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
25% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
37.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
50% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
62.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
75% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
}
87.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
}
}
@keyframes load4 { .errorTip{
0%, position: absolute;
100% { left: 0;
box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff; right: 0;
} .errorTip(22px);
12.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
25% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
37.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
50% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
62.5% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
}
75% {
box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
}
87.5% {
box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
}
} }
.u-commstatus-loading-status-0 .u-commstatus-loading-content .icon{ //配置Wi-Fi提醒
display: none; .remind{
width: 312px;
margin: 0 auto;
li{
color: @REMIND-TEXT-COLOR;
font-size: @REMIND-TEXT-FONTSIZE;
.transform(scale(0.7));
padding-left: 46px;
margin-bottom: 10px;
line-height: 1;
&:first-child{
padding-left: 0;
}
}
} }
.u-commstatus-loading-status-0 .u-commstatus-loading-button{ .custom-button{
display: none; .buttonPosition();
} }
.u-commstatus-loading-status-1 .u-commstatus-loading-content{ .u-comm-loading();
color: #00ffff;
}
.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon{ .custom-comm-loading();
font-family: SDSIconfont; \ No newline at end of file
font-size: 5em;
}
\ No newline at end of file
web/lib/less/device/device.less
@import "../public/public.less"; @import "../public/public.less";
@import "../public/header.less"; @import "../public/header.less";
.u-switch(); //远程开门
.inputBox{
width: 250px;
margin: 145px auto 50px;
padding-bottom: 40px;
}
.u-text(); .u-text();
.custom-text{
.textInput();
}
.errorTip{
position: absolute;
left: 0;
right: 0;
.errorTip();
}
.u-button(); .u-button();
.custom-marquee-top{ .custom-button{
width: 100%; .button();
height: 25px; }
overflow: hidden;
text-align: center; .u-comm-loading();
.custom-comm-loading();
//智能指纹锁
.u-carousel();
.custom-carousel{
.u-carousel-indicators{
text-align: left;
padding-left: 18px;
bottom: 16px;
li{
width: 8px;
height: 8px;
margin: 0 3px;
&.active{
opacity: 1;
background-color: @CUSTOM-CAROUSEL-COMPONENT-INDICATORS-ACTIVE-BG;
}
}
}
}
.topCpnt{
height: 256px;
position: relative;
padding-top: 34px;
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;/*no*/
.white_gradient_border();
}
}
.doorbellBg{
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto;
.linear-gradient(#00ffff,#fff,#fff,#fff,#00ffff);
background: linear-gradient(#00ffff,#fff,#fff,#fff,#00ffff);
padding: 3px;
position: relative;
.doorbellCircle{
width: 100%;
height: 100%;
background-color: #22313F;
border-radius: 50%;
.doorbell{
.margin_center(106px,106px);
border: 2px solid #00ffff;/*no*/
border-radius: 50%;
.bgImg("gray_door_icon.png");
background-position: center;
background-repeat: no-repeat;
background-color: #242635;
.background-size(80px 80px);
p{
position: absolute;
top: 30px;
left: 0;
right: 0;
margin: 0 auto;
.bgImgSize(40px,40px,"green_doorbell_icon.png",center,cover);
.transform-origin(top center);
}
}
}
.doorbellTip{
position: absolute;
bottom: 17px;
left: 0;
width: 100%;
text-align: center;
font-size: 12px;
span{
margin-right: 10px;
}
}
} }
.custom-marquee-top .u-marquee-text{ .batteryState{
display: inline-block; text-align: right;
padding-right: 22px;
line-height: 25px; font-size: 13px;
span{
.iconfont(24px);
color: #00ffff;
vertical-align: middle;
margin-right: 5px;
}
}
.title{
background-repeat: no-repeat;
background-position: 16px center;
.bgImg("white_message_icon.png");
font-size: 13px;
.background-size(20px 20px);
padding-left: 42px;
line-height: 1;
}
.u-marquee();
.custom-marquee{
height: 36px;
text-align: center; text-align: center;
position: relative;
.u-marquee-text{
line-height: 36px;
color: #6B6C73;
}
&:before{
content: '';
position: absolute;
top: 0;
left: 125px;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
}
} }
.marquee(5s,~"0,20px",~"0,-100%");
.deviceHandle{
position: absolute;
top: 300px;
bottom: 0;
left: 0;
width: 100%;
}
.switchGroup{
position: absolute;
top: 50px;
bottom: 0;
left: 0;
width: 100%;
.guoupRow{
height: 33.33333333%;
position: relative;
.col-xs-6{
height: 100%;
padding: 0;
.display-box();
.box-vertical-alignment();
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;/*no*/
.white_gradient_border();
}
}
&:before{
content: '';
position: absolute;
top: 30px;
bottom: 20px;
left: 0;
right: 0;
margin: auto;
width: 1px;/*no*/
.linear-gradient(@WHITE-GRADIENTBORDER-STARTCOLOR,@WHITE-GRADIENTBORDER-CENTERCOLOR,@WHITE-GRADIENTBORDER-ENDCOLOR);
background: linear-gradient(@WHITE-GRADIENTBORDER-STARTCOLOR,@WHITE-GRADIENTBORDER-CENTERCOLOR,@WHITE-GRADIENTBORDER-ENDCOLOR);
}
}
.u-switch();
//开门记录
.opendoorRecord .custom-switch .u-switch-handle:before{
.bgImg("opendoorRecord.png");
}
//安全报警
.securityAlarm .custom-switch .u-switch-handle:before{
.bgImg("securityAlarm.png");
}
//门锁用户
.doorlockUser .custom-switch .u-switch-handle:before{
.bgImg("doorlockUser.png");
}
//远程开门
.remoteOpendoor .custom-switch{
.u-switch-handle:before{
.bgImg("remoteOpendoor.png");
}
&.u-switch-on .u-switch-handle{
.animation(aperture 2s linear infinite);
&:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
.animation(aperture 2s linear -1s infinite);
}
}
}
.keyframes(aperture,{
0%{
.box-shadow(0 0 0 0 rgba(0,255,255,1));
}
100%{
.box-shadow(0 0 0 10px rgba(0,255,255,0));
}
});
//劫持报警
.hijackAlarm .custom-switch .u-switch-handle:before{
.bgImg("hijackAlarm.png");
}
//门锁管理
.doorlockManage .custom-switch .u-switch-handle:before{
.bgImg("doorlockManage.png");
}
.active .u-marquee-text{ .custom-switch{
animation: marqueeTop 5s linear infinite; width: 100%;
height: auto;
text-align: center;
.u-switch-handle{
position: relative;
top: 0;
left: 0;
.transform(none);
width: 55px;
height: 55px;
border-width: 1px;/*no*/
border-radius: 50%;
margin-right: 6px;
display: inline-block;
vertical-align: middle;
&:before{
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 27px;
height: 27px;
border-radius: 0;
background-color: @OPACITY;
.box-shadow(none);
background-repeat: no-repeat;
.background-size(54px 27px);
}
}
.u-switch-text{
font-size: @CUSTOM-SWITCH-COMPONENT-TEXT-FONTSIZE;
text-align: center;
display: inline-block;
vertical-align: middle;
}
&.u-switch-on,
&.u-switch-off{
.u-switch-handle{
border-color: inherit;
.box-shadow(none);
background-color: @CUSTOM-SWITCH-COMPONENT-HANDLE-BG;
&:before{
left: 0;
}
}
}
&.u-switch-on{
color: @CUSTOM-SWITCH-COMPONENT-ONSTATE-COLOR;
.u-switch-handle:before{
background-position: 0 0;
}
}
&.u-switch-off,
&.disabled{
opacity: 1;
color: @CUSTOM-SWITCH-COMPONENT-OFFSTATE-COLOR;
.u-switch-handle:before{
background-position: -27px 0;
}
}
} }
@keyframes marqueeTop{ .newMsg .custom-switch:before{
from{ transform: translateY(25px);} content: '\e681';
to{ transform: translateY(-100%);} position: absolute;
top: 0;
right: 52px;
.iconfont(@NEWMSG-ICON-FONTSIZE);
color: @NEWMSG-ICON-COLOR;
z-index: 3;
} }
.u-carousel(); .followServiceNumber-dialog{
\ No newline at end of file .mask(1051,rgba(0, 0, 0, 0.9));
.followServiceNumber-dialog-box{
ul{
margin: 35px 0 -15px;
li{
font-size: 15px;
text-align: center;
line-height: 18px;
margin-bottom: 40px;
&:first-child{
font-size: 19px;
margin-bottom: 60px;
}
&:nth-child(3){
color: #00ffff;
margin-bottom: 20px;
}
p{
width: 200px;
height: 200px;
border: 1px solid #91929a;/*no*/
margin: 0 auto;
}
span{
color: #FFF54E;
}
}
}
.linkText();
}
}
\ No newline at end of file
web/lib/less/public/animation.less
@import "./variables.less"; @import "./variables.less";
@import "./mixins.less"; @import "./mixins.less";
\ No newline at end of file
.marquee(@time,@fromValue,@toValue){
.active .u-marquee-text{
.animation(marquee @time linear infinite);
color: #91929a;
}
.keyframes(marquee,{
from{
.transform(translate(@fromValue));
}
to{
.transform(translate(@toValue));
}
});
}
\ No newline at end of file
web/lib/less/public/public.less
...@@ -5,9 +5,10 @@ ...@@ -5,9 +5,10 @@
//loading //loading
.u-loading{ .u-loading{
.mask(); .mask(1050);
.u-loading-box{ .u-loading-box{
.transform_center(); .transformV_center(left,0);
right: 0;
.u-loading-icon{ .u-loading-icon{
width: 30px;/*no*/ width: 30px;/*no*/
height: 30px;/*no*/ height: 30px;/*no*/
...@@ -16,7 +17,7 @@ ...@@ -16,7 +17,7 @@
.bgImg("white_loading_icon.png"); .bgImg("white_loading_icon.png");
.background-size(cover); .background-size(cover);
margin: 0 auto; margin: 0 auto;
.animation(uLoading 1s steps(12, end) infinite); .animation(loading 1s steps(12, end) infinite);
} }
.u-loading-text{ .u-loading-text{
color: @LOADING-COMPONENT-TEXT-COLOR; color: @LOADING-COMPONENT-TEXT-COLOR;
...@@ -26,7 +27,7 @@ ...@@ -26,7 +27,7 @@
} }
} }
.keyframes(uLoading,{ .keyframes(loading,{
0%{ 0%{
.transform(rotate3d(0,0,1,0deg)); .transform(rotate3d(0,0,1,0deg));
} }
...@@ -35,7 +36,7 @@ ...@@ -35,7 +36,7 @@
} }
}); });
//.custom-loading(); .custom-loading();
//弹出框 //弹出框
.u-dialog{ .u-dialog{
...@@ -235,7 +236,7 @@ ...@@ -235,7 +236,7 @@
} }
.u-text-icon{ .u-text-icon{
.iconfont(@TEXT-COMPONENT-ICON-FONTSIZE); .iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
width: 44px; width: 42px;
padding-left: 17px; padding-left: 17px;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
...@@ -696,51 +697,199 @@ ...@@ -696,51 +697,199 @@
//图片轮播 //图片轮播
.u-carousel(){ .u-carousel(){
.u-carousel{ .u-carousel{
width: 250px; width: 100%;
height: 166px; height: 250px;
overflow: hidden; overflow: hidden;
margin: 0 auto;
position: relative; position: relative;
} .u-carousel-inner{
width: 100%;
.u-carousel .u-carousel-inner{
width: 100%;
height: 100%;
white-space: nowrap; white-space: nowrap;
font-size: 0; font-size: 0;
.u-carousel-item{
display: inline-block;
width: 100%;
.u-carousel-image{
width: 100%;
}
}
}
.u-carousel-indicators{
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
text-align: center;
font-size: 0;
li{
width: 10px;
height: 10px;
background-color: @CAROUSEL-COMPONENT-INDICATORS-BG;
border-radius: 50%;
margin: 0 5px;
display: inline-block;
&.active{
opacity: 0.6;
}
}
}
} }
}
.u-carousel .u-carousel-inner .u-carousel-item{ //走马灯
display: inline-block; .u-marquee(){
} .u-marquee{
.u-carousel .u-carousel-inner .u-carousel-item .u-carousel-image{
width: 100%; width: 100%;
height: 25px;
overflow: hidden;
.u-marquee-text{
display: inline-block;
line-height: 25px;
}
} }
}
.u-carousel-indicators{ .u-comm-loading(){
position: absolute; .u-comm-loading{
bottom: 10px; .mask(1050);
left: 0; .u-comm-loading-content{
width: 100%; .transformV_center(left,0);
text-align: center; right: 0;
font-size: 0; .loader{
} font-size: 16px;
margin: 0 auto;
.u-carousel-indicators li{ width: 3.750em;
width: 10px; height: 3.750em;
height: 10px; position: relative;
background-color: #fff; &:before{
border-radius: 50%; content: '';
opacity: 0.6; .margin_center(0.500em,0.500em);
margin: 0 5px; border-radius: 50%;
display: inline-block; .transform(translateZ(0) scale(0.55));
} }
}
.u-carousel-indicators li.active{ .icon{
opacity: 1; font-size: 16px;
margin: 0 auto;
width: 3.750em;
height: 3.750em;
position: relative;
&:before{
.transform_center();
.iconfont(4.125em);
}
}
.u-comm-loading-text{
font-size: 16px;
margin-top: 20px;
text-align: center;
}
}
.u-comm-loading-button{
position: absolute;
bottom: 65px;
left: 0;
right: 0;
width: 240px;
color: @BUTTON-COMPONENT-COLOR;
font-size: inherit;
background-color: @BUTTON-COMPONENT-BG;
border-radius: 20px;
text-align: center;
line-height: 1;
margin: 0 auto;
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-comm-loading-status-0{
.u-comm-loading-content{
color: #00ffff;
.loader{
display: block;
&:before{
.animation(commLoading 1.3s infinite linear);
}
}
.icon{
display: none;
}
}
.u-comm-loading-button{
display: none;
}
}
//绑定成功
&.u-comm-loading-status-1{
.u-comm-loading-content{
color: #00ffff;
.loader{
display: none;
}
.icon{
display: block;
&:before{
content: '\e800';
}
}
}
.u-comm-loading-button{
display: block;
}
}
//绑定失败
&.u-comm-loading-status-2{
.u-comm-loading-content{
color: #fff;
.loader{
display: none;
}
.icon{
display: block;
&:before{
content: '\e646';
}
}
}
.u-comm-loading-button{
display: block;
}
}
} }
.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(){
......
web/resources/lang/zh.json
{"loading":"请耐心等待...","scroll":{"clickToLoadMore":"点击加载更多","loading":"loading..."},"btn":{"confirm":"确定","login":"登录","getCode":"获取验证码","register":"注册","logout":"退出系统","save":"保存","qrcode":"生成二维码","wifiAdd":"开始配置Wi-Fi","connect":"连接","bindUser":"绑定姓名","bind":"我要绑定","reBound":"请重新绑定","saveQRcode":"保存二维码到相册"},"dialog":{"confirm":"确认","cancel":"取消"},"title":{"login":"登录","register":"注册","forgetPassword":"忘记密码","device":"智能指纹锁","opendoorRecord":"开门记录","alarmInfo":"报警信息","remoteOpendoor":"远程开门","hijackRecord":"劫持记录","doorlockManage":"门锁管理","editName":"修改名称","qrcode":"生成绑定二维码","addDevice":"添加设备","scanCodeAdd":"扫描绑定设备","wifiAddHelp":"配置Wi-Fi","wifiAdd":"连接Wi-Fi","bindUserHelp":"ID-姓名绑定","bindUser":"绑定用户","userList":"用户列表"},"footer":{"guide":"指纹改变生活","recordList":"记录时间以锁为准"},"login":{"telInputTip":"请输入手机号","passwordInputTip":"请输入密码","register":"快速注册","forgetPassword":"忘记密码","error":{"telNull":"请输入手机号","passWordNull":"请输入密码"}},"register":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"forgetPassword":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"device":{"opendoorRecord":"开门记录","securityAlarm":"安全报警","remoteOpendoor":"远程开门","hijackAlarm":"劫持报警","followTitle":"关注服务号","followCont1":"关注“i智信”微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧","followCont2":"1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注","laterFollow":"稍后关注"},"opendoorRecord":{"noRecordTip":"暂无记录"},"alarmInfo":{"noInfoTip":"暂无信息"},"remoteOpendoor":{"passwordInputTip":"请输入远程开门密码","error":{}},"hijackRecord":{"noRecordTip":"暂无记录"},"doorlockManage":{"noDeviceTip":"暂无设备","deleteDialogTip":"<span>{0}</span>将被删除","logoutDialogTip":"确定要退出系统吗？"},"editName":{"nameInputTip":"请输入门锁名称","error":{}},"qrcode":{"helpTitle":"注意事项：","helpCont1":"1.仅超级管理员（通过Wi-Fi配网绑定的用户为超级管理员）可以生成绑定二维码","helpCont2":"2.二维码有效时间为10分钟且只能使用一次","helpCont3":"3.用户只需要扫描该二维码即可绑定指纹锁","helpCont4":"4.绑定失败则需要重新生成二维码进行绑定"},"addDevice":{"scanCodeAdd":"扫描绑定设备","wifiAdd":"配置Wi-Fi"},"wifiAddHelp":{"helpTitle":"配置Wi-Fi说明：","helpCont1":"1.按下指纹锁背面的按钮，进入主菜单，选择Wi-Fi设置→配置Wi-Fi，门锁进入等待配网状态","helpCont2":"2.点击页面“开始配置Wi-Fi”按钮，进入Wi-Fi配网画面","helpCont3":"3.输入Wi-Fi密码，点击“l连接”按钮，等待锁端相应，直至配网成功","helpCont4":"（提示：如果指纹锁已经绑定过用户，重新绑定成功后会清除之前所有绑定信息）"},"wifiAdd":{"passwordInputTip":"请输入Wi-Fi密码","remindTitle":"配置Wi-Fi提醒：","remindCont1":"1. 请确保Wi-Fi信号良好","remindCont2":"2. 本产品暂不支持5GHz无线网络","error":{}},"bindUserHelp":{"helpTitle":"配对姓名说明：","helpCont1":"1.在指纹锁上录入指纹、密码、卡并获得相应ID","helpCont2":"2.通过姓名绑定将该ID绑定对应用户姓名","helpCont3":"3.绑定成功后，开门记录中将会显示已绑定的用户姓名","helpCont4":"4.用户姓名信息只保存在APP端，不影响锁端设置","boundUser":"查看已绑定ID姓名"},"bindUser":{"editHeadTip":"点击编辑用户头像","nameTitle":"姓名","fingerprintIDTitle":"指纹ID","passwordIDTitle":"密码ID","ICCardIDTitle":"IC卡ID","requiredInputTip":"（必填）","optionalInputTip":"（选填）","error":{}},"userList":{"name":"姓名：{0}","id":"指纹ID:<span>{0}</span>密码ID:<span>{1}</span>IC卡ID:<span>{2}</span>","noUserTip":"暂无用户"},"commstatusLoading":{"connectSuccess":"Wi-Fi连接成功，正在绑定...","bindSuccess":"绑定成功","bindFailed":"绑定失败"}} {"loading":"loading...","scroll":{"clickToLoadMore":"点击加载更多","loading":"loading..."},"btn":{"confirm":"确定","guideLogin":"账号/密码登录","login":"登录","getCode":"获取验证码","register":"注册","logout":"退出系统","save":"保存","qrcode":"生成二维码","wifiAdd":"开始配置Wi-Fi","connect":"连接","bindUser":"绑定姓名","bind":"我要绑定","reBound":"请重新绑定","saveQRcode":"保存二维码到相册"},"dialog":{"confirm":"确认","cancel":"取消"},"title":{"login":"登录","register":"注册","forgetPassword":"忘记密码","device":"智能指纹锁","opendoorRecord":"开门记录","alarmInfo":"报警信息","remoteOpendoor":"远程开门","hijackRecord":"劫持记录","doorlockManage":"门锁管理","editName":"修改名称","qrcode":"生成绑定二维码","addDevice":"添加设备","scanCodeAdd":"扫描绑定设备","wifiAddHelp":"配置Wi-Fi","wifiAdd":"连接Wi-Fi","bindUserHelp":"ID-姓名绑定","bindUser":"绑定用户","userList":"用户列表"},"guide":{"footer":"指纹改变生活"},"login":{"telInputTip":"请输入手机号","passwordInputTip":"请输入密码","register":"快速注册","forgetPassword":"忘记密码","error":{"telNull":"请输入手机号","passWordNull":"请输入密码"}},"register":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"forgetPassword":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"device":{"opendoorRecord":"开门记录","securityAlarm":"安全报警","doorlockUser":"门锁用户","remoteOpendoor":"远程开门","hijackAlarm":"劫持报警","doorlockManage":"门锁管理","followTitle":"关注服务号","followCont1":"关注 “i智信” 微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧","followCont2":"1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注","laterFollow":"稍后关注"},"opendoorRecord":{"noRecordTip":"暂无记录"},"alarmInfo":{"noInfoTip":"暂无信息"},"remoteOpendoor":{"passwordInputTip":"请输入远程开门密码","error":{}},"hijackRecord":{"noRecordTip":"暂无记录"},"doorlockManage":{"noDeviceTip":"暂无设备","deleteDialogTip":"<span>{0}</span>将被删除","logoutDialogTip":"确定要退出系统吗？"},"editName":{"nameInputTip":"请输入门锁名称","error":{}},"qrcode":{"helpTitle":"注意事项：","helpCont1":"1.仅超级管理员（通过Wi-Fi配网绑定的用户为超级管理员）可以生成绑定二维码","helpCont2":"2.二维码有效时间为10分钟且只能使用一次","helpCont3":"3.用户只需要扫描该二维码即可绑定指纹锁","helpCont4":"4.绑定失败则需要重新生成二维码进行绑定"},"addDevice":{"scanCodeAdd":"扫描绑定设备","wifiAdd":"配置Wi-Fi"},"wifiAddHelp":{"helpTitle":"配置Wi-Fi说明：","helpCont1":"1.按下指纹锁背面的按钮，进入主菜单，选择Wi-Fi设置→配置Wi-Fi，门锁进入等待配网状态","helpCont2":"2.点击页面 “开始配置Wi-Fi” 按钮，进入Wi-Fi配网画面","helpCont3":"3.输入Wi-Fi密码，点击 “l连接” 按钮，等待锁端相应，直至配网成功","helpCont4":"（提示：如果指纹锁已经绑定过用户，重新绑定成功后会清除之前所有绑定信息）"},"wifiAdd":{"passwordInputTip":"请输入Wi-Fi密码","remindTitle":"配置Wi-Fi提醒：","remindCont1":"1. 请确保Wi-Fi信号良好","remindCont2":"2. 本产品暂不支持5GHz无线网络","error":{}},"bindUserHelp":{"helpTitle":"配对姓名说明：","helpCont1":"1.在指纹锁上录入指纹、密码、卡并获得相应ID","helpCont2":"2.通过姓名绑定将该ID绑定对应用户姓名","helpCont3":"3.绑定成功后，开门记录中将会显示已绑定的用户姓名","helpCont4":"4.用户姓名信息只保存在APP端，不影响锁端设置","boundUser":"查看已绑定ID姓名"},"bindUser":{"editHeadTip":"点击编辑用户头像","nameTitle":"姓名","fingerprintIDTitle":"指纹ID","passwordIDTitle":"密码ID","ICCardIDTitle":"IC卡ID","requiredInputTip":"（必填）","optionalInputTip":"（选填）","error":{}},"userList":{"name":"姓名：{0}","id":"指纹ID:<span>{0}</span>密码ID:<span>{1}</span>IC卡ID:<span>{2}</span>","noUserTip":"暂无用户"},"commstatusLoading":{"connectSuccess":"Wi-Fi连接成功，正在绑定...","bindSuccess":"绑定成功","bindFailed":"绑定失败"}}
\ No newline at end of file \ No newline at end of file
web/view/device/index.html
...@@ -21,29 +21,54 @@ ...@@ -21,29 +21,54 @@
<div id="app" v-cloak> <div id="app" v-cloak>
<div class="header"> <div class="header">
<v-touch tag="span" class="header-left icon" v-on:tap="onDoorlockManageTap">&#xe66f;</v-touch>
<p>{{ $t('title.device') }}</p> <p>{{ $t('title.device') }}</p>
<v-touch tag="span" class="header-right icon" v-on:tap="onDoorlockManageTap">&#xe61d;</v-touch>
</div> </div>
<div class="content"> <div class="content">
<u-carousel :init-param="componentsConfig.carousel.initParam"></u-carousel> <div class="topCpnt">
<div class="doorbellBg active">
<div class="doorbellCircle">
<div class="doorbell">
<p></p>
</div>
</div>
<div class="doorbellTip"><span>17:30</span>门铃响了</div>
</div>
<p class="batteryState"><span>&#xe629;</span>100%</p>
</div>
<div class="deviceHandle"> <div class="deviceHandle">
<p class="title">门锁最新消息</p>
<u-marquee :init-param="componentsConfig.marquee.initParam" :active="activeFlag"></u-marquee> <u-marquee :init-param="componentsConfig.marquee.initParam" :active="activeFlag"></u-marquee>
<div class="switchGroup"> <div class="switchGroup">
<!-- 开门记录 --> <div class="guoupRow">
<div class="col-xs-6 opendoorRecord newMsg"> <!-- 开门记录 -->
<u-switch :value="valueOpendoorRecord" :init-param="componentsConfig.opendoorRecordSwitch.initParam" v-on:u-switch-tap="onOpendoorRecordTap"></u-switch> <div class="col-xs-6 opendoorRecord">
</div> <u-switch :value="valueOpendoorRecord" :init-param="componentsConfig.opendoorRecordSwitch.initParam" v-on:u-switch-tap="onOpendoorRecordTap"></u-switch>
<!-- 安全报警 --> </div>
<div class="col-xs-6 securityAlarm newMsg"> <!-- 安全报警 -->
<u-switch :value="valueSecurityAlarm" :init-param="componentsConfig.securityAlarmSwitch.initParam" v-on:u-switch-tap="onSecurityAlarmTap"></u-switch> <div class="col-xs-6 securityAlarm">
<u-switch :value="valueSecurityAlarm" :init-param="componentsConfig.securityAlarmSwitch.initParam" v-on:u-switch-tap="onSecurityAlarmTap"></u-switch>
</div>
</div> </div>
<!-- 远程开门 --> <div class="guoupRow">
<div class="col-xs-6 remoteOpendoor newMsg"> <!-- 门锁用户 -->
<u-switch :value="valueRemoteOpendoor" :init-param="componentsConfig.remoteOpendoorSwitch.initParam" v-on:u-switch-tap="onRemoteOpendoorTap"></u-switch> <div class="col-xs-6 doorlockUser">
<u-switch :value="valueDoorlockUser" :init-param="componentsConfig.doorlockUserSwitch.initParam" v-on:u-switch-tap="onDoorlockUserTap"></u-switch>
</div>
<!-- 劫持报警 -->
<div class="col-xs-6 hijackAlarm">
<u-switch :value="valueHijackAlarm" :init-param="componentsConfig.hijackAlarmSwitch.initParam" v-on:u-switch-tap="onHijackAlarmTap"></u-switch>
</div>
</div> </div>
<!-- 劫持报警 --> <div class="guoupRow">
<div class="col-xs-6 hijackAlarm newMsg"> <!-- 远程开门 -->
<u-switch :value="valueHijackAlarm" :init-param="componentsConfig.hijackAlarmSwitch.initParam" v-on:u-switch-tap="onHijackAlarmTap"></u-switch> <div class="col-xs-6 remoteOpendoor">
<u-switch :value="valueRemoteOpendoor" :init-param="componentsConfig.remoteOpendoorSwitch.initParam" v-on:u-switch-tap="onRemoteOpendoorTap"></u-switch>
</div>
<!-- 门锁管理 -->
<div class="col-xs-6 doorlockManage">
<u-switch :value="valueDoorlockManage" :init-param="componentsConfig.doorlockManageSwitch.initParam" v-on:u-switch-tap="onDoorlockManageTap"></u-switch>
</div>
</div> </div>
</div> </div>
</div> </div>
......
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