Commit 56d95500 by 朱建香

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

# Conflicts:
#	dev/src/lang/zh.json
#	dev/src/view/doorlockUsers/v_doorlockUser.js
#	dev/src/view/doorlockUsers/v_index.js
#	web/lib/js/p.js
#	web/resources/lang/zh.json
#	web/view/device/index.html
#	web/view/doorlockManage/index.html
#	web/view/doorlockUsers/doorlockUser.html
#	web/view/doorlockUsers/index.html
parents f0e198e0 fd68d264
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>doorlock</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.aptana.projects.webnature</nature>
</natures>
</projectDescription>
1.0.8 / 2017-10-10 1.0.8 / 2017-10-11
==================
* 1.上传主页绑定门锁样式
* 2.上传用户列表、添加用户、修改名称样式
1.0.8 / 2017-10-10
================== ==================
* 1.上传门锁用户、门锁管理框架(标签、多语言、基本功能) * 1.上传门锁用户、门锁管理框架(标签、多语言、基本功能)
......
...@@ -144,7 +144,9 @@ ...@@ -144,7 +144,9 @@
"logoutDialogTip": "确定要退出系统吗?", "logoutDialogTip": "确定要退出系统吗?",
"deleteSuccess": "删除成功", "deleteSuccess": "删除成功",
"deleteFailue": "删除失败", "deleteFailue": "删除失败",
"defaultNickname": "门锁" "defaultNickname": "门锁",
"unbindDialogTip": "<span></span>解锁门锁后,您将失去对该门锁<br>所有查看、管理等功能操作",
"unbindSuccess": "解绑成功"
}, },
"editName":{ "editName":{
"nameInputTip": "请输入门锁名称", "nameInputTip": "请输入门锁名称",
......
let projectMethods = {};
projectMethods.changeGridList = function (vmObj, list) {
vmObj.$refs.gridlist.changeList(list);
};
projectMethods.changeTimeline = function (vmObj, list) {
vmObj.$refs.timeline.changeList(list);
};
export {projectMethods}
\ No newline at end of file
...@@ -30,6 +30,8 @@ function init() { ...@@ -30,6 +30,8 @@ function init() {
valueDoorlockManage: 1, valueDoorlockManage: 1,
activeFlag: true, activeFlag: true,
followShowFlag: false, followShowFlag: false,
doorbellShowFlag: true,
bindDoorlockShowFlag: false,
//配置组件 //配置组件
componentsConfig: initComponentsConfig(), componentsConfig: initComponentsConfig(),
//电量 //电量
...@@ -58,10 +60,21 @@ function init() { ...@@ -58,10 +60,21 @@ function init() {
console.log(response); console.log(response);
let data = uPublic.checkResponseData(response.data); let data = uPublic.checkResponseData(response.data);
if(response.data == 'success'){ if(response.data == 'success'){
console.log(self.uuid); self.setValueOpendoorRecord(0);
self.setValueSecurityAlarm(0);
self.setValueRemoteOpendoor(0);
self.setValueHijackAlarm(0);
self.setValueDoorlockUser(0);
self.setValueDoorlockManage(0);
}else if(data){ }else if(data){
self.uuid = data[0].uuid; self.uuid = data[0].uuid;
self.deviceId = data[0].sn; self.deviceId = data[0].sn;
self.setValueOpendoorRecord(1);
self.setValueSecurityAlarm(1);
self.setValueRemoteOpendoor(1);
self.setValueHijackAlarm(1);
self.setValueDoorlockUser(1);
self.setValueDoorlockManage(1);
iot.business.sds.getDeviceStatus({ iot.business.sds.getDeviceStatus({
data: { data: {
uuid: self.uuid uuid: self.uuid
...@@ -77,6 +90,7 @@ function init() { ...@@ -77,6 +90,7 @@ function init() {
let data = response.data; let data = response.data;
self.setBatteryPercent(data.battery.value); self.setBatteryPercent(data.battery.value);
self.setBatteryState(config.powerIcon[Math.round(data.battery.value/20)]); self.setBatteryState(config.powerIcon[Math.round(data.battery.value/20)]);
setDevceInfo(self, data); setDevceInfo(self, data);
}, },
error: (error) => { error: (error) => {
...@@ -180,6 +194,18 @@ function init() { ...@@ -180,6 +194,18 @@ function init() {
setValueHijackAlarm(value){ setValueHijackAlarm(value){
this.valueHijackAlarm = value; this.valueHijackAlarm = value;
}, },
getValueDoorlockUser(){
return this.valueDoorlockUser;
},
setValueDoorlockUser(value){
this.valueDoorlockUser = value;
},
getValueDoorlockManage(){
return this.valueDoorlockManage;
},
setValueDoorlockManage(value){
this.valueDoorlockManage = value;
},
getFollowShowFlag(){ getFollowShowFlag(){
return this.followShowFlag; return this.followShowFlag;
}, },
...@@ -429,65 +455,77 @@ function bindDoorlockTap(){ ...@@ -429,65 +455,77 @@ function bindDoorlockTap(){
//tap 门锁管理 //tap 门锁管理
function doorlockManageTap(self){ function doorlockManageTap(self){
iot.navigator.openWindow({ if(self.getValueDoorlockManage() == 1){
url: '../doorlockManage/', iot.navigator.openWindow({
id: 'doorlockManage', url: '../doorlockManage/',
extras: { id: 'doorlockManage',
uuid: self.getUuid() extras: {
} uuid: self.getUuid()
}); }
});
}
} }
//tap 开门记录 //tap 开门记录
function opendoorRecordTap(self){ function opendoorRecordTap(self){
iot.navigator.openWindow({ if(self.getValueOpendoorRecord() == 1){
url: './opendoorRecord.html', iot.navigator.openWindow({
id: 'opendoorRecord', url: './opendoorRecord.html',
extras: { id: 'opendoorRecord',
deviceId: self.deviceId extras: {
} deviceId: self.deviceId
}); }
});
}
} }
//tap 安全报警 //tap 安全报警
function securityAlarmTap(self){ function securityAlarmTap(self){
iot.navigator.openWindow({ if(self.getValueSecurityAlarm == 1){
url: './alarmInfo.html', iot.navigator.openWindow({
id: 'alarmInfo', url: './alarmInfo.html',
extras: { id: 'alarmInfo',
deviceId: self.deviceId extras: {
} deviceId: self.deviceId
}); }
});
}
} }
//tap 门锁用户 //tap 门锁用户
function doorlockUserTap(){ function doorlockUserTap(){
// iot.navigator.openWindow({ // if(self.getValueDoorlockUser == 1){
// url: '../doorlockUsers/', // iot.navigator.openWindow({
// id: 'doorlockUsers', // url: '../doorlockUsers/',
// }); // id: 'doorlockUsers',
// });
// }
} }
//tap 远程开门 //tap 远程开门
function remoteOpendoorTap(self){ function remoteOpendoorTap(self){
iot.navigator.openWindow({ if(self.getValueRemoteOpendoor == 1){
url: './remoteOpendoor.html', iot.navigator.openWindow({
id: 'remoteOpendoor', url: './remoteOpendoor.html',
extras: { id: 'remoteOpendoor',
uuid: self.getUuid() extras: {
} uuid: self.getUuid()
}); }
});
}
} }
//tap 劫持报警 //tap 劫持报警
function hijackAlarmTap(self){ function hijackAlarmTap(self){
iot.navigator.openWindow({ if(self.setValueHijackAlarm == 1){
url: './hijackRecord.html', iot.navigator.openWindow({
id: 'hijackRecord', url: './hijackRecord.html',
extras: { id: 'hijackRecord',
deviceId: self.deviceId extras: {
} deviceId: self.deviceId
}); }
});
}
} }
//tap 保存二维码到相册 //tap 保存二维码到相册
......
/**
* v_qrcode.js
* Version: 0.1
* User: wy
* Date: 2017-09-06
* Copyright(c) 2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
* 生成绑定二维码页面
*/
var QRCode = require('qrcode');
console.log(QRCode);
import {iot, uPublic, uComponents} from '../../public/public.js';
iot.ready(init);
function init() {
//通用 按钮、dialog、loading组件
uPublic.componentsInit(['u-button','u-dialog','u-loading']);
const app = new Vue({
data:{
//配置组件
componentsConfig: initComponentsConfig(),
//页面传递参数
extras: [],
uuid: null,
qrCodeDisabled: false
},
mounted(){
this.extras = iot.navigator.getExtras();
console.log(this.extras);
this.setUuid(this.extras.uuid);
},
methods:{
getUuid(){
return this.uuid;
},
setUuid(id){
this.uuid = id;
},
setQrCodeDisabled(boolean){
this.qrCodeDisabled = boolean;
},
//tap <
onBackTap(){
backTap();
},
//tap 生成二维码
onQRcodeButtonTap(){
qrcodeButtonTap(this);
}
}
}).$mount('#app');
}
//配置组件参数
function initComponentsConfig() {
return {
//生成二维码 button 参数
qrcodeButton: {
initParam: {
class: 'custom-button',
text: Vue.t('btn.qrcode')
}
},
dialog: {
initParam: {
class: 'custom-dialog'
}
},
loading: {
initParam: {
class: 'custom-loading'
}
}
}
}
//tap <
function backTap(){
iot.navigator.back();
}
//tap 生成二维码
function qrcodeButtonTap(self){
uComponents.showLoading(self);
iot.business.sds.saveqr({
data: {
uuid: self.getUuid()
},
success: (response) => {
let data = uPublic.checkResponseData(response.data);
if(data){
let qrKey = response.data.qrKey;
let qr = self.$refs.qrcode;
QRCode.toCanvas(qr, qrKey, {
scale: 5,
margin: 2
},(error) => {
if (error) {
console.log(error)
} else {
console.log('success');
uComponents.hideLoading(self);
qr.style.width = "5.280rem";
qr.style.height = "5.280rem";
console.log(qr.style);
setTimeout(() => {
self.setQrCodeDisabled(true);
},1000*60*10);
}
});
}else{}
},
error: (error) => {
console.log(error);
//请求失败
uPublic.openRequestErrorAlert(self);
}
});
}
\ No newline at end of file
...@@ -128,7 +128,7 @@ function confirmButtonTap(self){ ...@@ -128,7 +128,7 @@ function confirmButtonTap(self){
} }
}); });
iot.navigator.openWindow({ iot.navigator.openWindow({
url: './doorlockUsers.html', url: './doorlockUser.html',
id: 'doorlockUsers' id: 'doorlockUser'
}); });
} }
\ No newline at end of file
/**
* v_doorlockUsers.js
* Version: 0.1
* User: wy
* Date: 2017-10-09
* Copyright(c) 2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
* 门锁用户页面
*/
import {iot, uPublic, uComponents} from '../../public/public.js';
iot.ready(init);
function init() {
//通用 按钮、dialog、loading组件
uPublic.componentsInit(['u-button','u-dialog','u-loading']);
const app = new Vue({
data:{
userInfo: {
image: '../../resources/image/gray_unbindHead_icon.png',
role: 1,
title: '我是个用户二号',
subtitle: ''
},
bindShowFlag: true,
unbindShowFlag: false,
stateShowFlag: false,
guideShowFlag: false,
guideStep1ShowFlag: false,
guideStep2ShowFlag: false,
guideStep3ShowFlag: false,
guideStep4ShowFlag: false,
//配置组件
componentsConfig: initComponentsConfig()
},
mounted(){
},
methods:{
getBindShowFlag(){
return this.bindShowFlag;
},
setBindShowFlag(boolean){
this.bindShowFlag = boolean;
},
getUnbindShowFlag(){
return this.unbindShowFlag;
},
setUnbindShowFlag(boolean){
this.unbindShowFlag = boolean;
},
getStateShowFlag(){
return this.stateShowFlag;
},
setStateShowFlag(boolean){
this.stateShowFlag = boolean;
},
getGuideShowFlag(){
return this.guideShowFlag;
},
setGuideShowFlag(boolean){
this.guideShowFlag = boolean;
},
getGuideStep1ShowFlag(){
return this.guideStep1ShowFlag;
},
setGuideStep1ShowFlag(boolean){
this.guideStep1ShowFlag = boolean;
},
getGuideStep2ShowFlag(){
return this.guideStep2ShowFlag;
},
setGuideStep2ShowFlag(boolean){
this.guideStep2ShowFlag = boolean;
},
getGuideStep3ShowFlag(){
return this.guideStep3ShowFlag;
},
setGuideStep3ShowFlag(boolean){
this.guideStep3ShowFlag = boolean;
},
getGuideStep4ShowFlag(){
return this.guideStep4ShowFlag;
},
setGuideStep4ShowFlag(boolean){
this.guideStep4ShowFlag = boolean;
},
//tap <
onBackTap(){
backTap();
},
onEditNameTap(){
editNameTap();
},
//tap 邀请绑定
onBindTap(){
bindTap();
},
//tap 解绑
onUnbindButtonTap(){
unbindButtonTap(this);
},
//tap 绑定开锁信息
onBindUnlockInfoTap(){
bindUnlockInfoTap();
},
//tap 历史开门记录
onOpendoorRecordTap(){
opendoorRecordTap();
},
//tap 删除该用户
onDeleteUserButtonTap(){
deleteUserButtonTap(this);
},
onUnbindStateDialogTap(){
unbindStateDialogTap(this);
},
//tap 下一步
onNextButtonTap(){
nextButtonTap(this);
},
//tap 我知道了
onISeeButtonTap(){
iSeeButtonTap(this);
}
}
}).$mount('#app');
}
//配置组件参数
function initComponentsConfig() {
return {
//解绑 button 参数
unbindButton: {
initParam: {
class: 'custom-unbind-button',
text: Vue.t('btn.unbind')
}
},
//删除该用户 button 参数
deleteUserButton: {
initParam: {
class: 'custom-button',
text: Vue.t('btn.deleteUser')
}
},
//下一步 button 参数
nextButton: {
initParam: {
class: 'custom-dialog-button',
text: Vue.t('btn.next')
}
},
//我知道了 button 参数
iSeeButton: {
initParam: {
class: 'custom-dialog-button',
text: Vue.t('btn.iSee')
}
},
dialog: {
initParam: {
class: 'custom-dialog'
}
},
loading: {
initParam: {
class: 'custom-loading'
}
}
}
}
//tap <
function backTap(){
iot.navigator.back();
}
function editNameTap(){
iot.navigator.openWindow({
url: './editName.html',
id: 'editName'
});
}
//tap 邀请绑定
function bindTap(){
iot.navigator.openWindow({
url: './inviteBind.html',
id: 'inviteBind'
});
}
//tap 解绑
function unbindButtonTap(self){
uComponents.openConfirm(self, Vue.t('doorlockUsers.unbindDialogTip'),
{text: Vue.t('dialog.cancel'), callback: function () {}},
{text: Vue.t('dialog.unbind'), callback: function () {
self.setStateShowFlag(true);
}}
);
}
function unbindStateDialogTap(self){
self.setStateShowFlag(false);
self.setBindShowFlag(true);
self.setUnbindShowFlag(false);
}
//tap 绑定开锁信息
function bindUnlockInfoTap(){
iot.navigator.openWindow({
url: './unlockInfo.html',
id: 'unlockInfo'
});
}
//tap 历史开门记录
function opendoorRecordTap(){
iot.navigator.openWindow({
url: '../device/opendoorRecord.html',
id: 'opendoorRecord'
});
}
//tap 删除该用户
function deleteUserButtonTap(self){
uComponents.openConfirm(self, Vue.t('doorlockUsers.deleteUserDialogTip'),
{text: Vue.t('dialog.cancel'), callback: function () {}},
{text: Vue.t('dialog.delete'), callback: function () {}}
);
}
//tap 下一步
function nextButtonTap(self){
self.setGuideStep1ShowFlag(false);
self.setGuideStep2ShowFlag(false);
self.setGuideStep3ShowFlag(true);
self.setGuideStep4ShowFlag(true);
}
//tap 我知道了
function iSeeButtonTap(self){
self.setGuideShowFlag(false);
}
\ No newline at end of file
/**
* v_editNickname.js
* Version: 0.1
* User: zjx
* Date: 2017-09-29
* Copyright(c) 2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
* 引导页面
*/
import {iot, uPublic, uComponents} from '../../public/public.js';
iot.ready(init);
function init() {
//通用 dialog、loading组件
uPublic.componentsInit(['u-dialog','u-loading','u-text']);
const app = new Vue({
data:{
//配置组件
textNickName: iot.navigator.getExtras().nickname,
textErrorTip: null,
componentsConfig: initComponentsConfig()
},
mounted(){
},
methods:{
getTextNickName(){
return this.textNickName;
},
setTextNickName(text){
this.textNickName = this;
},
onSaveTap(){
saveTap(this);
},
onBackTap(){
backTap();
},
onNicknameChange(text){
nicknameChange(this, text);
}
}
}).$mount('#app');
}
//配置组件参数
function initComponentsConfig() {
return {
nameInput: {
initParam: {
class: 'custom-editNickname-text',
placeholder: Vue.t('editNickname.nickNameInputTip')
}
},
//保存 button 参数
saveButton: {
initParam: {
class: 'custom-button',
text: Vue.t('btn.save')
}
},
dialog: {
initParam: {
class: 'custom-dialog'
}
},
loading: {
initParam: {
class: 'custom-loading'
}
}
}
}
//保存昵称
function saveTap(self){
if(self.textNickName == null || self.textNickName.trim() == ''){
self.textErrorTip = Vue.t('editNickname.nickNameInputTip');
}else{
uComponents.showLoading(self);
iot.business.user.setInfo({
data: {
nickname: self.textNickName,
head: '',
info: {}
},
success: (response) => {
if(response.data = 'success'){
iot.navigator.fire(plus.webview.currentWebview().opener(),'returnPage',{
// name: 'zhu'
});
iot.navigator.back();
}
},
error: (error) => {
console.log(error);
},
complete: () => {
uComponents.hideLoading(self);
}
});
}
}
//返回上一页
function backTap(){
iot.navigator.back();
}
function nicknameChange(self, text){
self.textNickName = text;
self.textErrorTip = '';
}
/**
* v_editPassword.js
* Version: 0.1
* User: zjx
* Date: 2017-09-29
* Copyright(c) 2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
* 引导页面
*/
import {iot, uPublic, uComponents} from '../../public/public.js';
iot.ready(init);
function init() {
//通用 dialog、loading组件
uPublic.componentsInit(['u-dialog','u-loading','u-text']);
const app = new Vue({
data:{
//配置组件
textNewPassword: null,
textOldPassword: null,
textOldPasswordAgain: null,
textErrorTip: '密码不能为空',
componentsConfig: initComponentsConfig()
},
mounted(){
},
methods:{
onSaveTap(){
saveTap();
},
onBackTap(){
backTap();
}
}
}).$mount('#app');
}
//配置组件参数
function initComponentsConfig() {
return {
newPassword: {
initParam: {
class: 'custom-editPassword-text',
placeholder: Vue.t('editPassword.newPasswordInputTip')
}
},
oldPassword: {
initParam: {
class: 'custom-editPassword-text',
placeholder: Vue.t('editPassword.oldPasswordInputTip')
}
},
oldPasswordAgain: {
initParam: {
class: 'custom-editPassword-text',
placeholder: Vue.t('editPassword.oldPasswordInputTipAgain')
}
},
//保存 button 参数
saveButton: {
initParam: {
class: 'custom-button',
text: Vue.t('btn.save')
}
},
dialog: {
initParam: {
class: 'custom-dialog'
}
},
loading: {
initParam: {
class: 'custom-loading'
}
}
}
}
//保存昵称
function saveTap(){
}
//返回上一页
function backTap(){
iot.navigator.back();
}
/**
* v_index.js
* Version: 0.1
* User: zjx
* Date: 2017-09-26
* Copyright(c) 2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
* 引导页面
*/
import {iot, uPublic, uComponents} from '../../public/public.js';
iot.ready(init);
function init() {
//通用 dialog、loading组件
uPublic.componentsInit(['u-button','u-dialog','u-loading']);
const app = new Vue({
data:{
//配置组件
nickname: 'bank',
componentsConfig: initComponentsConfig()
},
mounted(){
let self = this;
getInfo(this);
window.addEventListener('returnPage',function(event){
console.log("in");
getInfo(self);
});
},
methods:{
//tap 修改昵称
onEditNicknameTap(){
editNicknameTap(this);
},
//tap 修改密码
onEditPasswordTap(){
editPasswordTap();
},
onBackTap(){
backTap();
},
//tap 退出系统
onLogoutButtonTap(){
logoutButtonTap(this);
}
}
}).$mount('#app');
}
//配置组件参数
function initComponentsConfig() {
return {
logoutButton: {
initParam: {
class: 'custom-button',
text: Vue.t('btn.logout')
}
},
dialog: {
initParam: {
class: 'custom-dialog'
}
},
loading: {
initParam: {
class: 'custom-loading'
}
}
}
}
//tap 修改昵称
function editNicknameTap(self){
iot.navigator.openWindow({
url: '../myInfo/editNickname.html',
id: 'editNickname',
extras: {
nickname: self.nickname
}
});
}
//tap 修改密码
function editPasswordTap(){
iot.navigator.openWindow({
url: '../myInfo/editPassword.html',
id: 'editPassword'
});
}
function backTap(){
iot.navigator.back();
}
function getInfo(self){
iot.business.user.getInfo({
success: (response) => {
let data = uPublic.checkResponseData(response.data);
if(data){
console.log(data);
self.nickname = data.nickname;
}else{
}
},
error: (error) => {},
complete: () => {}
});
}
//tap 退出系统
function logoutButtonTap(self){
uComponents.openConfirm(self, Vue.t('myInfo.logoutDialogTip'),
{text: Vue.t('dialog.cancel'), callback: function () {}},
{text: Vue.t('dialog.confirm'), callback: function () {
iot.business.user.logout({
data: {
sds: true
},
success: (response) => {
iot.navigator.openWindow({
url: '../login/',
id: 'login'
});
let wvs = plus.webview.all();
for (var i = 0; i < wvs.length-1; i++) {
plus.webview.close(wvs[i]);
}
},
error: (error) => {},
complete: () => {
console.log("complete");
}
});
}}
);
}
\ No newline at end of file
...@@ -150,16 +150,47 @@ ...@@ -150,16 +150,47 @@
.batteryState{ .batteryState{
text-align: right; text-align: right;
padding-right: 22px; padding-right: 25px;
font-size: 13px;
span{ span{
.iconfont(24px); &:nth-child(1){
color: #00ffff; .iconfont(24px);
vertical-align: middle; color: #00ffff;
margin-right: 5px; vertical-align: middle;
}
&:nth-child(2){
width: 40px;
display: inline-block;
vertical-align: middle;
text-align: right;
font-size: 13px;
}
} }
} }
.bindDoorlock{
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto;
background-color: @BINDDOORLOCK-BG-COLOR;
border: 3px solid @BINDDOORLOCK-BORDER-COLOR;
position: relative;
p{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
.bgImgSize(106px,106px,"green_bindDoorlock_icon.png",center 24px,30px 30px);
border-radius: 50%;
border: 2px solid;/*no*/
color: @BINDDOORLOCK-TEXT-COLOR;
text-align: center;
padding-top: 57px;
}
}
.title{ .title{
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 16px center; background-position: 16px center;
...@@ -168,6 +199,10 @@ ...@@ -168,6 +199,10 @@
.background-size(20px 20px); .background-size(20px 20px);
padding-left: 42px; padding-left: 42px;
line-height: 1; line-height: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
} }
.u-marquee(); .u-marquee();
...@@ -176,15 +211,15 @@ ...@@ -176,15 +211,15 @@
height: 36px; height: 36px;
text-align: center; text-align: center;
position: relative; position: relative;
color: #fff;
.u-marquee-text{ .u-marquee-text{
line-height: 36px; line-height: 36px;
color: #6B6C73;
} }
&:before{ &:before{
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 125px; left: 0;
right: 0; right: 0;
height: 1px;/*no*/ height: 1px;/*no*/
.white_gradient_border(); .white_gradient_border();
...@@ -200,6 +235,16 @@ ...@@ -200,6 +235,16 @@
} }
} }
.title ~ .custom-marquee{
color: #73747B;
&:before{
left: 125px;
}
&.active{
color: #91929a;
}
}
.marquee(5s,~"0,20px",~"0,-100%"); .marquee(5s,~"0,20px",~"0,-100%");
.deviceHandle{ .deviceHandle{
...@@ -208,6 +253,7 @@ ...@@ -208,6 +253,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
padding-top: 13px;
} }
.switchGroup{ .switchGroup{
......
...@@ -11,11 +11,11 @@ ...@@ -11,11 +11,11 @@
height: auto; height: auto;
.u-list-scroll .u-list-row{ .u-list-scroll .u-list-row{
height: 75px; height: 75px;
padding: 0 45px 0 48px; padding: 0 41px;
.u-list-left-image{ .u-list-left-image{
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-right: 38px; margin-right: 33px;
} }
.u-list-title{ .u-list-title{
font-size: @CUSTOM-LIST-COMPONENT-TITLE-FONTSIZE; font-size: @CUSTOM-LIST-COMPONENT-TITLE-FONTSIZE;
......
...@@ -135,30 +135,20 @@ ...@@ -135,30 +135,20 @@
//修改名称 //修改名称
.u-text(); .u-text();
.inputBox{
width: 275px;
margin: 0 auto;
padding-bottom: 40px;
}
.custom-editName-text{ .custom-editName-text{
input{ .textInput(0,17px,16px);
font-size: @CUSTOM-EDITNAMETEXT-COMPONENT-INPUT-FONTSIZE;
padding-left: 46px;
&::-webkit-input-placeholder{
color: @CUSTOM-TEXT-COMPONENT-INPUT-PLACEHOLDER-COLOR;
}
}
//x icon
.u-text-clear{
right: 41px;
&:before{
content: '\e601';
font-family: iconfont;
color: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR;
font-size: @CUSTOM-EDITNAMETEXT-COMPONENT-DEFAULTICON-FONTSIZE;
}
}
&:after{
.white_gradient_border();
}
} }
.errorTip{ .errorTip{
position: absolute;
left: 0;
right: 0;
.errorTip(); .errorTip();
} }
......
@import "../public/public.less"; @import "../public/public.less";
@import "../public/header.less"; @import "../public/header.less";
//修改名称
.u-text(); .u-text();
.inputBox{
width: 275px;
margin: 0 auto;
padding-bottom: 40px;
}
.custom-editName-text{
.textInput(0,17px,16px);
}
.errorTip{
position: absolute;
left: 0;
right: 0;
.errorTip();
}
.u-button(); .u-button();
.custom-button{
.button();
.buttonPosition();
}
.unbindState-dialog{ .unbindState-dialog{
.mask(); .mask();
} }
......
@import "../public/public.less"; @import "../public/public.less";
@import "../public/header.less"; @import "../public/header.less";
//侧滑列表 //用户列表
.user-list{ .user-list{
width: 100%;
height: 100%;
overflow: auto;
position: absolute; position: absolute;
top: 44px; top: 44px;
bottom: 0; bottom: 0;
left: 0; left: 0;
height: auto; width: 100%;
} overflow: auto;
.user-list-scroll .user-list-row{ }
position: relative;
overflow: hidden; .user-list-scroll{
.user-list-handle{ .user-list-row{
position: relative; position: relative;
.transition(left 0.4s ease); overflow: hidden;
left: 0; .user-list-handle{
background-color: @BODY-BG-COLOR; position: relative;
padding: 15px 20px; .transition(left 0.4s ease);
.display-box(); left: 0;
.box-vertical-alignment(); background-color: @USERLIST-ROW-BG;
z-index: 2; height: 75px;
.user-list-image{ padding: 0 65px 0 42px;
width: 50px;
height: 50px;
margin-right: 10px;
}
.user-list-icon{
margin-right: 10px;
.iconfont(@SWIPELIST-COMPONENT-ICON-FONTSIZE);
}
div{
.flex();
min-width: 0;
}
.user-list-title{
.text_oneRow_ellipsis();
}
.user-sub-image{
width: 17px;
height: 17px;
}
.user-list-subtitle{
.text_oneRow_ellipsis();
display: inline-block;
}
&.user-list-selected{
left: -120px;
}
&:after{
content: "\e611";
display: block;
.iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
.transform(rotate(180deg));
}
}
.user-list-button{
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
div{
width: 60px;
height: 100%;
.display-box(); .display-box();
.box-horizontal-alignment();
.box-vertical-alignment(); .box-vertical-alignment();
color: @SWIPELIST-COMPONENT-BUTTON-COLOR; z-index: 2;
float: left; .user-list-image{
&:nth-last-of-type(1){ width: 27px;
background-color: transparent; height: 27px;
.iconfont(@TEXT-COMPONENT-ICON-FONTSIZE); margin-right: 14px;
color: #00FFFF; }
div{
.flex();
min-width: 0;
} }
.user-list-title{
font-size: @USERLIST-TITLE-FONTSIZE;
.text_oneRow_ellipsis();
margin-bottom: 5px;
}
.user-list-subtitle span{
display: inline-block;
width: 182px;
.text_oneRow_ellipsis();
vertical-align: middle;
}
.user-list-subimage{
width: 20px;
height: 20px;
margin-right: 9px;
}
// > icon
&:after{
content: '\e6a7';
.transformV_center(right,35px);
.iconfont(@USERLIST-ICON-FONTSIZE);
}
&.user-list-selected{
left: -66px;
&:after{
display: none;
}
}
}
.user-list-button{
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
div{
width: 66px;
height: 100%;
.display-box();
.box-vertical-alignment();
color: @USERLIST-BUTTON-ICON-COLOR;
.iconfont(@USERLIST-BUTTON-ICON-FONTSIZE);
padding-left: 10px;
}
}
&:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
z-index: 2;
.white_gradient_border();
}
&:active .user-list-handle:not(.user-list-selected){
background-color: @USERLIST-ROW-ACTIVE-BG;
} }
}
&:after{
.defaultBorder();
z-index: 2;
.white_gradient_border();
} }
}
.user-list-load{
text-align: center;
.listLoad();
}
//添加用户
.inputBox(200px,40px,auto,"gray_addUser_icon.png",90px,65px 65px);
.u-text();
.custom-text{
.textInput();
}
.errorTip{
position: absolute;
left: 0;
right: 0;
.errorTip();
}
.u-button();
.custom-button{
.button();
.buttonPosition();
} }
\ No newline at end of file
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
.marquee(@time,@fromValue,@toValue){ .marquee(@time,@fromValue,@toValue){
.active .u-marquee-text{ .active .u-marquee-text{
.animation(marquee @time linear infinite); .animation(marquee @time linear infinite);
color: #91929a;
} }
.keyframes(marquee,{ .keyframes(marquee,{
......
...@@ -181,12 +181,13 @@ p{ ...@@ -181,12 +181,13 @@ p{
} }
//自定义输入框组件 //自定义输入框组件
.textInput(){ .textInput(@marginTop: 17px,@paddingTopOrBottom: 8px,@fontSize: inherit){
margin-top: 17px; margin-top: @marginTop;
input{ input{
padding-top: 8px; padding-top: @paddingTopOrBottom;
padding-bottom: 8px; padding-bottom: @paddingTopOrBottom;
padding-right: 38px; padding-right: 25px;
font-size: @fontSize;
&::-webkit-input-placeholder{ &::-webkit-input-placeholder{
color: @CUSTOM-TEXT-COMPONENT-INPUT-PLACEHOLDER-COLOR; color: @CUSTOM-TEXT-COMPONENT-INPUT-PLACEHOLDER-COLOR;
} }
...@@ -207,9 +208,9 @@ p{ ...@@ -207,9 +208,9 @@ p{
} }
//x icon //x icon
.u-text-clear{ .u-text-clear{
right: 7px; right: -7px;
&:before{ &:before{
content: '\e601'; content: '\e724';
} }
} }
&:after{ &:after{
...@@ -220,18 +221,18 @@ p{ ...@@ -220,18 +221,18 @@ p{
.passwordInput(){ .passwordInput(){
.custom-password-text{ .custom-password-text{
input{ input{
padding-right: 70px; padding-right: 58px;
&[type = text] ~ .u-text-see:before{ &[type = text] ~ .u-text-see:before{
content: '\e60e'; content: '\e60e';
} }
} }
//x icon //x icon
.u-text-clear{ .u-text-clear{
right: 37px; right: 25px;
} }
//眼睛 icon //眼睛 icon
.u-text-see{ .u-text-see{
right: 7px; right: -7px;
&:before{ &:before{
content: '\e6b2'; content: '\e6b2';
} }
...@@ -420,7 +421,7 @@ p{ ...@@ -420,7 +421,7 @@ p{
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
padding: @paddingTop 0 @paddingBottom; padding: @paddingTop 0 @paddingBottom;
.bgImgSize(250px,@height,@bgImg,center @bgYPosition,@bgSize); .bgImgSize(275px,@height,@bgImg,center @bgYPosition,@bgSize);
} }
} }
......
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
} }
span{ span{
color: @HEADER-TEXT-COLOR; color: @HEADER-TEXT-COLOR;
font-size: @HEADER-TEXT-FONTSIZE;
width: 55px; width: 55px;
line-height: @HEADERSIZE; line-height: @HEADERSIZE;
display: block; display: block;
...@@ -34,15 +35,22 @@ ...@@ -34,15 +35,22 @@
} }
.header-left{ .header-left{
float: left; float: left;
padding-left: 5px; padding-left: 9px;
} }
.header-right{ .header-right{
float: right; float: right;
padding-right: 5px; padding-right: 9px;
text-align: right; text-align: right;
} }
.icon{ .icon{
color: @HEADER-ICON-COLOR;
.iconfont(@HEADER-ICON-FONTSIZE,@HEADERSIZE); .iconfont(@HEADER-ICON-FONTSIZE,@HEADERSIZE);
&.header-left{
padding-left: 5px;
}
&.header-right{
padding-right: 5px;
}
} }
~ .content{ ~ .content{
padding-top: @HEADERSIZE; padding-top: @HEADERSIZE;
......
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
border: 0; border: 0;
outline: 0; outline: 0;
-webkit-appearance: none; -webkit-appearance: none;
padding: 20px 70px 20px 20px; padding: 20px 70px 20px 0;
background-color: @TEXT-COMPONENT-INPUT-BG; background-color: @TEXT-COMPONENT-INPUT-BG;
&[type = text] ~ .u-text-see{ &[type = text] ~ .u-text-see{
color: @TEXT-COMPONENT-TEXTINPUT-SEEICON-COLOR; color: @TEXT-COMPONENT-TEXTINPUT-SEEICON-COLOR;
...@@ -240,18 +240,12 @@ ...@@ -240,18 +240,12 @@
padding-left: 17px; padding-left: 17px;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
~ input {
padding-left: 0;
}
} }
.u-text-title{ .u-text-title{
width: 72px; width: 72px;
padding-left: 20px; padding-left: 20px;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
~ input {
padding-left: 0;
}
} }
.u-text-clear, .u-text-clear,
.u-text-see{ .u-text-see{
......
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
@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');
} }
@BODY-TEXT-FONTFAMILY: Helvetica,'Helvetica Neue',sans-serif; @BODY-TEXT-FONTFAMILY: Helvetica,'Helvetica Neue',sans-serif;
...@@ -31,6 +32,7 @@ ...@@ -31,6 +32,7 @@
@C_BLUE_3: #010d19; @C_BLUE_3: #010d19;
@C_BLUE_4: #00ffff; @C_BLUE_4: #00ffff;
@C_BLUE_5: #153D4C; @C_BLUE_5: #153D4C;
@C_BLUE_6: #191b25;
@C_GREEN: #4cd964; @C_GREEN: #4cd964;
@C_RED: #ff0000; @C_RED: #ff0000;
@C_RED_1: #fc2168; @C_RED_1: #fc2168;
...@@ -45,6 +47,7 @@ ...@@ -45,6 +47,7 @@
@BLACK_OPACITY_1: fade(@C_BLACK,40%); @BLACK_OPACITY_1: fade(@C_BLACK,40%);
@WHITE_OPACITY: fade(@C_WHITE,0); @WHITE_OPACITY: fade(@C_WHITE,0);
@BLUE_OPACITY: fade(@C_BLUE_2,90%); @BLUE_OPACITY: fade(@C_BLUE_2,90%);
@GRAY_OPACITY: fade(@C_GRAY_2,5%);
//font-sizes //font-sizes
@DEFAULT_F_SIZE: 14px; @DEFAULT_F_SIZE: 14px;
...@@ -163,7 +166,9 @@ ...@@ -163,7 +166,9 @@
@HEADER-BG-COLOR: @C_BLUE_3; @HEADER-BG-COLOR: @C_BLUE_3;
@HEADER-TITLE-COLOR: @C_WHITE; @HEADER-TITLE-COLOR: @C_WHITE;
@HEADER-TITLE-FONTSIZE: @F_SIZE_19; @HEADER-TITLE-FONTSIZE: @F_SIZE_19;
@HEADER-TEXT-COLOR: @C_WHITE; @HEADER-TEXT-COLOR: @C_BLUE_4;
@HEADER-TEXT-FONTSIZE: @F_SIZE_16;
@HEADER-ICON-COLOR: @C_WHITE;
@HEADER-ICON-FONTSIZE: @F_SIZE_25; @HEADER-ICON-FONTSIZE: @F_SIZE_25;
//errorTip //errorTip
...@@ -218,6 +223,9 @@ ...@@ -218,6 +223,9 @@
@CUSTOM-SWITCH-COMPONENT-OFFSTATE-COLOR: @C_GRAY_5; @CUSTOM-SWITCH-COMPONENT-OFFSTATE-COLOR: @C_GRAY_5;
@NEWMSG-ICON-FONTSIZE: @F_SIZE_16; @NEWMSG-ICON-FONTSIZE: @F_SIZE_16;
@NEWMSG-ICON-COLOR: @C_RED_1; @NEWMSG-ICON-COLOR: @C_RED_1;
@BINDDOORLOCK-BG-COLOR: @GRAY_OPACITY;
@BINDDOORLOCK-BORDER-COLOR: @GRAY_OPACITY;
@BINDDOORLOCK-TEXT-COLOR: @C_BLUE_4;
//门锁管理 //门锁管理
@GRIDLIST-COMPONENT-ROW-BORDER: @C_BLUE_4; @GRIDLIST-COMPONENT-ROW-BORDER: @C_BLUE_4;
...@@ -239,4 +247,12 @@ ...@@ -239,4 +247,12 @@
@CUSTOM-SWIPELIST-COMPONENT-TITLE-FONTSIZE: @F_SIZE_16; @CUSTOM-SWIPELIST-COMPONENT-TITLE-FONTSIZE: @F_SIZE_16;
@CUSTOM-SWIPELIST-COMPONENT-BUTTON-COLOR: @C_BLUE_4; @CUSTOM-SWIPELIST-COMPONENT-BUTTON-COLOR: @C_BLUE_4;
@CUSTOM-SWIPELIST-COMPONENT-BUTTON-ICON-FONTSIZE: @F_SIZE_16; @CUSTOM-SWIPELIST-COMPONENT-BUTTON-ICON-FONTSIZE: @F_SIZE_16;
@CUSTOM-SWIPELIST-COMPONENT-DELETEBUTTON-BG: @BODY-BG-COLOR; @CUSTOM-SWIPELIST-COMPONENT-DELETEBUTTON-BG: @BODY-BG-COLOR;
\ No newline at end of file
//门锁用户列表
@USERLIST-ROW-BG: @BODY-BG-COLOR;
@USERLIST-TITLE-FONTSIZE: @F_SIZE_16;
@USERLIST-ICON-FONTSIZE: @F_SIZE_25;
@USERLIST-BUTTON-ICON-COLOR: @C_BLUE_4;
@USERLIST-BUTTON-ICON-FONTSIZE: @F_SIZE_15;
@USERLIST-ROW-ACTIVE-BG: @C_BLUE_6;
\ No newline at end of file
web/resources/image/noCont.png

9.2 KB | W: | H:

web/resources/image/noCont.png

3.54 KB | W: | H:

web/resources/image/noCont.png
web/resources/image/noCont.png
web/resources/image/noCont.png
web/resources/image/noCont.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -398,7 +398,8 @@ p { ...@@ -398,7 +398,8 @@ p {
} }
.header span { .header span {
color: #fff; color: #00ffff;
font-size: 0.427rem;
width: 1.467rem; width: 1.467rem;
line-height: 1.173rem; line-height: 1.173rem;
display: block; display: block;
...@@ -410,22 +411,31 @@ p { ...@@ -410,22 +411,31 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.133rem; padding-left: 0.24rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.133rem; padding-right: 0.24rem;
text-align: right; text-align: right;
} }
.header .icon { .header .icon {
color: #fff;
font-family: iconfont; font-family: iconfont;
font-size: 0.667rem; font-size: 0.667rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.173rem; line-height: 1.173rem;
} }
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content { .header ~ .content {
padding-top: 1.173rem; padding-top: 1.173rem;
} }
...@@ -528,7 +538,7 @@ p { ...@@ -528,7 +538,7 @@ p {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
padding: 4.907rem 0 0.587rem; padding: 4.907rem 0 0.587rem;
width: 6.667rem; width: 7.333rem;
height: auto; height: auto;
background: url("../../resources/image/connectWifi.png") no-repeat center 1.067rem; background: url("../../resources/image/connectWifi.png") no-repeat center 1.067rem;
-webkit-background-size: 2.053rem 3.253rem; -webkit-background-size: 2.053rem 3.253rem;
...@@ -582,7 +592,7 @@ p { ...@@ -582,7 +592,7 @@ p {
border: 0; border: 0;
outline: 0; outline: 0;
-webkit-appearance: none; -webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem; padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent; background-color: transparent;
} }
...@@ -601,10 +611,6 @@ p { ...@@ -601,10 +611,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title { .u-text .u-text-title {
width: 1.92rem; width: 1.92rem;
padding-left: 0.533rem; padding-left: 0.533rem;
...@@ -612,10 +618,6 @@ p { ...@@ -612,10 +618,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear, .u-text .u-text-clear,
.u-text .u-text-see { .u-text .u-text-see {
position: absolute; position: absolute;
......
...@@ -398,7 +398,8 @@ p { ...@@ -398,7 +398,8 @@ p {
} }
.header span { .header span {
color: #fff; color: #00ffff;
font-size: 0.427rem;
width: 1.467rem; width: 1.467rem;
line-height: 1.173rem; line-height: 1.173rem;
display: block; display: block;
...@@ -410,22 +411,31 @@ p { ...@@ -410,22 +411,31 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.133rem; padding-left: 0.24rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.133rem; padding-right: 0.24rem;
text-align: right; text-align: right;
} }
.header .icon { .header .icon {
color: #fff;
font-family: iconfont; font-family: iconfont;
font-size: 0.667rem; font-size: 0.667rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.173rem; line-height: 1.173rem;
} }
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content { .header ~ .content {
padding-top: 1.173rem; padding-top: 1.173rem;
} }
...@@ -554,7 +564,7 @@ p { ...@@ -554,7 +564,7 @@ p {
border: 0; border: 0;
outline: 0; outline: 0;
-webkit-appearance: none; -webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem; padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent; background-color: transparent;
} }
...@@ -573,10 +583,6 @@ p { ...@@ -573,10 +583,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title { .u-text .u-text-title {
width: 1.92rem; width: 1.92rem;
padding-left: 0.533rem; padding-left: 0.533rem;
...@@ -584,10 +590,6 @@ p { ...@@ -584,10 +590,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear, .u-text .u-text-clear,
.u-text .u-text-see { .u-text .u-text-see {
position: absolute; position: absolute;
......
...@@ -398,7 +398,8 @@ p { ...@@ -398,7 +398,8 @@ p {
} }
.header span { .header span {
color: #fff; color: #00ffff;
font-size: 0.427rem;
width: 1.467rem; width: 1.467rem;
line-height: 1.173rem; line-height: 1.173rem;
display: block; display: block;
...@@ -410,22 +411,31 @@ p { ...@@ -410,22 +411,31 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.133rem; padding-left: 0.24rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.133rem; padding-right: 0.24rem;
text-align: right; text-align: right;
} }
.header .icon { .header .icon {
color: #fff;
font-family: iconfont; font-family: iconfont;
font-size: 0.667rem; font-size: 0.667rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.173rem; line-height: 1.173rem;
} }
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content { .header ~ .content {
padding-top: 1.173rem; padding-top: 1.173rem;
} }
...@@ -448,7 +458,7 @@ p { ...@@ -448,7 +458,7 @@ p {
border: 0; border: 0;
outline: 0; outline: 0;
-webkit-appearance: none; -webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem; padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent; background-color: transparent;
} }
...@@ -467,10 +477,6 @@ p { ...@@ -467,10 +477,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title { .u-text .u-text-title {
width: 1.92rem; width: 1.92rem;
padding-left: 0.533rem; padding-left: 0.533rem;
...@@ -478,10 +484,6 @@ p { ...@@ -478,10 +484,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear, .u-text .u-text-clear,
.u-text .u-text-see { .u-text .u-text-see {
position: absolute; position: absolute;
...@@ -543,7 +545,8 @@ p { ...@@ -543,7 +545,8 @@ p {
.custom-text input { .custom-text input {
padding-top: 0.213rem; padding-top: 0.213rem;
padding-bottom: 0.213rem; padding-bottom: 0.213rem;
padding-right: 1.013rem; padding-right: 0.667rem;
font-size: inherit;
} }
.custom-text input::-webkit-input-placeholder { .custom-text input::-webkit-input-placeholder {
...@@ -565,11 +568,11 @@ p { ...@@ -565,11 +568,11 @@ p {
} }
.custom-text .u-text-clear { .custom-text .u-text-clear {
right: 0.187rem; right: -0.187rem;
} }
.custom-text .u-text-clear:before { .custom-text .u-text-clear:before {
content: '\e601'; content: '\e724';
} }
.custom-text:after { .custom-text:after {
...@@ -1109,18 +1112,53 @@ p { ...@@ -1109,18 +1112,53 @@ p {
.batteryState { .batteryState {
text-align: right; text-align: right;
padding-right: 0.587rem; padding-right: 0.667rem;
font-size: 0.347rem;
} }
.batteryState span { .batteryState span:nth-child(1) {
font-family: iconfont; font-family: iconfont;
font-size: 0.64rem; font-size: 0.64rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1; line-height: 1;
color: #00ffff; color: #00ffff;
vertical-align: middle; vertical-align: middle;
margin-right: 0.133rem; }
.batteryState span:nth-child(2) {
width: 1.067rem;
display: inline-block;
vertical-align: middle;
text-align: right;
font-size: 0.347rem;
}
.bindDoorlock {
width: 5.333rem;
height: 5.333rem;
border-radius: 50%;
margin: 0 auto;
background-color: rgba(153, 153, 153, 0.05);
border: 0.08rem solid rgba(153, 153, 153, 0.05);
position: relative;
}
.bindDoorlock p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 2.827rem;
height: 2.827rem;
background: url("../../resources/image/green_bindDoorlock_icon.png") no-repeat center 0.64rem;
-webkit-background-size: 0.8rem 0.8rem;
background-size: 0.8rem 0.8rem;
border-radius: 50%;
border: 2px solid;
color: #00ffff;
text-align: center;
padding-top: 1.52rem;
} }
.title { .title {
...@@ -1132,6 +1170,10 @@ p { ...@@ -1132,6 +1170,10 @@ p {
background-size: 0.533rem 0.533rem; background-size: 0.533rem 0.533rem;
padding-left: 1.12rem; padding-left: 1.12rem;
line-height: 1; line-height: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
} }
.u-marquee { .u-marquee {
...@@ -1149,18 +1191,18 @@ p { ...@@ -1149,18 +1191,18 @@ p {
height: 0.96rem; height: 0.96rem;
text-align: center; text-align: center;
position: relative; position: relative;
color: #fff;
} }
.custom-marquee .u-marquee-text { .custom-marquee .u-marquee-text {
line-height: 0.96rem; line-height: 0.96rem;
color: #6B6C73;
} }
.custom-marquee:before { .custom-marquee:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 3.333rem; left: 0;
right: 0; right: 0;
height: 1px; height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635); background: -webkit-linear-gradient(left, #242635, #fff, #242635);
...@@ -1178,10 +1220,21 @@ p { ...@@ -1178,10 +1220,21 @@ p {
background: linear-gradient(to right, #242635, #fff, #242635); background: linear-gradient(to right, #242635, #fff, #242635);
} }
.title ~ .custom-marquee {
color: #73747B;
}
.title ~ .custom-marquee:before {
left: 3.333rem;
}
.title ~ .custom-marquee.active {
color: #91929a;
}
.active .u-marquee-text { .active .u-marquee-text {
-webkit-animation: marquee 5s linear infinite; -webkit-animation: marquee 5s linear infinite;
animation: marquee 5s linear infinite; animation: marquee 5s linear infinite;
color: #91929a;
} }
@-webkit-keyframes marquee { @-webkit-keyframes marquee {
...@@ -1214,6 +1267,7 @@ p { ...@@ -1214,6 +1267,7 @@ p {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
padding-top: 0.347rem;
} }
.switchGroup { .switchGroup {
......
...@@ -398,7 +398,8 @@ p { ...@@ -398,7 +398,8 @@ p {
} }
.header span { .header span {
color: #fff; color: #00ffff;
font-size: 0.427rem;
width: 1.467rem; width: 1.467rem;
line-height: 1.173rem; line-height: 1.173rem;
display: block; display: block;
...@@ -410,22 +411,31 @@ p { ...@@ -410,22 +411,31 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.133rem; padding-left: 0.24rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.133rem; padding-right: 0.24rem;
text-align: right; text-align: right;
} }
.header .icon { .header .icon {
color: #fff;
font-family: iconfont; font-family: iconfont;
font-size: 0.667rem; font-size: 0.667rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.173rem; line-height: 1.173rem;
} }
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content { .header ~ .content {
padding-top: 1.173rem; padding-top: 1.173rem;
} }
...@@ -525,13 +535,13 @@ p { ...@@ -525,13 +535,13 @@ p {
.custom-list .u-list-scroll .u-list-row { .custom-list .u-list-scroll .u-list-row {
height: 2rem; height: 2rem;
padding: 0 1.2rem 0 1.28rem; padding: 0 1.093rem;
} }
.custom-list .u-list-scroll .u-list-row .u-list-left-image { .custom-list .u-list-scroll .u-list-row .u-list-left-image {
width: 0.8rem; width: 0.8rem;
height: 0.8rem; height: 0.8rem;
margin-right: 1.013rem; margin-right: 0.88rem;
} }
.custom-list .u-list-scroll .u-list-row .u-list-title { .custom-list .u-list-scroll .u-list-row .u-list-title {
......
...@@ -398,7 +398,8 @@ p { ...@@ -398,7 +398,8 @@ p {
} }
.header span { .header span {
color: #fff; color: #00ffff;
font-size: 0.427rem;
width: 1.467rem; width: 1.467rem;
line-height: 1.173rem; line-height: 1.173rem;
display: block; display: block;
...@@ -410,22 +411,31 @@ p { ...@@ -410,22 +411,31 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.133rem; padding-left: 0.24rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.133rem; padding-right: 0.24rem;
text-align: right; text-align: right;
} }
.header .icon { .header .icon {
color: #fff;
font-family: iconfont; font-family: iconfont;
font-size: 0.667rem; font-size: 0.667rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.173rem; line-height: 1.173rem;
} }
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content { .header ~ .content {
padding-top: 1.173rem; padding-top: 1.173rem;
} }
...@@ -650,7 +660,7 @@ p { ...@@ -650,7 +660,7 @@ p {
border: 0; border: 0;
outline: 0; outline: 0;
-webkit-appearance: none; -webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem; padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent; background-color: transparent;
} }
...@@ -669,10 +679,6 @@ p { ...@@ -669,10 +679,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title { .u-text .u-text-title {
width: 1.92rem; width: 1.92rem;
padding-left: 0.533rem; padding-left: 0.533rem;
...@@ -680,10 +686,6 @@ p { ...@@ -680,10 +686,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear, .u-text .u-text-clear,
.u-text .u-text-see { .u-text .u-text-see {
position: absolute; position: absolute;
...@@ -738,24 +740,47 @@ p { ...@@ -738,24 +740,47 @@ p {
} }
} }
.inputBox {
width: 7.333rem;
margin: 0 auto;
padding-bottom: 1.067rem;
}
.custom-editName-text {
margin-top: 0;
}
.custom-editName-text input { .custom-editName-text input {
font-size: 0.48rem; padding-top: 0.453rem;
padding-left: 1.227rem; padding-bottom: 0.453rem;
padding-right: 0.667rem;
font-size: 0.427rem;
} }
.custom-editName-text input::-webkit-input-placeholder { .custom-editName-text input::-webkit-input-placeholder {
color: #91929a; color: #91929a;
} }
.custom-editName-text .u-text-clear { .custom-editName-text .u-text-icon {
right: 1.093rem; font-size: 0.64rem;
width: 1.28rem;
padding-left: 0.24rem;
vertical-align: text-bottom;
} }
.custom-editName-text .u-text-clear:before { .custom-editName-text .u-text-clear:before,
content: '\e601'; .custom-editName-text .u-text-see:before {
font-family: iconfont; font-family: iconfont;
color: #00ffff; color: #00ffff;
font-size: 0.533rem; font-size: 0.347rem;
}
.custom-editName-text .u-text-clear {
right: -0.187rem;
}
.custom-editName-text .u-text-clear:before {
content: '\e724';
} }
.custom-editName-text:after { .custom-editName-text:after {
...@@ -764,6 +789,9 @@ p { ...@@ -764,6 +789,9 @@ p {
} }
.errorTip { .errorTip {
position: absolute;
left: 0;
right: 0;
color: #fc2168; color: #fc2168;
font-size: 0.427rem; font-size: 0.427rem;
-webkit-transform: scale(0.7); -webkit-transform: scale(0.7);
......
...@@ -34,10 +34,10 @@ ...@@ -34,10 +34,10 @@
<transition name="fade"> <transition name="fade">
<v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap"> <v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap">
<div> <div>
<p>{{ showMsg }}</p> <p><img src="../../resources/image/green_unbindSuccess_icon.png">{{ showMsg }}</p>
</div> </div>
</<v-touch> </v-touch>
</transition> </transition>
<u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog> <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading> <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div> </div>
......
...@@ -398,7 +398,8 @@ p { ...@@ -398,7 +398,8 @@ p {
} }
.header span { .header span {
color: #fff; color: #00ffff;
font-size: 0.427rem;
width: 1.467rem; width: 1.467rem;
line-height: 1.173rem; line-height: 1.173rem;
display: block; display: block;
...@@ -410,22 +411,31 @@ p { ...@@ -410,22 +411,31 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.133rem; padding-left: 0.24rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.133rem; padding-right: 0.24rem;
text-align: right; text-align: right;
} }
.header .icon { .header .icon {
color: #fff;
font-family: iconfont; font-family: iconfont;
font-size: 0.667rem; font-size: 0.667rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.173rem; line-height: 1.173rem;
} }
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content { .header ~ .content {
padding-top: 1.173rem; padding-top: 1.173rem;
} }
...@@ -442,7 +452,7 @@ p { ...@@ -442,7 +452,7 @@ p {
border: 0; border: 0;
outline: 0; outline: 0;
-webkit-appearance: none; -webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem; padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent; background-color: transparent;
} }
...@@ -461,10 +471,6 @@ p { ...@@ -461,10 +471,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title { .u-text .u-text-title {
width: 1.92rem; width: 1.92rem;
padding-left: 0.533rem; padding-left: 0.533rem;
...@@ -472,10 +478,6 @@ p { ...@@ -472,10 +478,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear, .u-text .u-text-clear,
.u-text .u-text-see { .u-text .u-text-see {
position: absolute; position: absolute;
...@@ -530,6 +532,67 @@ p { ...@@ -530,6 +532,67 @@ p {
} }
} }
.inputBox {
width: 7.333rem;
margin: 0 auto;
padding-bottom: 1.067rem;
}
.custom-editName-text {
margin-top: 0;
}
.custom-editName-text input {
padding-top: 0.453rem;
padding-bottom: 0.453rem;
padding-right: 0.667rem;
font-size: 0.427rem;
}
.custom-editName-text input::-webkit-input-placeholder {
color: #91929a;
}
.custom-editName-text .u-text-icon {
font-size: 0.64rem;
width: 1.28rem;
padding-left: 0.24rem;
vertical-align: text-bottom;
}
.custom-editName-text .u-text-clear:before,
.custom-editName-text .u-text-see:before {
font-family: iconfont;
color: #00ffff;
font-size: 0.347rem;
}
.custom-editName-text .u-text-clear {
right: -0.187rem;
}
.custom-editName-text .u-text-clear:before {
content: '\e724';
}
.custom-editName-text:after {
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.errorTip {
position: absolute;
left: 0;
right: 0;
color: #fc2168;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
text-align: center;
height: 1.067rem;
line-height: 1.067rem;
}
.u-button { .u-button {
width: 6.4rem; width: 6.4rem;
color: #fff; color: #fff;
...@@ -553,6 +616,28 @@ p { ...@@ -553,6 +616,28 @@ p {
background-color: #bbb; background-color: #bbb;
} }
.custom-button {
width: 7.333rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
position: absolute;
bottom: 1.733rem;
left: 0;
right: 0;
}
.custom-button:active {
background-color: #153D4C;
}
.custom-button.disabled {
background-color: transparent;
color: #999;
}
.unbindState-dialog { .unbindState-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
......
...@@ -46,9 +46,9 @@ ...@@ -46,9 +46,9 @@
<transition name="fade"> <transition name="fade">
<v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap"> <v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap">
<div> <div>
<p>{{ $t('doorlockUser.unbindSuccess') }}</p> <p><img src="../../resources/image/green_unbindSuccess_icon.png">{{ $t('doorlockUser.unbindSuccess') }}</p>
</div> </div>
</<v-touch> </v-touch>
</transition> </transition>
<transition name="fade"> <transition name="fade">
<div class="guide-dialog" v-show="guideShowFlag"> <div class="guide-dialog" v-show="guideShowFlag">
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="telephone=no"/>
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./doorlockUsers.css"> <link rel="stylesheet" type="text/css" href="./doorlockUser.css">
<style type="text/css"> <style type="text/css">
[v-cloak]{ [v-cloak]{
display: none; display: none;
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="telephone=no"/>
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./doorlockUsers.css"> <link rel="stylesheet" type="text/css" href="./doorlockUser.css">
<style type="text/css"> <style type="text/css">
[v-cloak]{ [v-cloak]{
display: none; display: none;
......
...@@ -398,7 +398,8 @@ p { ...@@ -398,7 +398,8 @@ p {
} }
.header span { .header span {
color: #fff; color: #00ffff;
font-size: 0.427rem;
width: 1.467rem; width: 1.467rem;
line-height: 1.173rem; line-height: 1.173rem;
display: block; display: block;
...@@ -410,22 +411,31 @@ p { ...@@ -410,22 +411,31 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.133rem; padding-left: 0.24rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.133rem; padding-right: 0.24rem;
text-align: right; text-align: right;
} }
.header .icon { .header .icon {
color: #fff;
font-family: iconfont; font-family: iconfont;
font-size: 0.667rem; font-size: 0.667rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.173rem; line-height: 1.173rem;
} }
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content { .header ~ .content {
padding-top: 1.173rem; padding-top: 1.173rem;
} }
......
...@@ -398,7 +398,8 @@ p { ...@@ -398,7 +398,8 @@ p {
} }
.header span { .header span {
color: #fff; color: #00ffff;
font-size: 0.427rem;
width: 1.467rem; width: 1.467rem;
line-height: 1.173rem; line-height: 1.173rem;
display: block; display: block;
...@@ -410,35 +411,42 @@ p { ...@@ -410,35 +411,42 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.133rem; padding-left: 0.24rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.133rem; padding-right: 0.24rem;
text-align: right; text-align: right;
} }
.header .icon { .header .icon {
color: #fff;
font-family: iconfont; font-family: iconfont;
font-size: 0.667rem; font-size: 0.667rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.173rem; line-height: 1.173rem;
} }
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content { .header ~ .content {
padding-top: 1.173rem; padding-top: 1.173rem;
} }
.user-list { .user-list {
width: 100%;
height: 100%;
overflow: auto;
position: absolute; position: absolute;
top: 1.173rem; top: 1.173rem;
bottom: 0; bottom: 0;
left: 0; left: 0;
height: auto; width: 100%;
overflow: auto;
} }
.user-list-scroll .user-list-row { .user-list-scroll .user-list-row {
...@@ -452,7 +460,8 @@ p { ...@@ -452,7 +460,8 @@ p {
transition: left 0.4s ease; transition: left 0.4s ease;
left: 0; left: 0;
background-color: #242635; background-color: #242635;
padding: 0.4rem 0.533rem; height: 2rem;
padding: 0 1.733rem 0 1.12rem;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
...@@ -463,17 +472,9 @@ p { ...@@ -463,17 +472,9 @@ p {
} }
.user-list-scroll .user-list-row .user-list-handle .user-list-image { .user-list-scroll .user-list-row .user-list-handle .user-list-image {
width: 1.333rem; width: 0.72rem;
height: 1.333rem; height: 0.72rem;
margin-right: 0.267rem; margin-right: 0.373rem;
}
.user-list-scroll .user-list-row .user-list-handle .user-list-icon {
margin-right: 0.267rem;
font-family: iconfont;
font-size: 0.533rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
} }
.user-list-scroll .user-list-row .user-list-handle div { .user-list-scroll .user-list-row .user-list-handle div {
...@@ -484,36 +485,47 @@ p { ...@@ -484,36 +485,47 @@ p {
} }
.user-list-scroll .user-list-row .user-list-handle .user-list-title { .user-list-scroll .user-list-row .user-list-handle .user-list-title {
font-size: 0.427rem;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-bottom: 0.133rem;
} }
.user-list-scroll .user-list-row .user-list-handle .user-sub-image { .user-list-scroll .user-list-row .user-list-handle .user-list-subtitle span {
width: 0.453rem; display: inline-block;
height: 0.453rem; width: 4.853rem;
}
.user-list-scroll .user-list-row .user-list-handle .user-list-subtitle {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; vertical-align: middle;
} }
.user-list-scroll .user-list-row .user-list-handle.user-list-selected { .user-list-scroll .user-list-row .user-list-handle .user-list-subimage {
left: -3.2rem; width: 0.533rem;
height: 0.533rem;
margin-right: 0.24rem;
} }
.user-list-scroll .user-list-row .user-list-handle:after { .user-list-scroll .user-list-row .user-list-handle:after {
content: "\e611"; content: '\e6a7';
display: block; position: absolute;
top: 50%;
right: 0.933rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: iconfont; font-family: iconfont;
font-size: 0.533rem; font-size: 0.667rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1; line-height: 1;
-webkit-transform: rotate(180deg); }
transform: rotate(180deg);
.user-list-scroll .user-list-row .user-list-handle.user-list-selected {
left: -1.76rem;
}
.user-list-scroll .user-list-row .user-list-handle.user-list-selected:after {
display: none;
} }
.user-list-scroll .user-list-row .user-list-button { .user-list-scroll .user-list-row .user-list-button {
...@@ -525,31 +537,135 @@ p { ...@@ -525,31 +537,135 @@ p {
} }
.user-list-scroll .user-list-row .user-list-button div { .user-list-scroll .user-list-row .user-list-button div {
width: 1.6rem; width: 1.76rem;
height: 100%; height: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center; -webkit-box-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
color: #fff; color: #00ffff;
float: left; font-family: iconfont;
font-size: 0.4rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
padding-left: 0.267rem;
}
.user-list-scroll .user-list-row:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
z-index: 2;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635);
}
.user-list-scroll .user-list-row:active .user-list-handle:not(.user-list-selected) {
background-color: #191b25;
} }
.user-list-scroll .user-list-row .user-list-button div:nth-last-of-type(1) { .user-list-load {
text-align: center;
color: #00ffff;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
height: 0.933rem;
line-height: 0.933rem;
}
.inputBox {
position: relative;
margin: 0 auto;
padding: 5.333rem 0 1.067rem;
width: 7.333rem;
height: auto;
background: url("../../resources/image/gray_addUser_icon.png") no-repeat center 2.4rem;
-webkit-background-size: 1.733rem 1.733rem;
background-size: 1.733rem 1.733rem;
}
.u-text {
width: 100%;
display: table;
position: relative;
}
.u-text input {
display: table-cell;
width: 100%;
border: 0;
outline: 0;
-webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent; background-color: transparent;
}
.u-text input[type=text] ~ .u-text-see {
color: #007aff;
}
.u-text .u-text-icon {
font-family: iconfont; font-family: iconfont;
font-size: 0.533rem; font-size: 0.533rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1; line-height: 1;
color: #00FFFF; width: 1.12rem;
padding-left: 0.453rem;
display: table-cell;
vertical-align: middle;
} }
.user-list-scroll .user-list-row:after { .u-text .u-text-title {
width: 1.92rem;
padding-left: 0.533rem;
display: table-cell;
vertical-align: middle;
}
.u-text .u-text-clear,
.u-text .u-text-see {
position: absolute;
top: 0;
width: 0.8rem;
height: 100%;
}
.u-text .u-text-clear:before,
.u-text .u-text-see:before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: defaultIconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.u-text .u-text-clear {
right: 0.8rem;
}
.u-text .u-text-clear:before {
content: '\e724';
}
.u-text .u-text-see {
right: 0;
}
.u-text .u-text-see:before {
content: '\e73c';
}
.u-text:after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -557,7 +673,111 @@ p { ...@@ -557,7 +673,111 @@ p {
right: 0; right: 0;
height: 1px; height: 1px;
background: #bbb; background: #bbb;
z-index: 2; }
@media (max-height: 400px /*no*/) {
#app {
height: 17.253rem;
position: relative;
}
}
.custom-text {
margin-top: 0.453rem;
}
.custom-text input {
padding-top: 0.213rem;
padding-bottom: 0.213rem;
padding-right: 0.667rem;
font-size: inherit;
}
.custom-text input::-webkit-input-placeholder {
color: #91929a;
}
.custom-text .u-text-icon {
font-size: 0.64rem;
width: 1.28rem;
padding-left: 0.24rem;
vertical-align: text-bottom;
}
.custom-text .u-text-clear:before,
.custom-text .u-text-see:before {
font-family: iconfont;
color: #00ffff;
font-size: 0.347rem;
}
.custom-text .u-text-clear {
right: -0.187rem;
}
.custom-text .u-text-clear:before {
content: '\e724';
}
.custom-text:after {
background: -webkit-linear-gradient(left, #242635, #fff, #242635); background: -webkit-linear-gradient(left, #242635, #fff, #242635);
background: linear-gradient(to right, #242635, #fff, #242635); background: linear-gradient(to right, #242635, #fff, #242635);
}
.errorTip {
position: absolute;
left: 0;
right: 0;
color: #fc2168;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
transform: scale(0.7);
text-align: center;
height: 1.067rem;
line-height: 1.067rem;
}
.u-button {
width: 6.4rem;
color: #fff;
font-size: inherit;
background-color: #007aff;
border-radius: 0.533rem;
text-align: center;
line-height: 1;
margin: 0 auto;
padding: 0.267rem 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
background-clip: padding-box;
}
.u-button:active {
background-color: #0065ff;
}
.u-button.disabled {
background-color: #bbb;
}
.custom-button {
width: 7.333rem;
border-radius: 0.133rem;
background-color: transparent;
border: 1px solid;
color: #00ffff;
font-size: 0.427rem;
position: absolute;
bottom: 1.733rem;
left: 0;
right: 0;
}
.custom-button:active {
background-color: #153D4C;
}
.custom-button.disabled {
background-color: transparent;
color: #999;
} }
\ No newline at end of file
...@@ -398,7 +398,8 @@ p { ...@@ -398,7 +398,8 @@ p {
} }
.header span { .header span {
color: #fff; color: #00ffff;
font-size: 0.427rem;
width: 1.467rem; width: 1.467rem;
line-height: 1.173rem; line-height: 1.173rem;
display: block; display: block;
...@@ -410,22 +411,31 @@ p { ...@@ -410,22 +411,31 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.133rem; padding-left: 0.24rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.133rem; padding-right: 0.24rem;
text-align: right; text-align: right;
} }
.header .icon { .header .icon {
color: #fff;
font-family: iconfont; font-family: iconfont;
font-size: 0.667rem; font-size: 0.667rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.173rem; line-height: 1.173rem;
} }
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content { .header ~ .content {
padding-top: 1.173rem; padding-top: 1.173rem;
} }
...@@ -460,7 +470,7 @@ p { ...@@ -460,7 +470,7 @@ p {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
padding: 4.907rem 0 1.067rem; padding: 4.907rem 0 1.067rem;
width: 6.667rem; width: 7.333rem;
height: 10.133rem; height: 10.133rem;
background: url("../../resources/image/logo.png") no-repeat center 2rem; background: url("../../resources/image/logo.png") no-repeat center 2rem;
-webkit-background-size: 1.707rem 1.707rem; -webkit-background-size: 1.707rem 1.707rem;
...@@ -479,7 +489,7 @@ p { ...@@ -479,7 +489,7 @@ p {
border: 0; border: 0;
outline: 0; outline: 0;
-webkit-appearance: none; -webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem; padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent; background-color: transparent;
} }
...@@ -498,10 +508,6 @@ p { ...@@ -498,10 +508,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title { .u-text .u-text-title {
width: 1.92rem; width: 1.92rem;
padding-left: 0.533rem; padding-left: 0.533rem;
...@@ -509,10 +515,6 @@ p { ...@@ -509,10 +515,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear, .u-text .u-text-clear,
.u-text .u-text-see { .u-text .u-text-see {
position: absolute; position: absolute;
...@@ -578,7 +580,8 @@ p { ...@@ -578,7 +580,8 @@ p {
.custom-code-text input { .custom-code-text input {
padding-top: 0.213rem; padding-top: 0.213rem;
padding-bottom: 0.213rem; padding-bottom: 0.213rem;
padding-right: 1.013rem; padding-right: 0.667rem;
font-size: inherit;
} }
.custom-text input::-webkit-input-placeholder, .custom-text input::-webkit-input-placeholder,
...@@ -610,13 +613,13 @@ p { ...@@ -610,13 +613,13 @@ p {
.custom-text .u-text-clear, .custom-text .u-text-clear,
.custom-password-text .u-text-clear, .custom-password-text .u-text-clear,
.custom-code-text .u-text-clear { .custom-code-text .u-text-clear {
right: 0.187rem; right: -0.187rem;
} }
.custom-text .u-text-clear:before, .custom-text .u-text-clear:before,
.custom-password-text .u-text-clear:before, .custom-password-text .u-text-clear:before,
.custom-code-text .u-text-clear:before { .custom-code-text .u-text-clear:before {
content: '\e601'; content: '\e724';
} }
.custom-text:after, .custom-text:after,
...@@ -699,7 +702,7 @@ p { ...@@ -699,7 +702,7 @@ p {
} }
.custom-password-text input { .custom-password-text input {
padding-right: 1.867rem; padding-right: 1.547rem;
} }
.custom-password-text input[type=text] ~ .u-text-see:before { .custom-password-text input[type=text] ~ .u-text-see:before {
...@@ -707,11 +710,11 @@ p { ...@@ -707,11 +710,11 @@ p {
} }
.custom-password-text .u-text-clear { .custom-password-text .u-text-clear {
right: 0.987rem; right: 0.667rem;
} }
.custom-password-text .u-text-see { .custom-password-text .u-text-see {
right: 0.187rem; right: -0.187rem;
} }
.custom-password-text .u-text-see:before { .custom-password-text .u-text-see:before {
......
<!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="./myInfo.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">
<v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
<p>{{ $t('title.doorlockUsers') }}</p>
<v-touch tag="span" class="header-right" v-on:tap="onSaveTap">{{ $t('btn.save') }}</v-touch>
</div>
<div class="content">
<u-text :init-param="componentsConfig.nameInput.initParam" :text="textNickName"
v-on:u-text-change="onNicknameChange(arguments[0])"></u-text>
<p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
<u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div>
</div>
<script type="text/javascript" src="./editNickname.js" defer async></script>
</body>
</html>
<!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="./myInfo.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">
<v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
<p>{{ $t('title.doorlockUsers') }}</p>
<v-touch tag="span" class="header-right" v-on:tap="onSaveTap">{{ $t('btn.save') }}</v-touch>
</div>
<div class="content">
<u-text :init-param="componentsConfig.newPassword.initParam" :text="textNewPassword"
v-on:u-text-change="onNewPasswordChange(arguments[0])"></u-text>
<u-text :init-param="componentsConfig.oldPassword.initParam" :text="textOldPassword"
v-on:u-text-change="onOldPasswordChange(arguments[0])"></u-text>
<u-text :init-param="componentsConfig.oldPasswordAgain.initParam" :text="textOldPasswordAgain"
v-on:u-text-change="onOldPasswordAgainChange(arguments[0])"></u-text>
<p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
<u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div>
</div>
<script type="text/javascript" src="./editPassword.js" defer async></script>
</body>
</html>
...@@ -398,7 +398,8 @@ p { ...@@ -398,7 +398,8 @@ p {
} }
.header span { .header span {
color: #fff; color: #00ffff;
font-size: 0.427rem;
width: 1.467rem; width: 1.467rem;
line-height: 1.173rem; line-height: 1.173rem;
display: block; display: block;
...@@ -410,22 +411,31 @@ p { ...@@ -410,22 +411,31 @@ p {
.header .header-left { .header .header-left {
float: left; float: left;
padding-left: 0.133rem; padding-left: 0.24rem;
} }
.header .header-right { .header .header-right {
float: right; float: right;
padding-right: 0.133rem; padding-right: 0.24rem;
text-align: right; text-align: right;
} }
.header .icon { .header .icon {
color: #fff;
font-family: iconfont; font-family: iconfont;
font-size: 0.667rem; font-size: 0.667rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.173rem; line-height: 1.173rem;
} }
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content { .header ~ .content {
padding-top: 1.173rem; padding-top: 1.173rem;
} }
...@@ -442,7 +452,7 @@ p { ...@@ -442,7 +452,7 @@ p {
border: 0; border: 0;
outline: 0; outline: 0;
-webkit-appearance: none; -webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem; padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent; background-color: transparent;
} }
...@@ -461,10 +471,6 @@ p { ...@@ -461,10 +471,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title { .u-text .u-text-title {
width: 1.92rem; width: 1.92rem;
padding-left: 0.533rem; padding-left: 0.533rem;
...@@ -472,10 +478,6 @@ p { ...@@ -472,10 +478,6 @@ p {
vertical-align: middle; vertical-align: middle;
} }
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear, .u-text .u-text-clear,
.u-text .u-text-see { .u-text .u-text-see {
position: absolute; position: absolute;
......
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