首页效果制作

dev/src/lang/zh.json

 {
-    "loading": "loading...",
+    "loading": "数据加载中...",
     "scroll": {
         "clickToLoadMore": "上拉加载更多",
         "loading": "loading"
@@ -22,20 +22,20 @@
         "openNotify": "开启推送通知",
         "reBound": "重新绑定",
         "saveQRcode": "保存二维码到相册",
-        "unbind": "解绑",
+        "unbind": "解除授权",
         "deleteUser": "删除该用户",
         "qrcodeReset": "重新生成二维码",
         "add": "添加",
         "next": "下一步",
         "iSee": "我知道了",
-        "unbindDoorlock": "解绑门锁",
+        "unbindDoorlock": "解除授权门锁",
         "finish": "完成",
         "cancel": "取消"
     },
     "dialog":{
         "confirm": "确认",
         "cancel": "取消",
-        "unbind": "解绑",
+        "unbind": "解除授权",
         "delete": "删除"
     },
     "title":{
@@ -59,7 +59,7 @@
         "userList": "用户列表",
         "doorlockUser": "门锁用户",
         "addUser": "添加用户",
-        "inviteBind": "邀请绑定",
+        "inviteBind": "邀请授权",
         "unlockInfo": "关联开锁信息",
         "myInfo": "个人信息",
         "editNickname": "修改昵称",
@@ -162,8 +162,8 @@
         "alarmMsgPush": "报警消息推送",
         "opendoorMsgPush": "开门消息推送",
         "unbindDialogTip": "确认解除绑定",
-        "unbindSuccess": "<img src='../../resources/image/green_unbindSuccess_icon.png'>解绑成功",
-        "unbindFailue": "<img src='../../resources/image/green_unbindSuccess_icon.png'>解绑失败"
+        "unbindSuccess": "<img src='../../resources/image/green_unbindSuccess_icon.png'>解除授权成功",
+        "unbindFailue": "<img src='../../resources/image/green_unbindSuccess_icon.png'>解除授权失败"
     },
     "editName":{
         "nameInputTip": "请输入门锁名称",
@@ -255,15 +255,15 @@
     },
     "doorlockUser":{
         "name": "昵称：",
-        "inviteBind": "邀请绑定",
+        "inviteBind": "邀请授权",
         "bindUnlockInfo": "关联开锁信息",
         "editUsername": "编辑用户昵称",
         "opendoorRecord": "历史开门记录",
-        "unbindDialogTip": "<img src='../../resources/image/green_unbind_icon.png'>解绑后，该用户不能对门锁下的信息进行查看",
+        "unbindDialogTip": "<img src='../../resources/image/green_unbind_icon.png'>解除授权后，该用户不能对门锁下的信息进行查看",
         "deleteUserDialogTip": "删除后，用户对应的开锁id取消关联，同时失去信息查看权限。",
-        "unbindSuccess": "<img src='../../resources/image/green_unbindSuccess_icon.png'>解绑成功",
-        "unbindFailue": "<img src='../../resources/image/green_unbindSuccess_icon.png'>解绑失败",
-        "guideStep1Tip1": "邀请绑定成功",
+        "unbindSuccess": "<img src='../../resources/image/green_unbindSuccess_icon.png'>解除授权成功",
+        "unbindFailue": "<img src='../../resources/image/green_unbindSuccess_icon.png'>解除授权失败",
+        "guideStep1Tip1": "邀请授权成功",
         "guideStep1Tip2": "（受邀用户可查看开门记录，报警记录等<br>相关门锁信息）",
         "guideStep3Tip": "关联后可了解<br>该用户的开门情况",
         "deleteSuccess": "删除成功",
@@ -349,7 +349,7 @@
     	"oldPasswordInputTipAgain": "请再次输入旧密码"
     },
     "request":{
-    	"error": "请求发送失败",
+    	"error": "数据加载失败",
     	"initError": "初始化失败，请关闭APP重试"
     },
     "deviceList":{

dev/src/public/public.js

@@ -46,7 +46,7 @@ uPublic.recalc = function () {
         recalc = function () {
             var clientWidth = docEl.clientWidth;
             if (!clientWidth) return;
-            docEl.style.fontSize = parseInt(clientWidth / 10, 10) + 'px';
+            docEl.style.fontSize = clientWidth / 10 + 'px';
         };
     window.addEventListener(resizeEvt, recalc, false);
     recalc();

dev/src/view/device/v_index.js

@@ -969,9 +969,7 @@ function setBellRing(self, time){
 	let now = moment(new Date(), "YYYY-MM-DD hh:mm:ss");
 	time = moment(time, "YYYY-MM-DD hh:mm:ss");
 	if(now.diff(time,'seconds') < config.ringBell_timeout && now.diff(time,'seconds') >= 0){
-		self.setMsgTime(now.format("HH:mm"));
-		self.setMsgText(Vue.t('device.doorLockRinging'));
-		ringBell(self);
+		ringBell(self, time);
 	}
 }
 
@@ -1032,7 +1030,7 @@ function setRemoteOpenDoorLoading(self, status, text, buttonText){
 }
 
 //响铃动画和铃声设置
-function ringBell(self){	
+function ringBell(self, time){	
 //	window.clearInterval(self.time);
 //	window.clearTimeout(self.timeout);
 //	let i = 0;
@@ -1044,12 +1042,13 @@ function ringBell(self){
 //	},config.await_time*2);
 	if(self.getDoorbellRingingFlag() === false){
 		self.setDoorbellRingingFlag(true);
-		//设置当前为普通状态
-		self.setWarmingShowFlag(false);
-		//更换icon
-		self.setMsgClass("doorbell_img");
-		//开启普通动画效果
-		self.setNormalApertureShow(true);
+//		//设置当前为普通状态
+//		self.setWarmingShowFlag(false);
+//		//更换icon
+//		self.setMsgClass("doorbell_img");
+//		//开启普通动画效果
+//		self.setNormalApertureShow(true);
+		setMsgStatus(self, false, "doorbell_img", true, false, time.format("HH:mm"), Vue.t('device.doorLockRinging'));
 		let p = plus.audio.createPlayer(config.audioUrl);
 		self.timeout = setTimeout(() => {
 			p = plus.audio.createPlayer(config.audioUrl);

web/lib/less/device/device.less

@@ -137,8 +137,14 @@
 }
 
 .remoteOpendoor_img{
-    .bgImgSize(40px,40px,"green_remoteOpendoor_icon.png",center,cover);
-    .animation(remoteOpendoor .5s steps(3) infinite);
+//  .bgImgSize(40px,40px,"green_remoteOpendoor_icon.png",center,cover);
+    width: 37.5px;
+    height: 37.5px;
+    background-size: 112.5px 37.5px;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    .bgImg("green_remoteOpendoor_icon.png");
+    .animation(remoteOpendoor 2s step-start infinite);
 }
 
 .hijack_img{
@@ -202,11 +208,17 @@
 });
 
 .keyframes(remoteOpendoor,{
-    from{
+    0%{
         background-position: 0 0;
     }
-    to{
-        background-position: -120px 0;
+    33.33%{
+        background-position: -37.5px 0;
+    }
+    66.66%{
+        background-position: -75px 0;
+    }
+    100% {
+        background-position: 0 0;
     }
 });
 

web/view/device/device.css

@@ -1083,13 +1083,14 @@ p {
 }
 
 .remoteOpendoor_img {
-  width: 1.067rem;
-  height: 1.067rem;
-  background: url("../../resources/image/green_remoteOpendoor_icon.png") no-repeat center;
-  -webkit-background-size: cover;
-  background-size: cover;
-  -webkit-animation: remoteOpendoor 0.5s steps(3) infinite;
-  animation: remoteOpendoor 0.5s steps(3) infinite;
+  width: 1rem;
+  height: 1rem;
+  background-size: 3rem 1rem;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-image: url("../../resources/image/green_remoteOpendoor_icon.png");
+  -webkit-animation: remoteOpendoor 2s step-start infinite;
+  animation: remoteOpendoor 2s step-start infinite;
 }
 
 .hijack_img {
@@ -1202,22 +1203,38 @@ p {
 }
 
 @-webkit-keyframes remoteOpendoor {
-  from {
+  0% {
     background-position: 0 0;
   }
 
-  to {
-    background-position: -3.2rem 0;
+  33.33% {
+    background-position: -1rem 0;
+  }
+
+  66.66% {
+    background-position: -2rem 0;
+  }
+
+  100% {
+    background-position: 0 0;
   }
 }
 
 @keyframes remoteOpendoor {
-  from {
+  0% {
     background-position: 0 0;
   }
 
-  to {
-    background-position: -3.2rem 0;
+  33.33% {
+    background-position: -1rem 0;
+  }
+
+  66.66% {
+    background-position: -2rem 0;
+  }
+
+  100% {
+    background-position: 0 0;
   }
 }
 

web/view/device/index.html

@@ -32,7 +32,9 @@
 	                    <div class="doorbellCircle">
 	                        <div class="doorbell" v-bind:class="{ active: doorbellRingingFlag }">
 	                            <!--<img :src="msgIconSrc">-->
-	                            <p :class=" msgClass "></p>
+	                            <p :class=" msgClass ">
+	                            	
+	                            </p>
 	                        </div>
 	                    </div>
 	                    <div class="doorbellTip"><span>{{ msgTime }}</span>{{ msgText }}</div>