diff --git a/src/apps/AppGridManagement/AddFamily.vue b/src/apps/AppGridManagement/AddFamily.vue
new file mode 100644
index 00000000..2e217315
--- /dev/null
+++ b/src/apps/AppGridManagement/AddFamily.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="AddFamily">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+   
+  },
+  onShow() {
+    document.title = '新增责任家庭'
+  },
+  linkTo(url) {
+    uni.navigateTo({url})
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AddFamily {
+  
+}
+</style>
diff --git a/src/apps/AppGridManagement/AddGird.vue b/src/apps/AppGridManagement/AddGird.vue
new file mode 100644
index 00000000..3def509c
--- /dev/null
+++ b/src/apps/AppGridManagement/AddGird.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="AddGird">
+    <div class="item-flex">
+      <div class="label">
+        <span class="tips">*</span>网格名称
+      </div>
+      <div class="value">请输入</div>
+    </div>
+    <div class="item-flex">
+      <div class="label">
+        <span class="tips"></span>网格长
+      </div>
+      <div class="value">请选择<img src="./components/img/right-icon.png" alt="" /></div>
+    </div>
+    <div class="item-flex">
+      <div class="label">
+        <span class="tips"></span>网格员
+      </div>
+      <div class="value">请选择<img src="./components/img/right-icon.png" alt="" /></div>
+    </div>
+    <div class="footer">确认添加</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+   
+  },
+  onShow() {
+    document.title = '添加网格'
+  },
+  linkTo(url) {
+    uni.navigateTo({url})
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AddGird {
+  .item-flex{
+    display: flex;
+    padding: 34px 32px;
+    background-color: #fff;
+    font-size: 32px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    margin-bottom: 16px;
+    .label{
+      font-weight: 400;
+      color: #333333;
+      line-height: 22px;
+      width: 150px;
+      .tips{
+        display: inline-block;
+        width: 16px;
+        color: #F46;
+        line-height: 44px;
+      }
+    }
+    .value{
+      width: calc(100% - 150px);
+      line-height: 44px;
+      text-align: right;
+      color: #666;
+      img{
+        width: 32px;
+        height: 32px;
+        vertical-align: middle;
+        margin-left: 8px;
+      }
+    }
+    .color-999{
+      color: #999;
+    }
+  }
+  .footer{
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #1365DD;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    font-size: 36px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+  }
+}
+</style>
diff --git a/src/apps/AppGridManagement/AppGridManagement.vue b/src/apps/AppGridManagement/AppGridManagement.vue
index 5e5511b9..811c6b2c 100644
--- a/src/apps/AppGridManagement/AppGridManagement.vue
+++ b/src/apps/AppGridManagement/AppGridManagement.vue
@@ -21,7 +21,7 @@ export default {
 
   data() {
     return {
-      component: 'Map',
+      component: 'Organization',
       params: {},
       refresh: true,
       tabIndex: 0,
diff --git a/src/apps/AppGridManagement/FamilyList.vue b/src/apps/AppGridManagement/FamilyList.vue
new file mode 100644
index 00000000..3b7184f5
--- /dev/null
+++ b/src/apps/AppGridManagement/FamilyList.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="FamilyList">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+   
+  },
+  onShow() {
+    document.title = '责任家庭'
+  },
+  linkTo(url) {
+    uni.navigateTo({url})
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.FamilyList {
+  
+}
+</style>
diff --git a/src/apps/AppGridManagement/Organization.vue b/src/apps/AppGridManagement/Organization.vue
index e69de29b..c0ba8cbb 100644
--- a/src/apps/AppGridManagement/Organization.vue
+++ b/src/apps/AppGridManagement/Organization.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="Organization">
+    <div class="select-gird">
+      <img src="./components/img/gird-icon.png" alt="" class="gird-icon">
+      <div>
+        南湖街道网格一
+        <img src="./components/img/down-icon.png" alt="" class="down-icon"> 
+      </div>
+      <span @click="linkTo('./AddGird')">网格配置</span>
+    </div>
+    <div class="title">网格人员</div>
+    <div class="user-content">
+      <img src="./components/img/user-img.png" alt="">
+      <div class="right">
+        <div class="name">侯敬兰</div>
+        <div class="gird">一级网格长</div>
+        <p>南湖街道一级网格</p>
+      </div>
+    </div>
+    <div class="user-content user-item">
+      <img src="./components/img/user-img.png" alt="">
+      <div class="right">
+        <div class="name">侯敬兰 
+          <span class="gird">一级网格长</span>
+          <span class="family-btn" @click="linkTo('./FamilyList')">责任家庭 ></span>
+        </div>
+        <p>南湖街道一级网格</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  onShow() {
+    document.title = '网格管理'
+  },
+  methods: {
+    linkTo(url) {
+      uni.navigateTo({url})
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Organization {
+  height: 100%;
+  padding-top: 32px;
+  .select-gird{
+  width: calc(100% - 60px);
+  padding: 24px 32px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  margin: 0 30px 32px;
+  box-sizing: border-box;
+  img{
+    width: 32px;
+    height: 32px;
+    vertical-align: middle;
+  }
+  div{
+    display: inline-block;
+    width: calc(100% - 144px);
+    padding-left: 20px;
+    box-sizing: border-box;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333;
+    line-height: 48px;
+    img{
+      margin-left: 8px;
+    }
+  }
+  span{
+    display: inline-block;
+    width: 112px;
+    height: 48px;
+    font-size: 28px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #3F8DF5;
+    line-height: 48px;
+  }
+  }
+  .title{
+    font-size: 38px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #333;
+    line-height: 52px;
+    padding-left: 32px;
+    margin-bottom: 32px;
+  }
+  .user-content{
+    width: calc(100% - 64px);
+    margin: 0 0 32px 32px;
+    background-color: #fff;
+    padding: 32px;
+    box-sizing: border-box;
+    display: flex;
+    img{
+      width: 200px;
+      height: 200px;
+      margin-right: 32px;
+    }
+    .right{
+      width: 100%;
+      .name{
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 44px;
+        margin-bottom: 12px;
+      }
+      .gird{
+        display: inline-block;
+        line-height: 44px;
+        background: #E8EFFF;
+        border-radius: 8px;
+        padding: 0 8px;
+        font-size: 26px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #26F;
+        margin-bottom: 12px;
+      }
+      p{
+        font-size: 26px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #666;
+        line-height: 36px;
+      }
+    }
+  }
+  .user-item{
+    img{
+      width: 96px;
+      height: 96px;
+    }
+    .gird{
+      display: inline-block;
+      margin-left: 16px;
+      margin-bottom: 0!important;
+    }
+    .name{
+      margin-bottom: 8px!important;
+    }
+  }
+  .family-btn{
+    font-size: 26px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #3975C6;
+    line-height: 36px;
+    float: right;
+  }
+}
+</style>
diff --git a/src/apps/AppGridManagement/SelectGird.vue b/src/apps/AppGridManagement/SelectGird.vue
new file mode 100644
index 00000000..8e187026
--- /dev/null
+++ b/src/apps/AppGridManagement/SelectGird.vue
@@ -0,0 +1,332 @@
+<template>
+  <div class="SelectGird">
+    <div class="header-middle">
+      <div class="hint">
+        <span v-for="(item, index) in slectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span style="color:#3F8DF5" @click="girdNameClick(item, index)">{{item.girdName}}</span></span>
+      </div>
+
+      <div class="showTypes" v-if="!userList.length">
+        <div v-if="treeList.length > 0">
+          <div class="cards" v-for="(item, index) in treeList" :key="index" @click="itemClick(item)">
+            <div class="imges">
+              <span v-if="item.girdLevel == 2">
+                <img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked" @click.stop="girdClick(item, index)" />
+                <img src="./components/img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)" />
+              </span>
+              <img src="./components/img/gird--select-icon.png" alt="" class="avatras" />
+            </div>
+            <div class="rightes">
+              <div class="applicationNames">{{ item.girdName }}</div>
+              <img src="./components/img/right-icon.png" alt="" class="imgs" />
+            </div>
+          </div>
+        </div>
+
+        <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
+      </div>
+
+      <div class="showUsers" v-else>
+        <div v-if="userList.length > 0">
+          <div class="cards" v-for="(e, index) in userList" :key="index">
+            <div class="imges">
+              <img src="./components/img/xzh.png" alt="" class="imgselect" v-if="e.isChecked" @click="userClick(e, index)" />
+              <img src="./components/img/xz.png" alt="" class="imgselect" v-else @click="userClick(e, index)" />
+
+              <img src="./components/img/tx@2x.png" alt="" class="avatras" />
+            </div>
+
+            <div class="rights">
+              <div class="applicationNames">{{ e.name }}</div>
+              <div class="idNumbers">{{ e.phone }}</div>
+            </div>
+          </div>
+        </div>
+
+        <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
+      </div>
+    </div>
+
+    <div class="subBtn" @click="submit">
+      <div>确定选择</div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SelectGird',
+  data() {
+    return {
+      SelectGird: {},
+      allData: null,
+      treeList: [],
+      slectList: [],
+      userList: [],
+    }
+  },
+  onLoad() {
+    this.getTree()
+  },
+  methods: {
+    getTree() {
+      this.slectList = []
+      this.$http.post('/app/appgirdinfo/listAllByTop').then((res) => {
+        if (res?.data) {
+          this.allData = res.data
+          this.treeInit()
+        }
+      })
+    },
+
+    treeInit() {
+      if(this.allData[0].isLastLevel == 1) {
+        this.userList = this.allData[0].girdMemberList
+        this.userList.map((item) => {
+          item.isChecked = false
+        })
+      }else {
+        this.treeList = this.allData[0].girdList
+      }
+      var obj = {
+        girdName: this.allData[0].girdName,
+        id: this.allData[0].id,
+        girdLevel: this.allData[0].girdLevel
+      }
+      this.slectList.push(obj)
+    },
+
+    itemClick(row) {
+      console.log(row)
+      var obj = {
+        girdName: row.girdName,
+        id: row.id,
+        girdLevel: row.girdLevel
+      }
+      this.slectList.push(obj)
+      this.searckGird(row)
+    },
+
+    searckGird(row) {
+      if(row.girdLevel != 2) { //查网格
+        this.$http.post(`/app/appgirdinfo/list?parentGirdId=${row.id}&size=999`).then((res) => {
+          if (res?.data) {
+            this.treeList = res.data.records
+          }
+        })
+      }else { //查网格员
+        this.$http.post(`/app/appgirdmemberinfo/listByGirdIdByThree?girdId=${row.id}`).then((res) => {
+          if (res?.data) {
+            this.userList = res.data
+            this.userList.map((item) => {
+              item.isChecked = false
+            })
+          }
+        })
+      }
+    },
+
+    girdNameClick(row, index) {
+      this.userList = []
+      if(!index) { //第一级别
+        this.slectList = []
+        this.treeInit()
+      }else {
+        var list = []
+        this.slectList.map((item, i) => {
+          if(i <= index) {
+            list.push(item)
+          }
+        })
+        this.slectList = list
+        this.searckGird(row)
+      }
+    },
+    
+
+    girdClick(row, index) {
+      if (this.treeList[index].isChecked) {//取消
+        this.treeList[index].isChecked = false
+        this.SelectGird = {}
+      } else {
+        this.treeList.map((item) => {
+          item.isChecked = false
+        })
+        this.treeList[index].isChecked = true
+        this.SelectGird = row
+      }
+      this.$forceUpdate()
+    },
+
+    userClick(row, index) {
+      if (this.userList[index].isChecked) {//取消
+        this.userList[index].isChecked = false
+        this.SelectGird = {}
+      } else {
+        this.userList.map((item) => {
+          item.isChecked = false
+        })
+        this.userList[index].isChecked = true
+        this.SelectGird = row
+      }
+      this.$forceUpdate()
+    },
+
+    submit() {
+      if (this.SelectGird.id != null) {
+        uni.$emit('goback', this.SelectGird)
+        uni.navigateBack()
+      } else {
+        return this.$u.toast('请选择网格或网格员')
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.SelectGird {
+  height: 100%;
+  background: #fff;
+  .header-top {
+    background: #fff;
+    padding: 20px 32px;
+  }
+
+  .header-middle {
+    padding-bottom: 140px;
+    .hint {
+      padding: 28px 20px 28px 32px;
+      line-height: 56px;
+      box-shadow: 0px 1px 0px 0px #e4e5e6;
+      font-size: 30px;
+      font-weight: 500;
+      word-break: break-all;
+    }
+
+    .showTypes {
+      .empty-div {
+        height: 16px;
+        background: #f5f5f5;
+      }
+
+      .cards {
+        display: flex;
+        align-items: center;
+        height: 120px;
+        line-height: 120px;
+        // background: pink;
+        padding: 0 0 0 32px;
+
+        .imges {
+          display: flex;
+          align-items: center;
+          // width: 200px;
+          .imgselect {
+            width: 48px;
+            height: 48px;
+            vertical-align: middle;
+          }
+
+          .avatras {
+            width: 74px;
+            height: 74px;
+            border-radius: 8px;
+            margin-left: 36px;
+          }
+        }
+        img {
+          width: 74px;
+          height: 74px;
+          border-radius: 8px;
+        }
+        .rightes {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: 32px;
+          border-bottom: 1px solid #e4e5e6;
+          .applicationNames {
+            font-size: 36px;
+            font-weight: 500;
+            color: #333333;
+          }
+          .imgs {
+            width: 40px;
+            height: 40px;
+            margin-right: 20px;
+          }
+        }
+      }
+    }
+
+    .showUsers {
+      .cards {
+        display: flex;
+        align-items: center;
+        height: 120px;
+        line-height: 120px;
+        // background: pink;
+        padding: 0 0 0 32px;
+
+        .imges {
+          display: flex;
+          align-items: center;
+          width: 200px;
+          .imgselect {
+            width: 48px;
+            height: 48px;
+          }
+
+          .avatras {
+            width: 74px;
+            height: 74px;
+            border-radius: 8px;
+            margin-left: 36px;
+          }
+        }
+
+        .rights {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: 32px;
+          border-bottom: 1px solid #e4e5e6;
+          padding-right: 40px;
+          .applicationNames {
+            font-size: 36px;
+            font-weight: 500;
+            color: #333333;
+          }
+          .idNumbers {
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+
+  .subBtn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 118px;
+    background: #f4f8fb;
+    div {
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background: #1365dd;
+      border-radius: 4px;
+      font-size: 32px;
+      color: #fff;
+      margin: 20px 34px 0 0;
+      float: right;
+    }
+  }
+}
+</style>
diff --git a/src/apps/AppGridManagement/SelectUser.vue b/src/apps/AppGridManagement/SelectUser.vue
new file mode 100644
index 00000000..8c4485b0
--- /dev/null
+++ b/src/apps/AppGridManagement/SelectUser.vue
@@ -0,0 +1,332 @@
+<template>
+  <div class="SelectUser">
+    <div class="header-middle">
+      <div class="hint">
+        <span v-for="(item, index) in slectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span style="color:#3F8DF5" @click="girdNameClick(item, index)">{{item.girdName}}</span></span>
+      </div>
+
+      <div class="showTypes" v-if="!userList.length">
+        <div v-if="treeList.length > 0">
+          <div class="cards" v-for="(item, index) in treeList" :key="index" @click="itemClick(item)">
+            <div class="imges">
+              <span v-if="item.girdLevel == 2">
+                <img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked" @click.stop="girdClick(item, index)" />
+                <img src="./components/img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)" />
+              </span>
+              <img src="./components/img/gird--select-icon.png" alt="" class="avatras" />
+            </div>
+            <div class="rightes">
+              <div class="applicationNames">{{ item.girdName }}</div>
+              <img src="./components/img/right-icon.png" alt="" class="imgs" />
+            </div>
+          </div>
+        </div>
+
+        <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
+      </div>
+
+      <div class="showUsers" v-else>
+        <div v-if="userList.length > 0">
+          <div class="cards" v-for="(e, index) in userList" :key="index">
+            <div class="imges">
+              <img src="./components/img/xzh.png" alt="" class="imgselect" v-if="e.isChecked" @click="userClick(e, index)" />
+              <img src="./components/img/xz.png" alt="" class="imgselect" v-else @click="userClick(e, index)" />
+
+              <img src="./components/img/tx@2x.png" alt="" class="avatras" />
+            </div>
+
+            <div class="rights">
+              <div class="applicationNames">{{ e.name }}</div>
+              <div class="idNumbers">{{ e.phone }}</div>
+            </div>
+          </div>
+        </div>
+
+        <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
+      </div>
+    </div>
+
+    <div class="subBtn" @click="submit">
+      <div>确定选择</div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SelectUser',
+  data() {
+    return {
+      selectUser: {},
+      allData: null,
+      treeList: [],
+      slectList: [],
+      userList: [],
+    }
+  },
+  onLoad() {
+    this.getTree()
+  },
+  methods: {
+    getTree() {
+      this.slectList = []
+      this.$http.post('/app/appgirdinfo/listAllByTop').then((res) => {
+        if (res?.data) {
+          this.allData = res.data
+          this.treeInit()
+        }
+      })
+    },
+
+    treeInit() {
+      if(this.allData[0].isLastLevel == 1) {
+        this.userList = this.allData[0].girdMemberList
+        this.userList.map((item) => {
+          item.isChecked = false
+        })
+      }else {
+        this.treeList = this.allData[0].girdList
+      }
+      var obj = {
+        girdName: this.allData[0].girdName,
+        id: this.allData[0].id,
+        girdLevel: this.allData[0].girdLevel
+      }
+      this.slectList.push(obj)
+    },
+
+    itemClick(row) {
+      console.log(row)
+      var obj = {
+        girdName: row.girdName,
+        id: row.id,
+        girdLevel: row.girdLevel
+      }
+      this.slectList.push(obj)
+      this.searckGird(row)
+    },
+
+    searckGird(row) {
+      if(row.girdLevel != 2) { //查网格
+        this.$http.post(`/app/appgirdinfo/list?parentGirdId=${row.id}&size=999`).then((res) => {
+          if (res?.data) {
+            this.treeList = res.data.records
+          }
+        })
+      }else { //查网格员
+        this.$http.post(`/app/appgirdmemberinfo/listByGirdIdByThree?girdId=${row.id}`).then((res) => {
+          if (res?.data) {
+            this.userList = res.data
+            this.userList.map((item) => {
+              item.isChecked = false
+            })
+          }
+        })
+      }
+    },
+
+    girdNameClick(row, index) {
+      this.userList = []
+      if(!index) { //第一级别
+        this.slectList = []
+        this.treeInit()
+      }else {
+        var list = []
+        this.slectList.map((item, i) => {
+          if(i <= index) {
+            list.push(item)
+          }
+        })
+        this.slectList = list
+        this.searckGird(row)
+      }
+    },
+    
+
+    girdClick(row, index) {
+      if (this.treeList[index].isChecked) {//取消
+        this.treeList[index].isChecked = false
+        this.selectUser = {}
+      } else {
+        this.treeList.map((item) => {
+          item.isChecked = false
+        })
+        this.treeList[index].isChecked = true
+        this.selectUser = row
+      }
+      this.$forceUpdate()
+    },
+
+    userClick(row, index) {
+      if (this.userList[index].isChecked) {//取消
+        this.userList[index].isChecked = false
+        this.selectUser = {}
+      } else {
+        this.userList.map((item) => {
+          item.isChecked = false
+        })
+        this.userList[index].isChecked = true
+        this.selectUser = row
+      }
+      this.$forceUpdate()
+    },
+
+    submit() {
+      if (this.selectUser.id != null) {
+        uni.$emit('goback', this.selectUser)
+        uni.navigateBack()
+      } else {
+        return this.$u.toast('请选择网格或网格员')
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.SelectUser {
+  height: 100%;
+  background: #fff;
+  .header-top {
+    background: #fff;
+    padding: 20px 32px;
+  }
+
+  .header-middle {
+    padding-bottom: 140px;
+    .hint {
+      padding: 28px 20px 28px 32px;
+      line-height: 56px;
+      box-shadow: 0px 1px 0px 0px #e4e5e6;
+      font-size: 30px;
+      font-weight: 500;
+      word-break: break-all;
+    }
+
+    .showTypes {
+      .empty-div {
+        height: 16px;
+        background: #f5f5f5;
+      }
+
+      .cards {
+        display: flex;
+        align-items: center;
+        height: 120px;
+        line-height: 120px;
+        // background: pink;
+        padding: 0 0 0 32px;
+
+        .imges {
+          display: flex;
+          align-items: center;
+          // width: 200px;
+          .imgselect {
+            width: 48px;
+            height: 48px;
+            vertical-align: middle;
+          }
+
+          .avatras {
+            width: 74px;
+            height: 74px;
+            border-radius: 8px;
+            margin-left: 36px;
+          }
+        }
+        img {
+          width: 74px;
+          height: 74px;
+          border-radius: 8px;
+        }
+        .rightes {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: 32px;
+          border-bottom: 1px solid #e4e5e6;
+          .applicationNames {
+            font-size: 36px;
+            font-weight: 500;
+            color: #333333;
+          }
+          .imgs {
+            width: 40px;
+            height: 40px;
+            margin-right: 20px;
+          }
+        }
+      }
+    }
+
+    .showUsers {
+      .cards {
+        display: flex;
+        align-items: center;
+        height: 120px;
+        line-height: 120px;
+        // background: pink;
+        padding: 0 0 0 32px;
+
+        .imges {
+          display: flex;
+          align-items: center;
+          width: 200px;
+          .imgselect {
+            width: 48px;
+            height: 48px;
+          }
+
+          .avatras {
+            width: 74px;
+            height: 74px;
+            border-radius: 8px;
+            margin-left: 36px;
+          }
+        }
+
+        .rights {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: 32px;
+          border-bottom: 1px solid #e4e5e6;
+          padding-right: 40px;
+          .applicationNames {
+            font-size: 36px;
+            font-weight: 500;
+            color: #333333;
+          }
+          .idNumbers {
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+
+  .subBtn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 118px;
+    background: #f4f8fb;
+    div {
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background: #1365dd;
+      border-radius: 4px;
+      font-size: 32px;
+      color: #fff;
+      margin: 20px 34px 0 0;
+      float: right;
+    }
+  }
+}
+</style>
diff --git a/src/apps/AppGridManagement/components/img/tx@2x.png b/src/apps/AppGridManagement/components/img/tx@2x.png
new file mode 100644
index 00000000..d9620e08
Binary files /dev/null and b/src/apps/AppGridManagement/components/img/tx@2x.png differ
diff --git a/src/apps/AppGridManagement/components/img/xz.png b/src/apps/AppGridManagement/components/img/xz.png
new file mode 100644
index 00000000..98f78cda
Binary files /dev/null and b/src/apps/AppGridManagement/components/img/xz.png differ
diff --git a/src/apps/AppHandSnapshot/AppHandSnapshot.vue b/src/apps/AppHandSnapshot/AppHandSnapshot.vue
index edc3e8d8..90654217 100644
--- a/src/apps/AppHandSnapshot/AppHandSnapshot.vue
+++ b/src/apps/AppHandSnapshot/AppHandSnapshot.vue
@@ -38,12 +38,12 @@ export default {
           text: '统计',
           component: 'Statistics',
         },
-        // {
-        //   img: require('./components/img/set-icon.png'),
-        //   activeImg: require('./components/img/set-icon-active.png'),
-        //   text: '配置',
-        //   component: 'Set'
-        // }
+        {
+          img: require('./components/img/set-icon.png'),
+          activeImg: require('./components/img/set-icon-active.png'),
+          text: '配置',
+          component: 'Set'
+        }
       ],
       isTab: true,
     }