Skip to content

D
DoorLock
Commit fd68d264 by wangying
Options

1.0.8 / 2017-10-11 

==================
 * 1.上传主页绑定门锁样式
 * 2.上传用户列表、添加用户、修改名称样式
parent 3d30bb28
Showing with 830 additions and 284 deletions
History.md
1.0.8 / 2017-10-10 1.0.8 / 2017-10-11
==================
* 1.上传主页绑定门锁样式
* 2.上传用户列表、添加用户、修改名称样式
1.0.8 / 2017-10-10
================== ==================
* 1.上传门锁用户、门锁管理框架（标签、多语言、基本功能） * 1.上传门锁用户、门锁管理框架（标签、多语言、基本功能）
......
dev/src/lang/zh.json
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
"bindUserHelp": "ID-姓名绑定", "bindUserHelp": "ID-姓名绑定",
"bindUser": "绑定用户", "bindUser": "绑定用户",
"userList": "用户列表", "userList": "用户列表",
"doorlockUsers": "门锁用户", "doorlockUser": "门锁用户",
"addUser": "添加用户", "addUser": "添加用户",
"editName": "修改名称", "editName": "修改名称",
"inviteBind": "邀请绑定", "inviteBind": "邀请绑定",
...@@ -121,7 +121,8 @@ ...@@ -121,7 +121,8 @@
}, },
"doorlockManage":{ "doorlockManage":{
"name": "名称", "name": "名称",
"unbindDialogTip": "<span></span>解锁门锁后，您将失去对该门锁<br>所有查看、管理等功能操作" "unbindDialogTip": "<span></span>解锁门锁后，您将失去对该门锁<br>所有查看、管理等功能操作",
"unbindSuccess": "解绑成功"
}, },
"editName":{ "editName":{
"nameInputTip": "请输入门锁名称", "nameInputTip": "请输入门锁名称",
...@@ -196,7 +197,7 @@ ...@@ -196,7 +197,7 @@
} }
}, },
"doorlockUsers":{ "doorlockUser":{
"name": "昵称：", "name": "昵称：",
"inviteBind": "邀请绑定", "inviteBind": "邀请绑定",
"bindUnlockInfo": "绑定开锁信息", "bindUnlockInfo": "绑定开锁信息",
......
dev/src/view/device/v_index.js
...@@ -29,6 +29,8 @@ function init() { ...@@ -29,6 +29,8 @@ function init() {
valueDoorlockManage: 1, valueDoorlockManage: 1,
activeFlag: true, activeFlag: true,
followShowFlag: false, followShowFlag: false,
doorbellShowFlag: true,
bindDoorlockShowFlag: false,
//配置组件 //配置组件
componentsConfig: initComponentsConfig() componentsConfig: initComponentsConfig()
}, },
......
dev/src/view/doorlockUsers/v_addUser.js
...@@ -81,7 +81,7 @@ function nameChange(self,text){ ...@@ -81,7 +81,7 @@ function nameChange(self,text){
//tap 确定 //tap 确定
function confirmButtonTap(){ function confirmButtonTap(){
iot.navigator.openWindow({ iot.navigator.openWindow({
url: './doorlockUsers.html', url: './doorlockUser.html',
id: 'doorlockUsers' id: 'doorlockUser'
}); });
} }
\ No newline at end of file
dev/src/view/doorlockUsers/v_doorlockUsers.js → dev/src/view/doorlockUsers/v_doorlockUser.js
/** /**
* v_doorlockUsers.js * v_doorlockUser.js
* Version: 0.1 * Version: 0.1
* User: wy * User: wy
* Date: 2017-10-09 * Date: 2017-10-09
...@@ -191,7 +191,7 @@ function bindTap(){ ...@@ -191,7 +191,7 @@ function bindTap(){
//tap 解绑 //tap 解绑
function unbindButtonTap(self){ function unbindButtonTap(self){
uComponents.openConfirm(self, Vue.t('doorlockUsers.unbindDialogTip'), uComponents.openConfirm(self, Vue.t('doorlockUser.unbindDialogTip'),
{text: Vue.t('dialog.cancel'), callback: function () {}}, {text: Vue.t('dialog.cancel'), callback: function () {}},
{text: Vue.t('dialog.unbind'), callback: function () { {text: Vue.t('dialog.unbind'), callback: function () {
self.setStateShowFlag(true); self.setStateShowFlag(true);
...@@ -223,7 +223,7 @@ function opendoorRecordTap(){ ...@@ -223,7 +223,7 @@ function opendoorRecordTap(){
//tap 删除该用户 //tap 删除该用户
function deleteUserButtonTap(self){ function deleteUserButtonTap(self){
uComponents.openConfirm(self, Vue.t('doorlockUsers.deleteUserDialogTip'), uComponents.openConfirm(self, Vue.t('doorlockUser.deleteUserDialogTip'),
{text: Vue.t('dialog.cancel'), callback: function () {}}, {text: Vue.t('dialog.cancel'), callback: function () {}},
{text: Vue.t('dialog.delete'), callback: function () {}} {text: Vue.t('dialog.delete'), callback: function () {}}
); );
......
dev/src/view/doorlockUsers/v_editName.js
...@@ -43,7 +43,7 @@ function initComponentsConfig() { ...@@ -43,7 +43,7 @@ function initComponentsConfig() {
return { return {
nameInput: { nameInput: {
initParam: { initParam: {
class: 'custom-text', class: 'custom-editName-text',
placeholder: Vue.t('editName.nameInputTip') placeholder: Vue.t('editName.nameInputTip')
} }
}, },
......
dev/src/view/doorlockUsers/v_index.js
...@@ -101,8 +101,8 @@ function tapUserList(self, listIndex) { ...@@ -101,8 +101,8 @@ function tapUserList(self, listIndex) {
return; return;
} }
iot.navigator.openWindow({ iot.navigator.openWindow({
url: './doorlockUsers.html', url: './doorlockUser.html',
id: 'doorlockUsers' id: 'doorlockUser'
}); });
} }
......
web/lib/js/p.js
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
/******/ if (__webpack_require__.nc) { /******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc); /******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ } /******/ }
/******/ script.src = __webpack_require__.p + "" + ({"0":"bindUser/index","1":"login/register","2":"login/login","3":"login/index","4":"login/forgetPassword","5":"doorlockUsers/unlockInfo","6":"doorlockUsers/inviteBind","7":"doorlockUsers/index","8":"doorlockUsers/editName","9":"doorlockUsers/doorlockUsers","10":"doorlockUsers/addUser","11":"doorlockUsers/addUnlockInfo","12":"doorlockManage/index","13":"doorlockManage/editName","14":"device/remoteOpendoor","15":"device/opendoorRecord","16":"device/index","17":"device/hijackRecord","18":"device/alarmInfo","19":"addDevice/wifiAddHelp","20":"addDevice/wifiAdd","21":"addDevice/scanCodeAdd","22":"addDevice/index"}[chunkId]||chunkId) + ".js"; /******/ script.src = __webpack_require__.p + "" + ({"0":"bindUser/index","1":"login/register","2":"login/login","3":"login/index","4":"login/forgetPassword","5":"doorlockUsers/unlockInfo","6":"doorlockUsers/inviteBind","7":"doorlockUsers/index","8":"doorlockUsers/editName","9":"doorlockUsers/doorlockUser","10":"doorlockUsers/addUser","11":"doorlockUsers/addUnlockInfo","12":"doorlockManage/index","13":"doorlockManage/editName","14":"device/remoteOpendoor","15":"device/opendoorRecord","16":"device/index","17":"device/hijackRecord","18":"device/alarmInfo","19":"addDevice/wifiAddHelp","20":"addDevice/wifiAdd","21":"addDevice/scanCodeAdd","22":"addDevice/index"}[chunkId]||chunkId) + ".js";
/******/ var timeout = setTimeout(onScriptComplete, 120000); /******/ var timeout = setTimeout(onScriptComplete, 120000);
/******/ script.onerror = script.onload = onScriptComplete; /******/ script.onerror = script.onload = onScriptComplete;
/******/ function onScriptComplete() { /******/ function onScriptComplete() {
......
web/lib/less/device/device.less
...@@ -150,13 +150,44 @@ ...@@ -150,13 +150,44 @@
.batteryState{ .batteryState{
text-align: right; text-align: right;
padding-right: 22px; padding-right: 25px;
font-size: 13px;
span{ span{
&:nth-child(1){
.iconfont(24px); .iconfont(24px);
color: #00ffff; color: #00ffff;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; }
&: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;
} }
} }
...@@ -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{
......
web/lib/less/device/recordList.less
...@@ -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;
......
web/lib/less/doorlockManage/doorlockManage.less
...@@ -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();
} }
......
web/lib/less/doorlockUsers/doorlockUsers.less → web/lib/less/doorlockUsers/doorlockUser.less
@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();
} }
......
web/lib/less/doorlockUsers/userList.less
@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{
.user-list-scroll{
.user-list-row{
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.user-list-handle{ .user-list-handle{
position: relative; position: relative;
.transition(left 0.4s ease); .transition(left 0.4s ease);
left: 0; left: 0;
background-color: @BODY-BG-COLOR; background-color: @USERLIST-ROW-BG;
padding: 15px 20px; height: 75px;
padding: 0 65px 0 42px;
.display-box(); .display-box();
.box-vertical-alignment(); .box-vertical-alignment();
z-index: 2; z-index: 2;
.user-list-image{ .user-list-image{
width: 50px; width: 27px;
height: 50px; height: 27px;
margin-right: 10px; margin-right: 14px;
}
.user-list-icon{
margin-right: 10px;
.iconfont(@SWIPELIST-COMPONENT-ICON-FONTSIZE);
} }
div{ div{
.flex(); .flex();
min-width: 0; min-width: 0;
} }
.user-list-title{ .user-list-title{
font-size: @USERLIST-TITLE-FONTSIZE;
.text_oneRow_ellipsis(); .text_oneRow_ellipsis();
margin-bottom: 5px;
} }
.user-sub-image{ .user-list-subtitle span{
width: 17px;
height: 17px;
}
.user-list-subtitle{
.text_oneRow_ellipsis();
display: inline-block; display: inline-block;
width: 182px;
.text_oneRow_ellipsis();
vertical-align: middle;
} }
&.user-list-selected{ .user-list-subimage{
left: -120px; 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{ &:after{
content: "\e611"; display: none;
display: block; }
.iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
.transform(rotate(180deg));
} }
} }
.user-list-button{ .user-list-button{
...@@ -65,23 +70,55 @@ ...@@ -65,23 +70,55 @@
right: 0; right: 0;
z-index: 1; z-index: 1;
div{ div{
width: 60px; width: 66px;
height: 100%; height: 100%;
.display-box(); .display-box();
.box-horizontal-alignment();
.box-vertical-alignment(); .box-vertical-alignment();
color: @SWIPELIST-COMPONENT-BUTTON-COLOR; color: @USERLIST-BUTTON-ICON-COLOR;
float: left; .iconfont(@USERLIST-BUTTON-ICON-FONTSIZE);
&:nth-last-of-type(1){ padding-left: 10px;
background-color: transparent;
.iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
color: #00FFFF;
}
} }
} }
&:after{ &:after{
.defaultBorder(); content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
z-index: 2; z-index: 2;
.white_gradient_border(); .white_gradient_border();
} }
&:active .user-list-handle:not(.user-list-selected){
background-color: @USERLIST-ROW-ACTIVE-BG;
}
}
}
.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
web/lib/less/public/animation.less
...@@ -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,{
......
web/lib/less/public/core.less
...@@ -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);
} }
} }
......
web/lib/less/public/header.less
...@@ -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;
......
web/lib/less/public/public.less
...@@ -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{
......
web/lib/less/public/variables.less
...@@ -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;
...@@ -240,3 +248,11 @@ ...@@ -240,3 +248,11 @@
@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;
//门锁用户列表
@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
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
web/view/addDevice/addDevice.css
...@@ -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;
......
web/view/bindUser/bindUser.css
...@@ -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;
......
web/view/device/device.css
...@@ -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 {
......
web/view/device/index.html
...@@ -26,7 +26,8 @@ ...@@ -26,7 +26,8 @@
</div> </div>
<div class="content"> <div class="content">
<div class="topCpnt"> <div class="topCpnt">
<!-- <div class="doorbellBg active"> <div v-show="doorbellShowFlag">
<div class="doorbellBg active">
<div class="doorbellCircle"> <div class="doorbellCircle">
<div class="doorbell"> <div class="doorbell">
<p></p> <p></p>
...@@ -34,8 +35,9 @@ ...@@ -34,8 +35,9 @@
</div> </div>
<div class="doorbellTip"><span>17:30</span>门铃响了</div> <div class="doorbellTip"><span>17:30</span>门铃响了</div>
</div> </div>
<p class="batteryState"><span>&#xe629;</span>100%</p> --> <p class="batteryState"><span>&#xe629;</span><span>100%</span></p>
<v-touch tag="div" class="bindDoorlock" v-on:tap="onBindDoorlockTap"> </div>
<v-touch tag="div" class="bindDoorlock" v-on:tap="onBindDoorlockTap" v-show="bindDoorlockShowFlag">
<p>{{ $t('device.bindDoorlock') }}</p> <p>{{ $t('device.bindDoorlock') }}</p>
</v-touch> </v-touch>
</div> </div>
......
web/view/device/recordList.css
...@@ -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 {
......
web/view/doorlockManage/doorlockManage.css
...@@ -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);
......
web/view/doorlockManage/index.html
...@@ -34,9 +34,9 @@ ...@@ -34,9 +34,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('doorlockUsers.unbindSuccess') }}</p> <p><img src="../../resources/image/green_unbindSuccess_icon.png">{{ $t('doorlockManage.unbindSuccess') }}</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>
......
web/view/doorlockUsers/addUser.html
...@@ -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="./userList.css">
<style type="text/css"> <style type="text/css">
[v-cloak]{ [v-cloak]{
display: none; display: none;
......
web/view/doorlockUsers/doorlockUsers.css → web/view/doorlockUsers/doorlockUser.css
...@@ -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;
......
web/view/doorlockUsers/doorlockUsers.html → web/view/doorlockUsers/doorlockUser.html
...@@ -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;
...@@ -22,33 +22,33 @@ ...@@ -22,33 +22,33 @@
<div id="app" v-cloak> <div id="app" v-cloak>
<div class="header"> <div class="header">
<v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch> <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
<p>{{ $t('title.doorlockUsers') }}</p> <p>{{ $t('title.doorlockUser') }}</p>
</div> </div>
<div class="content"> <div class="content">
<ul class="userInfoLink"> <ul class="userInfoLink">
<li class="userInfo" v-bind:class="{noBind: userInfo.role != 0}"> <li class="userInfo">
<img class="userInfo-image" v-if="userInfo.image && userInfo.role == 0" v-bind:src="userInfo.image"> <img class="userInfo-image" v-if="userInfo.image && userInfo.role == 0" v-bind:src="userInfo.image">
<div> <div>
<v-touch tag="p" class="userInfo-title" v-on:tap="onEditNameTap">{{ userInfo.title }}</v-touch> <v-touch tag="p" class="userInfo-title" v-on:tap="onEditNameTap">{{ userInfo.title }}</v-touch>
<p class="userInfo-subtitle"> <p class="userInfo-subtitle">
<img class="userInfo-subimage" v-if="userInfo.image && userInfo.role != 0" v-bind:src="userInfo.image"> <img class="userInfo-subimage" v-if="userInfo.image && userInfo.role != 0" v-bind:src="userInfo.image">
{{ $t('doorlockUsers.name') }}<span class="userInfo-name" v-if="userInfo.subtitle">{{ userInfo.subtitle }}</span> {{ $t('doorlockUser.name') }}<span class="userInfo-name" v-if="userInfo.subtitle">{{ userInfo.subtitle }}</span>
<v-touch tag="span" class="userInfo-toBind" v-show="bindShowFlag" v-on:tap="onBindTap">{{ $t('doorlockUsers.inviteBind') }}</v-touch> <v-touch tag="span" class="userInfo-toBind" v-show="bindShowFlag" v-on:tap="onBindTap">{{ $t('doorlockUser.inviteBind') }}</v-touch>
<u-button :init-param="componentsConfig.unbindButton.initParam" v-on:u-button-tap="onUnbindButtonTap" v-show="unbindShowFlag"></u-button> <u-button :init-param="componentsConfig.unbindButton.initParam" v-on:u-button-tap="onUnbindButtonTap" v-show="unbindShowFlag"></u-button>
</p> </p>
</div> </div>
</li> </li>
<v-touch tag="li" v-on:tap="onBindUnlockInfoTap">{{ $t('doorlockUsers.bindUnlockInfo') }}</v-touch> <v-touch tag="li" v-on:tap="onBindUnlockInfoTap">{{ $t('doorlockUser.bindUnlockInfo') }}</v-touch>
<v-touch tag="li" v-on:tap="onOpendoorRecordTap">{{ $t('doorlockUsers.opendoorRecord') }}</v-touch> <v-touch tag="li" v-on:tap="onOpendoorRecordTap">{{ $t('doorlockUser.opendoorRecord') }}</v-touch>
</ul> </ul>
<u-button :init-param="componentsConfig.deleteUserButton.initParam" v-on:u-button-tap="onDeleteUserButtonTap"></u-button> <u-button :init-param="componentsConfig.deleteUserButton.initParam" v-on:u-button-tap="onDeleteUserButtonTap"></u-button>
</div> </div>
<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('doorlockUsers.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">
...@@ -56,11 +56,11 @@ ...@@ -56,11 +56,11 @@
<div class="guideStep1" v-show="guideStep1ShowFlag"> <div class="guideStep1" v-show="guideStep1ShowFlag">
<div class="guideStep1Cont"> <div class="guideStep1Cont">
<p>我是个用户</p> <p>我是个用户</p>
<p><img src="../../resources/image/gray_unbindHead_icon.png">{{ $t('doorlockUsers.name') }}<span>{{ $t('doorlockUsers.inviteBind') }}</span></p> <p><img src="../../resources/image/gray_unbindHead_icon.png">{{ $t('doorlockUser.name') }}<span>{{ $t('doorlockUser.inviteBind') }}</span></p>
</div> </div>
<div class="guideStep1Tip"> <div class="guideStep1Tip">
<p>{{ $t('doorlockUsers.guideStep1Tip1') }}</p> <p>{{ $t('doorlockUser.guideStep1Tip1') }}</p>
<p v-html="$t('doorlockUsers.guideStep1Tip2')"></p> <p v-html="$t('doorlockUser.guideStep1Tip2')"></p>
</div> </div>
</div> </div>
</transition> </transition>
...@@ -72,9 +72,9 @@ ...@@ -72,9 +72,9 @@
<transition name="fade"> <transition name="fade">
<div class="guideStep3" v-show="guideStep3ShowFlag"> <div class="guideStep3" v-show="guideStep3ShowFlag">
<div class="guideStep3Cont"> <div class="guideStep3Cont">
<p>{{ $t('doorlockUsers.bindUnlockInfo') }}</p> <p>{{ $t('doorlockUser.bindUnlockInfo') }}</p>
</div> </div>
<div class="guideStep3Tip" v-html="$t('doorlockUsers.guideStep3Tip')"></div> <div class="guideStep3Tip" v-html="$t('doorlockUser.guideStep3Tip')"></div>
</div> </div>
</transition> </transition>
<transition name="fade"> <transition name="fade">
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading> <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div> </div>
<script type="text/javascript" src="./doorlockUsers.js" defer async></script> <script type="text/javascript" src="./doorlockUser.js" defer async></script>
</body> </body>
</html> </html>
\ No newline at end of file
web/view/doorlockUsers/editName.html
...@@ -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;
......
web/view/doorlockUsers/index.html
...@@ -22,12 +22,12 @@ ...@@ -22,12 +22,12 @@
<div id="app" v-cloak> <div id="app" v-cloak>
<div class="header"> <div class="header">
<v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch> <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
<p>{{ $t('title.doorlockUsers') }}</p> <p>{{ $t('title.doorlockUser') }}</p>
<v-touch tag="span" class="header-right icon" v-on:tap="onAddUserTap">&#xe600;</v-touch> <v-touch tag="span" class="header-right icon" v-on:tap="onAddUserTap">&#xe600;</v-touch>
</div> </div>
<div class="user-list"> <div class="user-list">
<ul class="user-list-scroll" v-show="userList.length"> <ul class="user-list-scroll" v-show="userList.length">
<v-touch tag="li" class="user-list-row" v-bind:class="{noBind: item.role != 0}" v-for="(item, index) in userList" :key="index" v-on:swipeleft="onSwipeLeftRow(index)" v-on:swiperight="onSwipeRightRow" v-bind:swipe-options="{direction: 'horizontal'}"> <v-touch tag="li" class="user-list-row" v-for="(item, index) in userList" :key="index" v-on:swipeleft="onSwipeLeftRow(index)" v-on:swiperight="onSwipeRightRow" v-bind:swipe-options="{direction: 'horizontal'}">
<v-touch tag="div" class="user-list-handle" <v-touch tag="div" class="user-list-handle"
v-bind:class="{'user-list-selected': (index == userListIndex)}" v-bind:class="{'user-list-selected': (index == userListIndex)}"
v-on:tap="onTapUserList(index)"> v-on:tap="onTapUserList(index)">
......
web/view/doorlockUsers/inviteBind.html
...@@ -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;
......
web/view/doorlockUsers/unlockInfo.css
...@@ -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;
} }
......
web/view/doorlockUsers/userList.css
...@@ -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
web/view/login/login.css
...@@ -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 {
......
web/view/myInfo/myInfo.css
...@@ -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