Skip to content

D
DoorLock
Commit b61259fe by wangying
Options

1.1.1 / 2017-10-18 

==================
 * 1.修改列表为空样式
 * 2.修改绑定开锁信息页面
parent 7edec0f6
Showing with 182 additions and 85 deletions
History.md
1.1.0 / 2017-10-17 1.1.1 / 2017-10-18
==================
* 1.修改列表为空样式
* 2.修改绑定开锁信息页面
1.1.0 / 2017-10-17
================== ==================
* 1.修改绑定开锁信息页面样式 * 1.修改绑定开锁信息页面样式
......
dev/src/lang/zh.json
...@@ -232,6 +232,7 @@ ...@@ -232,6 +232,7 @@
"key": "钥匙", "key": "钥匙",
"hijackFingerprint": "劫持指纹", "hijackFingerprint": "劫持指纹",
"opendoorRecord": "今日开门记录", "opendoorRecord": "今日开门记录",
"tip": "仅显示未绑定开门记录" "tip": "仅显示未绑定开门记录",
"noRecordTip": "暂无记录"
} }
} }
\ No newline at end of file
dev/src/view/doorlockUsers/v_addUnlockInfo.js
...@@ -49,7 +49,8 @@ function initComponentsConfig() { ...@@ -49,7 +49,8 @@ function initComponentsConfig() {
{value: 2, title: '15:33',subtitle: 'ID:002'}, {value: 2, title: '15:33',subtitle: 'ID:002'},
{value: 3, title: '15:06',subtitle: 'ID:007'} {value: 3, title: '15:06',subtitle: 'ID:007'}
], ],
pagesize: Number.MAX_VALUE pagesize: Number.MAX_VALUE,
tip: Vue.t('addUnlockInfo.noRecordTip')
} }
}, },
//添加 button 参数 //添加 button 参数
......
dev/src/view/doorlockUsers/v_unlockInfo.js
...@@ -11,17 +11,10 @@ import {iot, uPublic, uComponents} from '../../public/public.js'; ...@@ -11,17 +11,10 @@ import {iot, uPublic, uComponents} from '../../public/public.js';
iot.ready(init); iot.ready(init);
function init() { function init() {
//通用 dialog、loading组件 //通用 list、dialog、loading组件
uPublic.componentsInit(['u-dialog','u-loading']); uPublic.componentsInit(['u-list','u-dialog','u-loading']);
const app = new Vue({ const app = new Vue({
data:{ data:{
unlockInfoList: [{value: 1, title: '指纹1', rightText: 123456},
{value: 2, title: '指纹2', rightText: 123456}],
loadShowFlag: false,
loadFlag: false,
loadText: Vue.t('scroll.clickToLoadMore'),
pagesize: 10,
tip: Vue.t('unlockInfo.noInfoTip'),
//配置组件 //配置组件
componentsConfig: initComponentsConfig() componentsConfig: initComponentsConfig()
}, },
...@@ -35,9 +28,6 @@ function init() { ...@@ -35,9 +28,6 @@ function init() {
//tap 添加 //tap 添加
onAddTap(){ onAddTap(){
addTap(); addTap();
},
onTapLoad(){
tapLoad();
} }
} }
}).$mount('#app'); }).$mount('#app');
...@@ -46,6 +36,16 @@ function init() { ...@@ -46,6 +36,16 @@ function init() {
//配置组件参数 //配置组件参数
function initComponentsConfig() { function initComponentsConfig() {
return { return {
unlockInfoList:{
initParam: {
class: 'custom-unlockInfo-list',
list: [
{title: '指纹1', rightText: 'ID:123456'},
{title: '指纹2', rightText: 'ID:123456'}
],
tip: Vue.t('unlockInfo.noInfoTip')
}
},
dialog: { dialog: {
initParam: { initParam: {
class: 'custom-dialog' class: 'custom-dialog'
...@@ -71,12 +71,3 @@ function addTap(){ ...@@ -71,12 +71,3 @@ function addTap(){
id: 'addUnlockInfo' id: 'addUnlockInfo'
}); });
} }
\ No newline at end of file
//点击加载更多
function tapLoad(){
if (!self.loadFlag) {
self.loadText = Vue.t('scroll.loading');
self.loadFlag = true;
//再次发送获取用户列表请求
}
}
\ No newline at end of file
web/lib/less/doorlockUsers/unlockInfo.less
...@@ -9,63 +9,48 @@ ...@@ -9,63 +9,48 @@
font-size: @UNLOCKINFO-TITLE-FONTSIZE; font-size: @UNLOCKINFO-TITLE-FONTSIZE;
padding-left: 42px; padding-left: 42px;
border-bottom: 2px solid @UNLOCKINFO-TITLE-BOTTOMBORDER;/*no*/ border-bottom: 2px solid @UNLOCKINFO-TITLE-BOTTOMBORDER;/*no*/
~ .unlockInfo-list{ ~ .custom-unlockInfo-list{
top: 92px; top: 92px;
} }
} }
.unlockInfo-list{ .u-list();
.custom-unlockInfo-list{
position: absolute; position: absolute;
top: 44px; top: 44px;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; height: auto;
overflow: auto; .u-list-scroll .u-list-row{
}
.unlockInfo-list-scroll{
.unlockInfo-list-row{
position: relative;
color: @UNLOCKINFOLIST-TEXT-COLOR; color: @UNLOCKINFOLIST-TEXT-COLOR;
font-size: @UNLOCKINFOLIST-TEXT-FONTSIZE; font-size: @UNLOCKINFOLIST-TEXT-FONTSIZE;
overflow: hidden;
padding: 18px 42px 8px; padding: 18px 42px 8px;
p{
float: right;
}
&:after{ &:after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;/*no*/
.white_gradient_border(); .white_gradient_border();
} }
} }
} //上拉加载
.u-list-load{
.unlockInfo-list-load{
text-align: center;
.listLoad(); .listLoad();
} }
//list 无内容
.unlockInfo-list-tip{ .u-list-tip{
.transformV_center(left,0);
width: 100%;
.bgImg("unlockNoCont.png"); .bgImg("unlockNoCont.png");
background-position: top center; background-position: top center;
background-repeat: no-repeat; background-repeat: no-repeat;
.background-size(70px 70px); .background-size(70px 70px);
padding-top: 88px; padding-top: 88px;
color: @LIST-NOCONTTIP-COLOR;
font-size: @LIST-NOCONTTIP-FONTSIZE; font-size: @LIST-NOCONTTIP-FONTSIZE;
text-align: center; }
} }
//绑定开锁信 //绑定开锁信
.opendoorMode{ .opendoorMode{
border: solid #50515d; border: solid #50515d;
border-width: 2px 0;/*no*/ border-width: 2px 0;/*no*/
overflow: hidden;
ul{ ul{
padding: 11px 42px; padding: 11px 42px;
font-size: 0; font-size: 0;
...@@ -131,6 +116,11 @@ ...@@ -131,6 +116,11 @@
.u-select-load{ .u-select-load{
.listLoad(); .listLoad();
} }
.u-select-tip{
top: 80px;
.transform(none);
.listNoCont(inherit,45px 45px,58px);
}
} }
.tip{ .tip{
......
web/lib/less/public/core.less
...@@ -391,13 +391,14 @@ p{ ...@@ -391,13 +391,14 @@ p{
} }
//list 无内容 //list 无内容
.listNoCont(){ .listNoCont(@fontSize:@LIST-NOCONTTIP-FONTSIZE,@bgSize:61px 61px,@paddingTop:88px){
font-size: @LIST-NOCONTTIP-FONTSIZE; color: @LIST-NOCONTTIP-COLOR;
font-size: @fontSize;
.bgImg("noCont.png"); .bgImg("noCont.png");
background-position: top center; background-position: top center;
background-repeat: no-repeat; background-repeat: no-repeat;
.background-size(61px 61px); .background-size(@bgSize);
padding-top: 88px; padding-top: @paddingTop;
} }
.white_gradient_border(){ .white_gradient_border(){
......
web/lib/less/public/public.less
...@@ -154,6 +154,7 @@ ...@@ -154,6 +154,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
position: relative;
} }
.u-select-scroll .u-select-row{ .u-select-scroll .u-select-row{
padding: 15px 45px 15px 20px; padding: 15px 45px 15px 20px;
...@@ -196,6 +197,11 @@ ...@@ -196,6 +197,11 @@
.u-select-load{ .u-select-load{
text-align: center; text-align: center;
} }
.u-select-tip{
.transformV_center(left,0);
width: 100%;
text-align: center;
}
} }
//按钮 //按钮
...@@ -296,6 +302,7 @@ ...@@ -296,6 +302,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
position: relative;
} }
.u-list-scroll .u-list-row{ .u-list-scroll .u-list-row{
padding: 15px 15px 15px 20px; padding: 15px 15px 15px 20px;
...@@ -349,6 +356,7 @@ ...@@ -349,6 +356,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
position: relative;
} }
.u-swipe-list-scroll .u-swipe-list-row{ .u-swipe-list-scroll .u-swipe-list-row{
position: relative; position: relative;
......
web/lib/less/public/variables.less
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
//list //list
@LIST-LOAD-COLOR: @C_BLUE_4; //上拉加载 @LIST-LOAD-COLOR: @C_BLUE_4; //上拉加载
@LIST-LOAD-FONTSIZE: @F_SIZE_16; @LIST-LOAD-FONTSIZE: @F_SIZE_16;
@LIST-NOCONTTIP-COLOR: @C_BLUE_4; //list 无内容 @LIST-NOCONTTIP-COLOR: @C_GRAY_3; //list 无内容
@LIST-NOCONTTIP-FONTSIZE: @F_SIZE_16; @LIST-NOCONTTIP-FONTSIZE: @F_SIZE_16;
//引导 //引导
......
web/view/bindUser/bindUser.css
...@@ -716,6 +716,7 @@ p { ...@@ -716,6 +716,7 @@ p {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
position: relative;
} }
.u-swipe-list-scroll .u-swipe-list-row { .u-swipe-list-scroll .u-swipe-list-row {
...@@ -903,6 +904,7 @@ p { ...@@ -903,6 +904,7 @@ p {
} }
.custom-swipe-list .u-swipeList-tip { .custom-swipe-list .u-swipeList-tip {
color: #91929a;
font-size: 0.427rem; font-size: 0.427rem;
background-image: url("../../resources/image/noCont.png"); background-image: url("../../resources/image/noCont.png");
background-position: top center; background-position: top center;
......
web/view/device/recordList.css
...@@ -456,6 +456,7 @@ p { ...@@ -456,6 +456,7 @@ p {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
position: relative;
} }
.u-list-scroll .u-list-row { .u-list-scroll .u-list-row {
...@@ -583,6 +584,7 @@ p { ...@@ -583,6 +584,7 @@ p {
} }
.custom-list .u-list-tip { .custom-list .u-list-tip {
color: #91929a;
font-size: 0.427rem; font-size: 0.427rem;
background-image: url("../../resources/image/noCont.png"); background-image: url("../../resources/image/noCont.png");
background-position: top center; background-position: top center;
......
web/view/doorlockManage/doorlockManage.css
...@@ -656,6 +656,7 @@ p { ...@@ -656,6 +656,7 @@ p {
transform: translateY(-50%); transform: translateY(-50%);
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #91929a;
font-size: 0.427rem; font-size: 0.427rem;
background-image: url("../../resources/image/noCont.png"); background-image: url("../../resources/image/noCont.png");
background-position: top center; background-position: top center;
......
web/view/doorlockUsers/unlockInfo.css
...@@ -461,44 +461,116 @@ p { ...@@ -461,44 +461,116 @@ p {
border-bottom: 2px solid #50515d; border-bottom: 2px solid #50515d;
} }
.title ~ .unlockInfo-list { .title ~ .custom-unlockInfo-list {
top: 2.453rem; top: 2.453rem;
} }
.unlockInfo-list { .u-list {
position: absolute;
top: 1.173rem;
bottom: 0;
left: 0;
width: 100%; width: 100%;
height: 100%;
overflow: auto; overflow: auto;
position: relative;
} }
.unlockInfo-list-scroll .unlockInfo-list-row { .u-list-scroll .u-list-row {
padding: 0.4rem 0.4rem 0.4rem 0.533rem;
position: relative; position: relative;
color: #91929a; display: -webkit-box;
font-size: 0.427rem; display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.u-list-scroll .u-list-row .u-list-left-image {
width: 1.333rem;
height: 1.333rem;
margin-right: 0.267rem;
}
.u-list-scroll .u-list-row .u-list-left-icon {
margin-right: 0.267rem;
font-family: iconfont;
font-size: 0.533rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
}
.u-list-scroll .u-list-row div {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
min-width: 0;
}
.u-list-scroll .u-list-row .u-list-title {
overflow: hidden; overflow: hidden;
padding: 0.48rem 1.12rem 0.213rem; white-space: nowrap;
text-overflow: ellipsis;
} }
.unlockInfo-list-scroll .unlockInfo-list-row p { .u-list-scroll .u-list-row .u-list-subtitle {
float: right; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.u-list-scroll .u-list-row .u-list-right-text {
margin-left: 0.107rem;
}
.u-list-scroll .u-list-row .u-list-right-icon {
font-family: defaultIconfont;
font-size: 0.667rem;
-webkit-font-smoothing: antialiased;
line-height: 1;
} }
.unlockInfo-list-scroll .unlockInfo-list-row:after { .u-list-scroll .u-list-row:after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 1px; height: 1px;
background: #bbb;
}
.u-list-load {
text-align: center;
}
.u-list-tip {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.custom-unlockInfo-list {
position: absolute;
top: 1.173rem;
bottom: 0;
left: 0;
height: auto;
}
.custom-unlockInfo-list .u-list-scroll .u-list-row {
color: #91929a;
font-size: 0.427rem;
padding: 0.48rem 1.12rem 0.213rem;
}
.custom-unlockInfo-list .u-list-scroll .u-list-row: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);
} }
.unlockInfo-list-load { .custom-unlockInfo-list .u-list-load {
text-align: center;
color: #00ffff; color: #00ffff;
font-size: 0.427rem; font-size: 0.427rem;
-webkit-transform: scale(0.7); -webkit-transform: scale(0.7);
...@@ -507,26 +579,21 @@ p { ...@@ -507,26 +579,21 @@ p {
line-height: 0.933rem; line-height: 0.933rem;
} }
.unlockInfo-list-tip { .custom-unlockInfo-list .u-list-tip {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
background-image: url("../../resources/image/unlockNoCont.png"); background-image: url("../../resources/image/unlockNoCont.png");
background-position: top center; background-position: top center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-background-size: 1.867rem 1.867rem; -webkit-background-size: 1.867rem 1.867rem;
background-size: 1.867rem 1.867rem; background-size: 1.867rem 1.867rem;
padding-top: 2.347rem; padding-top: 2.347rem;
color: #91929a;
font-size: 0.427rem; font-size: 0.427rem;
text-align: center;
} }
.opendoorMode { .opendoorMode {
border: solid #50515d; border: solid #50515d;
border-width: 2px 0; border-width: 2px 0;
overflow: hidden;
} }
.opendoorMode ul { .opendoorMode ul {
...@@ -574,6 +641,7 @@ p { ...@@ -574,6 +641,7 @@ p {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
position: relative;
} }
.u-select-scroll .u-select-row { .u-select-scroll .u-select-row {
...@@ -652,6 +720,16 @@ p { ...@@ -652,6 +720,16 @@ p {
text-align: center; text-align: center;
} }
.u-select-tip {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.custom-select { .custom-select {
height: 4.267rem; height: 4.267rem;
} }
...@@ -693,6 +771,20 @@ p { ...@@ -693,6 +771,20 @@ p {
line-height: 0.933rem; line-height: 0.933rem;
} }
.custom-select .u-select-tip {
top: 2.133rem;
-webkit-transform: none;
transform: none;
color: #91929a;
font-size: inherit;
background-image: url("../../resources/image/noCont.png");
background-position: top center;
background-repeat: no-repeat;
-webkit-background-size: 1.2rem 1.2rem;
background-size: 1.2rem 1.2rem;
padding-top: 1.547rem;
}
.tip { .tip {
text-align: center; text-align: center;
color: #A0A0A7; color: #A0A0A7;
......
web/view/doorlockUsers/unlockInfo.html
...@@ -26,8 +26,9 @@ ...@@ -26,8 +26,9 @@
<v-touch tag="span" class="header-right" v-on:tap="onAddTap">{{ $t('btn.add') }}</v-touch> <v-touch tag="span" class="header-right" v-on:tap="onAddTap">{{ $t('btn.add') }}</v-touch>
</div> </div>
<div class="content"> <div class="content">
<p class="title" v-if="unlockInfoList.length">{{ $t('unlockInfo.bindUnlockInfo') }}</p> <p class="title">{{ $t('unlockInfo.bindUnlockInfo') }}</p>
<div class="unlockInfo-list"> <u-list :init-param="componentsConfig.unlockInfoList.initParam"></u-list>
<!-- <div class="unlockInfo-list">
<ul class="unlockInfo-list-scroll" v-show="unlockInfoList.length"> <ul class="unlockInfo-list-scroll" v-show="unlockInfoList.length">
<li class="unlockInfo-list-row" v-for="item in unlockInfoList"> <li class="unlockInfo-list-row" v-for="item in unlockInfoList">
{{ item.title }} {{ item.title }}
...@@ -36,7 +37,7 @@ ...@@ -36,7 +37,7 @@
<v-touch tag="li" class="unlockInfo-list-load" v-on:tap="onTapLoad" v-show="loadShowFlag">{{ loadText }}</v-touch> <v-touch tag="li" class="unlockInfo-list-load" v-on:tap="onTapLoad" v-show="loadShowFlag">{{ loadText }}</v-touch>
</ul> </ul>
<p class="unlockInfo-list-tip" v-show="(unlockInfoList.length == 0)">{{ tip }}</p> <p class="unlockInfo-list-tip" v-show="(unlockInfoList.length == 0)">{{ tip }}</p>
</div> </div> -->
</div> </div>
<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>
......
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