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.上传门锁用户、门锁管理框架（标签、多语言、基本功能）
......
dev/src/lang/zh.json
......@@ -52,7 +52,7 @@
"bindUserHelp": "ID-姓名绑定",
"bindUser": "绑定用户",
"userList": "用户列表",
"doorlockUsers": "门锁用户",
"doorlockUser": "门锁用户",
"addUser": "添加用户",
"editName": "修改名称",
"inviteBind": "邀请绑定",
......@@ -121,7 +121,8 @@
},
"doorlockManage":{
"name": "名称",
"unbindDialogTip": "<span></span>解锁门锁后，您将失去对该门锁<br>所有查看、管理等功能操作"
"unbindDialogTip": "<span></span>解锁门锁后，您将失去对该门锁<br>所有查看、管理等功能操作",
"unbindSuccess": "解绑成功"
},
"editName":{
"nameInputTip": "请输入门锁名称",
......@@ -196,7 +197,7 @@
}
},
"doorlockUsers":{
"doorlockUser":{
"name": "昵称：",
"inviteBind": "邀请绑定",
"bindUnlockInfo": "绑定开锁信息",
......
dev/src/view/device/v_index.js
......@@ -29,6 +29,8 @@ function init() {
valueDoorlockManage: 1,
activeFlag: true,
followShowFlag: false,
doorbellShowFlag: true,
bindDoorlockShowFlag: false,
//配置组件
componentsConfig: initComponentsConfig()
},
......
dev/src/view/doorlockUsers/v_addUser.js
......@@ -81,7 +81,7 @@ function nameChange(self,text){
//tap 确定
function confirmButtonTap(){
iot.navigator.openWindow({
url: './doorlockUsers.html',
id: 'doorlockUsers'
url: './doorlockUser.html',
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
* User: wy
* Date: 2017-10-09
......@@ -191,7 +191,7 @@ function bindTap(){
//tap 解绑
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.unbind'), callback: function () {
self.setStateShowFlag(true);
......@@ -223,7 +223,7 @@ function opendoorRecordTap(){
//tap 删除该用户
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.delete'), callback: function () {}}
);
......
dev/src/view/doorlockUsers/v_editName.js
......@@ -43,7 +43,7 @@ function initComponentsConfig() {
return {
nameInput: {
initParam: {
class: 'custom-text',
class: 'custom-editName-text',
placeholder: Vue.t('editName.nameInputTip')
}
},
......
dev/src/view/doorlockUsers/v_index.js
......@@ -101,8 +101,8 @@ function tapUserList(self, listIndex) {
return;
}
iot.navigator.openWindow({
url: './doorlockUsers.html',
id: 'doorlockUsers'
url: './doorlockUser.html',
id: 'doorlockUser'
});
}
......
web/lib/js/p.js
......@@ -87,7 +87,7 @@
/******/ if (__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);
/******/ script.onerror = script.onload = onScriptComplete;
/******/ function onScriptComplete() {
......
web/lib/less/device/device.less
......@@ -150,13 +150,44 @@
.batteryState{
text-align: right;
padding-right: 22px;
font-size: 13px;
padding-right: 25px;
span{
&:nth-child(1){
.iconfont(24px);
color: #00ffff;
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 @@
.background-size(20px 20px);
padding-left: 42px;
line-height: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.u-marquee();
......@@ -176,15 +211,15 @@
height: 36px;
text-align: center;
position: relative;
color: #fff;
.u-marquee-text{
line-height: 36px;
color: #6B6C73;
}
&:before{
content: '';
position: absolute;
top: 0;
left: 125px;
left: 0;
right: 0;
height: 1px;/*no*/
.white_gradient_border();
......@@ -200,6 +235,16 @@
}
}
.title ~ .custom-marquee{
color: #73747B;
&:before{
left: 125px;
}
&.active{
color: #91929a;
}
}
.marquee(5s,~"0,20px",~"0,-100%");
.deviceHandle{
......@@ -208,6 +253,7 @@
bottom: 0;
left: 0;
width: 100%;
padding-top: 13px;
}
.switchGroup{
......
web/lib/less/device/recordList.less
......@@ -11,11 +11,11 @@
height: auto;
.u-list-scroll .u-list-row{
height: 75px;
padding: 0 45px 0 48px;
padding: 0 41px;
.u-list-left-image{
width: 30px;
height: 30px;
margin-right: 38px;
margin-right: 33px;
}
.u-list-title{
font-size: @CUSTOM-LIST-COMPONENT-TITLE-FONTSIZE;
......
web/lib/less/doorlockManage/doorlockManage.less
......@@ -135,30 +135,20 @@
//修改名称
.u-text();
.inputBox{
width: 275px;
margin: 0 auto;
padding-bottom: 40px;
}
.custom-editName-text{
input{
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();
}
.textInput(0,17px,16px);
}
.errorTip{
position: absolute;
left: 0;
right: 0;
.errorTip();
}
......
web/lib/less/doorlockUsers/doorlockUsers.less → web/lib/less/doorlockUsers/doorlockUser.less
@import "../public/public.less";
@import "../public/header.less";
//修改名称
.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();
.custom-button{
.button();
.buttonPosition();
}
.unbindState-dialog{
.mask();
}
......
web/lib/less/doorlockUsers/userList.less
@import "../public/public.less";
@import "../public/header.less";
//侧滑列表
//用户列表
.user-list{
width: 100%;
height: 100%;
overflow: auto;
position: absolute;
top: 44px;
bottom: 0;
left: 0;
height: auto;
width: 100%;
overflow: auto;
}
.user-list-scroll .user-list-row{
.user-list-scroll{
.user-list-row{
position: relative;
overflow: hidden;
.user-list-handle{
position: relative;
.transition(left 0.4s ease);
left: 0;
background-color: @BODY-BG-COLOR;
padding: 15px 20px;
background-color: @USERLIST-ROW-BG;
height: 75px;
padding: 0 65px 0 42px;
.display-box();
.box-vertical-alignment();
z-index: 2;
.user-list-image{
width: 50px;
height: 50px;
margin-right: 10px;
}
.user-list-icon{
margin-right: 10px;
.iconfont(@SWIPELIST-COMPONENT-ICON-FONTSIZE);
width: 27px;
height: 27px;
margin-right: 14px;
}
div{
.flex();
min-width: 0;
}
.user-list-title{
font-size: @USERLIST-TITLE-FONTSIZE;
.text_oneRow_ellipsis();
margin-bottom: 5px;
}
.user-sub-image{
width: 17px;
height: 17px;
}
.user-list-subtitle{
.text_oneRow_ellipsis();
.user-list-subtitle span{
display: inline-block;
width: 182px;
.text_oneRow_ellipsis();
vertical-align: middle;
}
&.user-list-selected{
left: -120px;
.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{
content: "\e611";
display: block;
.iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
.transform(rotate(180deg));
display: none;
}
}
}
.user-list-button{
......@@ -65,23 +70,55 @@
right: 0;
z-index: 1;
div{
width: 60px;
width: 66px;
height: 100%;
.display-box();
.box-horizontal-alignment();
.box-vertical-alignment();
color: @SWIPELIST-COMPONENT-BUTTON-COLOR;
float: left;
&:nth-last-of-type(1){
background-color: transparent;
.iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
color: #00FFFF;
}
color: @USERLIST-BUTTON-ICON-COLOR;
.iconfont(@USERLIST-BUTTON-ICON-FONTSIZE);
padding-left: 10px;
}
}
&:after{
.defaultBorder();
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;
}
}
}
.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 @@
.marquee(@time,@fromValue,@toValue){
.active .u-marquee-text{
.animation(marquee @time linear infinite);
color: #91929a;
}
.keyframes(marquee,{
......
web/lib/less/public/core.less
......@@ -181,12 +181,13 @@ p{
}
//自定义输入框组件
.textInput(){
margin-top: 17px;
.textInput(@marginTop: 17px,@paddingTopOrBottom: 8px,@fontSize: inherit){
margin-top: @marginTop;
input{
padding-top: 8px;
padding-bottom: 8px;
padding-right: 38px;
padding-top: @paddingTopOrBottom;
padding-bottom: @paddingTopOrBottom;
padding-right: 25px;
font-size: @fontSize;
&::-webkit-input-placeholder{
color: @CUSTOM-TEXT-COMPONENT-INPUT-PLACEHOLDER-COLOR;
}
......@@ -207,9 +208,9 @@ p{
}
//x icon
.u-text-clear{
right: 7px;
right: -7px;
&:before{
content: '\e601';
content: '\e724';
}
}
&:after{
......@@ -220,18 +221,18 @@ p{
.passwordInput(){
.custom-password-text{
input{
padding-right: 70px;
padding-right: 58px;
&[type = text] ~ .u-text-see:before{
content: '\e60e';
}
}
//x icon
.u-text-clear{
right: 37px;
right: 25px;
}
//眼睛 icon
.u-text-see{
right: 7px;
right: -7px;
&:before{
content: '\e6b2';
}
......@@ -420,7 +421,7 @@ p{
position: relative;
margin: 0 auto;
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 @@
}
span{
color: @HEADER-TEXT-COLOR;
font-size: @HEADER-TEXT-FONTSIZE;
width: 55px;
line-height: @HEADERSIZE;
display: block;
......@@ -34,15 +35,22 @@
}
.header-left{
float: left;
padding-left: 5px;
padding-left: 9px;
}
.header-right{
float: right;
padding-right: 5px;
padding-right: 9px;
text-align: right;
}
.icon{
color: @HEADER-ICON-COLOR;
.iconfont(@HEADER-ICON-FONTSIZE,@HEADERSIZE);
&.header-left{
padding-left: 5px;
}
&.header-right{
padding-right: 5px;
}
}
~ .content{
padding-top: @HEADERSIZE;
......
web/lib/less/public/public.less
......@@ -228,7 +228,7 @@
border: 0;
outline: 0;
-webkit-appearance: none;
padding: 20px 70px 20px 20px;
padding: 20px 70px 20px 0;
background-color: @TEXT-COMPONENT-INPUT-BG;
&[type = text] ~ .u-text-see{
color: @TEXT-COMPONENT-TEXTINPUT-SEEICON-COLOR;
......@@ -240,18 +240,12 @@
padding-left: 17px;
display: table-cell;
vertical-align: middle;
~ input {
padding-left: 0;
}
}
.u-text-title{
width: 72px;
padding-left: 20px;
display: table-cell;
vertical-align: middle;
~ input {
padding-left: 0;
}
}
.u-text-clear,
.u-text-see{
......
web/lib/less/public/variables.less
......@@ -16,6 +16,7 @@
@font-face{
font-family: 'iconfont';
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;
......@@ -31,6 +32,7 @@
@C_BLUE_3: #010d19;
@C_BLUE_4: #00ffff;
@C_BLUE_5: #153D4C;
@C_BLUE_6: #191b25;
@C_GREEN: #4cd964;
@C_RED: #ff0000;
@C_RED_1: #fc2168;
......@@ -45,6 +47,7 @@
@BLACK_OPACITY_1: fade(@C_BLACK,40%);
@WHITE_OPACITY: fade(@C_WHITE,0);
@BLUE_OPACITY: fade(@C_BLUE_2,90%);
@GRAY_OPACITY: fade(@C_GRAY_2,5%);
//font-sizes
@DEFAULT_F_SIZE: 14px;
......@@ -163,7 +166,9 @@
@HEADER-BG-COLOR: @C_BLUE_3;
@HEADER-TITLE-COLOR: @C_WHITE;
@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;
//errorTip
......@@ -218,6 +223,9 @@
@CUSTOM-SWITCH-COMPONENT-OFFSTATE-COLOR: @C_GRAY_5;
@NEWMSG-ICON-FONTSIZE: @F_SIZE_16;
@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;
......@@ -240,3 +248,11 @@
@CUSTOM-SWIPELIST-COMPONENT-BUTTON-COLOR: @C_BLUE_4;
@CUSTOM-SWIPELIST-COMPONENT-BUTTON-ICON-FONTSIZE: @F_SIZE_16;
@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 {
}
.header span {
color: #fff;
color: #00ffff;
font-size: 0.427rem;
width: 1.467rem;
line-height: 1.173rem;
display: block;
......@@ -410,22 +411,31 @@ p {
.header .header-left {
float: left;
padding-left: 0.133rem;
padding-left: 0.24rem;
}
.header .header-right {
float: right;
padding-right: 0.133rem;
padding-right: 0.24rem;
text-align: right;
}
.header .icon {
color: #fff;
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1.173rem;
}
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content {
padding-top: 1.173rem;
}
......@@ -528,7 +538,7 @@ p {
position: relative;
margin: 0 auto;
padding: 4.907rem 0 0.587rem;
width: 6.667rem;
width: 7.333rem;
height: auto;
background: url("../../resources/image/connectWifi.png") no-repeat center 1.067rem;
-webkit-background-size: 2.053rem 3.253rem;
......@@ -582,7 +592,7 @@ p {
border: 0;
outline: 0;
-webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem;
padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent;
}
......@@ -601,10 +611,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title {
width: 1.92rem;
padding-left: 0.533rem;
......@@ -612,10 +618,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear,
.u-text .u-text-see {
position: absolute;
......
web/view/bindUser/bindUser.css
......@@ -398,7 +398,8 @@ p {
}
.header span {
color: #fff;
color: #00ffff;
font-size: 0.427rem;
width: 1.467rem;
line-height: 1.173rem;
display: block;
......@@ -410,22 +411,31 @@ p {
.header .header-left {
float: left;
padding-left: 0.133rem;
padding-left: 0.24rem;
}
.header .header-right {
float: right;
padding-right: 0.133rem;
padding-right: 0.24rem;
text-align: right;
}
.header .icon {
color: #fff;
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1.173rem;
}
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content {
padding-top: 1.173rem;
}
......@@ -554,7 +564,7 @@ p {
border: 0;
outline: 0;
-webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem;
padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent;
}
......@@ -573,10 +583,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title {
width: 1.92rem;
padding-left: 0.533rem;
......@@ -584,10 +590,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear,
.u-text .u-text-see {
position: absolute;
......
web/view/device/device.css
......@@ -398,7 +398,8 @@ p {
}
.header span {
color: #fff;
color: #00ffff;
font-size: 0.427rem;
width: 1.467rem;
line-height: 1.173rem;
display: block;
......@@ -410,22 +411,31 @@ p {
.header .header-left {
float: left;
padding-left: 0.133rem;
padding-left: 0.24rem;
}
.header .header-right {
float: right;
padding-right: 0.133rem;
padding-right: 0.24rem;
text-align: right;
}
.header .icon {
color: #fff;
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1.173rem;
}
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content {
padding-top: 1.173rem;
}
......@@ -448,7 +458,7 @@ p {
border: 0;
outline: 0;
-webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem;
padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent;
}
......@@ -467,10 +477,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title {
width: 1.92rem;
padding-left: 0.533rem;
......@@ -478,10 +484,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear,
.u-text .u-text-see {
position: absolute;
......@@ -543,7 +545,8 @@ p {
.custom-text input {
padding-top: 0.213rem;
padding-bottom: 0.213rem;
padding-right: 1.013rem;
padding-right: 0.667rem;
font-size: inherit;
}
.custom-text input::-webkit-input-placeholder {
......@@ -565,11 +568,11 @@ p {
}
.custom-text .u-text-clear {
right: 0.187rem;
right: -0.187rem;
}
.custom-text .u-text-clear:before {
content: '\e601';
content: '\e724';
}
.custom-text:after {
......@@ -1109,18 +1112,53 @@ p {
.batteryState {
text-align: right;
padding-right: 0.587rem;
font-size: 0.347rem;
padding-right: 0.667rem;
}
.batteryState span {
.batteryState span:nth-child(1) {
font-family: iconfont;
font-size: 0.64rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
color: #00ffff;
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 {
......@@ -1132,6 +1170,10 @@ p {
background-size: 0.533rem 0.533rem;
padding-left: 1.12rem;
line-height: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.u-marquee {
......@@ -1149,18 +1191,18 @@ p {
height: 0.96rem;
text-align: center;
position: relative;
color: #fff;
}
.custom-marquee .u-marquee-text {
line-height: 0.96rem;
color: #6B6C73;
}
.custom-marquee:before {
content: '';
position: absolute;
top: 0;
left: 3.333rem;
left: 0;
right: 0;
height: 1px;
background: -webkit-linear-gradient(left, #242635, #fff, #242635);
......@@ -1178,10 +1220,21 @@ p {
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 {
-webkit-animation: marquee 5s linear infinite;
animation: marquee 5s linear infinite;
color: #91929a;
}
@-webkit-keyframes marquee {
......@@ -1214,6 +1267,7 @@ p {
bottom: 0;
left: 0;
width: 100%;
padding-top: 0.347rem;
}
.switchGroup {
......
web/view/device/index.html
......@@ -26,7 +26,8 @@
</div>
<div class="content">
<div class="topCpnt">
<!-- <div class="doorbellBg active">
<div v-show="doorbellShowFlag">
<div class="doorbellBg active">
<div class="doorbellCircle">
<div class="doorbell">
<p></p>
......@@ -34,8 +35,9 @@
</div>
<div class="doorbellTip"><span>17:30</span>门铃响了</div>
</div>
<p class="batteryState"><span>&#xe629;</span>100%</p> -->
<v-touch tag="div" class="bindDoorlock" v-on:tap="onBindDoorlockTap">
<p class="batteryState"><span>&#xe629;</span><span>100%</span></p>
</div>
<v-touch tag="div" class="bindDoorlock" v-on:tap="onBindDoorlockTap" v-show="bindDoorlockShowFlag">
<p>{{ $t('device.bindDoorlock') }}</p>
</v-touch>
</div>
......
web/view/device/recordList.css
......@@ -398,7 +398,8 @@ p {
}
.header span {
color: #fff;
color: #00ffff;
font-size: 0.427rem;
width: 1.467rem;
line-height: 1.173rem;
display: block;
......@@ -410,22 +411,31 @@ p {
.header .header-left {
float: left;
padding-left: 0.133rem;
padding-left: 0.24rem;
}
.header .header-right {
float: right;
padding-right: 0.133rem;
padding-right: 0.24rem;
text-align: right;
}
.header .icon {
color: #fff;
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1.173rem;
}
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content {
padding-top: 1.173rem;
}
......@@ -525,13 +535,13 @@ p {
.custom-list .u-list-scroll .u-list-row {
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 {
width: 0.8rem;
height: 0.8rem;
margin-right: 1.013rem;
margin-right: 0.88rem;
}
.custom-list .u-list-scroll .u-list-row .u-list-title {
......
web/view/doorlockManage/doorlockManage.css
......@@ -398,7 +398,8 @@ p {
}
.header span {
color: #fff;
color: #00ffff;
font-size: 0.427rem;
width: 1.467rem;
line-height: 1.173rem;
display: block;
......@@ -410,22 +411,31 @@ p {
.header .header-left {
float: left;
padding-left: 0.133rem;
padding-left: 0.24rem;
}
.header .header-right {
float: right;
padding-right: 0.133rem;
padding-right: 0.24rem;
text-align: right;
}
.header .icon {
color: #fff;
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1.173rem;
}
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content {
padding-top: 1.173rem;
}
......@@ -650,7 +660,7 @@ p {
border: 0;
outline: 0;
-webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem;
padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent;
}
......@@ -669,10 +679,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title {
width: 1.92rem;
padding-left: 0.533rem;
......@@ -680,10 +686,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear,
.u-text .u-text-see {
position: absolute;
......@@ -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 {
font-size: 0.48rem;
padding-left: 1.227rem;
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-clear {
right: 1.093rem;
.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 {
content: '\e601';
.custom-editName-text .u-text-clear:before,
.custom-editName-text .u-text-see:before {
font-family: iconfont;
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 {
......@@ -764,6 +789,9 @@ p {
}
.errorTip {
position: absolute;
left: 0;
right: 0;
color: #fc2168;
font-size: 0.427rem;
-webkit-transform: scale(0.7);
......
web/view/doorlockManage/index.html
......@@ -34,9 +34,9 @@
<transition name="fade">
<v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap">
<div>
<p>{{ $t('doorlockUsers.unbindSuccess') }}</p>
<p><img src="../../resources/image/green_unbindSuccess_icon.png">{{ $t('doorlockManage.unbindSuccess') }}</p>
</div>
</<v-touch>
</v-touch>
</transition>
<u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
......
web/view/doorlockUsers/addUser.html
......@@ -8,7 +8,7 @@
<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="./doorlockUsers.css">
<link rel="stylesheet" type="text/css" href="./userList.css">
<style type="text/css">
[v-cloak]{
display: none;
......
web/view/doorlockUsers/doorlockUsers.css → web/view/doorlockUsers/doorlockUser.css
......@@ -398,7 +398,8 @@ p {
}
.header span {
color: #fff;
color: #00ffff;
font-size: 0.427rem;
width: 1.467rem;
line-height: 1.173rem;
display: block;
......@@ -410,22 +411,31 @@ p {
.header .header-left {
float: left;
padding-left: 0.133rem;
padding-left: 0.24rem;
}
.header .header-right {
float: right;
padding-right: 0.133rem;
padding-right: 0.24rem;
text-align: right;
}
.header .icon {
color: #fff;
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1.173rem;
}
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content {
padding-top: 1.173rem;
}
......@@ -442,7 +452,7 @@ p {
border: 0;
outline: 0;
-webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem;
padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent;
}
......@@ -461,10 +471,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title {
width: 1.92rem;
padding-left: 0.533rem;
......@@ -472,10 +478,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear,
.u-text .u-text-see {
position: absolute;
......@@ -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 {
width: 6.4rem;
color: #fff;
......@@ -553,6 +616,28 @@ p {
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 {
position: fixed;
top: 0;
......
web/view/doorlockUsers/doorlockUsers.html → web/view/doorlockUsers/doorlockUser.html
......@@ -8,7 +8,7 @@
<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="./doorlockUsers.css">
<link rel="stylesheet" type="text/css" href="./doorlockUser.css">
<style type="text/css">
[v-cloak]{
display: none;
......@@ -22,33 +22,33 @@
<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>
<p>{{ $t('title.doorlockUser') }}</p>
</div>
<div class="content">
<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">
<div>
<v-touch tag="p" class="userInfo-title" v-on:tap="onEditNameTap">{{ userInfo.title }}</v-touch>
<p class="userInfo-subtitle">
<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>
<v-touch tag="span" class="userInfo-toBind" v-show="bindShowFlag" v-on:tap="onBindTap">{{ $t('doorlockUsers.inviteBind') }}</v-touch>
{{ $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('doorlockUser.inviteBind') }}</v-touch>
<u-button :init-param="componentsConfig.unbindButton.initParam" v-on:u-button-tap="onUnbindButtonTap" v-show="unbindShowFlag"></u-button>
</p>
</div>
</li>
<v-touch tag="li" v-on:tap="onBindUnlockInfoTap">{{ $t('doorlockUsers.bindUnlockInfo') }}</v-touch>
<v-touch tag="li" v-on:tap="onOpendoorRecordTap">{{ $t('doorlockUsers.opendoorRecord') }}</v-touch>
<v-touch tag="li" v-on:tap="onBindUnlockInfoTap">{{ $t('doorlockUser.bindUnlockInfo') }}</v-touch>
<v-touch tag="li" v-on:tap="onOpendoorRecordTap">{{ $t('doorlockUser.opendoorRecord') }}</v-touch>
</ul>
<u-button :init-param="componentsConfig.deleteUserButton.initParam" v-on:u-button-tap="onDeleteUserButtonTap"></u-button>
</div>
<transition name="fade">
<v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap">
<div>
<p>{{ $t('doorlockUsers.unbindSuccess') }}</p>
<p><img src="../../resources/image/green_unbindSuccess_icon.png">{{ $t('doorlockUser.unbindSuccess') }}</p>
</div>
</<v-touch>
</v-touch>
</transition>
<transition name="fade">
<div class="guide-dialog" v-show="guideShowFlag">
......@@ -56,11 +56,11 @@
<div class="guideStep1" v-show="guideStep1ShowFlag">
<div class="guideStep1Cont">
<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 class="guideStep1Tip">
<p>{{ $t('doorlockUsers.guideStep1Tip1') }}</p>
<p v-html="$t('doorlockUsers.guideStep1Tip2')"></p>
<p>{{ $t('doorlockUser.guideStep1Tip1') }}</p>
<p v-html="$t('doorlockUser.guideStep1Tip2')"></p>
</div>
</div>
</transition>
......@@ -72,9 +72,9 @@
<transition name="fade">
<div class="guideStep3" v-show="guideStep3ShowFlag">
<div class="guideStep3Cont">
<p>{{ $t('doorlockUsers.bindUnlockInfo') }}</p>
<p>{{ $t('doorlockUser.bindUnlockInfo') }}</p>
</div>
<div class="guideStep3Tip" v-html="$t('doorlockUsers.guideStep3Tip')"></div>
<div class="guideStep3Tip" v-html="$t('doorlockUser.guideStep3Tip')"></div>
</div>
</transition>
<transition name="fade">
......@@ -88,7 +88,7 @@
<u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
</div>
<script type="text/javascript" src="./doorlockUsers.js" defer async></script>
<script type="text/javascript" src="./doorlockUser.js" defer async></script>
</body>
</html>
\ No newline at end of file
web/view/doorlockUsers/editName.html
......@@ -8,7 +8,7 @@
<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="./doorlockUsers.css">
<link rel="stylesheet" type="text/css" href="./doorlockUser.css">
<style type="text/css">
[v-cloak]{
display: none;
......
web/view/doorlockUsers/index.html
......@@ -22,12 +22,12 @@
<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>
<p>{{ $t('title.doorlockUser') }}</p>
<v-touch tag="span" class="header-right icon" v-on:tap="onAddUserTap">&#xe600;</v-touch>
</div>
<div class="user-list">
<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-bind:class="{'user-list-selected': (index == userListIndex)}"
v-on:tap="onTapUserList(index)">
......
web/view/doorlockUsers/inviteBind.html
......@@ -8,7 +8,7 @@
<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="./doorlockUsers.css">
<link rel="stylesheet" type="text/css" href="./doorlockUser.css">
<style type="text/css">
[v-cloak]{
display: none;
......
web/view/doorlockUsers/unlockInfo.css
......@@ -398,7 +398,8 @@ p {
}
.header span {
color: #fff;
color: #00ffff;
font-size: 0.427rem;
width: 1.467rem;
line-height: 1.173rem;
display: block;
......@@ -410,22 +411,31 @@ p {
.header .header-left {
float: left;
padding-left: 0.133rem;
padding-left: 0.24rem;
}
.header .header-right {
float: right;
padding-right: 0.133rem;
padding-right: 0.24rem;
text-align: right;
}
.header .icon {
color: #fff;
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1.173rem;
}
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content {
padding-top: 1.173rem;
}
......
web/view/doorlockUsers/userList.css
......@@ -398,7 +398,8 @@ p {
}
.header span {
color: #fff;
color: #00ffff;
font-size: 0.427rem;
width: 1.467rem;
line-height: 1.173rem;
display: block;
......@@ -410,35 +411,42 @@ p {
.header .header-left {
float: left;
padding-left: 0.133rem;
padding-left: 0.24rem;
}
.header .header-right {
float: right;
padding-right: 0.133rem;
padding-right: 0.24rem;
text-align: right;
}
.header .icon {
color: #fff;
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1.173rem;
}
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content {
padding-top: 1.173rem;
}
.user-list {
width: 100%;
height: 100%;
overflow: auto;
position: absolute;
top: 1.173rem;
bottom: 0;
left: 0;
height: auto;
width: 100%;
overflow: auto;
}
.user-list-scroll .user-list-row {
......@@ -452,7 +460,8 @@ p {
transition: left 0.4s ease;
left: 0;
background-color: #242635;
padding: 0.4rem 0.533rem;
height: 2rem;
padding: 0 1.733rem 0 1.12rem;
display: -webkit-box;
display: -webkit-flex;
display: flex;
......@@ -463,17 +472,9 @@ p {
}
.user-list-scroll .user-list-row .user-list-handle .user-list-image {
width: 1.333rem;
height: 1.333rem;
margin-right: 0.267rem;
}
.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;
width: 0.72rem;
height: 0.72rem;
margin-right: 0.373rem;
}
.user-list-scroll .user-list-row .user-list-handle div {
......@@ -484,36 +485,47 @@ p {
}
.user-list-scroll .user-list-row .user-list-handle .user-list-title {
font-size: 0.427rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 0.133rem;
}
.user-list-scroll .user-list-row .user-list-handle .user-sub-image {
width: 0.453rem;
height: 0.453rem;
}
.user-list-scroll .user-list-row .user-list-handle .user-list-subtitle {
.user-list-scroll .user-list-row .user-list-handle .user-list-subtitle span {
display: inline-block;
width: 4.853rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
}
.user-list-scroll .user-list-row .user-list-handle.user-list-selected {
left: -3.2rem;
.user-list-scroll .user-list-row .user-list-handle .user-list-subimage {
width: 0.533rem;
height: 0.533rem;
margin-right: 0.24rem;
}
.user-list-scroll .user-list-row .user-list-handle:after {
content: "\e611";
display: block;
content: '\e6a7';
position: absolute;
top: 50%;
right: 0.933rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: iconfont;
font-size: 0.533rem;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
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 {
......@@ -525,31 +537,135 @@ p {
}
.user-list-scroll .user-list-row .user-list-button div {
width: 1.6rem;
width: 1.76rem;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
color: #fff;
float: left;
color: #00ffff;
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;
}
.u-text input[type=text] ~ .u-text-see {
color: #007aff;
}
.u-text .u-text-icon {
font-family: iconfont;
font-size: 0.533rem;
-webkit-font-smoothing: antialiased;
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: '';
position: absolute;
bottom: 0;
......@@ -557,7 +673,111 @@ p {
right: 0;
height: 1px;
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: 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 {
}
.header span {
color: #fff;
color: #00ffff;
font-size: 0.427rem;
width: 1.467rem;
line-height: 1.173rem;
display: block;
......@@ -410,22 +411,31 @@ p {
.header .header-left {
float: left;
padding-left: 0.133rem;
padding-left: 0.24rem;
}
.header .header-right {
float: right;
padding-right: 0.133rem;
padding-right: 0.24rem;
text-align: right;
}
.header .icon {
color: #fff;
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1.173rem;
}
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content {
padding-top: 1.173rem;
}
......@@ -460,7 +470,7 @@ p {
position: relative;
margin: 0 auto;
padding: 4.907rem 0 1.067rem;
width: 6.667rem;
width: 7.333rem;
height: 10.133rem;
background: url("../../resources/image/logo.png") no-repeat center 2rem;
-webkit-background-size: 1.707rem 1.707rem;
......@@ -479,7 +489,7 @@ p {
border: 0;
outline: 0;
-webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem;
padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent;
}
......@@ -498,10 +508,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title {
width: 1.92rem;
padding-left: 0.533rem;
......@@ -509,10 +515,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear,
.u-text .u-text-see {
position: absolute;
......@@ -578,7 +580,8 @@ p {
.custom-code-text input {
padding-top: 0.213rem;
padding-bottom: 0.213rem;
padding-right: 1.013rem;
padding-right: 0.667rem;
font-size: inherit;
}
.custom-text input::-webkit-input-placeholder,
......@@ -610,13 +613,13 @@ p {
.custom-text .u-text-clear,
.custom-password-text .u-text-clear,
.custom-code-text .u-text-clear {
right: 0.187rem;
right: -0.187rem;
}
.custom-text .u-text-clear:before,
.custom-password-text .u-text-clear:before,
.custom-code-text .u-text-clear:before {
content: '\e601';
content: '\e724';
}
.custom-text:after,
......@@ -699,7 +702,7 @@ p {
}
.custom-password-text input {
padding-right: 1.867rem;
padding-right: 1.547rem;
}
.custom-password-text input[type=text] ~ .u-text-see:before {
......@@ -707,11 +710,11 @@ p {
}
.custom-password-text .u-text-clear {
right: 0.987rem;
right: 0.667rem;
}
.custom-password-text .u-text-see {
right: 0.187rem;
right: -0.187rem;
}
.custom-password-text .u-text-see:before {
......
web/view/myInfo/myInfo.css
......@@ -398,7 +398,8 @@ p {
}
.header span {
color: #fff;
color: #00ffff;
font-size: 0.427rem;
width: 1.467rem;
line-height: 1.173rem;
display: block;
......@@ -410,22 +411,31 @@ p {
.header .header-left {
float: left;
padding-left: 0.133rem;
padding-left: 0.24rem;
}
.header .header-right {
float: right;
padding-right: 0.133rem;
padding-right: 0.24rem;
text-align: right;
}
.header .icon {
color: #fff;
font-family: iconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1.173rem;
}
.header .icon.header-left {
padding-left: 0.133rem;
}
.header .icon.header-right {
padding-right: 0.133rem;
}
.header ~ .content {
padding-top: 1.173rem;
}
......@@ -442,7 +452,7 @@ p {
border: 0;
outline: 0;
-webkit-appearance: none;
padding: 0.533rem 1.867rem 0.533rem 0.533rem;
padding: 0.533rem 1.867rem 0.533rem 0;
background-color: transparent;
}
......@@ -461,10 +471,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-icon ~ input {
padding-left: 0;
}
.u-text .u-text-title {
width: 1.92rem;
padding-left: 0.533rem;
......@@ -472,10 +478,6 @@ p {
vertical-align: middle;
}
.u-text .u-text-title ~ input {
padding-left: 0;
}
.u-text .u-text-clear,
.u-text .u-text-see {
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