1.1.1 / 2017-10-18

================== * 1.修改列表为空样式 * 2.修改绑定开锁信息页面

1.1.1 / 2017-10-18
================== * 1.修改列表为空样式 * 2.修改绑定开锁信息页面
b61259fe · wangying · 7edec0f6 · b61259fe · b61259fe · b61259fe
Commit b61259fe authored Oct 18, 2017 by wangying
14 changed files
--- a/History.md
+++ b/History.md
-1.1.0 / 2017-10-17
+1.1.1 / 2017-10-18
+
+==================
+ * 1.修改列表为空样式
+ * 2.修改绑定开锁信息页面
+
+1.1.0 / 2017-10-17

 ==================
 * 1.修改绑定开锁信息页面样式

--- a/dev/src/lang/zh.json
+++ b/dev/src/lang/zh.json
@@ -232,6 +232,7 @@
        "key": "钥匙",
        "hijackFingerprint": "劫持指纹",
        "opendoorRecord": "今日开门记录",
-        "tip": "仅显示未绑定开门记录"
+        "tip": "仅显示未绑定开门记录",
+        "noRecordTip": "暂无记录"
    }
 }
\ No newline at end of file
--- a/dev/src/view/doorlockUsers/v_addUnlockInfo.js
+++ b/dev/src/view/doorlockUsers/v_addUnlockInfo.js
@@ -49,7 +49,8 @@ function initComponentsConfig() {
                    {value: 2, title: '15:33',subtitle: 'ID:002'},
                    {value: 3, title: '15:06',subtitle: 'ID:007'}
                ],
-                pagesize: Number.MAX_VALUE
+                pagesize: Number.MAX_VALUE,
+                tip: Vue.t('addUnlockInfo.noRecordTip')
            }
        },
        //添加 button 参数

--- a/dev/src/view/doorlockUsers/v_unlockInfo.js
+++ b/dev/src/view/doorlockUsers/v_unlockInfo.js
@@ -11,17 +11,10 @@ import {iot, uPublic, uComponents} from '../../public/public.js';

 iot.ready(init);
 function init() {
-    //通用 dialog、loading组件
-    uPublic.componentsInit(['u-dialog','u-loading']);
+    //通用 list、dialog、loading组件
+    uPublic.componentsInit(['u-list','u-dialog','u-loading']);
    const app = new Vue({
        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()   
        },
@@ -35,9 +28,6 @@ function init() {
            //tap 添加
            onAddTap(){
                addTap();
-            }, 
-            onTapLoad(){
-                tapLoad();
            }                          
        }   
    }).$mount('#app');
