Skip to content

D
DoorLock
Commit 972bcb3f by wangying
Options

1.0.6 / 2017-09-25 

==================
 * 1.修改智能指纹锁页面样式
parent 658ddaa3
Showing with 444 additions and 160 deletions
History.md
1.0.5 / 2017-09-22
1.0.6 / 2017-09-25
==================
* 1.修改智能指纹锁页面样式
1.0.5 / 2017-09-22
==================
* 1.修改引导页面样式
......
dev/src/lang/zh.json
......@@ -80,8 +80,10 @@
"device":{
"opendoorRecord": "开门记录",
"securityAlarm": "安全报警",
"doorlockUser": "门锁用户",
"remoteOpendoor": "远程开门",
"hijackAlarm": "劫持报警",
"doorlockManage": "门锁管理",
"followTitle": "关注服务号",
"followCont1": "关注 “i智信” 微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧",
"followCont2": "1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注",
......
dev/src/view/device/v_index.js
......@@ -19,10 +19,14 @@ function init() {
valueOpendoorRecord: 1,
//安全报警
valueSecurityAlarm: 1,
//门锁用户
valueDoorlockUser: 1,
//远程开门
valueRemoteOpendoor: 1,
//劫持报警
valueHijackAlarm: 1,
//门锁管理
valueDoorlockManage: 1,
activeFlag: true,
followShowFlag: false,
//配置组件
......@@ -73,6 +77,10 @@ function init() {
onSecurityAlarmTap(){
securityAlarmTap();
},
//tap 门锁用户
onDoorlockUserTap(){
doorlockUserTap();
},
//tap 远程开门
onRemoteOpendoorTap(){
remoteOpendoorTap();
......@@ -130,6 +138,13 @@ function initComponentsConfig() {
autoChange: false
}
},
doorlockUserSwitch: {
initParam: {
class: 'custom-switch',
text: Vue.t('device.doorlockUser'),
autoChange: false
}
},
//远程开门switch 参数
remoteOpendoorSwitch: {
initParam: {
......@@ -146,6 +161,13 @@ function initComponentsConfig() {
autoChange: false
}
},
doorlockManageSwitch: {
initParam: {
class: 'custom-switch',
text: Vue.t('device.doorlockManage'),
autoChange: false
}
},
//确定 button 参数
saveQRcodeButton: {
initParam: {
......@@ -190,6 +212,11 @@ function securityAlarmTap(){
});
}
//tap 门锁用户
function doorlockUserTap(){
}
//tap 远程开门
function remoteOpendoorTap(){
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
......@@ -145,6 +145,6 @@
.buttonPosition();
}
.u-commstatus-loading();
.u-comm-loading();
.custom-commstatus-loading();
\ No newline at end of file
.custom-comm-loading();
\ No newline at end of file
web/lib/less/device/device.less
......@@ -27,9 +27,9 @@
.button();
}
.u-commstatus-loading();
.u-comm-loading();
.custom-commstatus-loading();
.custom-comm-loading();
//智能指纹锁
.u-carousel();
......@@ -51,20 +51,105 @@
}
}
.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;
}
}
}
.batteryState{
text-align: right;
padding-right: 22px;
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: 20px;
height: 36px;
text-align: center;
position: relative;
.u-marquee-text{
line-height: 20px;
line-height: 36px;
color: #6B6C73;
}
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
left: 125px;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
......@@ -84,7 +169,7 @@
.deviceHandle{
position: absolute;
top: 294px;
top: 300px;
bottom: 0;
left: 0;
width: 100%;
......@@ -92,39 +177,40 @@
.switchGroup{
position: absolute;
top: 20px;
top: 50px;
bottom: 0;
left: 0;
width: 100%;
.col-xs-6{
height: 50%;
padding: 0;
.display-box();
.box-horizontal-alignment();
.box-vertical-alignment();
.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: 0;
bottom: 0;
left: 0;
width: 100%;
margin: auto;
height: 1px;/*no*/
.blue_gradient_border();
}
&:after{
content: '';
position: absolute;
top: 0;
top: 30px;
bottom: 20px;
left: 0;
right: 0;
height: 100%;
margin: auto;
width: 1px;/*no*/
.linear-gradient(@BLUE-GRADIENTBORDER-STARTCOLOR,@BLUE-GRADIENTBORDER-CENTERCOLOR,@BLUE-GRADIENTBORDER-ENDCOLOR);
background: linear-gradient(@BLUE-GRADIENTBORDER-STARTCOLOR,@BLUE-GRADIENTBORDER-CENTERCOLOR,@BLUE-GRADIENTBORDER-ENDCOLOR);
.linear-gradient(@WHITE-GRADIENTBORDER-STARTCOLOR,@WHITE-GRADIENTBORDER-CENTERCOLOR,@WHITE-GRADIENTBORDER-ENDCOLOR);
background: linear-gradient(@WHITE-GRADIENTBORDER-STARTCOLOR,@WHITE-GRADIENTBORDER-CENTERCOLOR,@WHITE-GRADIENTBORDER-ENDCOLOR);
}
}
......@@ -140,6 +226,11 @@
.bgImg("securityAlarm.png");
}
//门锁用户
.doorlockUser .custom-switch .u-switch-handle:before{
.bgImg("doorlockUser.png");
}
//远程开门
.remoteOpendoor .custom-switch{
.u-switch-handle:before{
......@@ -174,9 +265,15 @@
.bgImg("hijackAlarm.png");
}
//门锁管理
.doorlockManage .custom-switch .u-switch-handle:before{
.bgImg("doorlockManage.png");
}
.custom-switch{
width: 100%;
height: auto;
text-align: center;
.u-switch-handle{
position: relative;
top: 0;
......@@ -186,7 +283,9 @@
height: 55px;
border-width: 1px;/*no*/
border-radius: 50%;
margin: 0 auto;
margin-right: 6px;
display: inline-block;
vertical-align: middle;
&:before{
top: 0;
bottom: 0;
......@@ -203,8 +302,9 @@
}
.u-switch-text{
font-size: @CUSTOM-SWITCH-COMPONENT-TEXT-FONTSIZE;
margin-top: 15px;
text-align: center;
display: inline-block;
vertical-align: middle;
}
&.u-switch-on,
&.u-switch-off{
......
web/lib/less/public/animation.less
......@@ -4,6 +4,7 @@
.marquee(@time,@fromValue,@toValue){
.active .u-marquee-text{
.animation(marquee @time linear infinite);
color: #91929a;
}
.keyframes(marquee,{
......
web/lib/less/public/core.less
......@@ -297,10 +297,10 @@ p{
});
}
.custom-commstatus-loading(){
.custom-commstatus-loading{
.custom-comm-loading(){
.custom-comm-loading{
background-color: @CUSTOM-BACKDROP-BG;
.u-commstatus-loading-button{
.u-comm-loading-button{
bottom: 134px;
width: 100px;
color: #00ffff;
......
web/lib/less/public/public.less
......@@ -748,10 +748,10 @@
}
}
.u-commstatus-loading(){
.u-commstatus-loading{
.u-comm-loading(){
.u-comm-loading{
.mask(1050);
.u-commstatus-loading-content{
.u-comm-loading-content{
.transformV_center(left,0);
right: 0;
.loader{
......@@ -778,13 +778,13 @@
.iconfont(4.125em);
}
}
.u-commstatus-loading-text{
.u-comm-loading-text{
font-size: 16px;
margin-top: 20px;
text-align: center;
}
}
.u-commstatus-loading-button{
.u-comm-loading-button{
position: absolute;
bottom: 65px;
left: 0;
......@@ -808,26 +808,26 @@
}
}
//loading
&.u-commstatus-loading-status-0{
.u-commstatus-loading-content{
&.u-comm-loading-status-0{
.u-comm-loading-content{
color: #00ffff;
.loader{
display: block;
&:before{
.animation(commstatusLoading 1.3s infinite linear);
.animation(commLoading 1.3s infinite linear);
}
}
.icon{
display: none;
}
}
.u-commstatus-loading-button{
.u-comm-loading-button{
display: none;
}
}
//绑定成功
&.u-commstatus-loading-status-1{
.u-commstatus-loading-content{
&.u-comm-loading-status-1{
.u-comm-loading-content{
color: #00ffff;
.loader{
display: none;
......@@ -839,13 +839,13 @@
}
}
}
.u-commstatus-loading-button{
.u-comm-loading-button{
display: block;
}
}
//绑定失败
&.u-commstatus-loading-status-2{
.u-commstatus-loading-content{
&.u-comm-loading-status-2{
.u-comm-loading-content{
color: #fff;
.loader{
display: none;
......@@ -857,13 +857,13 @@
}
}
}
.u-commstatus-loading-button{
.u-comm-loading-button{
display: block;
}
}
}
.keyframes(commstatusLoading,{
.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);
......
web/resources/lang/zh.json
{"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":"安全报警","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":"绑定失败"}}
\ No newline at end of file
{"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
web/view/addDevice/addDevice.css
......@@ -762,7 +762,7 @@ p {
right: 0;
}
.u-commstatus-loading {
.u-comm-loading {
position: fixed;
top: 0;
left: 0;
......@@ -772,7 +772,7 @@ p {
background-color: rgba(0, 0, 0, 0.8);
}
.u-commstatus-loading .u-commstatus-loading-content {
.u-comm-loading .u-comm-loading-content {
position: absolute;
top: 50%;
left: 0;
......@@ -781,7 +781,7 @@ p {
right: 0;
}
.u-commstatus-loading .u-commstatus-loading-content .loader {
.u-comm-loading .u-comm-loading-content .loader {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
......@@ -789,7 +789,7 @@ p {
position: relative;
}
.u-commstatus-loading .u-commstatus-loading-content .loader:before {
.u-comm-loading .u-comm-loading-content .loader:before {
content: '';
position: absolute;
top: 0;
......@@ -804,7 +804,7 @@ p {
transform: translateZ(0) scale(0.55);
}
.u-commstatus-loading .u-commstatus-loading-content .icon {
.u-comm-loading .u-comm-loading-content .icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
......@@ -812,7 +812,7 @@ p {
position: relative;
}
.u-commstatus-loading .u-commstatus-loading-content .icon:before {
.u-comm-loading .u-comm-loading-content .icon:before {
position: absolute;
top: 50%;
left: 50%;
......@@ -824,13 +824,13 @@ p {
line-height: 1;
}
.u-commstatus-loading .u-commstatus-loading-content .u-commstatus-loading-text {
.u-comm-loading .u-comm-loading-content .u-comm-loading-text {
font-size: 0.427rem;
margin-top: 0.533rem;
text-align: center;
}
.u-commstatus-loading .u-commstatus-loading-button {
.u-comm-loading .u-comm-loading-button {
position: absolute;
bottom: 1.733rem;
left: 0;
......@@ -849,76 +849,76 @@ p {
background-clip: padding-box;
}
.u-commstatus-loading .u-commstatus-loading-button:active {
.u-comm-loading .u-comm-loading-button:active {
background-color: #0065ff;
}
.u-commstatus-loading .u-commstatus-loading-button.disabled {
.u-comm-loading .u-comm-loading-button.disabled {
background-color: #bbb;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content {
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content {
color: #00ffff;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader {
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .loader {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader:before {
-webkit-animation: commstatusLoading 1.3s infinite linear;
animation: commstatusLoading 1.3s infinite linear;
.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-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .icon {
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .icon {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-button {
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-button {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content {
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content {
color: #00ffff;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .loader {
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .loader {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon {
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .icon {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon:before {
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .icon:before {
content: '\e800';
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-button {
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-button {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content {
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content {
color: #fff;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .loader {
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .loader {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .icon {
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .icon {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .icon:before {
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .icon:before {
content: '\e646';
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-button {
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-button {
display: block;
}
@-webkit-keyframes commstatusLoading {
@-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;
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;
......@@ -960,7 +960,7 @@ p {
}
}
@keyframes commstatusLoading {
@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;
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;
......@@ -1002,11 +1002,11 @@ p {
}
}
.custom-commstatus-loading {
.custom-comm-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-commstatus-loading .u-commstatus-loading-button {
.custom-comm-loading .u-comm-loading-button {
bottom: 3.573rem;
width: 2.667rem;
color: #00ffff;
......@@ -1015,7 +1015,7 @@ p {
padding: 0.48rem 0 0.133rem;
}
.custom-commstatus-loading .u-commstatus-loading-button:after {
.custom-comm-loading .u-comm-loading-button:after {
content: '';
position: absolute;
bottom: 0;
......@@ -1026,10 +1026,10 @@ p {
background: linear-gradient(to right, #242635, #00ffff, #242635);
}
.custom-commstatus-loading .u-commstatus-loading-button:active {
.custom-comm-loading .u-comm-loading-button:active {
background-color: transparent;
}
.custom-commstatus-loading .u-commstatus-loading-button.disabled {
.custom-comm-loading .u-comm-loading-button.disabled {
background-color: transparent;
}
\ No newline at end of file
web/view/device/device.css
......@@ -631,7 +631,7 @@ p {
color: #999;
}
.u-commstatus-loading {
.u-comm-loading {
position: fixed;
top: 0;
left: 0;
......@@ -641,7 +641,7 @@ p {
background-color: rgba(0, 0, 0, 0.8);
}
.u-commstatus-loading .u-commstatus-loading-content {
.u-comm-loading .u-comm-loading-content {
position: absolute;
top: 50%;
left: 0;
......@@ -650,7 +650,7 @@ p {
right: 0;
}
.u-commstatus-loading .u-commstatus-loading-content .loader {
.u-comm-loading .u-comm-loading-content .loader {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
......@@ -658,7 +658,7 @@ p {
position: relative;
}
.u-commstatus-loading .u-commstatus-loading-content .loader:before {
.u-comm-loading .u-comm-loading-content .loader:before {
content: '';
position: absolute;
top: 0;
......@@ -673,7 +673,7 @@ p {
transform: translateZ(0) scale(0.55);
}
.u-commstatus-loading .u-commstatus-loading-content .icon {
.u-comm-loading .u-comm-loading-content .icon {
font-size: 0.427rem;
margin: 0 auto;
width: 3.750em;
......@@ -681,7 +681,7 @@ p {
position: relative;
}
.u-commstatus-loading .u-commstatus-loading-content .icon:before {
.u-comm-loading .u-comm-loading-content .icon:before {
position: absolute;
top: 50%;
left: 50%;
......@@ -693,13 +693,13 @@ p {
line-height: 1;
}
.u-commstatus-loading .u-commstatus-loading-content .u-commstatus-loading-text {
.u-comm-loading .u-comm-loading-content .u-comm-loading-text {
font-size: 0.427rem;
margin-top: 0.533rem;
text-align: center;
}
.u-commstatus-loading .u-commstatus-loading-button {
.u-comm-loading .u-comm-loading-button {
position: absolute;
bottom: 1.733rem;
left: 0;
......@@ -718,76 +718,76 @@ p {
background-clip: padding-box;
}
.u-commstatus-loading .u-commstatus-loading-button:active {
.u-comm-loading .u-comm-loading-button:active {
background-color: #0065ff;
}
.u-commstatus-loading .u-commstatus-loading-button.disabled {
.u-comm-loading .u-comm-loading-button.disabled {
background-color: #bbb;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content {
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content {
color: #00ffff;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader {
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .loader {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader:before {
-webkit-animation: commstatusLoading 1.3s infinite linear;
animation: commstatusLoading 1.3s infinite linear;
.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-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-content .icon {
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-content .icon {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-0 .u-commstatus-loading-button {
.u-comm-loading.u-comm-loading-status-0 .u-comm-loading-button {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content {
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content {
color: #00ffff;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .loader {
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .loader {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon {
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .icon {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon:before {
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-content .icon:before {
content: '\e800';
}
.u-commstatus-loading.u-commstatus-loading-status-1 .u-commstatus-loading-button {
.u-comm-loading.u-comm-loading-status-1 .u-comm-loading-button {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content {
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content {
color: #fff;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .loader {
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .loader {
display: none;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .icon {
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .icon {
display: block;
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-content .icon:before {
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-content .icon:before {
content: '\e646';
}
.u-commstatus-loading.u-commstatus-loading-status-2 .u-commstatus-loading-button {
.u-comm-loading.u-comm-loading-status-2 .u-comm-loading-button {
display: block;
}
@-webkit-keyframes commstatusLoading {
@-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;
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;
......@@ -829,7 +829,7 @@ p {
}
}
@keyframes commstatusLoading {
@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;
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;
......@@ -871,11 +871,11 @@ p {
}
}
.custom-commstatus-loading {
.custom-comm-loading {
background-color: rgba(36, 38, 53, 0.9);
}
.custom-commstatus-loading .u-commstatus-loading-button {
.custom-comm-loading .u-comm-loading-button {
bottom: 3.573rem;
width: 2.667rem;
color: #00ffff;
......@@ -884,7 +884,7 @@ p {
padding: 0.48rem 0 0.133rem;
}
.custom-commstatus-loading .u-commstatus-loading-button:after {
.custom-comm-loading .u-comm-loading-button:after {
content: '';
position: absolute;
bottom: 0;
......@@ -895,11 +895,11 @@ p {
background: linear-gradient(to right, #242635, #00ffff, #242635);
}
.custom-commstatus-loading .u-commstatus-loading-button:active {
.custom-comm-loading .u-comm-loading-button:active {
background-color: transparent;
}
.custom-commstatus-loading .u-commstatus-loading-button.disabled {
.custom-comm-loading .u-comm-loading-button.disabled {
background-color: transparent;
}
......@@ -964,6 +964,115 @@ p {
background-color: #898989;
}
.topCpnt {
height: 6.827rem;
position: relative;
padding-top: 0.907rem;
}
.topCpnt:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.doorbellBg {
width: 5.333rem;
height: 5.333rem;
border-radius: 50%;
margin: 0 auto;
background: -webkit-linear-gradient(#00ffff, #fff, #fff, #fff, #00ffff);
background: linear-gradient(#00ffff, #fff, #fff, #fff, #00ffff);
padding: 0.08rem;
position: relative;
}
.doorbellBg .doorbellCircle {
width: 100%;
height: 100%;
background-color: #22313F;
border-radius: 50%;
}
.doorbellBg .doorbellCircle .doorbell {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 2.827rem;
height: 2.827rem;
margin: auto;
border: 2px solid #00ffff;
border-radius: 50%;
background-image: url("../../resources/image/gray_door_icon.png");
background-position: center;
background-repeat: no-repeat;
background-color: #242635;
-webkit-background-size: 2.133rem 2.133rem;
background-size: 2.133rem 2.133rem;
}
.doorbellBg .doorbellCircle .doorbell p {
position: absolute;
top: 0.8rem;
left: 0;
right: 0;
margin: 0 auto;
width: 1.067rem;
height: 1.067rem;
background: url("../../resources/image/green_doorbell_icon.png") no-repeat center;
-webkit-background-size: cover;
background-size: cover;
-webkit-transform-origin: top center;
transform-origin: top center;
}
.doorbellBg .doorbellTip {
position: absolute;
bottom: 0.453rem;
left: 0;
width: 100%;
text-align: center;
font-size: 0.32rem;
}
.doorbellBg .doorbellTip span {
margin-right: 0.267rem;
}
.batteryState {
text-align: right;
padding-right: 0.587rem;
font-size: 0.347rem;
}
.batteryState span {
font-family: iconfont;
font-size: 0.64rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
color: #00ffff;
vertical-align: middle;
margin-right: 0.133rem;
}
.title {
background-repeat: no-repeat;
background-position: 0.427rem center;
background-image: url("../../resources/image/white_message_icon.png");
font-size: 0.347rem;
-webkit-background-size: 0.533rem 0.533rem;
background-size: 0.533rem 0.533rem;
padding-left: 1.12rem;
line-height: 1;
}
.u-marquee {
width: 100%;
height: 0.667rem;
......@@ -976,20 +1085,21 @@ p {
}
.custom-marquee {
height: 0.533rem;
height: 0.96rem;
text-align: center;
position: relative;
}
.custom-marquee .u-marquee-text {
line-height: 0.533rem;
line-height: 0.96rem;
color: #6B6C73;
}
.custom-marquee:before {
content: '';
position: absolute;
top: 0;
left: 0;
left: 3.333rem;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
......@@ -1010,6 +1120,7 @@ p {
.active .u-marquee-text {
-webkit-animation: marquee 5s linear infinite;
animation: marquee 5s linear infinite;
color: #91929a;
}
@-webkit-keyframes marquee {
......@@ -1038,7 +1149,7 @@ p {
.deviceHandle {
position: absolute;
top: 7.84rem;
top: 8rem;
bottom: 0;
left: 0;
width: 100%;
......@@ -1046,50 +1157,50 @@ p {
.switchGroup {
position: absolute;
top: 0.533rem;
top: 1.333rem;
bottom: 0;
left: 0;
width: 100%;
}
.switchGroup .col-xs-6 {
height: 50%;
.switchGroup .guoupRow {
height: 33.33333333%;
position: relative;
}
.switchGroup .guoupRow .col-xs-6 {
height: 100%;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.switchGroup:before {
.switchGroup .guoupRow:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
margin: auto;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #00ffff, #242635);
background: linear-gradient(to right, #242635, #00ffff, #242635);
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.switchGroup:after {
.switchGroup:before {
content: '';
position: absolute;
top: 0;
top: 0.8rem;
bottom: 0.533rem;
left: 0;
right: 0;
height: 100%;
margin: auto;
width: 1px;
background: -webkit-linear-gradient(#242635, #00ffff, #242635);
background: linear-gradient(#242635, #00ffff, #242635);
background: -webkit-linear-gradient(#242635, #fff, #242635);
background: linear-gradient(#242635, #fff, #242635);
}
.u-switch {
......@@ -1165,6 +1276,10 @@ p {
background-image: url("../../resources/image/securityAlarm.png");
}
.doorlockUser .custom-switch .u-switch-handle:before {
background-image: url("../../resources/image/doorlockUser.png");
}
.remoteOpendoor .custom-switch .u-switch-handle:before {
background-image: url("../../resources/image/remoteOpendoor.png");
}
......@@ -1214,9 +1329,14 @@ p {
background-image: url("../../resources/image/hijackAlarm.png");
}
.doorlockManage .custom-switch .u-switch-handle:before {
background-image: url("../../resources/image/doorlockManage.png");
}
.custom-switch {
width: 100%;
height: auto;
text-align: center;
}
.custom-switch .u-switch-handle {
......@@ -1229,7 +1349,9 @@ p {
height: 1.467rem;
border-width: 1px;
border-radius: 50%;
margin: 0 auto;
margin-right: 0.16rem;
display: inline-block;
vertical-align: middle;
}
.custom-switch .u-switch-handle:before {
......@@ -1250,8 +1372,9 @@ p {
.custom-switch .u-switch-text {
font-size: 0.48rem;
margin-top: 0.4rem;
text-align: center;
display: inline-block;
vertical-align: middle;
}
.custom-switch.u-switch-on .u-switch-handle,
......
web/view/device/index.html
......@@ -21,29 +21,54 @@
<div id="app" v-cloak>
<div class="header">
<v-touch tag="span" class="header-left icon" v-on:tap="onDoorlockManageTap">&#xe66f;</v-touch>
<p>{{ $t('title.device') }}</p>
<v-touch tag="span" class="header-right icon" v-on:tap="onDoorlockManageTap">&#xe61d;</v-touch>
</div>
<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">
<p class="title">门锁最新消息</p>
<u-marquee :init-param="componentsConfig.marquee.initParam" :active="activeFlag"></u-marquee>
<div class="switchGroup">
<!-- 开门记录 -->
<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>
<!-- 安全报警 -->
<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="guoupRow">
<!-- 开门记录 -->
<div class="col-xs-6 opendoorRecord">
<u-switch :value="valueOpendoorRecord" :init-param="componentsConfig.opendoorRecordSwitch.initParam" v-on:u-switch-tap="onOpendoorRecordTap"></u-switch>
</div>
<!-- 安全报警 -->
<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 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="guoupRow">
<!-- 门锁用户 -->
<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 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="guoupRow">
<!-- 远程开门 -->
<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>
......
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