diff --git a/src/App.vue b/src/App.vue
index 9273e5c..4e63b38 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,15 +9,17 @@
     export default {
         data() {
             return {
-                transitionName: 'slide-right'
+                transitionName: ''
             };
         },
         watch: {
             '$route' (to, from) {
-                if(to.path == '/'){
-                    this.transitionName = 'slide-right';
-                }else{
+                if (to.path.length > from.path.length) {
                     this.transitionName = 'slide-left';
+                } else if (to.path.length < from.path.length) {
+                    this.transitionName = 'slide-right';
+                } else {
+                    this.transitionName = '';
                 }
             }
         }
@@ -37,7 +39,7 @@
         top: 0;
         width: 100%;
         height: 100%;
-        transition: all 0.5s cubic-bezier(.55,0,.1,1);
+        transition: all .5s cubic-bezier(.55,0,.1,1);
     }
     .slide-left-enter, .slide-right-leave-active {
         opacity: 0;
diff --git a/src/main.js b/src/main.js
index 702e4ca..32e476d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,3 +8,25 @@ new Vue({
     el: '#app',
     render: h => h(App)
 });
+
+/**
+ * 日期格式化
+ */
+Date.prototype.format = function (format) {
+    var o = {
+        "M+": this.getMonth() + 1, //month
+        "d+": this.getDate(),    //day
+        "h+": this.getHours(),   //hour
+        "m+": this.getMinutes(), //minute
+        "s+": this.getSeconds(), //second
+        "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
+        "S": this.getMilliseconds() //millisecond
+    }
+    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
+        (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (var k in o)if (new RegExp("(" + k + ")").test(format))
+        format = format.replace(RegExp.$1,
+            RegExp.$1.length == 1 ? o[k] :
+                ("00" + o[k]).substr(("" + o[k]).length));
+    return format;
+};
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index c7257ba..0e3dcab 100644
--- a/src/router.js
+++ b/src/router.js
@@ -22,6 +22,13 @@ const routes = [
       title: '设置中心'
     }
   },
+  {
+    name: 'dzgl',
+    component: () => import('./view/dzgl'),
+    meta: {
+      title: '房屋管理'
+    }
+  },
 ];
 
 // add route path
diff --git a/src/view/dzgl/index.vue b/src/view/dzgl/index.vue
new file mode 100644
index 0000000..428f1de
--- /dev/null
+++ b/src/view/dzgl/index.vue
@@ -0,0 +1,139 @@
+<template>
+    <div class="layout">
+        <van-nav-bar class="layout-bar"
+                     title="地址管理"
+                     @click-left="onClickLeft"
+                     @click-right="onClickRight"
+                     left-arrow>
+            <van-icon name="home-o" slot="right"/>
+        </van-nav-bar>
+
+        <div class="body">
+
+            <van-field
+                    clickable
+                    v-model="vm.text"
+                    required
+                    clearable
+                    label="普通文本"
+                    placeholder="请输入"/>
+
+            <van-field
+                    clickable
+                    v-model="vm.textarea"
+                    type="textarea"
+                    required
+                    clearable
+                    label="多行文本"
+                    placeholder="请输入"/>
+
+            <form-datetime
+                    v-model="vm.datetime"
+                    formatter="yyyy年MM月dd hh:mm:ss"
+                    label="日期时间"/>
+
+            <form-date
+                    v-model="vm.date"
+                    formatter="yyyy年MM月dd"
+                    label="日期"/>
+
+            <form-time
+                    v-model="vm.time"
+                    label="时间"/>
+
+            <form-select
+                    :data="selectData"
+                    v-model="vm.select"
+                    label="选择"/>
+            <form-number
+                    v-model="vm.number"
+                    label="数量"/>
+
+            <form-sfzh
+                    v-model="vm.sfzh"
+                    label="身份证号"/>
+
+            <van-button style="margin-top: 30px" type="primary" size="large" @click="onSearch">查询</van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {
+        NavBar,
+        Toast,
+        Button,
+        Icon,
+        Field,
+    } from 'vant';
+    import FormDatetime from '../../wbui/form/FormDatetime'
+    import FormDate from '../../wbui/form/FormData'
+    import FormTime from '../../wbui/form/FormTime'
+    import FormSelect from '../../wbui/form/FormSelect'
+    import FormNumber from '../../wbui/form/FormNumber'
+    import FormSfzh from '../../wbui/form/FormSfzh'
+
+    export default {
+        components: {
+            [NavBar.name]: NavBar,
+            [Toast.name]: Toast,
+            [Button.name]: Button,
+            [Icon.name]: Icon,
+            [Field.name]: Field,
+            FormDatetime,
+            FormDate,
+            FormTime,
+            FormSelect,
+            FormNumber,
+            FormSfzh
+        },
+
+        data() {
+            return {
+                vm: {
+                    text: '',
+                    textarea: '',
+                    datetime: '',
+                    date: '',
+                    time: '',
+                    select: '',
+                    number: '',
+                },
+                selectData: [//text为显示文字,其他属性可以自定义
+                    {text: "[1]A", code: "1", value: "A"},
+                    {text: "[2]B", code: "2", value: "B"},
+                    {text: "[3]C", code: "3", value: "C"},
+                    {text: "[4]D", code: "4", value: "D"},
+                    {text: "[5]E", code: "5", value: "E"}
+                ]
+            };
+        },
+        methods: {
+            onClickLeft() {
+                this.$router.go(-1)
+            },
+            onClickRight() {
+                this.$router.push('nav');
+            },
+            onSearch() {
+                window.console.log(this.vm);
+            },
+        }
+    };
+</script>
+
+<style lang="less">
+
+    .layout {
+        &-bar {
+            position: fixed;
+            width: 100%;
+            top: 0px;
+        }
+
+        .body {
+            margin-top: 50px;
+
+        }
+    }
+</style>
diff --git a/src/view/nav/index.vue b/src/view/nav/index.vue
index 0a7c49e..1acfaf6 100644
--- a/src/view/nav/index.vue
+++ b/src/view/nav/index.vue
@@ -19,6 +19,7 @@
 
                 <van-grid>
                     <van-grid-item
+                            @click="onItem(g.key)"
                             v-for="g in grids"
                             :key="g.key"
                             :icon="g.icon"
@@ -115,7 +116,14 @@
             onRefresh() {
                 Toast("Refresh finish");
                 this.isLoading = false;
-            }
+            },
+            onItem(index) {
+                switch (index){
+                    case "1":
+                        this.$router.push('dzgl');
+                        break
+                }
+            },
         }
     };
 </script>