@@ -46,6 +36,16 @@ function init() {
 //配置组件参数
 function initComponentsConfig() {
    return {
+        unlockInfoList:{   
+            initParam: {
+                class: 'custom-unlockInfo-list',
+                list: [                    
+                    {title: '指纹1', rightText: 'ID:123456'},                    
+                    {title: '指纹2', rightText: 'ID:123456'}
+                ],
+                tip: Vue.t('unlockInfo.noInfoTip')
+            }
+        },
        dialog: {
            initParam: {
                class: 'custom-dialog'
@@ -71,12 +71,3 @@ function addTap(){
        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
--- a/web/lib/less/doorlockUsers/unlockInfo.less
+++ b/web/lib/less/doorlockUsers/unlockInfo.less
@@ -9,63 +9,48 @@
 	font-size: @UNLOCKINFO-TITLE-FONTSIZE;
 	padding-left: 42px;
 	border-bottom: 2px solid @UNLOCKINFO-TITLE-BOTTOMBORDER;/*no*/
-	~ .unlockInfo-list{
+	~ .custom-unlockInfo-list{
 		top: 92px;
 	}
 }

-.unlockInfo-list{
+.u-list();
+
+.custom-unlockInfo-list{
 	position: absolute;
 	top: 44px;
 	bottom: 0;
 	left: 0;
-	width: 100%;
-	overflow: auto;
-}
-
-.unlockInfo-list-scroll{
-	.unlockInfo-list-row{
-		position: relative;
+	height: auto;
+	.u-list-scroll .u-list-row{	
 		color: @UNLOCKINFOLIST-TEXT-COLOR;
 		font-size: @UNLOCKINFOLIST-TEXT-FONTSIZE;
-		overflow: hidden;
 		padding: 18px 42px 8px;
-		p{
-			float: right;
-		}
 		&:after{
-	        content: '';
-	        position: absolute;
-	        bottom: 0;
-	        left: 0;
-	        right: 0;
-	    	height: 1px;/*no*/
 	    	.white_gradient_border();			
 		}
 	}
-}
-
-.unlockInfo-list-load{
-	text-align: center;
+	//上拉加载
+	.u-list-load{
 		.listLoad();
-}
-
-.unlockInfo-list-tip{
-	.transformV_center(left,0);
-	width: 100%;
+	}
+	//list 无内容
+	.u-list-tip{
 		.bgImg("unlockNoCont.png");
 	    background-position: top center;
 	    background-repeat: no-repeat;
 	    .background-size(70px 70px);
 	    padding-top: 88px;
+	    color: @LIST-NOCONTTIP-COLOR;
 		font-size: @LIST-NOCONTTIP-FONTSIZE;
-	text-align: center;
+	}
 }

 //绑定开锁信
 .opendoorMode{
 	border: solid #50515d;
    border-width: 2px 0;/*no*/
+    overflow: hidden;
 	ul{
 	    padding: 11px 42px;
 	    font-size: 0;
@@ -131,6 +116,11 @@
 	.u-select-load{
 		.listLoad();
 	}
+	.u-select-tip{
+    	top: 80px;
+		.transform(none);
+		.listNoCont(inherit,45px 45px,58px);
+	}
 }

 .tip{

--- a/web/lib/less/public/core.less
+++ b/web/lib/less/public/core.less
@@ -391,13 +391,14 @@ p{
 }

 //list 无内容
-.listNoCont(){
-    font-size: @LIST-NOCONTTIP-FONTSIZE;
+.listNoCont(@fontSize:@LIST-NOCONTTIP-FONTSIZE,@bgSize:61px 61px,@paddingTop:88px){
+    color: @LIST-NOCONTTIP-COLOR;
+    font-size: @fontSize;
    .bgImg("noCont.png");
    background-position: top center;
    background-repeat: no-repeat;
-    .background-size(61px 61px);
-    padding-top: 88px;
+    .background-size(@bgSize);
+    padding-top: @paddingTop;
 }

 .white_gradient_border(){

--- a/web/lib/less/public/public.less
+++ b/web/lib/less/public/public.less
@@ -154,6 +154,7 @@
 	    width: 100%;
 	    height: 100%;
 	    overflow: auto;
+	    position: relative;
 	}
 	.u-select-scroll .u-select-row{
 		padding: 15px 45px 15px 20px;
@@ -196,6 +197,11 @@
 	.u-select-load{
 		text-align: center;
 	}
+	.u-select-tip{
+		.transformV_center(left,0);
+		width: 100%;
+		text-align: center;
+	}
 }

 //按钮
@@ -296,6 +302,7 @@
 	    width: 100%;
 	    height: 100%;
 	    overflow: auto;
+	    position: relative;
 	}
 	.u-list-scroll .u-list-row{		
 		padding: 15px 15px 15px 20px;
@@ -349,6 +356,7 @@
 	    width: 100%;
 	    height: 100%;
 	    overflow: auto;
+	    position: relative;
 	} 	
 	.u-swipe-list-scroll .u-swipe-list-row{		
 	    position: relative;

--- a/web/lib/less/public/variables.less
+++ b/web/lib/less/public/variables.less
@@ -188,7 +188,7 @@
 //list
 @LIST-LOAD-COLOR: @C_BLUE_4;    //上拉加载
 @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;

 //引导

--- a/web/resources/lang/zh.json
+++ b/web/resources/lang/zh.json
--- a/web/view/bindUser/bindUser.css
+++ b/web/view/bindUser/bindUser.css
@@ -716,6 +716,7 @@ p {
  width: 100%;
  height: 100%;
  overflow: auto;
+  position: relative;
 }

 .u-swipe-list-scroll .u-swipe-list-row {
@@ -903,6 +904,7 @@ p {
 }

 .custom-swipe-list .u-swipeList-tip {
+  color: #91929a;
  font-size: 0.427rem;
  background-image: url("../../resources/image/noCont.png");
  background-position: top center;

--- a/web/view/device/recordList.css
+++ b/web/view/device/recordList.css
@@ -456,6 +456,7 @@ p {
  width: 100%;
  height: 100%;
  overflow: auto;
+  position: relative;
 }

 .u-list-scroll .u-list-row {
@@ -583,6 +584,7 @@ p {
 }

 .custom-list .u-list-tip {
+  color: #91929a;
  font-size: 0.427rem;
  background-image: url("../../resources/image/noCont.png");
  background-position: top center;

--- a/web/view/doorlockManage/doorlockManage.css
+++ b/web/view/doorlockManage/doorlockManage.css
@@ -656,6 +656,7 @@ p {
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
+  color: #91929a;
  font-size: 0.427rem;
  background-image: url("../../resources/image/noCont.png");
  background-position: top center;

--- a/web/view/doorlockUsers/unlockInfo.css
+++ b/web/view/doorlockUsers/unlockInfo.css
@@ -461,44 +461,116 @@ p {
  border-bottom: 2px solid #50515d;
 }

-.title ~ .unlockInfo-list {
+.title ~ .custom-unlockInfo-list {
  top: 2.453rem;
 }

-.unlockInfo-list {
-  position: absolute;
-  top: 1.173rem;
-  bottom: 0;
-  left: 0;
+.u-list {
  width: 100%;
+  height: 100%;
  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;
-  color: #91929a;
-  font-size: 0.427rem;
+  display: -webkit-box;
+  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;
-  padding: 0.48rem 1.12rem 0.213rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }

-.unlockInfo-list-scroll .unlockInfo-list-row p {
-  float: right;
+.u-list-scroll .u-list-row .u-list-subtitle {
+  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: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  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: linear-gradient(to right, #242635, #fff, #242635);
 }

-.unlockInfo-list-load {
-  text-align: center;
+.custom-unlockInfo-list .u-list-load {
  color: #00ffff;
  font-size: 0.427rem;
  -webkit-transform: scale(0.7);
@@ -507,26 +579,21 @@ p {
  line-height: 0.933rem;
 }

-.unlockInfo-list-tip {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-  width: 100%;
+.custom-unlockInfo-list .u-list-tip {
  background-image: url("../../resources/image/unlockNoCont.png");
  background-position: top center;
  background-repeat: no-repeat;
  -webkit-background-size: 1.867rem 1.867rem;
  background-size: 1.867rem 1.867rem;
  padding-top: 2.347rem;
+  color: #91929a;
  font-size: 0.427rem;
-  text-align: center;
 }

 .opendoorMode {
  border: solid #50515d;
  border-width: 2px 0;
+  overflow: hidden;
 }

 .opendoorMode ul {
@@ -574,6 +641,7 @@ p {
  width: 100%;
  height: 100%;
  overflow: auto;
+  position: relative;
 }

 .u-select-scroll .u-select-row {
@@ -652,6 +720,16 @@ p {
  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 {
  height: 4.267rem;
 }
@@ -693,6 +771,20 @@ p {
  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 {
  text-align: center;
  color: #A0A0A7;

--- a/web/view/doorlockUsers/unlockInfo.html
+++ b/web/view/doorlockUsers/unlockInfo.html
@@ -26,8 +26,9 @@
            <v-touch tag="span" class="header-right" v-on:tap="onAddTap">{{ $t('btn.add') }}</v-touch>
        </div>
        <div class="content"> 
-            <p class="title" v-if="unlockInfoList.length">{{ $t('unlockInfo.bindUnlockInfo') }}</p>
-            <div class="unlockInfo-list">
+            <p class="title">{{ $t('unlockInfo.bindUnlockInfo') }}</p>
+            <u-list :init-param="componentsConfig.unlockInfoList.initParam"></u-list>
+<!--             <div class="unlockInfo-list">
                <ul class="unlockInfo-list-scroll" v-show="unlockInfoList.length">
                    <li class="unlockInfo-list-row" v-for="item in unlockInfoList">
                        {{ item.title }}
@@ -36,7 +37,7 @@
                    <v-touch tag="li" class="unlockInfo-list-load" v-on:tap="onTapLoad" v-show="loadShowFlag">{{ loadText }}</v-touch>
                </ul>
                <p class="unlockInfo-list-tip" v-show="(unlockInfoList.length == 0)">{{ tip }}</p>
-            </div>
+            </div> -->
        </div>   
        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>