1.0.0 / 2017-09-13

==================
 * 1.上传项目开发环境

doorlockApp/.gitignore

+
+dev/node_modules
+
+web/lib/js/p.js.map
+
+web/lib/dist
+
+web/view/*.map
+
+web/view/*.js
+
+web/view/*/*.map
+
+web/view/*/*.js

doorlockApp/History.md

+1.0.0 / 2017-09-13
+
+==================
+ * 1.上传项目开发环境
\ No newline at end of file

doorlockApp/dev/.babelrc

+{
+  "presets": ["es2015"],
+  plugins: [
+    ["transform-regenerator"],
+    ["transform-object-assign"],
+    ['transform-runtime', {
+      helpers: false,
+      polyfill: false,
+      regenerator: true}
+    ]
+  ]
+}
\ No newline at end of file

doorlockApp/dev/config/lang.js

+const path = require('path');
+const srcPath = path.join(__dirname,"..","src");
+const outputPath = "../resources/lang/";
+module.exports = {
+	lang:["zh","en"],
+	group:srcPath,
+    output:outputPath
+};
\ No newline at end of file

doorlockApp/dev/core/I18NPackage.js

+const path = require('path');
+const fs = require('fs');
+
+const config = require('../config/lang');
+const srcPath = path.join(__dirname,"..","src");
+const langPath = path.join(srcPath,"lang");
+const componentPath = path.join(srcPath,"lang","component");
+let allFilePath = [];
+function getAllLang(...dirs){
+	let langGroup = {};
+	for(let dir of dirs){
+		if(fs.existsSync(dir)){
+			for(let lang of config.lang){
+				let lPath = path.join(dir,"/",`${lang}.json`);
+				if(fs.existsSync(lPath)){
+					let arr;
+					if(langGroup[lang]!=null){
+						arr = langGroup[lang];
+					}else{
+						arr = new Array();
+					}
+					arr.push(lPath);
+					langGroup[lang] = arr;
+					allFilePath.push(lPath);
+				}
+			}
+		}	
+	}
+	return langGroup;
+}
+let langGroup;
+const watch = require('watch');
+class I18NPackage{
+	constructor(options){
+		this.options = options;
+		this.watching = false;
+	}
+
+	apply(compiler){
+		compiler.plugin("watch-run", (compilation, callback) => {
+			if(!this.watching){
+				this.watching = true;
+				langGroup = getAllLang(langPath,componentPath);
+				const onChange = () => {
+					langGroup = getAllLang(langPath,componentPath);
+					compiler.run((err) => {
+						if(err) {
+						  throw err;
+						}
+					});
+				};
+				watch.createMonitor(srcPath, (monitor) => {
+					monitor.files[path.join(srcPath,".json")];
+
+					monitor.on("created", onChange);
+					monitor.on("changed", onChange);
+					monitor.on("removed", onChange);
+					callback();
+				});
+			}
+			
+		});
+		compiler.plugin('emit', function(compilation, callback) {
+			let createFileName = [];
+			try{
+				for(let key of Object.keys(langGroup)){
+					let path = langGroup[key];
+					let obj = {};
+					for(let filePath of path){
+						obj = Object.assign(obj,JSON.parse(fs.readFileSync(filePath, 'utf8')));
+					}
+					let filelist = JSON.stringify(obj);
+					// Insert this list into the Webpack build as a new file asset:
+					let fileName = `../resources/lang/${key}.json`;
+					compilation.assets[fileName] = {
+						source: function() {
+							return filelist;
+						},
+						size: function() {
+							return filelist.length;
+						}
+					};
+					createFileName.push(fileName);
+				}
+			}catch(err){
+				console.log(err)
+			}
+			console.log("lang file merge success.")
+			for(let file of createFileName){
+				console.log(file)
+			}
+
+			callback();
+		});
+	}
+}
+module.exports = I18NPackage;
\ No newline at end of file

doorlockApp/dev/lib.config.js

+var webpack = require('webpack');
+var path = require('path');
+const vendors = [
+	'whatwg-fetch',
+	'es6-promise',
+	'vue',
+    'vuex'
+];
+let libsDir = path.join(__dirname,"libs");
+module.exports = {
+    output: {
+        path: libsDir,
+        filename: '[name].[chunkhash].js',
+        library: '[name]_[chunkhash]',
+    },
+    entry: {
+        vendor: vendors,
+    },
+    plugins: [
+        new webpack.DllPlugin({
+            path: path.join(libsDir,"manifest.json"),
+            name: '[name]_[chunkhash]',
+            context: __dirname,
+        }),
+    ],
+};

doorlockApp/dev/package.json

+{
+  "name": "vue-webpack",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "dependencies": {
+    "es6-promise": "4.1.0",
+    "es6-symbol": "3.1.1",
+    "hammerjs": "2.0.8",
+    "iscroll": "5.2.0",
+    "moment": "^2.18.1",
+    "ugen-components": "^0.1.0",
+    "underscore": "1.8.3",
+    "vue": "2.2.6",
+    "vue-i18n": "5.0.3",
+    "vue-router": "2.1.1",
+    "vue-touch": "2.0.0-beta.4",
+    "vuex": "2.3.1"
+  },
+  "devDependencies": {
+    "babel-core": "6.24.1",
+    "babel-loader": "6.4.1",
+    "babel-preset-es2015": "6.24.1",
+    "babel-plugin-transform-async-to-generator": "6.24.1",
+    "babel-plugin-transform-object-assign": "6.22.0",
+    "babel-plugin-transform-runtime": "6.23.0",
+    "css-loader": "0.28.0",
+    "es6-promise": "4.1.0",
+    "style-loader": "0.16.1",
+    "vue-loader": "11.3.4",
+    "vue-template-compiler": "2.2.6",
+    "watch": "1.0.2",
+    "webpack": "2.3.3"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

doorlockApp/dev/src/lang/en.json

+{
+  "loading": "正在加载...",
+  "hour": "小时",
+  "subtitle": "显示副标题",
+  "btn": {
+    "confirm": "确定",
+    "numberAdjustment": "修改disabled"
+  },
+  "scroll": {
+    "clickToLoadMore": "click to load more",
+    "loading": "loading..."
+  }
+}
\ No newline at end of file

doorlockApp/dev/src/lang/zh.json

+{
+    "loading": "请耐心等待...",
+    "scroll": {
+        "clickToLoadMore": "点击加载更多",
+        "loading": "loading..."
+    },
+    "btn": {
+        "confirm": "确定",
+        "login": "登录",
+        "getCode": "获取验证码",
+        "register": "注册",
+        "logout": "退出系统",
+        "save": "保存",
+        "qrcode": "生成二维码",
+        "wifiAdd": "开始配置Wi-Fi",
+        "connect": "连接",
+        "bindUser": "绑定姓名",
+        "bind": "我要绑定",
+        "reBound": "请重新绑定",
+        "saveQRcode": "保存二维码到相册"
+    },
+    "dialog":{
+        "confirm": "确认",
+        "cancel": "取消"
+    },
+    "title":{
+        "login": "登录",
+        "register": "注册",
+        "forgetPassword": "忘记密码",
+        "device": "智能指纹锁",
+        "opendoorRecord": "开门记录",
+        "alarmInfo": "报警信息",
+        "remoteOpendoor": "远程开门",
+        "hijackRecord": "劫持记录",
+        "doorlockManage": "门锁管理",
+        "editName": "修改名称",
+        "qrcode": "生成绑定二维码",
+        "addDevice": "添加设备",
+        "scanCodeAdd": "扫描绑定设备",
+        "wifiAddHelp": "配置Wi-Fi",
+        "wifiAdd": "连接Wi-Fi",
+        "bindUserHelp": "ID-姓名绑定",
+        "bindUser": "绑定用户",
+        "userList": "用户列表"
+    },
+    "footer":{
+        "guide": "指纹改变生活",
+        "recordList": "记录时间以锁为准"
+    },
+    "login":{
+        "telInputTip": "请输入手机号",
+        "passwordInputTip": "请输入密码",
+        "register": "快速注册",
+        "forgetPassword": "忘记密码",
+        "error": {
+            "telNull": "请输入手机号",
+            "passWordNull": "请输入密码"
+        }
+    },
+    "register":{
+        "telInputTip": "请输入手机号",
+        "codeInputTip": "请输入验证码",
+        "passwordInputTip": "请输入6位登录密码",
+        "error": {
+            "telNull": "请输入手机号",
+            "codeNull": "请输入验证码",
+            "passWordNull": "请输入密码"
+        }
+    },
+    "forgetPassword":{
+        "telInputTip": "请输入手机号",
+        "codeInputTip": "请输入验证码",
+        "passwordInputTip": "请输入6位登录密码",
+        "error": {
+            "telNull": "请输入手机号",
+            "codeNull": "请输入验证码",
+            "passWordNull": "请输入密码"
+        }
+    },
+    "device":{
+        "opendoorRecord": "开门记录",
+        "securityAlarm": "安全报警",
+        "remoteOpendoor": "远程开门",
+        "hijackAlarm": "劫持报警",
+        "followTitle": "关注服务号",
+        "followCont1": "关注“i智信”微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧",
+        "followCont2": "1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注",
+        "laterFollow": "稍后关注"
+    },
+    "opendoorRecord":{
+        "noRecordTip": "暂无记录"
+    },
+    "alarmInfo":{
+        "noInfoTip": "暂无信息"
+    },
+    "remoteOpendoor":{
+        "passwordInputTip": "请输入远程开门密码",
+        "error": {
+
+        }
+    },
+    "hijackRecord":{
+        "noRecordTip": "暂无记录"
+    },
+    "doorlockManage":{
+        "noDeviceTip": "暂无设备",
+        "deleteDialogTip": "<span>{0}</span>将被删除",
+        "logoutDialogTip": "确定要退出系统吗？"
+    },
+    "editName":{
+        "nameInputTip": "请输入门锁名称",
+        "error": {
+
+        }
+    },
+    "qrcode":{
+        "helpTitle": "注意事项：",
+        "helpCont1": "1.仅超级管理员（通过Wi-Fi配网绑定的用户为超级管理员）可以生成绑定二维码",
+        "helpCont2": "2.二维码有效时间为10分钟且只能使用一次",
+        "helpCont3": "3.用户只需要扫描该二维码即可绑定指纹锁",
+        "helpCont4": "4.绑定失败则需要重新生成二维码进行绑定"
+    },
+    "addDevice": {
+        "scanCodeAdd": "扫描绑定设备",
+        "wifiAdd": "配置Wi-Fi"
+    },
+    "wifiAddHelp": {
+        "helpTitle": "配置Wi-Fi说明：",
+        "helpCont1": "1.按下指纹锁背面的按钮，进入主菜单，选择Wi-Fi设置→配置Wi-Fi，门锁进入等待配网状态",
+        "helpCont2": "2.点击页面“开始配置Wi-Fi”按钮，进入Wi-Fi配网画面",
+        "helpCont3": "3.输入Wi-Fi密码，点击“l连接”按钮，等待锁端相应，直至配网成功",
+        "helpCont4": "（提示：如果指纹锁已经绑定过用户，重新绑定成功后会清除之前所有绑定信息）"
+    },
+    "wifiAdd": {
+        "passwordInputTip": "请输入Wi-Fi密码",
+        "remindTitle": "配置Wi-Fi提醒：",
+        "remindCont1": "1.  请确保Wi-Fi信号良好",
+        "remindCont2": "2.  本产品暂不支持5GHz无线网络",
+        "error": {
+
+        }
+    },
+    "bindUserHelp": {
+        "helpTitle": "配对姓名说明：",
+        "helpCont1": "1.在指纹锁上录入指纹、密码、卡并获得相应ID",
+        "helpCont2": "2.通过姓名绑定将该ID绑定对应用户姓名",
+        "helpCont3": "3.绑定成功后，开门记录中将会显示已绑定的用户姓名",
+        "helpCont4": "4.用户姓名信息只保存在APP端，不影响锁端设置",
+        "boundUser": "查看已绑定ID姓名"
+    },
+    "bindUser": {
+        "editHeadTip": "点击编辑用户头像",
+        "nameTitle": "姓名",
+        "fingerprintIDTitle": "指纹ID",
+        "passwordIDTitle": "密码ID",
+        "ICCardIDTitle": "IC卡ID",
+        "requiredInputTip": "（必填）",
+        "optionalInputTip": "（选填）",
+        "error": {
+
+        }
+    },
+    "userList":{
+        "name": "姓名：{0}",
+        "id": "指纹ID:<span>{0}</span>密码ID:<span>{1}</span>IC卡ID:<span>{2}</span>",
+        "noUserTip": "暂无用户"
+    },
+    "commstatusLoading":{
+        "connectSuccess": "Wi-Fi连接成功，正在绑定...",
+        "bindSuccess": "绑定成功",
+        "bindFailed": "绑定失败"
+    }
+}
\ No newline at end of file

doorlockApp/dev/src/public/config.js

+let uComponents = {};
+
+uComponents.changeGridList = function (vmObj, list) {
+    vmObj.$refs.gridlist.changeList(list);
+};
+
+uComponents.changeTimeline = function (vmObj, list) {
+    vmObj.$refs.timeline.changeList(list);
+};
+
+export {uComponents}
\ No newline at end of file

doorlockApp/dev/src/public/manage.js

+import gridList from '../view/c_grid-list.vue';
+import timeline from '../view/c_timeline.vue';
+
+var components = {
+	'grid-list': gridList,
+    'timeline': timeline
+};
+export default components;
\ No newline at end of file

doorlockApp/dev/src/public/public.js

+import config from './config.js';
+import VueI18n from 'vue-i18n';
+let VueTouch = require('vue-touch');
+Vue.use(VueTouch);
+
+import ugenComponents from 'ugen-components';
+let uComponents = ugenComponents.uComponents;
+import projectComponents from './manage';
+
+const iot = new UIOT({
+    lang: ['zh', 'en'],
+    vue: Vue,
+    i18n: VueI18n,
+    appId: '10003',
+    wx: {
+        appId: ''
+    },
+    cloud: {
+        url: 'http://192.168.2.97:20007'
+    },
+    plugin: {
+        log: {
+            url: 'http://192.168.2.213:3302/log'
+        }
+    }
+});
+
+let uPublic = {};
+uPublic.console = function (res) {
+    console.log(res)
+};
+// 设置页面字体
+uPublic.recalc = function () {
+    let docEl = document.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function () {
+            let clientWidth = docEl.clientWidth;
+            if (!clientWidth) return;
+            docEl.style.fontSize = clientWidth / 10 + 'px';
+        };
+    window.addEventListener(resizeEvt, recalc, false);
+    recalc();
+};
+// 注册组件
+uPublic.componentsInit = function (array) {
+    array.forEach(function (item, index) {
+        Vue.component(item, ugenComponents.manage[item]);
+    });
+};
+// 加载项目自定义组件
+uPublic.componentsExtend = function (array) {
+    array.forEach(function (item, index) {
+        Vue.component(item, projectComponents[item]);
+    });
+};
+
+iot.ready(() => {
+    uPublic.recalc();
+});
+export {iot, uPublic, uComponents}
\ No newline at end of file

doorlockApp/dev/src/view/addDevice/v_index.js

+/**
+* v_index.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-07
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 添加设备页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 dialog、loading组件
+    uPublic.componentsInit(['u-dialog','u-loading']);
+    const app = new Vue({
+        data:{            
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){           
+        },
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            },
+            //tap 扫描绑定设备
+            onScanAddTap(){
+                scanAddTap();
+            },
+            //tap 配置Wi-Fi
+            onWifiAddTap(){
+                wifiAddTap(); 
+            }                  
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }               
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+//tap 扫描绑定设备
+function scanAddTap(){
+    iot.navigator.openWindow({
+        url: './scanCodeAdd.html',
+        id: 'scanCodeAdd'
+    });
+}
+
+//tap 配置Wi-Fi
+function wifiAddTap(){
+    iot.navigator.openWindow({
+        url: './wifiAddHelp.html',
+        id: 'wifiAddHelp'
+    });
+}
\ No newline at end of file

doorlockApp/dev/src/view/addDevice/v_scanCodeAdd.js

+/**
+* v_scanCodeAdd.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-07
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 扫描绑定设备页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 dialog、loading组件
+    uPublic.componentsInit(['u-dialog','u-loading']);
+    const app = new Vue({
+        data:{            
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){          
+        },
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            }                  
+        }
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }                
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
\ No newline at end of file

doorlockApp/dev/src/view/addDevice/v_wifiAdd.js

+/**
+* v_wifiAdd.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-07
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 连接Wi-Fi页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 input、按钮、dialog、loading组件
+    uPublic.componentsInit(['u-text','u-button','u-commstatus-loading','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{     
+            textPassword: null, 
+            textErrorTip: null, 
+            textLoading: 'loading...',
+            status: 0,       
+            //配置组件
+            componentsConfig: initComponentsConfig()   
+        },
+        mounted(){                 
+        },
+        methods:{
+            getTextLoading(){
+                return this.textLoading;
+            },
+            setTextLoading(text){
+                this.textLoading = text;
+            },
+            getStatus(){
+                return this.status;
+            },
+            setStatus(value){
+                this.status = value;
+            },
+            onPasswordChange(text){
+                passwordChange(this,text);            
+            },            
+            //tap <
+            onBackTap(){
+                backTap();
+            },
+            //tap 连接
+            onConnectButtonTap(){
+                connectButtonTap(this);    
+            },
+            //tap loading button
+            onCommstatusLoadingButtonTap(){
+                commstatusLoadingButtonTap(this);
+            }                           
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        passwordInput: {
+            initParam: {
+                class: 'custom-password-text',
+                icon: '&#xe64d;',
+                placeholder: Vue.t('wifiAdd.passwordInputTip'),
+                type: 'password'
+            }
+        },
+        //连接 button 参数
+        connectButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.connect')
+            }
+        }, 
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        },
+        ucommstatusloading: {
+            initParam: {
+                class: '',
+                buttonText: Vue.t('btn.confirm')
+            }
+        }                        
+    }
+}
+
+function passwordChange(self,text){
+    self.textPassword = text;
+    console.log('passwordChange: ' + self.textPassword);
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+//tap 连接
+function connectButtonTap(self){ 
+    uComponents.showCommstatusloading(self);
+    setTimeout(function(){
+        self.setTextLoading(Vue.t('commstatusLoading.connectSuccess'));
+        setTimeout(function(){
+            //绑定成功
+            self.setStatus(1);
+            self.setTextLoading(Vue.t('commstatusLoading.bindSuccess'));
+            //绑定失败
+            //self.setStatus(2);
+            //self.setTextLoading(Vue.t('commstatusLoading.bindFailed'));
+            //uComponents.changeCommstatusButtonText(self,Vue.t('btn.reBound'));
+        },3000);
+    },3000);
+}
+
+//tap loading button
+function commstatusLoadingButtonTap(self) {
+    //绑定成功
+    uComponents.hideCommstatusloading(self);
+    iot.navigator.openWindow({
+        url: '../device/',
+        id: 'device'
+    });
+    //绑定失败
+    //uComponents.hideCommstatusloading(self);
+}
\ No newline at end of file

doorlockApp/dev/src/view/addDevice/v_wifiAddHelp.js

+/**
+* v_wifiAddHelp.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-07
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 配置Wi-Fi页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 按钮、dialog、loading组件
+    uPublic.componentsInit(['u-button','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{            
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){           
+        },
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            },
+            //tap 开始配置Wi-Fi
+            onWifiAddButtonTap(){
+                wifiAddButtonTap();   
+            }                
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        //开始配置Wi-Fi button 参数
+        wifiAddButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.wifiAdd')
+            }
+        },
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }                
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+//tap 开始配置Wi-Fi
+function wifiAddButtonTap(){
+    iot.navigator.openWindow({
+        url: './wifiAdd.html',
+        id: 'wifiAdd'
+    });  
+}
\ No newline at end of file

doorlockApp/dev/src/view/bindUser/r_bindUser.vue

+/**
+* r_bindUser.vue
+* Version: 0.1
+* User: wy
+* Date: 2017-09-07
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 绑定用户页面
+*/
+<template>
+    <div>
+        <div class="header">
+            <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch> 
+            <p>{{ $t('title.bindUser') }}</p>
+        </div>
+        <div class="content">  
+            <v-touch tag="ul" class="editHead" v-on:tap="onEditHeadTap">
+                <li>
+                    <img :src="imageHead">
+                </li>
+                <li>{{ $t('bindUser.editHeadTip') }}</li>
+            </v-touch>
+            <div class="inputBox">
+                <u-text :init-param="componentsConfig.nameInput.initParam" :text="textName"
+                v-on:u-text-change="onNameChange(arguments[0])"></u-text>
+                <u-text :init-param="componentsConfig.fingerprintIDInput.initParam" :text="numberFingerprintID"
+                v-on:u-text-change="onFingerprintIDChange(arguments[0])"></u-text>
+                <u-text :init-param="componentsConfig.passwordIDInput.initParam" :text="numberPasswordID"
+                v-on:u-text-change="onPasswordIDChange(arguments[0])"></u-text>
+                <u-text :init-param="componentsConfig.ICCardIDInput.initParam" :text="numberICCardID"
+                v-on:u-text-change="onICCardIDChange(arguments[0])"></u-text>
+                <p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
+            </div>
+            <u-button :init-param="componentsConfig.bindButton.initParam" v-on:u-button-tap="onBindButtonTap"></u-button>
+        </div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+</template>  
+
+<script>
+    import {iot, uPublic, uComponents} from '../../public/public.js';
+    //通用 input、按钮、dialog、loading组件
+    uPublic.componentsInit(['u-text','u-button','u-dialog','u-loading']);
+    export default {
+        data (){
+            return {
+                imageHead: '../../resources/image/gray_head_icon.png',
+                textName: null,
+                numberFingerprintID: null,
+                numberPasswordID: null,
+                numberICCardID: null,
+                textErrorTip: null,
+                //配置组件
+                componentsConfig: initComponentsConfig()
+            }
+        },
+        beforeRouteEnter (to, from, next) {
+            //alert('beforeRouteEnter 路由bindUser');
+            next(vm => {
+
+            })
+        },
+        beforeRouteUpdate (to, from, next) {
+            //alert('beforeRouteUpdate 路由bindUser');
+        },
+        mounted(){            
+        },      
+        methods:{
+            onNameChange(text){
+                nameChange(this,text);           
+            },  
+            onFingerprintIDChange(number){
+                fingerprintIDChange(this,number);
+            },  
+            onPasswordIDChange(number){
+                passwordIDChange(this,number);
+            },  
+            onICCardIDChange(number){
+                ICCardIDChange(this,number);
+            },      
+            //tap <      
+            onBackTap(){
+                backTap(this);
+            },
+            //编辑头像
+            onEditHeadTap(){
+                editHeadTap();
+            },
+            //tap 我要绑定
+            onBindButtonTap(){
+                bindButtonTap(this);
+            }    
+        }               
+    }
+
+    //配置组件参数
+    function initComponentsConfig(){
+        return {
+            nameInput: {
+                initParam: {
+                    class: 'custom-bindUser-text',
+                    title: Vue.t('bindUser.nameTitle'),
+                    placeholder: Vue.t('bindUser.requiredInputTip')
+                }
+            },
+            fingerprintIDInput: {
+                initParam: {
+                    class: 'custom-bindUser-text',
+                    title: Vue.t('bindUser.fingerprintIDTitle'),
+                    placeholder: Vue.t('bindUser.optionalInputTip')
+                }
+            },
+            passwordIDInput: {
+                initParam: {
+                    class: 'custom-bindUser-text',
+                    title: Vue.t('bindUser.passwordIDTitle'),
+                    placeholder: Vue.t('bindUser.optionalInputTip')
+                }
+            },
+            ICCardIDInput: {
+                initParam: {
+                    class: 'custom-bindUser-text',
+                    title: Vue.t('bindUser.ICCardIDTitle'),
+                    placeholder: Vue.t('bindUser.optionalInputTip')
+                }
+            },
+            //我要绑定 button 参数
+            bindButton: {   
+                initParam: {
+                    class: 'custom-button',
+                    text: Vue.t('btn.bind')
+                }
+            },
+            dialog: {
+                initParam: {
+                    class: 'custom-dialog'
+                }
+            },         
+            loading: {
+                initParam: {
+                    class: 'custom-loading'
+                }
+            }
+        }
+    }
+
+    function nameChange(self,text){
+        self.textName = text;
+        console.log('nameChange: ' + self.textName);
+    } 
+
+    function fingerprintIDChange(self,number){
+        self.numberFingerprintID = number;
+        console.log('fingerprintIDChange' + self.numberFingerprintID); 
+    }
+
+    function passwordIDChange(self,number){
+        self.numberPasswordID = number;
+        console.log('passwordIDChange' + self.numberPasswordID); 
+    } 
+
+    function ICCardIDChange(self,number){
+        self.numberICCardID = number;
+        console.log('ICcardIDChange' + self.numberICCardID); 
+    }   
+
+    //tap <
+    function backTap(self){
+        self.$router.go(-1);
+    }    
+
+    //编辑头像
+    function editHeadTap(){
+        alert('编辑头像');
+    }
+
+    //tap 我要绑定
+    function bindButtonTap(self){
+        self.$router.push({path: '/userList', query: {pageName: 'bindUser'}});       
+    }
+</script>
\ No newline at end of file