diff --git a/src/wbui/form/FormData.vue b/src/wbui/form/FormData.vue
new file mode 100644
index 0000000..c7b07d8
--- /dev/null
+++ b/src/wbui/form/FormData.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <van-field
+                v-model="value"
+                :required="required"
+                clearable
+                clickable
+                readonly
+                :label="label"
+                @click="onPick"
+                right-icon="clock-o"
+                placeholder="请选择日期"/>
+        <van-popup
+                v-model="showPopup"
+                position="bottom"
+                show-cancel-button>
+            <van-datetime-picker
+                    :min-date="minDate"
+                    v-model="currentDate"
+                    @confirm="onConfirm"
+                    @cancel="onCancel"
+                    type="date"/>
+        </van-popup>
+
+    </div>
+</template>
+<script>
+    import {
+        Field,
+        DatetimePicker,
+        Popup,
+    } from 'vant';
+
+    export default{
+        components: {
+            [Field.name]: Field,
+            [DatetimePicker.name]: DatetimePicker,
+            [Popup.name]: Popup
+        },
+        data(){
+            return {
+                showPopup: false,
+                value: '',
+                currentDate: '',
+                minDate: '',
+            }
+        },
+        props: {
+            'label': String,
+            'formatter': String,
+            'required': Boolean
+        },
+        methods: {
+            onPick(){
+                this.showPopup = true;
+            },
+            onConfirm(value){
+                this.showPopup = false;
+                this.value = value.format(this.formatter);
+                this.$emit('input', this.value);
+            },
+            onCancel(){
+                this.showPopup = false;
+            }
+        },
+        mounted(){
+            this.minDate = new Date(new Date().getTime() - 100 * 365 * 24 * 60 * 60 * 1000);
+            this.currentDate = new Date();
+            if (!this.formatter) {
+                this.formatter = 'yyyy-MM-dd hh:mm:00'
+            }
+        }
+    }
+
+</script>
+<style lang="less">
+
+</style>
diff --git a/src/wbui/form/FormDatetime.vue b/src/wbui/form/FormDatetime.vue
new file mode 100644
index 0000000..6bafb75
--- /dev/null
+++ b/src/wbui/form/FormDatetime.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <van-field
+                v-model="value"
+                :required="required"
+                clearable
+                clickable
+                readonly
+                :label="label"
+                @click="onPick"
+                right-icon="clock-o"
+                placeholder="请选择日期时间"/>
+        <van-popup
+                v-model="showPopup"
+                position="bottom"
+                show-cancel-button>
+            <van-datetime-picker
+                    :min-date="minDate"
+                    v-model="currentDate"
+                    @confirm="onConfirm"
+                    @cancel="onCancel"
+                    type="datetime"/>
+        </van-popup>
+
+    </div>
+</template>
+<script>
+    import {
+        Field,
+        DatetimePicker,
+        Popup,
+    } from 'vant';
+
+    export default{
+        components: {
+            [Field.name]: Field,
+            [DatetimePicker.name]: DatetimePicker,
+            [Popup.name]: Popup
+        },
+        data(){
+            return {
+                showPopup: false,
+                value: '',
+                currentDate: '',
+                minDate: '',
+            }
+        },
+        props: {
+            'label': String,
+            'formatter': String,
+            'required': Boolean
+        },
+        methods: {
+            onPick(){
+                this.showPopup = true;
+            },
+            onConfirm(value){
+                this.showPopup = false;
+                this.value = value.format(this.formatter);
+                this.$emit('input', this.value);
+            },
+            onCancel(){
+                this.showPopup = false;
+            }
+        },
+        mounted(){
+            this.minDate = new Date(new Date().getTime() - 100 * 365 * 24 * 60 * 60 * 1000);
+            this.currentDate = new Date();
+            if (!this.formatter) {
+                this.formatter = 'yyyy-MM-dd hh:mm:00'
+            }
+        }
+    }
+
+</script>
+<style lang="less">
+
+</style>
diff --git a/src/wbui/form/FormNumber.vue b/src/wbui/form/FormNumber.vue
new file mode 100644
index 0000000..a4ed4ce
--- /dev/null
+++ b/src/wbui/form/FormNumber.vue
@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <van-field
+                v-model="value"
+                :required="required"
+                clearable
+                readonly
+                :label="label"
+                @click="onPick">
+            <van-stepper
+                    slot="input"
+                    :value="value"
+                    @change="onChange"/>
+        </van-field>
+    </div>
+</template>
+<script>
+    import {
+        Field,
+        Stepper,
+    } from 'vant';
+
+    export default{
+        components: {
+            [Field.name]: Field,
+            [Stepper.name]: Stepper,
+        },
+        data(){
+            return {
+                showPopup: false,
+                value: '',
+            }
+        },
+        props: {
+            'label': String,
+            'required': Boolean
+        },
+        methods: {
+            onPick(){
+                this.showPopup = true;
+            },
+            onChange(value){
+                this.showPopup = false;
+                this.$emit('input', value);
+            }
+        },
+        mounted(){
+        }
+    }
+
+</script>
diff --git a/src/wbui/form/FormSelect.vue b/src/wbui/form/FormSelect.vue
new file mode 100644
index 0000000..8cb4f87
--- /dev/null
+++ b/src/wbui/form/FormSelect.vue
@@ -0,0 +1,76 @@
+<template>
+    <div>
+        <van-field
+                v-model="value"
+                :required="required"
+                clearable
+                readonly
+                :label="label"
+                @click="onPick"
+                right-icon="wap-nav"
+                placeholder="请选择"/>
+        <van-popup
+                v-model="showPopup"
+                position="bottom">
+            <van-picker
+                    :columns="data"
+                    :default-index="defaultIndex"
+                    :show-toolbar="true"
+                    confirm-button-text="确认"
+                    cancel-button-text="取消"
+                    @cancel="onCancel"
+                    @confirm="onConfirm"/>
+        </van-popup>
+
+    </div>
+</template>
+<script>
+    import {
+        Field,
+        Picker,
+        Popup,
+    } from 'vant';
+
+    export default{
+        components: {
+            [Field.name]: Field,
+            [Picker.name]: Picker,
+            [Popup.name]: Popup
+        },
+        data(){
+            return {
+                showPopup: false,
+                value: '',
+                defaultIndex: 0,
+            }
+        },
+        props: {
+            'label': String,
+            'data': Array,
+            'required': Boolean
+        },
+        methods: {
+            onPick(){
+                this.showPopup = true;
+            },
+            onConfirm(value, index) {
+                this.showPopup = false;
+                this.value = this.data[index].text;
+                this.$emit('input',this.data[index]);
+            },
+            onCancel(){
+                this.showPopup = false;
+            }
+        },
+        mounted(){
+            for (let i = 0; i < this.data.length; i++) {
+                if (this.data[i] === this.value) {
+                    this.defaultIndex = i;
+                }
+            }
+        }
+    }
+</script>
+<style lang="less">
+
+</style>
diff --git a/src/wbui/form/FormSfzh.vue b/src/wbui/form/FormSfzh.vue
new file mode 100644
index 0000000..4874b2b
--- /dev/null
+++ b/src/wbui/form/FormSfzh.vue
@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <van-field
+                v-model="value"
+                :required="required"
+                clearable
+                clickable
+                readonly
+                :label="label"
+                @click="onPick"
+                right-icon="clock-o"
+                placeholder="证件号码"/>
+
+        <van-popup
+                :overlay="false"
+                v-model="showPopup"
+                position="bottom">
+            <keyboard :keyGroup="keyGroup"/>
+        </van-popup>
+    </div>
+</template>
+<script>
+    import {
+        Field,
+        Popup,
+        NumberKeyboard,
+    } from 'vant';
+
+    import Keyboard from '../../wbui/keyboard/Keyboard'
+
+    export default{
+        components: {
+            [Field.name]: Field,
+            [Popup.name]: Popup,
+            [NumberKeyboard.name]: NumberKeyboard,
+            Keyboard
+        },
+        data(){
+            return {
+                showPopup: false,
+                value: '',
+                currentTime: '',
+                keyGroup:[]
+            }
+        },
+        props: {
+            'label': String,
+            'required': Boolean
+        },
+        methods: {
+            onPick(){
+                this.showPopup = true;
+            },
+            onConfirm(){
+                this.showPopup = false;
+                this.$emit('input', this.value);
+            },
+            onCancel(){
+                this.showPopup = false;
+            }
+        },
+        mounted(){
+        }
+    }
+
+</script>
diff --git a/src/wbui/form/FormTime.vue b/src/wbui/form/FormTime.vue
new file mode 100644
index 0000000..67bce92
--- /dev/null
+++ b/src/wbui/form/FormTime.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <van-field
+                v-model="value"
+                :required="required"
+                clearable
+                clickable
+                readonly
+                :label="label"
+                @click="onPick"
+                right-icon="clock-o"
+                placeholder="请选择时间"/>
+        <van-popup
+                v-model="showPopup"
+                position="bottom">
+            <van-datetime-picker
+                    v-model="currentTime"
+                    @confirm="onConfirm"
+                    @cancel="onCancel"
+                    type="time"/>
+        </van-popup>
+
+    </div>
+</template>
+<script>
+    import {
+        Field,
+        DatetimePicker,
+        Popup,
+    } from 'vant';
+
+    export default{
+        components: {
+            [Field.name]: Field,
+            [DatetimePicker.name]: DatetimePicker,
+            [Popup.name]: Popup
+        },
+        data(){
+            return {
+                showPopup: false,
+                value: '',
+                currentTime: '',
+            }
+        },
+        props: {
+            'label': String,
+            'required': Boolean
+        },
+        methods: {
+            onPick(){
+                this.showPopup = true;
+            },
+            onConfirm(value){
+                this.showPopup = false;
+                this.value = value + ":00";
+                this.$emit('input', this.value);
+            },
+            onCancel(){
+                this.showPopup = false;
+            }
+        },
+        mounted(){
+            this.currentTime = new Date().format("hh:mm");
+        }
+    }
+
+</script>
diff --git a/src/wbui/keyboard/Keyboard.vue b/src/wbui/keyboard/Keyboard.vue
new file mode 100644
index 0000000..ef5c3d4
--- /dev/null
+++ b/src/wbui/keyboard/Keyboard.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom"
+         style="z-index: 100;">
+        <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i
+                role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0"
+                                                                                class="van-hairline van-key">3</i><i
+                role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0"
+                                                                                class="van-hairline van-key">5</i><i
+                role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0"
+                                                                                class="van-hairline van-key">7</i><i
+                role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0"
+                                                                                class="van-hairline van-key">9</i><i
+                role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button"
+                                                                                                tabindex="0"
+                                                                                                class="van-hairline van-key">.</i>
+        </div>
+        <div class="van-number-keyboard__sidebar"><i role="button" tabindex="0"
+                                                     class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i
+                role="button" tabindex="0"
+                class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i>
+        </div>
+    </div>
+</template>
+<script>
+    export default{
+        components: {
+        },
+        data(){
+            return {
+                value: '',
+                defaultIndex: 0,
+            }
+        },
+        props: {
+            'keyGroup': Array,
+        },
+        methods: {},
+        mounted(){
+        }
+    }
+</script>
\ No newline at end of file