doorlockApp/dev/src/view/bindUser/r_bindUserHelp.vue

+/**
+* r_bindUserHelp.vue
+* Version: 0.1
+* User: wy
+* Date: 2017-09-07
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* ID-姓名绑定页面
+*/
+<template>
+    <div>
+        <div class="header">
+            <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
+            <p>{{ $t('title.bindUserHelp') }}</p>
+        </div>
+        <div class="content">
+            <ul class="bindUserHelp">
+                <li>{{ $t('bindUserHelp.helpTitle') }}</li>
+                <li>{{ $t('bindUserHelp.helpCont1') }}</li>
+                <li>{{ $t('bindUserHelp.helpCont2') }}</li>
+                <li>{{ $t('bindUserHelp.helpCont3') }}</li>
+                <li>{{ $t('bindUserHelp.helpCont4') }}</li>
+            </ul>
+            <u-button :init-param="componentsConfig.bindUserButton.initParam" v-on:u-button-tap="onBindUserButtonTap"></u-button>
+            <v-touch tag="p" v-on:tap="onBoundUserTap">{{ $t('bindUserHelp.boundUser') }}</v-touch>
+        </div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+</template>  
+
+<script>
+    import {iot, uPublic, uComponents} from '../../public/public.js';
+    //通用 按钮、dialog、loading组件
+    uPublic.componentsInit(['u-button','u-dialog','u-loading']);
+    export default {
+        data (){
+            return {
+                //配置组件
+                componentsConfig: initComponentsConfig()
+            }
+        },
+        beforeRouteEnter (to, from, next) {
+            //alert('beforeRouteEnter 路由bindUserHelp');
+            next(vm => {
+
+            })
+        },
+        beforeRouteUpdate (to, from, next) {
+            //alert('beforeRouteUpdate 路由bindUserHelp');
+        },
+        mounted(){            
+        },      
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            },
+            //tap 绑定姓名
+            onBindUserButtonTap(){
+                bindUserButtonTap(this);
+            },
+            //tap 查看已绑定ID姓名
+            onBoundUserTap(){
+                boundUserTap(this);
+            }
+        }               
+    }
+
+    //配置组件参数
+    function initComponentsConfig(){
+        return {
+            //绑定姓名 button 参数
+            bindUserButton: {   
+                initParam: {
+                    class: 'custom-button',
+                    text: Vue.t('btn.bindUser')
+                }
+            },
+            dialog: {
+                initParam: {
+                    class: 'custom-dialog'
+                }
+            },        
+            loading: {
+                initParam: {
+                    class: 'custom-loading'
+                }
+            }
+        }
+    }
+
+    //tap <
+    function backTap(){
+        iot.navigator.back();
+    }
+
+    //tap 绑定姓名
+    function bindUserButtonTap(self){
+        self.$router.push({path: '/bindUser'});
+    }
+
+    //tap 查看已绑定ID姓名
+    function boundUserTap(self){
+        self.$router.push({path: '/userList'});
+    }
+</script>
\ No newline at end of file

doorlockApp/dev/src/view/bindUser/r_userList.vue

+/**
+* r_userList.vue
+* Version: 0.1
+* User: wy
+* Date: 2017-09-07
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 用户列表页面
+*/
+<template>
+    <div>
+        <div class="header">
+            <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>   
+            <p>{{ $t('title.userList') }}</p>
+        </div>
+        <u-swipe-list ref="uswipelist" :init-param="componentsConfig.userList.initParam"
+    v-on:u-swipe-list-button-tap="onUserListButtonTap(arguments[0],arguments[1])"></u-swipe-list>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+</template>  
+
+<script>
+    import {iot, uPublic, uComponents} from '../../public/public.js';
+    //通用 侧滑列表、dialog、loading组件
+    uPublic.componentsInit(['u-swipe-list','u-dialog','u-loading']);    
+    export default {
+        data (){
+            return {
+                //配置组件
+                componentsConfig: initComponentsConfig(),
+                pageFrom: null
+            }
+        },
+        beforeRouteEnter (to, from, next) {
+            //alert('beforeRouteEnter 路由userList');
+            next(vm => {
+                resolve(vm, to);
+            })
+        },
+        beforeRouteUpdate (to, from, next) {
+            //alert('beforeRouteUpdate 路由userList');
+        },
+        mounted(){            
+        },      
+        methods:{
+            getPageFrom(){
+                return this.pageFrom;
+            },
+            setPageFrom(string){
+                this.pageFrom = string;
+            },        
+            //tap <      
+            onBackTap(){
+                backTap(this);
+            },
+            //tap list row delete 
+            onUserListButtonTap(value, buttonValue){
+                userListButtonTap(this, value, buttonValue);
+            }
+        }               
+    }
+
+    //配置组件参数
+    function initComponentsConfig(){
+        let title = Vue.t('userList.name', ['迷失者']);
+        let subtitle = Vue.t('userList.id', [1,1,1]);
+        return {
+            userList: {
+                initParam: {
+                    class: 'custom-swipe-list',
+                    list: [
+                        {value: 1, image: '../../resources/image/white_head_icon.png', title: '姓名：迷失者', subtitle: subtitle, buttons: [{"text": "删除"}]},
+                        {value: 2, image: '../../resources/image/white_head_icon.png', title: '姓名：漫步者', subtitle: subtitle, buttons: [{"text": "删除"}],},
+                        {value: 3, image: '../../resources/image/white_head_icon.png', title: '姓名：太空旅行者', subtitle: subtitle, buttons: [{"text": "删除"}],},
+                        {value: 4, image: '../../resources/image/white_head_icon.png', title: '姓名：探索迷失者', subtitle: subtitle, buttons: [{"text": "删除"}],},
+                        {value: 5, image: '../../resources/image/white_head_icon.png', title: '姓名：麻麻272', subtitle: subtitle, buttons: [{"text": "删除"}],},
+                        {value: 6, image: '../../resources/image/white_head_icon.png', title: '姓名：代号小黄人', subtitle: subtitle, buttons: [{"text": "删除"}],}
+                    ],
+                    tip: Vue.t('userList.noUserTip')
+                }
+            },
+            dialog: {
+                initParam: {
+                    class: 'custom-dialog'
+                }
+            },         
+            loading: {
+                initParam: {
+                    class: 'custom-loading'
+                }
+            }
+        }
+    }
+
+    //tap <
+    function backTap(self){  
+        if(self.getPageFrom() == 'bindUser'){
+            self.$router.go(-3);
+        }     
+        else{
+            self.$router.go(-1);
+        } 
+    }       
+
+    function resolve(self, to) {
+        let query = to.query;
+        self.setPageFrom(query.pageName);
+    }
+
+    //tap list row delete 
+    function userListButtonTap(self, value, buttonValue) {
+        if(buttonValue == '0'){
+            uComponents.openConfirm(self, '确认删除用户xxx吗？', 
+                                   {text: Vue.t('dialog.cancel'), callback: function () {}},
+                                   {text: Vue.t('dialog.confirm'), callback: function () {}}
+            ); 
+        }
+    }  
+</script>
\ No newline at end of file

doorlockApp/dev/src/view/bindUser/v_index.js

+/**
+* v_index.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-07
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* router bindUser
+*/
+import VueRouter from 'vue-router';
+Vue.use(VueRouter);
+
+import {iot, uPublic} from '../../public/public.js';
+
+//ID-姓名绑定路由
+import bindUserHelp from './r_bindUserHelp.vue';
+//绑定用户路由
+import bindUser from './r_bindUser.vue';
+//用户列表路由
+import userList from './r_userList.vue';
+
+iot.ready(init);
+
+function init() {
+	const routes = [
+		{ path: '/', component: bindUserHelp },
+	  	{ path: '/bindUser', component: bindUser },
+	  	{ path: '/userList', component: userList }
+	]
+
+	const router = new VueRouter({
+		routes
+	})
+
+	const app = new Vue({
+		router
+	}).$mount('#app');
+}
\ No newline at end of file

doorlockApp/dev/src/view/c_grid-list.vue

+/** 
+* grid-list.vue
+* Version: 0.1
+* User: zjx
+* Date: 2017-09-07
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* grid-list
+*/
+<template>
+	<div class="grid-list" v-bind:class="initClass">
+	    <ul class="grid-list-scroll" v-show="list.length">
+	        <li class="grid-list-row" v-for="(item, index) in list" :key="item.value">
+	          	<v-touch class="grid-list-handle" v-on:tap="onTapRow(index)">
+	          		<img :src="item.leftImage" class="grid-list-left-image" v-if="item.leftImage">
+		            <span class="grid-list-left-icon" v-else-if="item.leftIcon" v-html="item.leftIcon"></span>
+		            <div>
+		                <p class="grid-list-title">{{ item.title }}</p>
+		                <p class="grid-list-subtitle" v-if="item.subtitle">{{ item.subtitle }}</p>
+		            </div>
+		            <span class="grid-list-right-text" v-if="item.rightText">{{ item.rightText }}</span>
+		            <span class="grid-list-right-icon">&#xe67f;</span>
+	          	</v-touch>
+	            <div class="grid-list-content">
+		            <v-touch tag="div" class="grid-list-button" v-for="(buttonItem, buttonIndex) in item.buttons" v-on:tap="onTapButton(index, buttonIndex)">
+		            	<p class="grid-list-button-bg" v-html="buttonItem.icon"></p>
+		            </v-touch>
+	            </div>
+	        </li>
+	        <v-touch tag="li" class="grid-list-load"  v-on:tap="onTapLoad" v-show="loadShowFlag">{{ loadText }}</v-touch>
+	    </ul>
+	    <p class="grid-list-tip" v-show="(list.length == 0)">{{ tip }}</p>
+	</div>
+</template>
+<script>
+	const PAGE_SIZE = 10;
+    export default {
+        props: ['initParam'],
+        data () {
+            return {
+                // 组件初始化列表
+                list: this.initParam.list,
+                // 组件初始化样式
+                initClass: this.initParam.class,
+                // 组件初始化无数据显示文字
+                tip: this.initParam.tip,
+                 // loading是否显示
+                loadShowFlag: false,
+                pagesize: this.initParam.pagesize || PAGE_SIZE,
+                loadText: Vue.t('scroll.clickToLoadMore')
+            }
+        },
+        mounted(){
+            this.setLoadShowFlag(this.list.length);
+        },
+        methods: {
+        	setLoadShowFlag(number){
+                this.loadShowFlag = (number >= this.pagesize);
+            },
+            onTapRow(index){
+                tapRow(this, index);
+            },
+            onTapButton(index, buttonIndex){
+            	tapButton(this, index, buttonIndex);
+            },
+            changeList(list){
+                changeList(this, list);
+            },
+            onTapLoad(){
+            	tapLoad(this);
+            }
+        }
+    }
+    //点击下拉出现按钮
+    function tapRow(self, index) {
+		self.$emit('grid-list-tap',index);
+    }
+    //通知事件和当前点击列表的下标及按钮的下标
+    function tapButton(self, index, buttonIndex) {
+        self.$emit('grid-list-button-tap', index, buttonIndex);
+        self.foldingListIndex = null;
+    }
+
+    function changeList(self, list) {
+        self.list = list;
+        self.setLoadShowFlag(list.length - self.list.length);
+        self.$nextTick(function () {
+        	self.loadText = Vue.t('scroll.clickToLoadMore');
+        });
+    }
+    
+    function tapLoad(self){
+    	self.$emit('grid-list-load-tap');
+        self.loadText = Vue.t('scroll.loading');
+    }
+</script>
\ No newline at end of file

doorlockApp/dev/src/view/c_timeline.vue

+/**
+* timeline.vue
+* Version: 0.1
+* User: zjx
+* Date: 2017-09-07
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* timeline
+*/
+<template>
+    <div class="timeline" v-bind:class="initClass">
+        <ul class="timeline-scroll" v-show="list.length">
+            <li class="timeline-row" v-for="(item, index) in list" :key="index" v-on:tap="onTapRow(index)">
+            	<p class="timeline-left-text" v-if="item.leftText">{{ item.leftText }}</p>
+                <img class="timeline-left-image" v-if="item.leftImage" v-bind:src="item.leftImage">
+                <div>
+                    <p class="timeline-title">{{ item.title }}</p>
+                    <p class="timeline-subtitle" v-if="item.subtitle">{{ item.subtitle }}</p>
+                </div>
+                <p class="timeline-right-text" v-if="item.rightText">{{ item.rightText }}</p>
+                <img class="timeline-right-image" v-if="item.rightImage" v-bind:src="item.rightImage">
+            </li>
+            <v-touch tag="li" class="timeline-load" v-on:tap="onTapLoad" v-show="loadShowFlag">{{ loadText }}</v-touch>
+        </ul>
+        <p class="timeline-tip" v-show="(list.length == 0)">{{ tip }}</p>
+    </div>
+</template>
+
+<script>
+    const PAGE_SIZE = 10;
+    export default {
+        props: ['initParam'],
+        data () {
+            return {
+                // 组件初始化列表
+                list: this.initParam.list,
+                // 组件初始化样式
+                initClass: this.initParam.class,
+                // 组件初始化无数据显示文字
+                tip: this.initParam.tip,
+                pagesize: this.initParam.pagesize || PAGE_SIZE,
+                loadText: Vue.t('scroll.clickToLoadMore'),
+                // loading是否显示
+                loadShowFlag: false,
+                // 是否在loading
+                loadFlag: false
+            }
+        },
+        mounted(){
+            this.setLoadShowFlag(this.list.length);
+        },
+        methods: {
+            setLoadShowFlag(number){
+                this.loadShowFlag = (number >= this.pagesize);
+            },
+            onTapRow(index){
+                tapRow(this, index);
+            },
+            onTapLoad(){
+                tapLoad(this);
+            },
+            changeList(list){
+                changeList(this, list);
+            }
+        }
+    }
+    // 通知事件和当前点击列表选项下标
+    function tapRow(self, index) {
+        self.$emit('timeline-tap', index);
+    }
+    // 通知点击加载更多事件
+    function tapLoad(self) {
+        // loading
+        if (!self.loadFlag) {
+            self.$emit('timeline-load-tap');
+            self.loadText = Vue.t('scroll.loading');
+            self.loadFlag = true;
+        }
+    }
+    // 修改list组件列表
+    function changeList(self, list) {
+        self.setLoadShowFlag(list.length - self.list.length);
+        self.list = list;
+        self.$nextTick(function () {
+            self.loadText = Vue.t('scroll.clickToLoadMore');
+            self.loadFlag = false;
+        });
+    }
+</script>
\ No newline at end of file

doorlockApp/dev/src/view/device/v_alarmInfo.js

+/**
+* v_alarmInfo.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 报警信息页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 dialog、loading组件
+    uPublic.componentsInit(['u-dialog','u-loading']);
+    //项目 时间轴组件
+    uPublic.componentsExtend(['timeline']);
+    const app = new Vue({
+        data:{            
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){           
+        },
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            }                    
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        alarmInfoList:{   
+            initParam: {
+                class: '',
+                list: [
+                    {value: 1, leftText: '2017.06.2315:56:26', leftImage: '../../resources/image/green_alarmInfo0_icon.png', title:'禁试报警'},
+                    {value: 2, leftText: '2017.06.2315:01:01', leftImage: '../../resources/image/green_alarmInfo1_icon.png', title:'防撬报警'},
+                    {value: 3, leftText: '2017.05.2315:56:26', leftImage: '../../resources/image/green_alarmInfo2_icon.png', title:'欠电报警'},
+                    {value: 4, leftText: '2017.03.2315:01:01', leftImage: '../../resources/image/green_alarmInfo3_icon.png', title:'假锁报警'}
+                ],
+                tip: Vue.t('alarmInfo.noInfoTip')
+            }
+        },
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }                
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
\ No newline at end of file

doorlockApp/dev/src/view/device/v_hijackRecord.js

+/**
+* v_hijackRecord.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 劫持记录页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 dialog、loading组件
+    uPublic.componentsInit(['u-dialog','u-loading']);
+    //项目 时间轴组件
+    uPublic.componentsExtend(['timeline']);
+    const app = new Vue({
+        data:{            
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){           
+        },
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            }                    
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        hijackRecordList:{   
+            initParam: {
+                class: '',
+                list: [
+                    {value: 1, leftText: '2017.07.1306:29:53', leftImage: '../../resources/image/green_opendoor2_icon.png', title:'劫持指纹开门', subtitle: 'ID:117',rightImage: '../../resources/image/white_head_icon.png'},
+                    {value: 2, leftText: '2017.07.0310:27:56', leftImage: '../../resources/image/green_opendoor2_icon.png', title:'劫持指纹开门', subtitle: 'ID:115',rightImage: '../../resources/image/white_head_icon.png'},
+                    {value: 3, leftText: '2017.06.3022:30:47', leftImage: '../../resources/image/green_opendoor2_icon.png', title:'劫持指纹开门', subtitle: 'ID:114',rightImage: '../../resources/image/white_head_icon.png'},
+                    {value: 4, leftText: '2017.06.2617:10:03', leftImage: '../../resources/image/green_opendoor2_icon.png', title:'劫持指纹开门', subtitle: 'ID:113',rightImage: '../../resources/image/white_head_icon.png'}
+                ],
+                tip: Vue.t('hijackRecord.noRecordTip')
+            }
+        },
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }                
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
\ No newline at end of file

doorlockApp/dev/src/view/device/v_index.js

+/**
+* v_index.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 主控页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 图片轮播、跑马灯、开关、按钮、dialog、loading组件
+    uPublic.componentsInit(['u-carousel','u-marquee','u-switch','u-button','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{ 
+            //开门记录
+            valueOpendoorRecord: 1,
+            //安全报警
+            valueSecurityAlarm: 1,
+            //远程开门
+            valueRemoteOpendoor: 1,
+            //劫持报警
+            valueHijackAlarm: 1,
+            activeFlag: true,
+            followShowFlag: true,
+            //配置组件
+            componentsConfig: initComponentsConfig()
+        },
+        mounted(){
+        },
+        methods:{
+            getValueOpendoorRecord(){
+                return this.valueOpendoorRecord;
+            },
+            setValueOpendoorRecord(value){
+                this.valueOpendoorRecord = value;
+            },
+            getValueSecurityAlarm(){
+                return this.valueSecurityAlarm;
+            },
+            setValueSecurityAlarm(value){
+                this.valueSecurityAlarm = value;
+            },
+            getValueRemoteOpendoor(){
+                return this.valueRemoteOpendoor;
+            },
+            setValueRemoteOpendoor(value){
+                this.valueRemoteOpendoor = value;
+            },
+            getValueHijackAlarm(){
+                return this.valueHijackAlarm;
+            },
+            setValueHijackAlarm(value){
+                this.valueHijackAlarm = value;
+            }, 
+            getFollowShowFlag(){
+                return this.followShowFlag;
+            },
+            setFollowShowFlag(boolean){
+                this.followShowFlag = boolean;
+            },                   
+            //tap 门锁管理
+            onDoorlockManageTap(){
+                doorlockManageTap();
+            },
+            //tap 开门记录
+            onOpendoorRecordTap(){
+                opendoorRecordTap();
+            }, 
+            //tap 安全报警
+            onSecurityAlarmTap(){
+                securityAlarmTap();
+            },
+            //tap 远程开门
+            onRemoteOpendoorTap(){
+                remoteOpendoorTap();
+            },
+            //tap 劫持报警
+            onHijackAlarmTap(){
+                hijackAlarmTap();
+            },
+            //tap 保存二维码到相册
+            onSaveQRcodeButtonTap(){
+                saveQRcodeButtonTap();
+            },
+            //tap 稍后关注
+            onLaterFollowTap(){
+                laterFollowTap(this);
+            }                      
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {   
+    return {
+        //图片轮播
+        carousel: {
+            initParam: {
+                class:'custom-carousel',
+                list:  [{image: '../../resources/image/image1.png'},
+                        {image: '../../resources/image/image2.png'},
+                        {image: '../../resources/image/image3.png'}],
+                auto: true,
+                autoTime: 2000,
+                loop: true
+            }
+        },
+        marquee: {
+            initParam: {
+                class: "custom-marquee-top",
+                text: "1234567890dsddgsadytsd<br>fytsfahdghsadgsyuagdh<br>sdfsdfdffgdfgfd12122"
+            }
+        },
+        //开门记录switch 参数
+        opendoorRecordSwitch: {
+            initParam: {
+                class: 'custom-switch',
+                text: Vue.t('device.opendoorRecord'),
+                autoChange: false
+            }
+        },
+        //安全报警switch 参数
+        securityAlarmSwitch: {
+            initParam: {
+                class: 'custom-switch',
+                text: Vue.t('device.securityAlarm'),
+                autoChange: false
+            }
+        },
+        //远程开门switch 参数
+        remoteOpendoorSwitch: {
+            initParam: {
+                class: 'custom-switch',
+                text: Vue.t('device.remoteOpendoor'),
+                autoChange: false
+            }
+        },
+        //劫持报警switch 参数
+        hijackAlarmSwitch: {
+            initParam: {
+                class: 'custom-switch',
+                text: Vue.t('device.hijackAlarm'),
+                autoChange: false
+            }
+        },
+        //确定 button 参数
+        saveQRcodeButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.saveQRcode')
+            }
+        },
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }                
+    }
+}
+
+//tap 门锁管理
+function doorlockManageTap(){
+    iot.navigator.openWindow({
+        url: '../doorlockManage/',
+        id: 'doorlockManage'
+    });
+}
+
+//tap 开门记录
+function opendoorRecordTap(){
+    iot.navigator.openWindow({
+        url: './opendoorRecord.html',
+        id: 'opendoorRecord'
+    });
+}
+
+//tap 安全报警
+function securityAlarmTap(){
+    iot.navigator.openWindow({
+        url: './alarmInfo.html',
+        id: 'alarmInfo'
+    });
+}
+
+//tap 远程开门
+function remoteOpendoorTap(){
+    iot.navigator.openWindow({
+        url: './remoteOpendoor.html',
+        id: 'remoteOpendoor'
+    });    
+}
+
+//tap 劫持报警
+function hijackAlarmTap(){
+    iot.navigator.openWindow({
+        url: './hijackRecord.html',
+        id: 'hijackRecord'
+    });
+}
+
+//tap 保存二维码到相册
+function saveQRcodeButtonTap(){
+    alert('保存二维码到相册');
+}
+
+//tap 稍后关注
+function laterFollowTap(self){
+    self.setFollowShowFlag(false);
+}
\ No newline at end of file

doorlockApp/dev/src/view/device/v_opendoorRecord.js

+/**
+* v_opendoorRecord.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 开门记录页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 dialog、loading组件
+    uPublic.componentsInit(['u-dialog','u-loading']);
+    //项目 时间轴组件
+    uPublic.componentsExtend(['timeline']);
+    const app = new Vue({
+        data:{            
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){           
+        },
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            }                    
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        opendoorRecordList:{   
+            initParam: {
+                class: '',
+                list: [
+                    {value: 1, leftText: '2017.08.0310:29:53', leftImage: '../../resources/image/green_opendoor0_icon.png', title:'手机远程开门', subtitle: '',rightImage: '../../resources/image/white_head_icon.png'},
+                    {value: 2, leftText: '2017.08.0310:27:56', leftImage: '../../resources/image/green_opendoor0_icon.png', title:'手机远程开门', subtitle: '',rightImage: '../../resources/image/white_head_icon.png'},
+                    {value: 3, leftText: '2017.08.0310:25:47', leftImage: '../../resources/image/green_opendoor1_icon.png', title:'指纹开门', subtitle: 'ID:6',rightImage: '../../resources/image/white_head_icon.png'},
+                    {value: 4, leftText: '2017.07.3117:13:03', leftImage: '../../resources/image/green_opendoor0_icon.png', title:'手机远程开门', subtitle: '',rightImage: '../../resources/image/white_head_icon.png'},
+                    {value: 5, leftText: '2017.07.3117:10:10', leftImage: '../../resources/image/green_opendoor2_icon.png', title:'劫持指纹开门', subtitle: 'ID:117',rightImage: '../../resources/image/white_head_icon.png'},
+                    {value: 6, leftText: '2017.07.3117:09:59', leftImage: '../../resources/image/green_opendoor3_icon.png', title:'密码开门', subtitle: 'ID:0',rightImage: '../../resources/image/white_head_icon.png'},
+                    {value: 7, leftText: '2017.07.3117:05:19', leftImage: '../../resources/image/green_opendoor2_icon.png', title:'劫持指纹开门', subtitle: 'ID:117',rightImage: '../../resources/image/white_head_icon.png'},
+                    {value: 8, leftText: '2017.07.3117:03:50', leftImage: '../../resources/image/green_opendoor3_icon.png', title:'密码开门', subtitle: 'ID:0',rightImage: '../../resources/image/white_head_icon.png'}
+                ],
+                tip: Vue.t('opendoorRecord.noRecordTip')
+            }
+        },
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }                
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
\ No newline at end of file

doorlockApp/dev/src/view/device/v_remoteOpendoor.js

+/**
+* v_remoteOpendoor.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 远程开门页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 input、按钮、dialog、loading组件
+    uPublic.componentsInit(['u-text','u-button','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{  
+            textPassword: null,  
+            textErrorTip: null,
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){           
+        },
+        methods:{
+            onPasswordChange(text){
+                passwordChange(this,text);            
+            },      
+            //tap <
+            onBackTap(){
+                backTap();
+            },
+            //tap 确定
+            onConfirmButtonTap(){
+                confirmButtonTap();
+            }                  
+        } 
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        passwordInput: {
+            initParam: {
+                class: 'custom-text',
+                icon: '&#xe64d;',
+                placeholder: Vue.t('remoteOpendoor.passwordInputTip')
+            }
+        },
+        //确定 button 参数
+        confirmButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.confirm')
+            }
+        },
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }               
+    }
+}
+
+function passwordChange(self,text){
+    self.textPassword = text;
+    console.log('passwordChange: ' + self.textPassword);
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+//tap 确定
+function confirmButtonTap(){
+    iot.navigator.back();
+}
\ No newline at end of file

doorlockApp/dev/src/view/doorlockManage/v_editName.js

+/**
+* v_editName.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 修改名称页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 input、按钮、dialog、loading组件
+    uPublic.componentsInit(['u-text','u-button','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{
+            textName: '门锁-001',
+            textErrorTip: null,
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){           
+        },
+        methods:{
+            onNameChange(text){
+                nameChange(this,text);           
+            },
+            //tap <
+            onBackTap(){
+                backTap();
+            },
+            //tap 保存
+            onSaveButtonTap(){
+                saveButtonTap();
+            }                     
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        nameInput: {
+            initParam: {
+                class: 'custom-text',
+                placeholder: Vue.t('login.nameInputTip')
+            }
+        },
+        //保存 button 参数
+        saveButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.save')
+            }
+        },
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }                
+    }
+}
+
+function nameChange(self,text){
+    self.textName = text;
+    console.log('nameChange: ' + self.textName);
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+//tap 保存
+function saveButtonTap(){
+    iot.navigator.back();
+}
\ No newline at end of file

doorlockApp/dev/src/view/doorlockManage/v_index.js

+/**
+* v_index.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 门锁管理页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 按钮、dialog、loading组件
+    uPublic.componentsInit(['u-button','u-dialog','u-loading']);
+    //项目 list组件
+    uPublic.componentsExtend(['grid-list']);
+    const app = new Vue({
+        data:{            
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){           
+        },
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            },       
+            //tap +
+            onAddTap(){
+                addTap();
+            },
+            //tap list row device
+            onDoorlockListTap(){
+                doorlockListTap();
+            },
+            //tap list row button
+            onDoorlockListButtonTap(value, buttonValue){
+                doorlockListButtonTap(this, value, buttonValue);
+            },
+            //tap 退出系统
+            onLogoutButtonTap(){
+                logoutButtonTap(this);
+            }                    
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        doorlockList: {
+            initParam: {
+                class: '',
+                list: [{value: 1,'leftImage': '../../resources/image/device.png','title': '门锁-001','buttons': [{'icon': '&#xe728;'},{'icon': '&#xe61b;'},{'icon': '&#xe63e;'},{'icon': '&#xe742;'}]},
+                       {value: 2,'leftImage': '../../resources/image/device.png','title': '门锁-002','buttons': [{'icon': '&#xe728;'},{'icon': '&#xe61b;'},{'icon': '&#xe63e;'},{'icon': '&#xe742;'}]},
+                       {value: 3,'leftImage': '../../resources/image/device.png','title': '门锁-003','buttons': [{'icon': '&#xe728;'},{'icon': '&#xe61b;'},{'icon': '&#xe63e;'},{'icon': '&#xe742;'}]},
+                       {value: 4,'leftImage': '../../resources/image/device.png','title': '门锁-004','buttons': [{'icon': '&#xe728;'},{'icon': '&#xe61b;'},{'icon': '&#xe63e;'},{'icon': '&#xe742;'}]},
+                       {value: 5,'leftImage': '../../resources/image/device.png','title': '门锁-005','buttons': [{'icon': '&#xe728;'},{'icon': '&#xe61b;'},{'icon': '&#xe63e;'},{'icon': '&#xe742;'}]}],
+                tip: Vue.t('doorlockManage.noDeviceTip')  
+            }
+        },
+        //退出系统 button 参数
+        logoutButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.logout')
+            }
+        }, 
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }                
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+//tap +
+function addTap(){
+    iot.navigator.openWindow({
+        url: '../addDevice/',
+        id: 'addDevice'
+    });
+}
+
+//tap list row device
+function doorlockListTap(){
+    iot.navigator.openWindow({
+        url: '../device/',
+        id: 'device'
+    });
+}
+
+//tap list row button
+function doorlockListButtonTap(self, value, buttonValue) {
+    //tap 修改名称
+    if(buttonValue == '0'){
+        iot.navigator.openWindow({
+            url: './editName.html',
+            id: 'editName'
+        });
+    }
+    //tap 生成绑定二维码
+    else if(buttonValue == '1'){
+        iot.navigator.openWindow({
+            url: './qrcode.html',
+            id: 'qrcode'
+        });
+    }
+    //tap ID-姓名绑定
+    else if(buttonValue == '2'){
+        iot.navigator.openWindow({
+            url: '../bindUser/',
+            id: 'bindUser'
+        });
+    }
+    //tap 删除门锁
+    else if(buttonValue == '3'){
+        uComponents.openConfirm(self, Vue.t('doorlockManage.deleteDialogTip', ['门锁-001']),
+                               {text: Vue.t('dialog.cancel'), callback: function () {}},
+                               {text: Vue.t('dialog.confirm'), callback: function () {}}
+        );
+    }
+}
+
+//tap 退出系统
+function logoutButtonTap(self){
+    uComponents.openConfirm(self, Vue.t('doorlockManage.logoutDialogTip'), 
+                           {text: Vue.t('dialog.cancel'), callback: function () {}}, 
+                           {text: Vue.t('dialog.confirm'), callback: function () {
+                                iot.navigator.openWindow({
+                                    url: '../login/login.html',
+                                    id: 'login'
+                                });                             
+                           }}
+    );  
+}
\ No newline at end of file

doorlockApp/dev/src/view/doorlockManage/v_qrcode.js

+/**
+* v_qrcode.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 生成绑定二维码页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 按钮、dialog、loading组件
+    uPublic.componentsInit(['u-button','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{            
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){           
+        },
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            },
+            //tap 生成二维码
+            onQRcodeButtonTap(){
+                qrcodeButtonTap();
+            }                     
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        //生成二维码 button 参数
+        qrcodeButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.qrcode')
+            }
+        },
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }                
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+//tap 生成二维码
+function qrcodeButtonTap(){
+    alert("生成二维码");
+}
\ No newline at end of file

doorlockApp/dev/src/view/login/v_forgetPassword.js

+/**
+* v_forgetPassword.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 忘记密码页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 input、按钮、dialog、loading组件
+    uPublic.componentsInit(['u-text','u-button','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{ 
+            numberTel: null,
+            textCode: null,
+            codeDisabledFlag: false,
+            textPassword: null,    
+            textErrorTip: null,
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){           
+        },
+        methods:{
+            getCodeDisabledFlag(){
+                return this.codeDisabledFlag;
+            },
+            setCodeDisabledFlag(boolean){
+                this.codeDisabledFlag = boolean;
+            },       
+            onTelChange(number){
+                telChange(this,number);            
+            },
+            onCodeChange(text){
+                codeChange(this,text);            
+            },      
+            onPasswordChange(text){
+                passwordChange(this,text);            
+            },              
+            //tap <
+            onBackTap(){
+                backTap();
+            },
+            //tap 获取验证码
+            onCodeButtonTap(){
+                codeButtonTap(this);
+            },
+            //tap 确定
+            onConfirmButtonTap(){
+                confirmButtonTap();
+            }                     
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        telInput: {
+            initParam: {
+                class: 'custom-text',
+                icon: '&#xe6e8;',
+                placeholder: Vue.t('forgetPassword.telInputTip'),
+                maxlength: 11,
+                minlength: 11
+            }
+        },
+        codeInput: {
+            initParam: {
+                class: 'custom-code-text',
+                icon: '&#xe805;',
+                placeholder: Vue.t('forgetPassword.codeInputTip')
+            }
+        },
+        //获取验证码 button 参数
+        codeButton: {   
+            initParam: {
+                class: 'custom-code-button',
+                text: Vue.t('btn.getCode')
+            }
+        },
+        passwordInput: {
+            initParam: {
+                class: 'custom-password-text',
+                icon: '&#xe64d;',
+                placeholder: Vue.t('forgetPassword.passwordInputTip'),
+                type: 'password',
+                maxlength: 6,
+                minlength: 6
+            }
+        },
+        //确定 button 参数
+        confirmButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.confirm')
+            }
+        },
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }                
+    }
+}
+
+function telChange(self,number){
+    self.numberTel = number;
+    console.log('telChange: ' + self.numberTel);
+}
+
+function codeChange(self,text){
+    self.textCode = text;
+    console.log('codeChange: ' + self.textCode);
+}
+
+//tap 获取验证码
+function codeButtonTap(self){
+    self.setCodeDisabledFlag(true);
+}
+
+function passwordChange(self,text){
+    self.textPassword = text;
+    console.log('passwordChange: ' + self.textPassword);
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+//tap 确定
+function confirmButtonTap(){
+    iot.navigator.back();
+}
\ No newline at end of file

doorlockApp/dev/src/view/login/v_index.js

+/**
+* v_index.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 引导页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 dialog、loading组件
+    uPublic.componentsInit(['u-dialog','u-loading']);
+    const app = new Vue({
+        data:{          
+            //配置组件
+            componentsConfig: initComponentsConfig()   
+        },
+        mounted(){
+            setTimeout(function(){
+                iot.navigator.openWindow({
+                    url: './login.html',
+                    id: 'login'
+                });
+            },2000)       
+        },
+        methods:{
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }             
+    }
+}
\ No newline at end of file

doorlockApp/dev/src/view/login/v_login.js

+/**
+* v_login.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 登录页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 input、按钮、dialog、loading组件
+    uPublic.componentsInit(['u-text','u-button','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{  
+            numberTel: null,
+            textPassword: null,  
+            textErrorTip: null,
+            //配置组件
+            componentsConfig: initComponentsConfig()   
+        },
+        mounted(){           
+        },
+        methods:{
+            onTelChange(number){
+                telChange(this,number);           
+            },
+            onPasswordChange(text){
+                passwordChange(this,text);            
+            },        
+            //tap 登录
+            onLoginButtonTap(){
+                loginButtonTap();
+            },
+            //tap 快速注册
+            onRegisterTap(){
+                registerTap();
+            }, 
+            //tap 忘记密码
+            onForgetPasswordTap(){
+                forgetPasswordTap();
+            }                      
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        telInput: {
+            initParam: {
+                class: 'custom-text',
+                icon: '',
+                placeholder: Vue.t('login.telInputTip'),
+                maxlength: 11,
+                minlength: 11
+            }
+        },
+        passwordInput: {
+            initParam: {
+                class: 'custom-password-text',
+                icon: '',
+                placeholder: Vue.t('login.passwordInputTip'),
+                type: 'password'
+            }
+        },
+        //登录 button 参数
+        loginButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.login')
+            }
+        },      
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }               
+    }
+}
+
+function telChange(self,number){
+    self.numberTel = number;
+    console.log('telChange: ' + self.numberTel);
+}
+
+function passwordChange(self,text){
+    self.textPassword = text;
+    console.log('passwordChange: ' + self.textPassword);
+}
+
+//tap 登录
+function loginButtonTap(){
+    iot.navigator.openWindow({
+        url: '../device/',
+        id: 'device'
+    });
+}
+
+//tap 快速注册
+function registerTap(){
+    iot.navigator.openWindow({
+        url: './register.html',
+        id: 'register'
+    });
+}
+
+//tap 忘记密码
+function forgetPasswordTap(){
+    iot.navigator.openWindow({
+        url: './forgetPassword.html',
+        id: 'forgetPassword'
+    });
+}
\ No newline at end of file

doorlockApp/dev/src/view/login/v_register.js

+/**
+* v_register.js
+* Version: 0.1
+* User: wy
+* Date: 2017-09-06
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 注册页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 input、按钮、dialog、loading组件
+    uPublic.componentsInit(['u-text','u-button','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{ 
+            numberTel: null,
+            textCode: null,
+            codeDisabledFlag: false,
+            textPassword: null,  
+            textErrorTip: null,
+            //配置组件
+            componentsConfig: initComponentsConfig()     
+        },
+        mounted(){           
+        },
+        methods:{
+            getCodeDisabledFlag(){
+                return this.codeDisabledFlag;
+            },
+            setCodeDisabledFlag(boolean){
+                this.codeDisabledFlag = boolean;
+            },       
+            onTelChange(number){
+                telChange(this,number);            
+            },
+            onCodeChange(text){
+                codeChange(this,text);            
+            },      
+            onPasswordChange(text){
+                passwordChange(this,text);            
+            },              
+            //tap <
+            onBackTap(){
+                backTap();
+            },
+            //tap 获取验证码
+            onCodeButtonTap(){
+                codeButtonTap(this);
+            },        
+            //tap 注册
+            onRegisterButtonTap(){
+                registerButtonTap();
+            }                      
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        telInput: {
+            initParam: {
+                class: 'custom-text',
+                icon: '&#xe6e8;',
+                placeholder: Vue.t('register.telInputTip'),
+                maxlength: 11,
+                minlength: 11
+            }
+        },
+        codeInput: {
+            initParam: {
+                class: 'custom-code-text',
+                icon: '&#xe805;',
+                placeholder: Vue.t('register.codeInputTip')
+            }
+        },
+        //获取验证码 button 参数
+        codeButton: {   
+            initParam: {
+                class: 'custom-code-button',
+                text: Vue.t('btn.getCode')
+            }
+        },
+        passwordInput: {
+            initParam: {
+                class: 'custom-password-text',
+                icon: '&#xe64d;',
+                placeholder: Vue.t('register.passwordInputTip'),
+                type: 'password',
+                maxlength: 6,
+                minlength: 6
+            }
+        },
+        //注册 button 参数
+        registerButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.register')
+            }
+        },       
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }                
+    }
+}
+
+function telChange(self,number){
+    self.numberTel = number;
+    console.log('telChange: ' + self.numberTel);
+}
+
+function codeChange(self,text){
+    self.textCode = text;
+    console.log('codeChange: ' + self.textCode);
+}
+
+//tap 获取验证码
+function codeButtonTap(self){
+    self.setCodeDisabledFlag(true);
+}
+
+function passwordChange(self,text){
+    self.textPassword = text;
+    console.log('passwordChange: ' + self.textPassword);
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+//tap 注册
+function registerButtonTap(){
+    iot.navigator.openWindow({
+        url: '../device/',
+        id: 'device'
+    });
+}
\ No newline at end of file

doorlockApp/dev/webpack.config.js

+var webpack = require('webpack');
+var path = require('path');
+var viewDir = path.join(__dirname, "..", "web", "view");
+var fs = require('fs');
+const i18nPlguin = require('./core/I18NPackage')
+    //获取src目录下面的所有.js文件
+let devViewDir = __dirname + "/src/view";
+let files = fs.readdirSync(devViewDir);
+let entry = {};
+let regexp = new RegExp("v_\\w+[.]js", "g");
+
+getAllViewJS(devViewDir);
+
+function getAllViewJS(dir) {
+    let files = fs.readdirSync(dir);
+    for (let file of files) {
+        let filePath = dir + "/" + file;
+        let stat = fs.lstatSync(filePath);
+        if (stat.isDirectory()) {
+            getAllViewJS(filePath);
+        } else if (stat.isFile()) {
+            let fileName = path.basename(filePath);
+            if (fileName.match(regexp)) {
+                let fPath = filePath.replace(__dirname, "");
+                let name = filePath.replace(devViewDir + "/", "").replace('v_', '').replace('.js', '');
+                entry[name] = ["." + fPath];
+            }
+        }
+    }
+}
+
+//entry['vendor'] = ['vue','vue-router','vue-i18n','vue-touch','vuex','underscore','es6-promise','es6-symbol'];
+module.exports = {
+    entry: entry,
+    output: {
+        path: viewDir,
+        filename: '[name].js',
+        chunkFilename: "[name].js"
+    },
+    module: {
+        loaders: [{
+            test: /\.vue$/,
+            loader: 'vue-loader'
+        }, {
+            test: /\.js$/,
+            exclude: /(node_modules|bower_components)/,
+            loader: 'babel-loader'
+        }, {
+            test: /\.css$/,
+            loader: 'style!css'
+        }]
+    },
+    node: {
+        Buffer: false
+    },
+    resolve: {
+        alias: {
+            'vue-i18n$': 'vue-i18n/dist/vue-i18n.common.js'
+        }
+    },
+    plugins: [
+        new webpack.ProvidePlugin({
+            'Promise': 'es6-promise',
+            Vue: ['vue/dist/vue.esm.js', 'default'],
+        }),
+        new webpack.optimize.CommonsChunkPlugin({ name: "../lib/js/p"}),
+        new i18nPlguin()
+    ],
+    devtool: 'source-map'
+};

doorlockApp/web/lib/css/bootstrap.min.css

+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*!
+ * Generated using the Bootstrap Customizer (http://v3.bootcss.com/customize/?id=ee04d191ea0bd5911f79ac034a110038)
+ * Config saved to config.json and https://gist.github.com/ee04d191ea0bd5911f79ac034a110038
+ *//*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:hover,a:focus{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{font-weight:normal;line-height:1;color:#777}h1,.h1,h2,.h2,h3,.h3{margin-top:20px;margin-bottom:10px}h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size:65%}h4,.h4,h5,.h5,h6,.h6{margin-top:10px;margin-bottom:10px}h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small{font-size:75%}h1,.h1{font-size:36px}h2,.h2{font-size:30px}h3,.h3{font-size:24px}h4,.h4{font-size:18px}h5,.h5{font-size:14px}h6,.h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}small,.small{font-size:85%}mark,.mark{background-color:#fcf8e3;padding:.2em}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#777}.text-primary{color:#337ab7}a.text-primary:hover,a.text-primary:focus{color:#286090}.text-success{color:#3c763d}a.text-success:hover,a.text-success:focus{color:#2b542c}.text-info{color:#31708f}a.text-info:hover,a.text-info:focus{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:hover,a.text-warning:focus{color:#66512c}.text-danger{color:#a94442}a.text-danger:hover,a.text-danger:focus{color:#843534}.bg-primary{color:#fff;background-color:#337ab7}a.bg-primary:hover,a.bg-primary:focus{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:hover,a.bg-success:focus{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:hover,a.bg-info:focus{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:hover,a.bg-warning:focus{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:hover,a.bg-danger:focus{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ul,ol{margin-top:0;margin-bottom:10px}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none;margin-left:-5px}.list-inline>li{display:inline-block;padding-left:5px;padding-right:5px}dl{margin-top:0;margin-bottom:20px}dt,dd{line-height:1.42857143}dt{font-weight:bold}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #777}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom:0}blockquote footer,blockquote small,blockquote .small{display:block;font-size:80%;line-height:1.42857143;color:#777}blockquote footer:before,blockquote small:before,blockquote .small:before{content:'\2014 \00A0'}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;border-right:5px solid #eee;border-left:0;text-align:right}.blockquote-reverse footer:before,blockquote.pull-right footer:before,.blockquote-reverse small:before,blockquote.pull-right small:before,.blockquote-reverse .small:before,blockquote.pull-right .small:before{content:''}.blockquote-reverse footer:after,blockquote.pull-right footer:after,.blockquote-reverse small:after,blockquote.pull-right small:after,.blockquote-reverse .small:after,blockquote.pull-right .small:after{content:'\00A0 \2014'}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.row{margin-left:-15px;margin-right:-15px}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}.clearfix:before,.clearfix:after,.dl-horizontal dd:before,.dl-horizontal dd:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{content:" ";display:table}.clearfix:after,.dl-horizontal dd:after,.container:after,.container-fluid:after,.row:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important}.affix{position:fixed}
\ No newline at end of file

doorlockApp/web/lib/less/addDevice/addDevice.less

+@import "../public/public.less";
+@import "../public/header.less";
+
+.u-text();
+
+.u-button();
+
+.u-commstatus-loading {
+	height: 100%;
+	background: rgba(0,0,0,0.7);
+}
+
+.u-commstatus-loading-content {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+	text-align: center;
+}
+
+.u-commstatus-loading-button {
+	height: 44px;
+	width: 80%;
+	line-height: 44px;
+	background: #e0dfdf;
+	text-align: center;
+	position: absolute;
+	bottom: 44px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-button {
+	display: none;
+}
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-content div ul li{
+	opacity: 0.2;
+	-webkit-animation: stretchdelay 1.5s infinite;
+  	animation: stretchdelay 1.5s infinite;
+}
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-content{
+	color: #00ffff;
+}
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader {
+  font-size: 10px;
+  margin: 5em auto;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  -webkit-animation: load4 1.3s infinite linear;
+  animation: load4 1.3s infinite linear;
+}
+@-webkit-keyframes load4 {
+  0%,
+  100% {
+    box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff;
+  }
+  12.5% {
+    box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+  25% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+  37.5% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+  50% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+  62.5% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+  75% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
+  }
+  87.5% {
+    box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
+  }
+}
+
+
+@keyframes load4 {
+  0%,
+  100% {
+    box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff;
+  }
+  12.5% {
+    box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+  25% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+  37.5% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+  50% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+  62.5% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+  75% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
+  }
+  87.5% {
+    box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
+  }
+}
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-content .icon{
+	display: none;
+}
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-button{
+	display: none;
+}
+
+.u-commstatus-loading-status-1 .u-commstatus-loading-content{
+	color: #00ffff;
+}
+
+.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon{
+	font-family: SDSIconfont;
+    font-size: 5em;
+}
\ No newline at end of file

doorlockApp/web/lib/less/bindUser/bindUser.less

+@import "../public/public.less";
+@import "../public/header.less";
+
+.u-text();
+
+.u-button();
+
+.u-swipe-list();
\ No newline at end of file

doorlockApp/web/lib/less/device/device.less

+@import "../public/public.less";
+@import "../public/header.less";
+
+.u-switch();
+
+.u-text();
+
+.u-button();
+
+.custom-marquee-top{
+	width: 100%;
+	height: 25px;
+	overflow: hidden;
+	text-align: center;
+}
+
+.custom-marquee-top .u-marquee-text{
+	display: inline-block;
+	
+	line-height: 25px;
+	text-align: center;
+}
+
+
+.active .u-marquee-text{
+	animation: marqueeTop 5s linear infinite;
+}
+
+@keyframes marqueeTop{
+	from{ transform: translateY(25px);}
+	to{ transform: translateY(-100%);}
+}
+
+.u-carousel();
\ No newline at end of file

doorlockApp/web/lib/less/device/recordList.less

+@import "../public/public.less";
+@import "../public/header.less";
\ No newline at end of file

doorlockApp/web/lib/less/doorlockManage/doorlockManage.less

+@import "../public/public.less";
+@import "../public/header.less";
+
+.u-text();
+
+.u-button();
\ No newline at end of file

doorlockApp/web/lib/less/login/login.less

+@import "../public/public.less";
+@import "../public/header.less";
+
+//引导页
+.noBottomGradient();
+
+#app{
+	width: 100%;
+	height: 100%;
+}
+
+.guideBg{
+	.bgImgSize(100%,100%,"guideBg.png",center,100% 100%);
+	p{
+	    position: absolute;
+	    bottom: 42px;
+	    left: 0;
+	    width: 100%;
+	    text-align: center;
+	    font-size: @GUIDE-FOOTER-FONTSIZE;		
+	}
+}
+
+//login
+.inputBox();
+
+.u-text();
+
+.custom-text,
+.custom-password-text,
+.custom-code-text{
+	.custom-text();
+}
+
+.u-button();
+
+.custom-button{
+	.custom-button();
+}
\ No newline at end of file

doorlockApp/web/lib/less/public/animation.less

+@import "./variables.less";
+@import "./mixins.less";
\ No newline at end of file

doorlockApp/web/lib/less/public/core.less

+@import "./variables.less";
+@import "./mixins.less";
+
+html,
+body{
+    width: 100%;
+    height: 100%;
+}
+
+body{
+    -webkit-user-select: none;
+    user-select: none;
+    color: @BODY-TEXT-COLOR;
+    font-size: @BODY-TEXT-FONTSIZE;
+    //font-family: @BODY-TEXT-FONTFAMILY;
+    .white_gradient_border();
+    background-color: @BODY-BG-COLOR;
+    -webkit-background-size: 100% 1px;/*no*/
+    background-size: 100% 1px;/*no*/
+    background-repeat: no-repeat;
+    background-position: bottom center;
+}
+
+ul{
+    padding-left: 0;
+    list-style: none;
+    margin-bottom: 0;
+}
+
+p{
+    margin-bottom: 0;
+}
+
+
+
+//背景图片style
+.bgImgSize(@width,@height,@bgImg,@bgPosition,@bgSize,@bool:false){
+    width: @width;
+    height: @height;
+    &when not(@bool){
+        background: url("@{IMAGE_PATH}/@{bgImg}") no-repeat @bgPosition;
+    }
+    &when(@bool){
+        background: data-uri("@{IMAGE_PATH}/@{bgImg}") no-repeat @bgPosition;
+    }  
+    .background-size(@bgSize);
+}
+
+.bgImg(@bgImg,@bool:false){
+    &when not(@bool){
+        background-image: url("@{IMAGE_PATH}/@{bgImg}");    
+    }
+    &when(@bool){
+        background-image: data-uri("@{IMAGE_PATH}/@{bgImg}");  
+    }  
+}
+
+//tap row style
+.tap_row(@tap-row-active-bg){
+    &:active{
+        background-color: @tap-row-active-bg;
+    }
+}
+
+//tap icon/text style
+.tap_font(@tap-font-active-color){
+    &:active{
+        color: @tap-font-active-color;
+    }
+}
+
+//单行省略
+.text_oneRow_ellipsis(){
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+//多行省略
+.text_moreRow_ellipsis(@rowNumber){
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .old-display-box(); 
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: @rowNumber;
+}
+
+//组件iconfont
+.defaultIconfont(@fontSize,@lineHeight:1){
+    font-family: defaultIconfont;
+    font-size: @fontSize;
+    -webkit-font-smoothing: antialiased;
+    line-height: @lineHeight;
+}
+
+//项目iconfont
+.iconfont(@fontSize,@lineHeight:1){
+    font-family: iconfont;
+    font-size: @fontSize;
+    -webkit-font-smoothing: antialiased;
+    line-height: @lineHeight;
+}
+
+//0.5px的 top/bottom border
+.defaultBorder(@positionPro:bottom,@startVal:0,@endVal:0,@borderBg:@DEFAULT-BORDER-COLOR){
+    content: '';
+    position: absolute;
+    @{positionPro}: 0;
+    left: @startVal;
+    right: @endVal;
+    height: 1px;/*no*/
+    //.transform(scaleY(0.5));
+    background: @borderBg;
+}
+
+//使用transform的垂直居中
+.transformV_center(@positionPro,@positionVal){
+    position: absolute;
+    top: 50%;
+    @{positionPro}: @positionVal;
+    .transform(translateY(-50%));
+}
+
+//使用transform的水平垂直居中
+.transform_center(){
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    .transform(translate(-50%,-50%));
+}
+
+//使用margin的水平垂直居中
+.margin_center(@width,@height){
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: @width;
+    height: @height;
+    margin: auto;
+}
+
+//遮罩蒙版
+.mask(@zIndex:1050){
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: @zIndex;
+    background-color: @BACKDROP-BG-COLOR;
+}
+
+
+
+//自定义按钮组件
+.custom-button(@width:275px){
+    // .custom-button{
+        width: @width;
+        border-radius: 5px;
+        background-color: @CUSTOM-BUTTON-COMPONENT-BG;
+        border: 1px solid;/*no*/
+        color: @CUSTOM-BUTTON-COMPONENT-COLOR;
+        font-size: @CUSTOM-BUTTON-COMPONENT-FONTSIZE;
+        //按钮 active
+        .tap_row(@CUSTOM-BUTTON-COMPONENT-ACTIVE-BG);
+        //按钮 不可控
+        &.disabled{
+            background-color: @CUSTOM-BUTTON-COMPONENT-DISABLED-BG;
+            color: @CUSTOM-BUTTON-COMPONENT-DISABLED-COLOR;
+        }       
+    // }
+}
+
+//自定义输入框组件
+.custom-text(){
+    // .custom-text{
+        // padding-left: 20px;
+        margin-top: 16px;
+        input{
+            padding-top: 8px;
+            padding-bottom: 8px;
+            &::-webkit-input-placeholder{
+                color: #91929a;
+            }
+        }
+        .u-text-icon{
+            font-size: 24px;
+            width: 48px;
+            padding-left: 9px;
+            vertical-align: text-bottom;
+        }
+        .u-text-clear{
+            right: 0;
+            width: 60px;
+            &:before{
+                color: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR;
+                font-size: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-FONTSIZE;
+            }            
+        }
+        &:after{
+            .white_gradient_border();
+        }
+    // }
+}
+
+//自定义弹出框组件
+.custom-dialog(){
+    .custom-dialog .u-dialog-box{
+        width: 270px;
+        height: 150px;
+        border-radius: 5px;
+        .u-dialog-content{
+            width: 100%;
+            height: 100px;
+            .display-box();
+            .box-horizontal-alignment();
+            .box-vertical-alignment();
+            font-size: @CUSTOM-DIALOG-COMPONENT-CONTENT-FONTSIZE;
+            line-height: 22px;
+            padding: 0 15px;
+            &:after{
+                height: 0;
+            }
+        }
+        .u-dialog-button{
+            border-spacing: 23px 0;
+            .u-dialog-cancel,
+            .u-dialog-confirm{
+                background-color: @CUSTOM-DIALOG-COMPONENT-BUTTON-BG;
+                padding: 8px 0;
+                border-radius: 30px;
+                //按钮 active
+                .tap_row(@CUSTOM-DIALOG-COMPONENT-BUTTON-ACTIVE-BG);
+            }
+            //取消 button
+            .u-dialog-cancel{
+                color: @CUSTOM-DIALOG-COMPONENT-CANCELBUTTON-COLOR;
+                &:after{
+                    width: 0;
+                }
+            }
+            // //确认 button
+            // .u-dialog-confirm{
+            //     color: @CUSTOM-DIALOG-COMPONENT-CONFIRMBUTTON-COLOR;
+            // }
+        }
+    }
+}
+
+//错误提示
+.errorTip(){
+    color: @ERRORTIP-TEXT-COLOR;
+    font-size: @ERRORTIP-TEXT-FONTSIZE;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+}
+
+//上拉加载
+.listLoad(){
+    height: 24px;
+    line-height: 24px;
+    font-size: @LIST-LOAD-FONTSIZE;
+}
+
+//list 无内容
+.listNoCont(){
+    color: @LIST-NOCONTTIP-COLOR;
+    .bgImg("noCont.png");
+    background-position: top center;
+    background-repeat: no-repeat;
+    .background-size(100px 100px);
+    padding-top: 126px;
+}
+
+.white_gradient_border(){
+    .linear-gradient(left,@WHITE-GRADIENTBORDER-STARTCOLOR,@WHITE-GRADIENTBORDER-CENTERCOLOR,@WHITE-GRADIENTBORDER-ENDCOLOR);
+    background: linear-gradient(to right,@WHITE-GRADIENTBORDER-STARTCOLOR,@WHITE-GRADIENTBORDER-CENTERCOLOR,@WHITE-GRADIENTBORDER-ENDCOLOR);
+}
+
+.noBottomGradient(){
+    .noBottomGradient{
+        background-image: none;
+    }    
+}
+
+.inputBox(){
+    .inputBox{
+        width: 250px;
+        margin: 0 auto;
+    }
+}
\ No newline at end of file

doorlockApp/web/lib/less/public/header.less

+@import "./variables.less";
+@import "./core.less";
+
+@HEADERSIZE: 44px;
+
+.header{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: @HEADERSIZE;
+    z-index: 1030;
+    background-color: @HEADER-BG-COLOR;
+    p{
+    	position: absolute;
+    	top: 0;
+    	left: 55px;
+    	right: 55px;
+    	line-height: @HEADERSIZE;
+    	.text_oneRow_ellipsis();
+    	color: @HEADER-TITLE-COLOR;
+    	font-size: @HEADER-TITLE-FONTSIZE;
+        text-align: center;
+    }
+    span{
+    	color: @HEADER-TEXT-COLOR;
+    	width: 55px;
+    	line-height: @HEADERSIZE;
+    	display: block;
+    	//active style
+        &:active{
+            opacity: 0.5;    
+        }
+    }
+    .header-left{
+    	float: left;
+    	padding-left: 5px;
+    }
+    .header-right{
+    	float: right;
+    	padding-right: 5px;
+    	text-align: right;
+    }
+    .icon{
+    	.iconfont(@HEADER-ICON-FONTSIZE,@HEADERSIZE);
+    }
+    ~ .content{
+    	padding-top: @HEADERSIZE;
+    }
+}
\ No newline at end of file

doorlockApp/web/lib/less/public/mixins.less

+//mobile CSS Prefix
+@PREFIXES: -webkit-,~'';
+//all CSS Prefix
+// @PREFIXES: -webkit-,-moz-,-ms-,-o-,~'';
+
+@PREFVENDOR: ~'(transform|box-shadow)';
+
+.CSSPrefix(@property,@value){
+    .loop();
+    .loop(@I: length(@PREFIXES)) when (@I > 0){
+        .loop(@I - 1);
+        @PREFIX: extract(@PREFIXES,@I);
+        @{PREFIX}@{property}: replace(~'@{value}','@{PREFVENDOR}','@{PREFIX}$1','gi');
+    }
+}
+
+
+
+.background-size(@bgSize){
+    .CSSPrefix(background-size,@bgSize);
+}
+
+.box-shadow(@boxShadow1,@boxShadow2:X,...){
+    @ARGUMENTSVALUE: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g,'')`;
+    .CSSPrefix(box-shadow,@ARGUMENTSVALUE);
+}
+
+.linear-gradient(@point,@color1,@color2:X,...){
+    @ARGUMENTSVALUE: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g,'')`;
+    background: -webkit-linear-gradient(@ARGUMENTSVALUE);
+    // background: -moz-linear-gradient(@ARGUMENTSVALUE);
+    // background: -o-linear-gradient(@ARGUMENTSVALUE);
+    //background: linear-gradient(@ARGUMENTSVALUE);
+}
+
+//变形
+.transform(@transform){
+    .CSSPrefix(transform,@transform);
+}
+
+.transform-origin(@origin){
+    .CSSPrefix(transform-origin,@origin);
+}
+
+//动画
+.animation(@animation){
+    .CSSPrefix(animation,@animation);
+}
+
+.keyframes(@name,@frames){
+    @-webkit-keyframes @name {@frames();}
+    //@-moz-keyframes @name {@frames();}
+    //@-ms-keyframes @name {@frames();}
+    //@-o-keyframes @name {@frames();}
+    @keyframes @name {@frames();}
+}
+
+.animation-delay(@delayTime){
+    .CSSPrefix(animation-delay,@delayTime);
+}
+
+//过渡
+.transition(@transition1,@transition2:X,...){
+    @ARGUMENTSVALUE: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g,'')`;
+    .CSSPrefix(transition,@ARGUMENTSVALUE);
+}
+
+.transition-delay(@delayTime){
+    .CSSPrefix(transition-delay,@delayTime);
+}
+
+//弹性盒
+.old-display-box(){
+    display: -webkit-box;
+}
+
+.display-box(){
+    .old-display-box();
+    display: -webkit-flex;
+    display: flex;
+}
+
+//弹性盒的排列方式
+.box-arrangement(@box-orient:vertical,@flex-direction:column){
+    -webkit-box-orient: @box-orient;
+    .CSSPrefix(flex-direction,@flex-direction);
+}
+
+//弹性盒的水平对齐方式
+.box-horizontal-alignment(@box-pack:center,@justify-content:center){
+    -webkit-box-pack: @box-pack;
+    .CSSPrefix(justify-content,@justify-content);
+}
+
+//弹性盒的垂直对齐方式
+.box-vertical-alignment(@box-align:center,@align-items:center){
+    -webkit-box-align: @box-align;
+    .CSSPrefix(align-items,@align-items);
+}
+
+.flex(@number:1){
+    -webkit-box-flex: @number;
+    .CSSPrefix(flex,@number); 
+}
\ No newline at end of file

doorlockApp/web/lib/less/public/public.less

+@import "./variables.less";
+@import "./mixins.less";
+@import "./core.less";
+@import "./animation.less";
+
+//loading
+.u-loading{
+	.mask();
+	.u-loading-box{
+		.transform_center();
+		.u-loading-icon{
+			width: 30px;/*no*/
+			height: 30px;/*no*/
+			background-position: center;
+			background-repeat: no-repeat;
+			.bgImg("white_loading_icon.png");
+			.background-size(cover);
+			margin: 0 auto;
+			.animation(uLoading 1s steps(12, end) infinite);
+		}
+		.u-loading-text{ 
+    		color: @LOADING-COMPONENT-TEXT-COLOR;
+			margin-top: 12px;
+			text-align: center;
+		}
+	}
+}
+
+.keyframes(uLoading,{
+  	0%{
+        .transform(rotate3d(0,0,1,0deg));
+  	}
+  	100%{
+        .transform(rotate3d(0,0,1,360deg));
+  	}
+});
+
+//.custom-loading();
+
+//弹出框
+.u-dialog{
+	.mask();
+	.u-dialog-box{
+		.transform_center();
+	    width: 250px;
+	    background-color: @DIALOG-COMPONENT-BOX-BG;
+	    border-radius: 12px;
+	    .u-dialog-content{
+		    padding: 15px;
+		    text-align: center;
+		    position: relative;
+		    &:after{
+		    	.defaultBorder();
+		    }
+		}
+		.u-dialog-button{
+		    display: table;
+		    width: 100%;
+		    table-layout: fixed;
+		    border-collapse: separate;
+		    .u-dialog-cancel,
+		    .u-dialog-confirm{
+			    display: table-cell;
+			    color: @DIALOG-COMPONENT-BUTTON-COLOR;
+			    text-align: center;
+			    padding: 15px 0;
+			    line-height: 1;
+			    position: relative;
+		    }
+			.u-dialog-cancel:after{
+			    content: '';
+			    position: absolute;
+			    top: 0;
+			    bottom: 0;
+			    right: 0;
+			    width: 1px;/*no*/
+			    .transform(scaleX(0.5));
+			    background-color: @DEFAULT-BORDER-COLOR;
+			}
+		}
+	}    
+}
+
+.fade-enter-active,
+.fade-leave-active{
+    .transition(opacity 0.5s linear);
+}
+
+.fade-enter,
+.fade-leave-active{
+    opacity: 0;
+}
+
+.custom-dialog();
+
+//开关
+.u-switch(){
+	.u-switch{
+	    position: relative;
+	    width: 100px;
+	    height: 50px;
+		.u-switch-handle{
+			.transform_center();
+		    width: 50px;
+		    height: 30px;
+		    border: 2px solid;/*no*/
+		    border-radius: 20px;
+		    background-clip: padding-box;
+		    &:before{
+			    content: '';
+			    position: absolute;
+			    z-index: 1;
+			    top: -1px;/*no*/
+			    width: 28px;
+    			height: 28px;
+			    .transition(left 0.2s ease-in-out);
+			    border-radius: 16px;
+			    background-color: @SWITCH-COMPONENT-CIRCLE-BG;
+			    background-clip: padding-box;
+			    .box-shadow(0 2px 5px @SWITCH-COMPONENT-CIRCLE-BOXSHADOW);
+		    }
+		}
+		//开关 开
+		&.u-switch-on .u-switch-handle{
+		    border-color: @SWITCH-COMPONENT-ONSTATE-BORDER;
+		    .box-shadow(inset 0 0 0 16px @SWITCH-COMPONENT-ONSTATE-BOXSHADOW);
+		    background-color: @SWITCH-COMPONENT-ONSTATE-BG;
+		    .transition(border ease 0.4s,box-shadow ease 0.4s,background-color ease 1.2s);
+		    &:before{
+				left: 18px;
+		    }
+		} 
+		//开关 关
+		&.u-switch-off .u-switch-handle{
+		    border-color: @SWITCH-COMPONENT-OFFSTATE-BORDER;
+		    .box-shadow(inset 0 0 0 0 @SWITCH-COMPONENT-OFFSTATE-BOXSHADOW);
+		    background-color: @SWITCH-COMPONENT-OFFSTATE-BG;
+		    .transition(border cubic-bezier(0, 0, 0, 1) 0.4s,box-shadow cubic-bezier(0, 0, 0, 1) 0.4s);
+		    &:before{
+    			left: -1px;/*no*/
+		    }
+		}
+		//开关 不可控
+		&.disabled{
+			opacity: 0.3;
+		}	
+	}
+}
+
+//选择列表
+.u-select(){
+	.u-select .u-select-row{
+		padding: 15px 45px 15px 20px;
+		position: relative;
+		.display-box();
+		.box-vertical-alignment();
+		.u-select-image{
+			width: 50px;
+			height: 50px;
+			margin-right: 10px;
+		}
+		.u-select-icon{
+			margin-right: 10px;
+			.iconfont(@SELECT-COMPONENT-ICON-FONTSIZE);
+		}
+		div{
+			.flex();
+			min-width: 0;
+		}
+		.u-select-title{
+		    .text_oneRow_ellipsis();
+		}
+		.u-select-subtitle{
+		    .text_oneRow_ellipsis();
+		}
+		&:before{
+		    content: '\e7a1';
+		    .transformV_center(right,15px);
+		    .defaultIconfont(@SELECT-COMPONENT-DEFAULTICON-FONTSIZE);
+		    display: none;
+		}		
+		&:after{
+			.defaultBorder();	
+		}
+		&.active:before{
+			display: block;
+		}
+	}
+	//上拉加载
+	.u-select-load{
+		text-align: center;
+	}
+}
+
+//按钮
+.u-button(){
+	.u-button{
+	    width: 240px;
+	    color: @BUTTON-COMPONENT-COLOR;
+	    font-size: inherit;
+	    background-color: @BUTTON-COMPONENT-BG;
+	    border-radius: 20px;
+	    text-align: center;
+    	line-height: 1;
+    	margin: 0 auto;
+	    padding: 10px 0;
+	    .transition(all 0.2s linear);
+	    background-clip: padding-box;
+	    //按钮 active
+	    .tap_row(@BUTTON-COMPONENT-ACTIVE-BG);
+	   	//按钮 不可控
+		&.disabled{
+    		background-color: @BUTTON-COMPONENT-DISABLED-BG;
+		}
+	}
+}
+
+//输入框
+.u-text(){
+	.u-text{
+	    width: 100%;
+	    display: table;
+	    position: relative;
+		input{
+    		display: table-cell;
+		    width: 100%;
+		    border: 0;
+		    outline: 0;
+		    -webkit-appearance: none;
+		    padding: 20px 70px 20px 20px;
+		    background-color: @TEXT-COMPONENT-INPUT-BG;
+		    &[type = text] ~ .u-text-see{
+			    color: @TEXT-COMPONENT-TEXTINPUT-SEEICON-COLOR;
+			}
+		}
+		.u-text-icon{
+			.iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
+		    width: 44px;
+		    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{
+		    position: absolute;
+		    top: 0;
+		    width: 30px;
+		    height: 100%;
+		    &:before{
+		    	.transform_center();
+		    	.defaultIconfont(@TEXT-COMPONENT-DEFAULTICON-FONTSIZE);
+			}
+		}	
+		//x icon
+		.u-text-clear{
+			right: 30px;
+			&:before{
+			    content: '\e724';
+			}
+		}
+		//眼睛 icon
+		.u-text-see{
+		    right: 0;
+		    &:before{
+			    content: '\e73c';
+			}			
+		}		
+		&:after{
+			.defaultBorder();	
+		}
+	}
+
+    @media (max-height: 400px/*no*/){
+        #app{
+            height: 647px;
+            position: relative;
+        }
+    }
+}
+
+//列表
+.u-list(){
+	.u-list{
+	    width: 100%;
+	    height: 100%;
+	    overflow: auto;
+	}
+	.u-list-scroll .u-list-row{		
+		padding: 15px 15px 15px 20px;
+		position: relative;
+		.display-box();
+		.box-vertical-alignment();
+	    .u-list-left-image{
+			width: 50px;
+			height: 50px;
+			margin-right: 10px;
+		}
+		.u-list-left-icon{
+			margin-right: 10px;
+			.iconfont(@LIST-COMPONENT-ICON-FONTSIZE);
+		}
+		div{
+			.flex();
+			min-width: 0;
+		}
+		.u-list-title{
+		    .text_oneRow_ellipsis();
+		}
+		.u-list-subtitle{
+			.text_oneRow_ellipsis();
+		}		
+		.u-list-right-text{
+		    margin-left: 4px;      
+		}
+		.u-list-right-icon{
+			.defaultIconfont(@LIST-COMPONENT-DEFAULTICON-FONTSIZE);
+		}		
+		&:after{
+			.defaultBorder();	
+		}
+	}
+	//上拉加载
+	.u-list-load{
+	    text-align: center;
+	}
+	//list 无内容
+	.u-list-tip{
+		.transformV_center(left,0);
+		width: 100%;
+		text-align: center;
+	}	
+}
+
+//侧滑列表
+.u-swipe-list(){
+	.u-swipe-list{
+	    width: 100%;
+	    height: 100%;
+	    overflow: auto;
+	} 	
+	.u-swipe-list-scroll .u-swipe-list-row{		
+	    position: relative;
+	    overflow: hidden;
+		.u-swipe-list-handle{
+		    position: relative;
+		    .transition(left 0.4s ease);
+		    left: 0;
+    		background-color: @SWIPELIST-COMPONENT-ROW-BG;
+		    padding: 15px 20px;
+			.display-box();
+			.box-vertical-alignment();
+		    z-index: 2;
+			.u-swipe-list-image{
+			    width: 50px;
+			    height: 50px;
+			    margin-right: 10px;
+			}	
+			.u-swipe-list-icon{
+				margin-right: 10px;
+				.iconfont(@SWIPELIST-COMPONENT-ICON-FONTSIZE);
+			}
+			div{
+			    .flex();
+			    min-width: 0;
+			}
+			.u-swipe-list-title{
+			    .text_oneRow_ellipsis();
+			}	
+			.u-swipe-list-subtitle{
+				.text_oneRow_ellipsis();
+			} 	
+			&.u-swipe-list-selected{
+    			left: -120px;
+			}					    
+		}
+		.u-swipe-list-button{
+		    position: absolute;
+		    top: 0;
+		    bottom: 0;
+		    right: 0;
+		    z-index: 1;
+		    div{
+			    width: 60px;
+			    height: 100%;
+			    .display-box();
+			    .box-horizontal-alignment();
+			    .box-vertical-alignment();
+			    color: @SWIPELIST-COMPONENT-BUTTON-COLOR;
+			    float: left;
+			    &:nth-last-of-type(1){
+				    background-color: @SWIPELIST-COMPONENT-DELETEBUTTON-BG;
+				}
+				&:nth-last-of-type(2){
+				    background-color: @SWIPELIST-COMPONENT-OTHERBUTTON-BG;
+				}
+			}
+		}			    	
+	    &:after{
+	    	.defaultBorder();
+		    z-index: 2;
+		}
+	}
+	//上拉加载
+	.u-swipe-list-load{
+	    text-align: center;
+	}
+	//list 无内容
+	.u-swipeList-tip{
+		.transformV_center(left,0);
+		width: 100%;
+		text-align: center;
+	}
+}
+
+//数字加减器
+.u-number-adjustment(){
+	.u-number-adjustment{
+		position: relative;
+		height: 100px;
+		text-align: center;
+		.u-number-adjustment-value{
+		    font-size: @NUMBERADJUSTMENT-COMPONENT-VALUE-FONTSIZE;
+		    display: inline-block;
+		    width: 90px;
+		}
+		.down-arrow,
+		.up-arrow{
+		    position: absolute;
+		    top: 0;
+		    width: 50px;
+		    height: 100%;
+		    color: inherit;
+		    background-color: @NUMBERADJUSTMENT-COMPONENT-ARROW-BG;
+		    padding: 0;
+		    .transition(none);
+		    &:before{
+		    	.transform_center();
+		    	.defaultIconfont(@NUMBERADJUSTMENT-COMPONENT-DEFAULTICON-FONTSIZE);  	
+		    }
+		    &:active{
+		    	background-color: @NUMBERADJUSTMENT-COMPONENT-ARROW-ACTIVE-BG;
+		    }
+		    &.disabled{
+			    display: none;
+			    background-color: @NUMBERADJUSTMENT-COMPONENT-ARROW-DISABLED-BG;
+			}
+		}
+		//< icon
+		.down-arrow{
+		    left: 0; 
+		    &:before{
+			    content: '\e6c7';  
+			}
+		}
+		//> icon
+		.up-arrow{
+		    right: 0;
+		    &:before{
+			    content: '\e6c8';
+			}
+		}	
+	}
+}
+
+//展开列表
+.u-folding-list(){
+	.u-folding-list-row{
+		position: relative;
+		&:after{
+			.defaultBorder();
+		}
+	}
+	.u-folding-list-handle{
+		padding: 15px 5px 15px 20px;
+		position: relative;
+		.display-box();
+		.box-vertical-alignment();
+		overflow: hidden;
+		.u-folding-list-left-image{
+			width: 50px;
+			height: 50px;
+			margin-right: 10px;
+		}
+		.u-folding-list-left-icon{
+			margin-right: 10px;
+			.iconfont(@FOLDINGLIST-COMPONENT-ICON-FONTSIZE);
+		}
+		div{
+			.flex();
+			min-width: 0;
+		}
+		.u-folding-list-title{
+		    .text_oneRow_ellipsis();
+		}
+		.u-folding-list-subtitle{
+			.text_oneRow_ellipsis();
+		}
+		.u-folding-list-right-text{
+		    margin-left: 4px;  
+		}
+		.u-folding-list-right-icon{
+		    .defaultIconfont(@FOLDINGLIST-COMPONENT-DEFAULTICON-FONTSIZE);
+		    .transition(transform 0.5s);
+		} 
+	}
+	.u-folding-list-content{
+		overflow: hidden;
+		height: 0;
+		.transition(height 0.5s);
+		background-color: @FOLDINGLIST-COMPONENT-CONTENT-BG;
+	}
+	.u-folding-list-button-group{
+	    display: table;
+	    width: 100%;
+	    table-layout: fixed;
+		.u-folding-list-button{
+			display: table-cell;
+			padding: 6px 0;
+			.u-folding-list-button-bg{
+				width: 35px;
+				height: 35px;
+				background-color: @FOLDINGLIST-COMPONENT-BUTTON-BG;
+				border-radius: 25px;
+				.iconfont(@FOLDINGLIST-COMPONENT-BUTTON-ICON-FONTSIZE,35px);
+				text-align: center;
+				margin: 0 auto;
+			}	
+		}
+	}
+	.active{
+		.u-folding-list-handle .u-folding-list-right-icon{
+			.transform(rotate(-180deg));
+		}
+		.u-folding-list-content{
+			height: 47px;
+		}
+	}
+}
+
+//带联动选择器
+.u-picker(){
+	.u-picker-hd{
+		height: 45px;
+		text-align: center;
+		position: relative;
+		.u-picker-title{
+			line-height: 45px;
+		}
+		.u-picker-cancel,
+		.u-picker-confirm{
+		    width: 45px;
+			line-height: 45px;
+		}
+		.u-picker-cancel{
+			float: left;
+		}
+		.u-picker-confirm{
+			float: right;
+		}
+		&:after{
+			.defaultBorder();
+		}
+	}
+	.u-picker-data{
+		.display-box();
+		position: relative;
+		height: 150px;
+		.u-picker-wheel{
+			.flex();
+			overflow: hidden;
+			.u-picker-row{
+				height: 30px;
+				line-height: 30px;
+				text-align: center;
+			}
+		}
+		.u-picker-indicator{
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			height: 30px;
+		    margin: auto;
+		    pointer-events: none;
+		    &:before{
+		    	.defaultBorder(top);
+		    }
+			&:after{
+				.defaultBorder();
+			}
+		}
+		.u-picker-mask{
+			position: absolute;
+		    top: 0;
+		    left: 0;
+		    width: 100%;
+		    height: 100%;
+		    .linear-gradient(@PICKER-COMPONENT-MASK-GRADIENT-STARTCOLOR,@PICKER-COMPONENT-MASK-GRADIENT-CENTERCOLOR,@PICKER-COMPONENT-MASK-GRADIENT-ENDCOLOR);
+		    background: linear-gradient(@PICKER-COMPONENT-MASK-GRADIENT-STARTCOLOR,@PICKER-COMPONENT-MASK-GRADIENT-CENTERCOLOR,@PICKER-COMPONENT-MASK-GRADIENT-ENDCOLOR);
+		    opacity: 0.9;
+		    pointer-events: none;
+		}
+	}
+}
+
+//无档位滑动条
+.u-slide(){
+	.u-slide{
+	    position: relative;
+	    padding: 0 25px;
+	    margin: 20px 0;
+	    height: 48px;
+	    > div {
+		    position: relative;
+		    height: 30px;
+			.u-slide-bg{
+			    position: absolute;
+			    top: 0;
+			    bottom: 0;
+			    left: 0;
+			    width: 100%;
+			    height: 10px;
+			    margin: auto;
+			    background-color: @SLIDE-COMPONENT-BG;
+			    border-radius: 10px;
+			    z-index: 1;
+			}
+			.u-slide-range{
+			    position: absolute;
+			    top: 0;
+			    bottom: 0;
+			    left: 0;
+			    height: 10px;
+			    margin: auto;
+			    background-color: @SLIDE-COMPONENT-RANGE-BG;
+			    border-radius: 10px;
+			    z-index: 2;
+			}
+			.u-slide-handle{
+			    position: absolute;
+			    top: 50%;
+			    left: 0;
+			    width: 20px;
+			    height: 20px;
+			    margin: -10px 0 0 -10px;
+			    background-color: @SLIDE-COMPONENT-HANDLE-BG;
+			    border-radius: 100px;
+			    z-index: 3;
+			}
+			.u-slide-value{
+			    position: absolute;
+			    top: -15px;
+			    left: 0;
+			    .transform(translateX(-50%));
+			    font-size: @SLIDE-COMPONENT-VALUE-FONTSIZE;
+			    z-index: 3;
+			}
+ 		}
+ 		.u-slide-min,
+ 		.u-slide-max{
+			font-size: @SLIDE-COMPONENT-MINMAXVALUE-FONTSIZE;
+ 		}
+ 		.u-slide-min{
+		    float: left;
+		    margin-left: -10px;
+ 		}
+ 		.u-slide-max{
+		    float: right;
+		    margin-right: -10px;
+		}
+		&.disabled{
+	    	color: @SLIDE-COMPONENT-DISABLED-COLOR;
+		    > div {
+		    	.u-slide-range,
+		    	.u-slide-handle{
+		    		background-color: @SLIDE-COMPONENT-DISABLED-BG;
+		    	}
+		    }
+		}
+	}	
+}
+
+//图片轮播
+.u-carousel(){
+	.u-carousel{
+		width: 250px;
+		height: 166px;
+		overflow: hidden;
+		margin: 0 auto;
+		position: relative;
+	}
+
+	.u-carousel .u-carousel-inner{
+		width: 100%;
+		height: 100%;
+		    white-space: nowrap;
+		    font-size: 0;
+	}
+
+	.u-carousel .u-carousel-inner .u-carousel-item{
+		display: inline-block;	
+	}
+
+	.u-carousel .u-carousel-inner .u-carousel-item .u-carousel-image{
+		width: 100%;
+	}
+
+	.u-carousel-indicators{
+		position: absolute;
+		bottom: 10px;
+	    left: 0;
+	    width: 100%;
+	    text-align: center;
+	    font-size: 0;
+	}
+
+	.u-carousel-indicators li{
+		width: 10px;
+		height: 10px;
+		background-color: #fff;
+		border-radius: 50%;
+		opacity: 0.6;
+		margin: 0 5px;
+		display: inline-block;
+	}
+
+	.u-carousel-indicators li.active{
+		opacity: 1;
+	}
+
+}
+
+.edit-name(){
+	.edit-name-text{
+	    width: 100%;
+	    display: table;
+	    position: relative;
+		input{
+		    display: table-cell;
+		    width: 80%;
+		    border: 0;
+		    outline: 0;
+		    -webkit-appearance: none;
+		    padding: 20px 0 20px 10px;
+		    background-color: @EDITNAME-COMPONENT-INPUT-BG;
+		    &[type = text] ~ .edit-name-see{
+			    color: @EDITNAME-COMPONENT-TEXTINPUT-SEEICON-COLOR;
+			}
+		}
+		.edit-name-icon{
+			.iconfont(@EDITNAME-COMPONENT-ICON-FONTSIZE);
+		    width: 35px;
+		    padding-left: 10px;
+		    display: table-cell;
+		    vertical-align: middle;
+		}	
+		.edit-name-title{
+		    width: 55px;
+		    padding-left: 10px;
+		    display: table-cell;
+		    vertical-align: middle;
+		}			
+		.edit-name-clear,
+		.edit-name-see{
+		    position: absolute;
+		    top: 0;
+		    width: 30px;
+		    height: 100%;
+		    &:before{
+		    	.transform_center();
+		    	.defaultIconfont(@EDITNAME-COMPONENT-DEFAULTICON-FONTSIZE);
+			}
+		}	
+		//x icon
+		.edit-name-clear{
+			right: 30px;
+			&:before{
+			    content: '\e724';
+			}
+		}
+		//眼睛 icon
+		.edit-name-see{
+		    right: 0;
+		    &:before{
+			    content: '\e73c';
+			}			
+		}		
+		&:after{
+			.defaultBorder();
+		}     
+	}
+
+	.edit-name-button{
+	    width: 240px;
+	    color: @EDITNAME-COMPONENT-BUTTON-COLOR;
+	    font-size: inherit;
+	    background-color: @EDITNAME-COMPONENT-BUTTON-BG;
+	    border-radius: 20px;
+	    text-align: center;
+    	line-height: 1;
+    	margin: 0 auto;
+	    padding: 10px 0;
+	    .transition(all 0.2s linear);
+	    background-clip: padding-box;
+	    //按钮 active
+	    .tap_row(@EDITNAME-COMPONENT-BUTTON-ACTIVE-BG);
+	   	//按钮 不可控
+		&.disabled{
+    		background-color: @EDITNAME-COMPONENT-BUTTON-DISABLED-BG;
+		}
+	}
+}
\ No newline at end of file

doorlockApp/web/lib/less/public/variables.less

+//图片路径
+@IMAGE_PATH: "../../resources/image";
+
+
+
+//font-familys
+@ICONFONT_PATH: "../../resources/font";    //font路径 
+
+//组件iconfont
+@font-face{
+    font-family: 'defaultIconfont';
+    src: url('@{ICONFONT_PATH}/defaultIconfont.ttf') format('truetype');
+}
+
+//项目iconfont
+@font-face{
+    font-family: 'iconfont';
+    //src: url('@{ICONFONT_PATH}/iconfont.ttf') format('truetype');
+    src: url('//at.alicdn.com/t/font_372681_ifeqlzhn1k9e8kt9.ttf') format('truetype');
+}
+
+@BODY-TEXT-FONTFAMILY: Helvetica,'Helvetica Neue',sans-serif;
+
+
+
+//colors
+@C_WHITE: #fff;
+@C_BLACK: #000;
+@C_BLUE: #007aff;
+@C_BLUE_1: #0065ff;
+@C_BLUE_2: #242635;
+@C_BLUE_3: #010d19;
+@C_BLUE_4: #00ffff;
+@C_BLUE_5: #153D4C;
+@C_GREEN: #4cd964;
+@C_RED: #ff0000;
+@C_GRAY: #bbb;
+@C_GRAY_1: #ddd;
+@C_GRAY_2: #999;
+@OPACITY: transparent;
+@BLACK_OPACITY: fade(@C_BLACK,80%);
+@BLACK_OPACITY_1: fade(@C_BLACK,40%);
+@WHITE_OPACITY: fade(@C_WHITE,0);
+
+//font-sizes
+@DEFAULT_F_SIZE: 14px;
+@F_SIZE_13: @DEFAULT_F_SIZE - 1;    //13px
+@F_SIZE_15: @DEFAULT_F_SIZE + 1;    //15px
+@F_SIZE_16: @DEFAULT_F_SIZE + 2;    //16px
+@F_SIZE_18: @DEFAULT_F_SIZE + 4;    //18px
+@F_SIZE_19: @DEFAULT_F_SIZE + 5;    //19px
+@F_SIZE_20: @DEFAULT_F_SIZE + 6;    //20px
+@F_SIZE_25: @DEFAULT_F_SIZE + 11;   //25px
+
+@F_W_BOLD: bold;
+
+
+
+//body
+@BODY-TEXT-COLOR: @C_WHITE;
+@BODY-TEXT-FONTSIZE: @DEFAULT_F_SIZE;
+@BODY-BG-COLOR: @C_BLUE_2;
+
+//top/bottom border
+@DEFAULT-BORDER-COLOR: @C_GRAY;
+
+@WHITE-GRADIENTBORDER-STARTCOLOR: @C_BLUE_2;
+@WHITE-GRADIENTBORDER-CENTERCOLOR: @C_WHITE;
+@WHITE-GRADIENTBORDER-ENDCOLOR: @C_BLUE_2;
+
+//遮罩蒙版
+@BACKDROP-BG-COLOR: @BLACK_OPACITY;
+
+//通用组件
+@LOADING-COMPONENT-TEXT-COLOR: @C_WHITE;    //loading
+@DIALOG-COMPONENT-BOX-BG: @C_WHITE;    //弹出框
+@DIALOG-COMPONENT-BUTTON-COLOR: @C_BLUE;
+@SWITCH-COMPONENT-CIRCLE-BG: @C_WHITE;    //开关
+@SWITCH-COMPONENT-CIRCLE-BOXSHADOW: @BLACK_OPACITY_1;
+@SWITCH-COMPONENT-ONSTATE-BORDER: @C_GREEN;    //开关 开
+@SWITCH-COMPONENT-ONSTATE-BOXSHADOW: @SWITCH-COMPONENT-ONSTATE-BORDER;
+@SWITCH-COMPONENT-ONSTATE-BG: @SWITCH-COMPONENT-ONSTATE-BORDER;
+@SWITCH-COMPONENT-OFFSTATE-BORDER: @C_GRAY;    //开关 关
+@SWITCH-COMPONENT-OFFSTATE-BOXSHADOW: @SWITCH-COMPONENT-OFFSTATE-BORDER;
+@SWITCH-COMPONENT-OFFSTATE-BG: @SWITCH-COMPONENT-OFFSTATE-BORDER;
+@SELECT-COMPONENT-ICON-FONTSIZE: @F_SIZE_20;    //选择列表
+@SELECT-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_25;
+@BUTTON-COMPONENT-COLOR: @C_WHITE;    //按钮
+@BUTTON-COMPONENT-BG: @C_BLUE;
+@BUTTON-COMPONENT-ACTIVE-BG: @C_BLUE_1;
+@BUTTON-COMPONENT-DISABLED-BG: @C_GRAY;
+@TEXT-COMPONENT-INPUT-BG: @OPACITY;    //输入框
+@TEXT-COMPONENT-ICON-FONTSIZE: @F_SIZE_20;
+@TEXT-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_25;
+@TEXT-COMPONENT-TEXTINPUT-SEEICON-COLOR: @C_BLUE;
+@LIST-COMPONENT-ICON-FONTSIZE: @F_SIZE_20;    //列表
+@LIST-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_25;
+@SWIPELIST-COMPONENT-ROW-BG: @C_WHITE;    //侧滑列表
+@SWIPELIST-COMPONENT-ICON-FONTSIZE: @F_SIZE_20;
+@SWIPELIST-COMPONENT-BUTTON-COLOR: @C_WHITE;
+@SWIPELIST-COMPONENT-DELETEBUTTON-BG: @C_RED;
+@SWIPELIST-COMPONENT-OTHERBUTTON-BG: @C_GRAY;
+@NUMBERADJUSTMENT-COMPONENT-VALUE-FONTSIZE: @DEFAULT_F_SIZE + 58;    //数字加减器
+@NUMBERADJUSTMENT-COMPONENT-ARROW-BG: @OPACITY;
+@NUMBERADJUSTMENT-COMPONENT-ARROW-ACTIVE-BG: @OPACITY;
+@NUMBERADJUSTMENT-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_25;
+@NUMBERADJUSTMENT-COMPONENT-ARROW-DISABLED-BG: @OPACITY;
+@FOLDINGLIST-COMPONENT-ICON-FONTSIZE: @F_SIZE_20;    //展开列表
+@FOLDINGLIST-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_25;
+@FOLDINGLIST-COMPONENT-CONTENT-BG: @C_GRAY;
+@FOLDINGLIST-COMPONENT-BUTTON-BG: @C_WHITE;
+@FOLDINGLIST-COMPONENT-BUTTON-ICON-FONTSIZE: @F_SIZE_20;
+@PICKER-COMPONENT-MASK-GRADIENT-STARTCOLOR: @C_WHITE;    //带联动选择器
+@PICKER-COMPONENT-MASK-GRADIENT-CENTERCOLOR: @WHITE_OPACITY;
+@PICKER-COMPONENT-MASK-GRADIENT-ENDCOLOR: @C_WHITE;
+@SLIDE-COMPONENT-BG: @C_GRAY_1;    //无档位滑动条
+@SLIDE-COMPONENT-RANGE-BG: @C_BLUE;
+@SLIDE-COMPONENT-HANDLE-BG: @C_BLUE;
+@SLIDE-COMPONENT-VALUE-FONTSIZE: @F_SIZE_13;
+@SLIDE-COMPONENT-MINMAXVALUE-FONTSIZE: @F_SIZE_13;
+@SLIDE-COMPONENT-DISABLED-COLOR: @C_GRAY;
+@SLIDE-COMPONENT-DISABLED-BG: @C_GRAY;
+@EDITNAME-COMPONENT-INPUT-BG: @OPACITY;    //修改名称
+@EDITNAME-COMPONENT-ICON-FONTSIZE: @F_SIZE_20;
+@EDITNAME-COMPONENT-DEFAULTICON-FONTSIZE: @F_SIZE_25;
+@EDITNAME-COMPONENT-TEXTINPUT-SEEICON-COLOR: @C_BLUE;
+@EDITNAME-COMPONENT-BUTTON-COLOR: @C_WHITE;    //修改名称-按钮
+@EDITNAME-COMPONENT-BUTTON-BG: @C_BLUE;
+@EDITNAME-COMPONENT-BUTTON-ACTIVE-BG: @C_BLUE_1;
+@EDITNAME-COMPONENT-BUTTON-DISABLED-BG: @C_GRAY;
+
+//自定义按钮组件
+@CUSTOM-BUTTON-COMPONENT-BG: @OPACITY;
+@CUSTOM-BUTTON-COMPONENT-COLOR: @C_BLUE_4;
+@CUSTOM-BUTTON-COMPONENT-FONTSIZE: @F_SIZE_16;
+@CUSTOM-BUTTON-COMPONENT-ACTIVE-BG: @C_BLUE_5;
+@CUSTOM-BUTTON-COMPONENT-DISABLED-BG: @OPACITY;
+@CUSTOM-BUTTON-COMPONENT-DISABLED-COLOR: @C_GRAY_2;
+
+//自定义输入框组件
+@CUSTOM-TEXT-COMPONENT-INPUT-PLACEHOLDER-COLOR: ;
+@CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR: ;
+@CUSTOM-TEXT-COMPONENT-DEFAULTICON-FONTSIZE: @DEFAULT_F_SIZE + 8;
+
+//自定义弹出框组件
+@CUSTOM-DIALOG-COMPONENT-CONTENT-FONTSIZE: @F_SIZE_18;
+@CUSTOM-DIALOG-COMPONENT-BUTTON-BG: ;
+@CUSTOM-DIALOG-COMPONENT-BUTTON-ACTIVE-BG: ;
+@CUSTOM-DIALOG-COMPONENT-CANCELBUTTON-COLOR: ;
+@CUSTOM-DIALOG-COMPONENT-CONFIRMBUTTON-COLOR: @C_WHITE;
+
+//header
+@HEADER-BG-COLOR: @C_BLUE_3;
+@HEADER-TITLE-COLOR: @C_WHITE;
+@HEADER-TITLE-FONTSIZE: @F_SIZE_19;
+@HEADER-TEXT-COLOR: @C_WHITE;
+@HEADER-ICON-FONTSIZE: @F_SIZE_25;
+
+//errorTip
+@ERRORTIP-TEXT-COLOR: ;
+@ERRORTIP-TEXT-FONTSIZE: @F_SIZE_13;
+
+//list
+@LIST-LOAD-FONTSIZE: @F_SIZE_13;    //上拉加载  
+@LIST-NOCONTTIP-COLOR: ;    //list 无内容
+
+//引导
+@GUIDE-FOOTER-FONTSIZE: @F_SIZE_16;
\ No newline at end of file

doorlockApp/web/resources/lang/en.json

+{"loading":"正在加载...","hour":"小时","subtitle":"显示副标题","btn":{"confirm":"确定","numberAdjustment":"修改disabled"},"scroll":{"clickToLoadMore":"click to load more","loading":"loading..."}}
\ No newline at end of file

doorlockApp/web/resources/lang/zh.json

+{"loading":"请耐心等待...","scroll":{"clickToLoadMore":"点击加载更多","loading":"loading..."},"btn":{"confirm":"确定","login":"登录","getCode":"获取验证码","register":"注册","logout":"退出系统","save":"保存","qrcode":"生成二维码","wifiAdd":"开始配置Wi-Fi","connect":"连接","bindUser":"绑定姓名","bind":"我要绑定","reBound":"请重新绑定","saveQRcode":"保存二维码到相册"},"dialog":{"confirm":"确认","cancel":"取消"},"title":{"login":"登录","register":"注册","forgetPassword":"忘记密码","device":"智能指纹锁","opendoorRecord":"开门记录","alarmInfo":"报警信息","remoteOpendoor":"远程开门","hijackRecord":"劫持记录","doorlockManage":"门锁管理","editName":"修改名称","qrcode":"生成绑定二维码","addDevice":"添加设备","scanCodeAdd":"扫描绑定设备","wifiAddHelp":"配置Wi-Fi","wifiAdd":"连接Wi-Fi","bindUserHelp":"ID-姓名绑定","bindUser":"绑定用户","userList":"用户列表"},"footer":{"guide":"指纹改变生活","recordList":"记录时间以锁为准"},"login":{"telInputTip":"请输入手机号","passwordInputTip":"请输入密码","register":"快速注册","forgetPassword":"忘记密码","error":{"telNull":"请输入手机号","passWordNull":"请输入密码"}},"register":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"forgetPassword":{"telInputTip":"请输入手机号","codeInputTip":"请输入验证码","passwordInputTip":"请输入6位登录密码","error":{"telNull":"请输入手机号","codeNull":"请输入验证码","passWordNull":"请输入密码"}},"device":{"opendoorRecord":"开门记录","securityAlarm":"安全报警","remoteOpendoor":"远程开门","hijackAlarm":"劫持报警","followTitle":"关注服务号","followCont1":"关注“i智信”微信服务号可随时随地掌握设备动态<br>再也不担心错过重要通知，赶紧按下方提示试试吧","followCont2":"1.保存二维码-2.用微信从<span>相册选取扫码</span>-3.关注","laterFollow":"稍后关注"},"opendoorRecord":{"noRecordTip":"暂无记录"},"alarmInfo":{"noInfoTip":"暂无信息"},"remoteOpendoor":{"passwordInputTip":"请输入远程开门密码","error":{}},"hijackRecord":{"noRecordTip":"暂无记录"},"doorlockManage":{"noDeviceTip":"暂无设备","deleteDialogTip":"<span>{0}</span>将被删除","logoutDialogTip":"确定要退出系统吗？"},"editName":{"nameInputTip":"请输入门锁名称","error":{}},"qrcode":{"helpTitle":"注意事项：","helpCont1":"1.仅超级管理员（通过Wi-Fi配网绑定的用户为超级管理员）可以生成绑定二维码","helpCont2":"2.二维码有效时间为10分钟且只能使用一次","helpCont3":"3.用户只需要扫描该二维码即可绑定指纹锁","helpCont4":"4.绑定失败则需要重新生成二维码进行绑定"},"addDevice":{"scanCodeAdd":"扫描绑定设备","wifiAdd":"配置Wi-Fi"},"wifiAddHelp":{"helpTitle":"配置Wi-Fi说明：","helpCont1":"1.按下指纹锁背面的按钮，进入主菜单，选择Wi-Fi设置→配置Wi-Fi，门锁进入等待配网状态","helpCont2":"2.点击页面“开始配置Wi-Fi”按钮，进入Wi-Fi配网画面","helpCont3":"3.输入Wi-Fi密码，点击“l连接”按钮，等待锁端相应，直至配网成功","helpCont4":"（提示：如果指纹锁已经绑定过用户，重新绑定成功后会清除之前所有绑定信息）"},"wifiAdd":{"passwordInputTip":"请输入Wi-Fi密码","remindTitle":"配置Wi-Fi提醒：","remindCont1":"1.  请确保Wi-Fi信号良好","remindCont2":"2.  本产品暂不支持5GHz无线网络","error":{}},"bindUserHelp":{"helpTitle":"配对姓名说明：","helpCont1":"1.在指纹锁上录入指纹、密码、卡并获得相应ID","helpCont2":"2.通过姓名绑定将该ID绑定对应用户姓名","helpCont3":"3.绑定成功后，开门记录中将会显示已绑定的用户姓名","helpCont4":"4.用户姓名信息只保存在APP端，不影响锁端设置","boundUser":"查看已绑定ID姓名"},"bindUser":{"editHeadTip":"点击编辑用户头像","nameTitle":"姓名","fingerprintIDTitle":"指纹ID","passwordIDTitle":"密码ID","ICCardIDTitle":"IC卡ID","requiredInputTip":"（必填）","optionalInputTip":"（选填）","error":{}},"userList":{"name":"姓名：{0}","id":"指纹ID:<span>{0}</span>密码ID:<span>{1}</span>IC卡ID:<span>{2}</span>","noUserTip":"暂无用户"},"commstatusLoading":{"connectSuccess":"Wi-Fi连接成功，正在绑定...","bindSuccess":"绑定成功","bindFailed":"绑定失败"}}
\ No newline at end of file

doorlockApp/web/view/addDevice/addDevice.css

+@font-face {
+  font-family: 'defaultIconfont';
+  src: url('../../resources/font/defaultIconfont.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'iconfont';
+  src: url('//at.alicdn.com/t/font_372681_ifeqlzhn1k9e8kt9.ttf') format('truetype');
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  -webkit-user-select: none;
+  user-select: none;
+  color: #fff;
+  font-size: 0.373rem;
+  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
+  background: linear-gradient(to right, #242635, #fff, #242635);
+  background-color: #242635;
+  -webkit-background-size: 100% 1px;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom center;
+}
+
+ul {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 0;
+}
+
+p {
+  margin-bottom: 0;
+}
+
+.u-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-loading .u-loading-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.u-loading .u-loading-box .u-loading-icon {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("../../resources/image/white_loading_icon.png");
+  -webkit-background-size: cover;
+  background-size: cover;
+  margin: 0 auto;
+  -webkit-animation: uLoading 1s steps(12, end) infinite;
+  animation: uLoading 1s steps(12, end) infinite;
+}
+
+.u-loading .u-loading-box .u-loading-text {
+  color: #fff;
+  margin-top: 0.32rem;
+  text-align: center;
+}
+
+@-webkit-keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+@keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+.u-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-dialog .u-dialog-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 6.667rem;
+  background-color: #fff;
+  border-radius: 0.32rem;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content {
+  padding: 0.4rem;
+  text-align: center;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  display: table-cell;
+  color: #007aff;
+  text-align: center;
+  padding: 0.4rem 0;
+  line-height: 1;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+  background-color: #bbb;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  -webkit-transition: opacity 0.5s linear;
+  transition: opacity 0.5s linear;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+.custom-dialog .u-dialog-box {
+  width: 7.2rem;
+  height: 4rem;
+  border-radius: 0.133rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content {
+  width: 100%;
+  height: 2.667rem;
+  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;
+  font-size: 0.48rem;
+  line-height: 0.587rem;
+  padding: 0 0.4rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content:after {
+  height: 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button {
+  border-spacing: 0.613rem 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  background-color: ;
+  padding: 0.213rem 0;
+  border-radius: 0.8rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
+  background-color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel {
+  color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  width: 0;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1.173rem;
+  z-index: 1030;
+  background-color: #010d19;
+}
+
+.header p {
+  position: absolute;
+  top: 0;
+  left: 1.467rem;
+  right: 1.467rem;
+  line-height: 1.173rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.507rem;
+  text-align: center;
+}
+
+.header span {
+  color: #fff;
+  width: 1.467rem;
+  line-height: 1.173rem;
+  display: block;
+}
+
+.header span:active {
+  opacity: 0.5;
+}
+
+.header .header-left {
+  float: left;
+  padding-left: 0.133rem;
+}
+
+.header .header-right {
+  float: right;
+  padding-right: 0.133rem;
+  text-align: right;
+}
+
+.header .icon {
+  font-family: iconfont;
+  font-size: 0.667rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.173rem;
+}
+
+.header ~ .content {
+  padding-top: 1.173rem;
+}
+
+.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.533rem;
+  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;
+  width: 1.173rem;
+  padding-left: 0.453rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-icon ~ input {
+  padding-left: 0;
+}
+
+.u-text .u-text-title {
+  width: 1.92rem;
+  padding-left: 0.533rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-title ~ input {
+  padding-left: 0;
+}
+
+.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;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+@media (max-height: 400px /*no*/) {
+  #app {
+    height: 17.253rem;
+    position: relative;
+  }
+}
+
+.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;
+}
+
+.u-commstatus-loading {
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.u-commstatus-loading-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.u-commstatus-loading-button {
+  height: 1.173rem;
+  width: 80%;
+  line-height: 1.173rem;
+  background: #e0dfdf;
+  text-align: center;
+  position: absolute;
+  bottom: 1.173rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-button {
+  display: none;
+}
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-content div ul li {
+  opacity: 0.2;
+  -webkit-animation: stretchdelay 1.5s infinite;
+  animation: stretchdelay 1.5s infinite;
+}
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-content {
+  color: #00ffff;
+}
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-content .loader {
+  font-size: 0.267rem;
+  margin: 5em auto;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  -webkit-animation: load4 1.3s infinite linear;
+  animation: load4 1.3s infinite linear;
+}
+
+@-webkit-keyframes load4 {
+  0%, 100% {
+    box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff;
+  }
+
+  12.5% {
+    box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+
+  25% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+
+  37.5% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+
+  50% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+
+  62.5% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+
+  75% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
+  }
+
+  87.5% {
+    box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
+  }
+}
+
+@keyframes load4 {
+  0%, 100% {
+    box-shadow: 0em -3em 0em 0.2em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 0em #00ffff;
+  }
+
+  12.5% {
+    box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 0.2em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+
+  25% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 0em #00ffff, 3em 0em 0 0.2em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+
+  37.5% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 0em #00ffff, 2em 2em 0 0.2em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 -0.5em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+
+  50% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 0em #00ffff, 0em 3em 0 0.2em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 -0.5em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+
+  62.5% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 0em #00ffff, -2em 2em 0 0.2em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 -0.5em #00ffff;
+  }
+
+  75% {
+    box-shadow: 0em -3em 0em -0.5em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0.2em #00ffff, -2em -2em 0 0em #00ffff;
+  }
+
+  87.5% {
+    box-shadow: 0em -3em 0em 0em #00ffff, 2em -2em 0 -0.5em #00ffff, 3em 0em 0 -0.5em #00ffff, 2em 2em 0 -0.5em #00ffff, 0em 3em 0 -0.5em #00ffff, -2em 2em 0 0em #00ffff, -3em 0em 0 0em #00ffff, -2em -2em 0 0.2em #00ffff;
+  }
+}
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-content .icon {
+  display: none;
+}
+
+.u-commstatus-loading-status-0 .u-commstatus-loading-button {
+  display: none;
+}
+
+.u-commstatus-loading-status-1 .u-commstatus-loading-content {
+  color: #00ffff;
+}
+
+.u-commstatus-loading-status-1 .u-commstatus-loading-content .icon {
+  font-family: SDSIconfont;
+  font-size: 5em;
+}
\ No newline at end of file

doorlockApp/web/view/addDevice/index.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./addDevice.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.addDevice') }}</p>
+        </div>
+        <div class="content">  
+            <ul class="addDevice">
+                <v-touch tag="li" v-on:tap="onScanAddTap">
+                    <img src="../../resources/image/scanCodeAdd.png">{{ $t('addDevice.scanCodeAdd') }}
+                </v-touch>
+                <v-touch tag="li" v-on:tap="onWifiAddTap">
+                    <img src="../../resources/image/wifiAdd.png">{{ $t('addDevice.wifiAdd') }}
+                </v-touch>
+            </ul>
+        </div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./index.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/addDevice/scanCodeAdd.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./addDevice.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.scanCodeAdd') }}</p>
+        </div>
+        <div class="content">   
+        </div>  
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./scanCodeAdd.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/addDevice/wifiAdd.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./addDevice.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.wifiAdd') }}</p>
+        </div>
+        <div class="content">
+            <p class="wifiImg">
+                <img src="../../resources/image/connectWifi.png">
+            </p>
+            <div class="inputBox">
+                <div class="wifi">
+                    <span>&#xe62c;</span>
+                    <p>ugen-f</p>
+                </div>
+                <u-text :init-param="componentsConfig.passwordInput.initParam" :text="textPassword"
+                v-on:u-text-change="onPasswordChange(arguments[0])"></u-text>
+                <p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
+            </div> 
+            <ul class="remind">
+                <li>{{ $t('wifiAdd.remindTitle') }}</li>
+                <li>{{ $t('wifiAdd.remindCont1') }}</li>
+                <li>{{ $t('wifiAdd.remindCont2') }}</li>
+            </ul>
+            <u-button :init-param="componentsConfig.connectButton.initParam" v-on:u-button-tap="onConnectButtonTap"></u-button>
+        </div>
+        <u-commstatus-loading ref="ucommstatusloading" :text="textLoading"  :status="status" 
+            :init-param="componentsConfig.ucommstatusloading.initParam" v-on:u-commstatus-loading-tap="onCommstatusLoadingButtonTap()">
+            <p class="loader"></p>
+            <p class="icon"></p>
+        </u-commstatus-loading>  
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./wifiAdd.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/addDevice/wifiAddHelp.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./addDevice.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.wifiAddHelp') }}</p>
+        </div>
+        <div class="content">
+            <ul class="wifiAddHelp">
+                <li>{{ $t('wifiAddHelp.helpTitle') }}</li>
+                <li>{{ $t('wifiAddHelp.helpCont1') }}</li>
+                <li>{{ $t('wifiAddHelp.helpCont2') }}</li>
+                <li>{{ $t('wifiAddHelp.helpCont3') }}</li>
+                <li>{{ $t('wifiAddHelp.helpCont4') }}</li>
+            </ul>  
+            <u-button :init-param="componentsConfig.wifiAddButton.initParam" v-on:u-button-tap="onWifiAddButtonTap"></u-button> 
+        </div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./wifiAddHelp.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/bindUser/bindUser.css

+@font-face {
+  font-family: 'defaultIconfont';
+  src: url('../../resources/font/defaultIconfont.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'iconfont';
+  src: url('//at.alicdn.com/t/font_372681_ifeqlzhn1k9e8kt9.ttf') format('truetype');
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  -webkit-user-select: none;
+  user-select: none;
+  color: #fff;
+  font-size: 0.373rem;
+  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
+  background: linear-gradient(to right, #242635, #fff, #242635);
+  background-color: #242635;
+  -webkit-background-size: 100% 1px;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom center;
+}
+
+ul {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 0;
+}
+
+p {
+  margin-bottom: 0;
+}
+
+.u-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-loading .u-loading-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.u-loading .u-loading-box .u-loading-icon {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("../../resources/image/white_loading_icon.png");
+  -webkit-background-size: cover;
+  background-size: cover;
+  margin: 0 auto;
+  -webkit-animation: uLoading 1s steps(12, end) infinite;
+  animation: uLoading 1s steps(12, end) infinite;
+}
+
+.u-loading .u-loading-box .u-loading-text {
+  color: #fff;
+  margin-top: 0.32rem;
+  text-align: center;
+}
+
+@-webkit-keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+@keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+.u-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-dialog .u-dialog-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 6.667rem;
+  background-color: #fff;
+  border-radius: 0.32rem;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content {
+  padding: 0.4rem;
+  text-align: center;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  display: table-cell;
+  color: #007aff;
+  text-align: center;
+  padding: 0.4rem 0;
+  line-height: 1;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+  background-color: #bbb;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  -webkit-transition: opacity 0.5s linear;
+  transition: opacity 0.5s linear;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+.custom-dialog .u-dialog-box {
+  width: 7.2rem;
+  height: 4rem;
+  border-radius: 0.133rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content {
+  width: 100%;
+  height: 2.667rem;
+  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;
+  font-size: 0.48rem;
+  line-height: 0.587rem;
+  padding: 0 0.4rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content:after {
+  height: 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button {
+  border-spacing: 0.613rem 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  background-color: ;
+  padding: 0.213rem 0;
+  border-radius: 0.8rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
+  background-color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel {
+  color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  width: 0;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1.173rem;
+  z-index: 1030;
+  background-color: #010d19;
+}
+
+.header p {
+  position: absolute;
+  top: 0;
+  left: 1.467rem;
+  right: 1.467rem;
+  line-height: 1.173rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.507rem;
+  text-align: center;
+}
+
+.header span {
+  color: #fff;
+  width: 1.467rem;
+  line-height: 1.173rem;
+  display: block;
+}
+
+.header span:active {
+  opacity: 0.5;
+}
+
+.header .header-left {
+  float: left;
+  padding-left: 0.133rem;
+}
+
+.header .header-right {
+  float: right;
+  padding-right: 0.133rem;
+  text-align: right;
+}
+
+.header .icon {
+  font-family: iconfont;
+  font-size: 0.667rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.173rem;
+}
+
+.header ~ .content {
+  padding-top: 1.173rem;
+}
+
+.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.533rem;
+  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;
+  width: 1.173rem;
+  padding-left: 0.453rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-icon ~ input {
+  padding-left: 0;
+}
+
+.u-text .u-text-title {
+  width: 1.92rem;
+  padding-left: 0.533rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-title ~ input {
+  padding-left: 0;
+}
+
+.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;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+@media (max-height: 400px /*no*/) {
+  #app {
+    height: 17.253rem;
+    position: relative;
+  }
+}
+
+.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;
+}
+
+.u-swipe-list {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row {
+  position: relative;
+  overflow: hidden;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle {
+  position: relative;
+  -webkit-transition: left 0.4s ease;
+  transition: left 0.4s ease;
+  left: 0;
+  background-color: #fff;
+  padding: 0.4rem 0.533rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  z-index: 2;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle .u-swipe-list-image {
+  width: 1.333rem;
+  height: 1.333rem;
+  margin-right: 0.267rem;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle .u-swipe-list-icon {
+  margin-right: 0.267rem;
+  font-family: iconfont;
+  font-size: 0.533rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle div {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+  min-width: 0;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle .u-swipe-list-title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle .u-swipe-list-subtitle {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-handle.u-swipe-list-selected {
+  left: -3.2rem;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-button {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-button div {
+  width: 1.6rem;
+  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;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-button div:nth-last-of-type(1) {
+  background-color: #ff0000;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row .u-swipe-list-button div:nth-last-of-type(2) {
+  background-color: #bbb;
+}
+
+.u-swipe-list-scroll .u-swipe-list-row:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+  z-index: 2;
+}
+
+.u-swipe-list-load {
+  text-align: center;
+}
+
+.u-swipeList-tip {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  width: 100%;
+  text-align: center;
+}
\ No newline at end of file

doorlockApp/web/view/bindUser/index.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./bindUser.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <div id="app" v-cloak>
+        <router-view></router-view>
+    </div>
+
+    <script type="text/javascript" src="./index.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/device/alarmInfo.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./recordList.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.alarmInfo') }}</p>
+        </div>
+        <timeline :init-param="componentsConfig.alarmInfoList.initParam"></timeline>
+        <div class="footer">{{ $t('footer.recordList') }}</div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./alarmInfo.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/device/device.css

+@font-face {
+  font-family: 'defaultIconfont';
+  src: url('../../resources/font/defaultIconfont.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'iconfont';
+  src: url('//at.alicdn.com/t/font_372681_ifeqlzhn1k9e8kt9.ttf') format('truetype');
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  -webkit-user-select: none;
+  user-select: none;
+  color: #fff;
+  font-size: 0.373rem;
+  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
+  background: linear-gradient(to right, #242635, #fff, #242635);
+  background-color: #242635;
+  -webkit-background-size: 100% 1px;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom center;
+}
+
+ul {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 0;
+}
+
+p {
+  margin-bottom: 0;
+}
+
+.u-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-loading .u-loading-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.u-loading .u-loading-box .u-loading-icon {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("../../resources/image/white_loading_icon.png");
+  -webkit-background-size: cover;
+  background-size: cover;
+  margin: 0 auto;
+  -webkit-animation: uLoading 1s steps(12, end) infinite;
+  animation: uLoading 1s steps(12, end) infinite;
+}
+
+.u-loading .u-loading-box .u-loading-text {
+  color: #fff;
+  margin-top: 0.32rem;
+  text-align: center;
+}
+
+@-webkit-keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+@keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+.u-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-dialog .u-dialog-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 6.667rem;
+  background-color: #fff;
+  border-radius: 0.32rem;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content {
+  padding: 0.4rem;
+  text-align: center;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  display: table-cell;
+  color: #007aff;
+  text-align: center;
+  padding: 0.4rem 0;
+  line-height: 1;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+  background-color: #bbb;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  -webkit-transition: opacity 0.5s linear;
+  transition: opacity 0.5s linear;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+.custom-dialog .u-dialog-box {
+  width: 7.2rem;
+  height: 4rem;
+  border-radius: 0.133rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content {
+  width: 100%;
+  height: 2.667rem;
+  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;
+  font-size: 0.48rem;
+  line-height: 0.587rem;
+  padding: 0 0.4rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content:after {
+  height: 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button {
+  border-spacing: 0.613rem 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  background-color: ;
+  padding: 0.213rem 0;
+  border-radius: 0.8rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
+  background-color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel {
+  color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  width: 0;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1.173rem;
+  z-index: 1030;
+  background-color: #010d19;
+}
+
+.header p {
+  position: absolute;
+  top: 0;
+  left: 1.467rem;
+  right: 1.467rem;
+  line-height: 1.173rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.507rem;
+  text-align: center;
+}
+
+.header span {
+  color: #fff;
+  width: 1.467rem;
+  line-height: 1.173rem;
+  display: block;
+}
+
+.header span:active {
+  opacity: 0.5;
+}
+
+.header .header-left {
+  float: left;
+  padding-left: 0.133rem;
+}
+
+.header .header-right {
+  float: right;
+  padding-right: 0.133rem;
+  text-align: right;
+}
+
+.header .icon {
+  font-family: iconfont;
+  font-size: 0.667rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.173rem;
+}
+
+.header ~ .content {
+  padding-top: 1.173rem;
+}
+
+.u-switch {
+  position: relative;
+  width: 2.667rem;
+  height: 1.333rem;
+}
+
+.u-switch .u-switch-handle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 1.333rem;
+  height: 0.8rem;
+  border: 2px solid;
+  border-radius: 0.533rem;
+  background-clip: padding-box;
+}
+
+.u-switch .u-switch-handle:before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  top: -1px;
+  width: 0.747rem;
+  height: 0.747rem;
+  -webkit-transition: left 0.2s ease-in-out;
+  transition: left 0.2s ease-in-out;
+  border-radius: 0.427rem;
+  background-color: #fff;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0.053rem 0.133rem rgba(0, 0, 0, 0.4);
+}
+
+.u-switch.u-switch-on .u-switch-handle {
+  border-color: #4cd964;
+  -webkit-box-shadow: inset 0 0 0 0.427rem #4cd964;
+  box-shadow: inset 0 0 0 0.427rem #4cd964;
+  background-color: #4cd964;
+  -webkit-transition: border ease 0.4s, -webkit-box-shadow ease 0.4s, background-color ease 1.2s;
+  transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
+}
+
+.u-switch.u-switch-on .u-switch-handle:before {
+  left: 0.48rem;
+}
+
+.u-switch.u-switch-off .u-switch-handle {
+  border-color: #bbb;
+  -webkit-box-shadow: inset 0 0 0 0 #bbb;
+  box-shadow: inset 0 0 0 0 #bbb;
+  background-color: #bbb;
+  -webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.4s, -webkit-box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
+  transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
+}
+
+.u-switch.u-switch-off .u-switch-handle:before {
+  left: -1px;
+}
+
+.u-switch.disabled {
+  opacity: 0.3;
+}
+
+.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.533rem;
+  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;
+  width: 1.173rem;
+  padding-left: 0.453rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-icon ~ input {
+  padding-left: 0;
+}
+
+.u-text .u-text-title {
+  width: 1.92rem;
+  padding-left: 0.533rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-title ~ input {
+  padding-left: 0;
+}
+
+.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;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+@media (max-height: 400px /*no*/) {
+  #app {
+    height: 17.253rem;
+    position: relative;
+  }
+}
+
+.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-marquee-top {
+  width: 100%;
+  height: 0.667rem;
+  overflow: hidden;
+  text-align: center;
+}
+
+.custom-marquee-top .u-marquee-text {
+  display: inline-block;
+  line-height: 0.667rem;
+  text-align: center;
+}
+
+.active .u-marquee-text {
+  animation: marqueeTop 5s linear infinite;
+}
+
+@keyframes marqueeTop {
+  from {
+    transform: translateY(0.667rem);
+  }
+
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+.u-carousel {
+  width: 6.667rem;
+  height: 4.427rem;
+  overflow: hidden;
+  margin: 0 auto;
+  position: relative;
+}
+
+.u-carousel .u-carousel-inner {
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+  font-size: 0;
+}
+
+.u-carousel .u-carousel-inner .u-carousel-item {
+  display: inline-block;
+}
+
+.u-carousel .u-carousel-inner .u-carousel-item .u-carousel-image {
+  width: 100%;
+}
+
+.u-carousel-indicators {
+  position: absolute;
+  bottom: 0.267rem;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 0;
+}
+
+.u-carousel-indicators li {
+  width: 0.267rem;
+  height: 0.267rem;
+  background-color: #fff;
+  border-radius: 50%;
+  opacity: 0.6;
+  margin: 0 0.133rem;
+  display: inline-block;
+}
+
+.u-carousel-indicators li.active {
+  opacity: 1;
+}
\ No newline at end of file

doorlockApp/web/view/device/hijackRecord.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./recordList.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.hijackRecord') }}</p>
+        </div>
+        <timeline :init-param="componentsConfig.hijackRecordList.initParam"></timeline>
+        <div class="footer">{{ $t('footer.recordList') }}</div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./hijackRecord.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/device/index.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./device.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <div id="app" v-cloak>
+        <div class="header">
+            <p>{{ $t('title.device') }}</p>
+            <v-touch tag="span" class="header-right icon" v-on:tap="onDoorlockManageTap">&#xe61d;</v-touch>
+        </div>
+        <div class="content"> 
+            <u-carousel :init-param="componentsConfig.carousel.initParam"></u-carousel>
+            <div class="deviceHandle">
+                <u-marquee :init-param="componentsConfig.marquee.initParam" :active="activeFlag"></u-marquee>
+                <div class="switchGroup">
+                    <!-- 开门记录 -->
+                    <div class="col-xs-6 opendoorRecord newMsg">
+                        <u-switch :value="valueOpendoorRecord" :init-param="componentsConfig.opendoorRecordSwitch.initParam" v-on:u-switch-tap="onOpendoorRecordTap"></u-switch>
+                    </div>
+                    <!-- 安全报警 -->
+                    <div class="col-xs-6 securityAlarm newMsg">
+                        <u-switch :value="valueSecurityAlarm" :init-param="componentsConfig.securityAlarmSwitch.initParam" v-on:u-switch-tap="onSecurityAlarmTap"></u-switch>
+                    </div>
+                    <!-- 远程开门 -->
+                    <div class="col-xs-6 remoteOpendoor newMsg">
+                        <u-switch :value="valueRemoteOpendoor" :init-param="componentsConfig.remoteOpendoorSwitch.initParam" v-on:u-switch-tap="onRemoteOpendoorTap"></u-switch>
+                    </div>
+                    <!-- 劫持报警 -->
+                    <div class="col-xs-6 hijackAlarm newMsg">
+                        <u-switch :value="valueHijackAlarm" :init-param="componentsConfig.hijackAlarmSwitch.initParam" v-on:u-switch-tap="onHijackAlarmTap"></u-switch>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <transition name="fade">
+            <div class="followServiceNumber-dialog" v-show="followShowFlag">
+                <div class="followServiceNumber-dialog-box">
+                    <ul class="">
+                        <li>{{ $t('device.followTitle') }}</li>
+                        <li v-html="$t('device.followCont1')"></li>
+                        <li v-html="$t('device.followCont2')"></li>
+                        <li>
+                            <p></p>
+                        </li>
+                    </ul>
+                    <u-button :init-param="componentsConfig.saveQRcodeButton.initParam" v-on:u-button-tap="onSaveQRcodeButtonTap"></u-button>
+                    <v-touch tag="p" v-on:tap="onLaterFollowTap">{{ $t('device.laterFollow') }}</v-touch>
+                </div>
+            </div>
+        </transition> 
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./index.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/device/opendoorRecord.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./recordList.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.opendoorRecord') }}</p>
+        </div>
+        <timeline :init-param="componentsConfig.opendoorRecordList.initParam"></timeline>
+        <div class="footer">{{ $t('footer.recordList') }}</div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./opendoorRecord.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/device/recordList.css

+@font-face {
+  font-family: 'defaultIconfont';
+  src: url('../../resources/font/defaultIconfont.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'iconfont';
+  src: url('//at.alicdn.com/t/font_372681_ifeqlzhn1k9e8kt9.ttf') format('truetype');
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  -webkit-user-select: none;
+  user-select: none;
+  color: #fff;
+  font-size: 0.373rem;
+  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
+  background: linear-gradient(to right, #242635, #fff, #242635);
+  background-color: #242635;
+  -webkit-background-size: 100% 1px;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom center;
+}
+
+ul {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 0;
+}
+
+p {
+  margin-bottom: 0;
+}
+
+.u-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-loading .u-loading-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.u-loading .u-loading-box .u-loading-icon {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("../../resources/image/white_loading_icon.png");
+  -webkit-background-size: cover;
+  background-size: cover;
+  margin: 0 auto;
+  -webkit-animation: uLoading 1s steps(12, end) infinite;
+  animation: uLoading 1s steps(12, end) infinite;
+}
+
+.u-loading .u-loading-box .u-loading-text {
+  color: #fff;
+  margin-top: 0.32rem;
+  text-align: center;
+}
+
+@-webkit-keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+@keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+.u-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-dialog .u-dialog-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 6.667rem;
+  background-color: #fff;
+  border-radius: 0.32rem;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content {
+  padding: 0.4rem;
+  text-align: center;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  display: table-cell;
+  color: #007aff;
+  text-align: center;
+  padding: 0.4rem 0;
+  line-height: 1;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+  background-color: #bbb;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  -webkit-transition: opacity 0.5s linear;
+  transition: opacity 0.5s linear;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+.custom-dialog .u-dialog-box {
+  width: 7.2rem;
+  height: 4rem;
+  border-radius: 0.133rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content {
+  width: 100%;
+  height: 2.667rem;
+  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;
+  font-size: 0.48rem;
+  line-height: 0.587rem;
+  padding: 0 0.4rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content:after {
+  height: 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button {
+  border-spacing: 0.613rem 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  background-color: ;
+  padding: 0.213rem 0;
+  border-radius: 0.8rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
+  background-color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel {
+  color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  width: 0;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1.173rem;
+  z-index: 1030;
+  background-color: #010d19;
+}
+
+.header p {
+  position: absolute;
+  top: 0;
+  left: 1.467rem;
+  right: 1.467rem;
+  line-height: 1.173rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.507rem;
+  text-align: center;
+}
+
+.header span {
+  color: #fff;
+  width: 1.467rem;
+  line-height: 1.173rem;
+  display: block;
+}
+
+.header span:active {
+  opacity: 0.5;
+}
+
+.header .header-left {
+  float: left;
+  padding-left: 0.133rem;
+}
+
+.header .header-right {
+  float: right;
+  padding-right: 0.133rem;
+  text-align: right;
+}
+
+.header .icon {
+  font-family: iconfont;
+  font-size: 0.667rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.173rem;
+}
+
+.header ~ .content {
+  padding-top: 1.173rem;
+}
\ No newline at end of file

doorlockApp/web/view/device/remoteOpendoor.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./device.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.remoteOpendoor') }}</p>
+        </div>
+        <div class="content"> 
+            <div class="inputBox">
+                <u-text :init-param="componentsConfig.passwordInput.initParam" :text="textPassword"
+                v-on:u-text-change="onPasswordChange(arguments[0])"></u-text>
+                <p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
+            </div>
+            <u-button :init-param="componentsConfig.confirmButton.initParam" v-on:u-button-tap="onConfirmButtonTap"></u-button>
+        </div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./remoteOpendoor.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/doorlockManage/doorlockManage.css

+@font-face {
+  font-family: 'defaultIconfont';
+  src: url('../../resources/font/defaultIconfont.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'iconfont';
+  src: url('//at.alicdn.com/t/font_372681_ifeqlzhn1k9e8kt9.ttf') format('truetype');
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  -webkit-user-select: none;
+  user-select: none;
+  color: #fff;
+  font-size: 0.373rem;
+  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
+  background: linear-gradient(to right, #242635, #fff, #242635);
+  background-color: #242635;
+  -webkit-background-size: 100% 1px;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom center;
+}
+
+ul {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 0;
+}
+
+p {
+  margin-bottom: 0;
+}
+
+.u-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-loading .u-loading-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.u-loading .u-loading-box .u-loading-icon {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("../../resources/image/white_loading_icon.png");
+  -webkit-background-size: cover;
+  background-size: cover;
+  margin: 0 auto;
+  -webkit-animation: uLoading 1s steps(12, end) infinite;
+  animation: uLoading 1s steps(12, end) infinite;
+}
+
+.u-loading .u-loading-box .u-loading-text {
+  color: #fff;
+  margin-top: 0.32rem;
+  text-align: center;
+}
+
+@-webkit-keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+@keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+.u-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-dialog .u-dialog-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 6.667rem;
+  background-color: #fff;
+  border-radius: 0.32rem;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content {
+  padding: 0.4rem;
+  text-align: center;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  display: table-cell;
+  color: #007aff;
+  text-align: center;
+  padding: 0.4rem 0;
+  line-height: 1;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+  background-color: #bbb;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  -webkit-transition: opacity 0.5s linear;
+  transition: opacity 0.5s linear;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+.custom-dialog .u-dialog-box {
+  width: 7.2rem;
+  height: 4rem;
+  border-radius: 0.133rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content {
+  width: 100%;
+  height: 2.667rem;
+  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;
+  font-size: 0.48rem;
+  line-height: 0.587rem;
+  padding: 0 0.4rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content:after {
+  height: 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button {
+  border-spacing: 0.613rem 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  background-color: ;
+  padding: 0.213rem 0;
+  border-radius: 0.8rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
+  background-color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel {
+  color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  width: 0;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1.173rem;
+  z-index: 1030;
+  background-color: #010d19;
+}
+
+.header p {
+  position: absolute;
+  top: 0;
+  left: 1.467rem;
+  right: 1.467rem;
+  line-height: 1.173rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.507rem;
+  text-align: center;
+}
+
+.header span {
+  color: #fff;
+  width: 1.467rem;
+  line-height: 1.173rem;
+  display: block;
+}
+
+.header span:active {
+  opacity: 0.5;
+}
+
+.header .header-left {
+  float: left;
+  padding-left: 0.133rem;
+}
+
+.header .header-right {
+  float: right;
+  padding-right: 0.133rem;
+  text-align: right;
+}
+
+.header .icon {
+  font-family: iconfont;
+  font-size: 0.667rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.173rem;
+}
+
+.header ~ .content {
+  padding-top: 1.173rem;
+}
+
+.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.533rem;
+  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;
+  width: 1.173rem;
+  padding-left: 0.453rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-icon ~ input {
+  padding-left: 0;
+}
+
+.u-text .u-text-title {
+  width: 1.92rem;
+  padding-left: 0.533rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-title ~ input {
+  padding-left: 0;
+}
+
+.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;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+@media (max-height: 400px /*no*/) {
+  #app {
+    height: 17.253rem;
+    position: relative;
+  }
+}
+
+.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;
+}
\ No newline at end of file

doorlockApp/web/view/doorlockManage/editName.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./doorlockManage.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.editName') }}</p>
+        </div>
+        <div class="content">
+            <u-text :init-param="componentsConfig.nameInput.initParam" :text="textName"
+                v-on:u-text-change="onNameChange(arguments[0])"></u-text>  
+            <p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
+            <u-button :init-param="componentsConfig.saveButton.initParam" v-on:u-button-tap="onSaveButtonTap"></u-button>
+        </div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./editName.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/doorlockManage/index.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./doorlockManage.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.doorlockManage') }}</p>
+            <v-touch tag="span" class="header-right icon" v-on:tap="onAddTap">&#xe600;</v-touch>   
+        </div> 
+        <grid-list ref="gridlist" :init-param="componentsConfig.doorlockList.initParam" v-on:grid-list-tap="onDoorlockListTap(arguments[0])" v-on:grid-list-button-tap="onDoorlockListButtonTap(arguments[0],arguments[1])"></grid-list>
+        <u-button :init-param="componentsConfig.logoutButton.initParam" v-on:u-button-tap="onLogoutButtonTap"></u-button>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./index.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/doorlockManage/qrcode.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./doorlockManage.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.qrcode') }}</p>
+        </div>
+        <div class="content"> 
+            <ul class="qrcodeHelp">
+                <li>{{ $t('qrcode.helpTitle') }}</li>
+                <li>{{ $t('qrcode.helpCont1') }}</li>
+                <li>{{ $t('qrcode.helpCont2') }}</li>
+                <li>{{ $t('qrcode.helpCont3') }}</li>
+                <li>{{ $t('qrcode.helpCont4') }}</li>
+                <li>
+                    <p></p>
+                </li>
+            </ul>
+            <u-button :init-param="componentsConfig.qrcodeButton.initParam" v-on:u-button-tap="onQRcodeButtonTap"></u-button>
+        </div>    
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./qrcode.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/login/forgetPassword.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./login.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.forgetPassword') }}</p>
+        </div>
+        <div class="content">
+            <div class="inputBox">
+                <p class="logo"></p>
+                <u-text :init-param="componentsConfig.telInput.initParam" :text="numberTel"
+                v-on:u-text-change="onTelChange(arguments[0])"></u-text>
+                <div class="code">
+                    <u-text :init-param="componentsConfig.codeInput.initParam" :text="textCode"
+            v-on:u-text-change="onCodeChange(arguments[0])"></u-text>   
+                    <u-button :disabled="codeDisabledFlag" :init-param="componentsConfig.codeButton.initParam" v-on:u-button-tap="onCodeButtonTap"></u-button>    
+                </div>
+                <u-text :init-param="componentsConfig.passwordInput.initParam" :text="textPassword"
+                v-on:u-text-change="onPasswordChange(arguments[0])"></u-text>
+                <p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
+            </div>
+            <u-button :init-param="componentsConfig.confirmButton.initParam" v-on:u-button-tap="onConfirmButtonTap"></u-button>
+        </div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./forgetPassword.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/login/index.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./login.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="" class="noBottomGradient">
+
+    <div id="app" v-cloak>
+        <div class="guideBg">
+            <p>{{ $t('footer.guide') }}</p>
+        </div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./index.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/login/login.css

+@font-face {
+  font-family: 'defaultIconfont';
+  src: url('../../resources/font/defaultIconfont.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'iconfont';
+  src: url('//at.alicdn.com/t/font_372681_ifeqlzhn1k9e8kt9.ttf') format('truetype');
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  -webkit-user-select: none;
+  user-select: none;
+  color: #fff;
+  font-size: 0.373rem;
+  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
+  background: linear-gradient(to right, #242635, #fff, #242635);
+  background-color: #242635;
+  -webkit-background-size: 100% 1px;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom center;
+}
+
+ul {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 0;
+}
+
+p {
+  margin-bottom: 0;
+}
+
+.u-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-loading .u-loading-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.u-loading .u-loading-box .u-loading-icon {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("../../resources/image/white_loading_icon.png");
+  -webkit-background-size: cover;
+  background-size: cover;
+  margin: 0 auto;
+  -webkit-animation: uLoading 1s steps(12, end) infinite;
+  animation: uLoading 1s steps(12, end) infinite;
+}
+
+.u-loading .u-loading-box .u-loading-text {
+  color: #fff;
+  margin-top: 0.32rem;
+  text-align: center;
+}
+
+@-webkit-keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+@keyframes uLoading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+.u-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-dialog .u-dialog-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 6.667rem;
+  background-color: #fff;
+  border-radius: 0.32rem;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content {
+  padding: 0.4rem;
+  text-align: center;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  display: table-cell;
+  color: #007aff;
+  text-align: center;
+  padding: 0.4rem 0;
+  line-height: 1;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+  background-color: #bbb;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  -webkit-transition: opacity 0.5s linear;
+  transition: opacity 0.5s linear;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+.custom-dialog .u-dialog-box {
+  width: 7.2rem;
+  height: 4rem;
+  border-radius: 0.133rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content {
+  width: 100%;
+  height: 2.667rem;
+  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;
+  font-size: 0.48rem;
+  line-height: 0.587rem;
+  padding: 0 0.4rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content:after {
+  height: 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button {
+  border-spacing: 0.613rem 0;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  background-color: ;
+  padding: 0.213rem 0;
+  border-radius: 0.8rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
+  background-color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel {
+  color: ;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  width: 0;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1.173rem;
+  z-index: 1030;
+  background-color: #010d19;
+}
+
+.header p {
+  position: absolute;
+  top: 0;
+  left: 1.467rem;
+  right: 1.467rem;
+  line-height: 1.173rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.507rem;
+  text-align: center;
+}
+
+.header span {
+  color: #fff;
+  width: 1.467rem;
+  line-height: 1.173rem;
+  display: block;
+}
+
+.header span:active {
+  opacity: 0.5;
+}
+
+.header .header-left {
+  float: left;
+  padding-left: 0.133rem;
+}
+
+.header .header-right {
+  float: right;
+  padding-right: 0.133rem;
+  text-align: right;
+}
+
+.header .icon {
+  font-family: iconfont;
+  font-size: 0.667rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.173rem;
+}
+
+.header ~ .content {
+  padding-top: 1.173rem;
+}
+
+.noBottomGradient {
+  background-image: none;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+.guideBg {
+  width: 100%;
+  height: 100%;
+  background: url("../../resources/image/guideBg.png") no-repeat center;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+
+.guideBg p {
+  position: absolute;
+  bottom: 1.12rem;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 0.427rem;
+}
+
+.inputBox {
+  width: 6.667rem;
+  margin: 0 auto;
+}
+
+.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.533rem;
+  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;
+  width: 1.173rem;
+  padding-left: 0.453rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-icon ~ input {
+  padding-left: 0;
+}
+
+.u-text .u-text-title {
+  width: 1.92rem;
+  padding-left: 0.533rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-title ~ input {
+  padding-left: 0;
+}
+
+.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;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+@media (max-height: 400px /*no*/) {
+  #app {
+    height: 17.253rem;
+    position: relative;
+  }
+}
+
+.custom-text,
+.custom-password-text,
+.custom-code-text {
+  margin-top: 0.427rem;
+}
+
+.custom-text input,
+.custom-password-text input,
+.custom-code-text input {
+  padding-top: 0.213rem;
+  padding-bottom: 0.213rem;
+}
+
+.custom-text input::-webkit-input-placeholder,
+.custom-password-text input::-webkit-input-placeholder,
+.custom-code-text input::-webkit-input-placeholder {
+  color: #91929a;
+}
+
+.custom-text .u-text-icon,
+.custom-password-text .u-text-icon,
+.custom-code-text .u-text-icon {
+  font-size: 0.64rem;
+  width: 1.28rem;
+  padding-left: 0.24rem;
+  vertical-align: text-bottom;
+}
+
+.custom-text .u-text-clear,
+.custom-password-text .u-text-clear,
+.custom-code-text .u-text-clear {
+  right: 0;
+  width: 1.6rem;
+}
+
+.custom-text .u-text-clear:before,
+.custom-password-text .u-text-clear:before,
+.custom-code-text .u-text-clear:before {
+  color: ;
+  font-size: 0.587rem;
+}
+
+.custom-text:after,
+.custom-password-text:after,
+.custom-code-text:after {
+  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
+  background: linear-gradient(to right, #242635, #fff, #242635);
+}
+
+.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;
+}
+
+.custom-button:active {
+  background-color: #153D4C;
+}
+
+.custom-button.disabled {
+  background-color: transparent;
+  color: #999;
+}
\ No newline at end of file

doorlockApp/web/view/login/login.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./login.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <div id="app" v-cloak>
+        <div class="header">
+            <p>{{ $t('title.login') }}</p>
+        </div>
+        <div class="content"> 
+            <div class="inputBox">
+                <p class="logo"></p>
+                <u-text :init-param="componentsConfig.telInput.initParam" :text="numberTel"
+                v-on:u-text-change="onTelChange(arguments[0])"></u-text>
+                <u-text :init-param="componentsConfig.passwordInput.initParam" :text="textPassword"
+                v-on:u-text-change="onPasswordChange(arguments[0])"></u-text>
+                <p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
+            </div>
+            <u-button :init-param="componentsConfig.loginButton.initParam" v-on:u-button-tap="onLoginButtonTap"></u-button>
+            <p class="link">
+                <v-touch tag="span" v-on:tap="onRegisterTap">{{ $t('login.register') }}</v-touch>
+                <v-touch tag="span" v-on:tap="onForgetPasswordTap">{{ $t('login.forgetPassword') }}</v-touch>                
+            </p>
+        </div>   
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./login.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

doorlockApp/web/view/login/register.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <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="./login.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <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.register') }}</p>
+        </div>
+        <div class="content">
+            <div class="inputBox">
+                <p class="logo"></p>
+                <u-text :init-param="componentsConfig.telInput.initParam" :text="numberTel"
+                v-on:u-text-change="onTelChange(arguments[0])"></u-text>
+                <div class="code">
+                    <u-text :init-param="componentsConfig.codeInput.initParam" :text="textCode"
+            v-on:u-text-change="onCodeChange(arguments[0])"></u-text>   
+                    <u-button :disabled="codeDisabledFlag" :init-param="componentsConfig.codeButton.initParam" v-on:u-button-tap="onCodeButtonTap"></u-button>    
+                </div>
+                <u-text :init-param="componentsConfig.passwordInput.initParam" :text="textPassword"
+                v-on:u-text-change="onPasswordChange(arguments[0])"></u-text>
+                <p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
+            </div>
+            <u-button :init-param="componentsConfig.registerButton.initParam" v-on:u-button-tap="onRegisterButtonTap"></u-button>
+        </div>
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./register.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file