diff --git a/src/layout/components/ListTables/index.vue b/src/layout/components/ListTables/index.vue
index d62f7a565..2f7cef662 100644
--- a/src/layout/components/ListTables/index.vue
+++ b/src/layout/components/ListTables/index.vue
@@ -29,6 +29,18 @@
       <slot />
     </div>
     <div class="block">
+      <div style="float:left;position: absolute;">
+        <el-select v-model="value" size="small" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+            :disabled="item.disabled"
+          />
+        </el-select>
+        <el-button type="primary" size="mini" style="font-size:14px" @click="MutiSelectAction(value)">提交</el-button>
+      </div>
       <el-pagination
         background
         :current-page="currentPage"
@@ -74,6 +86,22 @@ export default {
   },
   data() {
     return {
+      options: [{
+        value: '1',
+        label: '批量删除'
+      }, {
+        value: '2',
+        disabled: true,
+        label: '批量更新'
+
+      }, {
+        value: '3',
+        label: '禁用所选'
+      }, {
+        value: '4',
+        label: '激活所选'
+      }],
+      value: ''
     }
   },
   methods: {
@@ -82,6 +110,9 @@ export default {
     },
     handleCurrentChange(val) {
       this.$emit('CurrentChange', val)
+    },
+    MutiSelectAction(val) {
+      this.$emit('MutiSelectChange', val)
     }
   }
 }
diff --git a/src/views/users/UserGroupDetail.vue b/src/views/users/UserGroupDetail.vue
index dd91a595d..472c5f190 100644
--- a/src/views/users/UserGroupDetail.vue
+++ b/src/views/users/UserGroupDetail.vue
@@ -1,13 +1,46 @@
 <template>
-  <div />
+  <el-row class="content-main">
+    <el-col :span="16">
+      <tab :group="data" />
+    </el-col>
+    <el-col :span="8" style="background-color: #f3f3f4;">
+      <card />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { Card, Tab } from './components'
+import { getUserGroup } from '@/api/user'
 export default {
-
+  components: {
+    Tab,
+    Card
+  },
+  data() {
+    return {
+      data: {}
+    }
+  },
+  mounted() {
+    this.getGroupDetail()
+  },
+  methods: {
+    getGroupDetail: function() {
+      getUserGroup(this.$route.params.id).then(response => {
+        this.data = response
+      })
+    }
+  }
 }
 </script>
 
-<style>
-
+<style lang='less' scoped>
+ .content-main{
+    text-align: start;
+    width: 98%;
+    margin-left:1% !important;
+    margin-top: 1%;
+    margin-bottom: 1%;
+  }
 </style>
diff --git a/src/views/users/UserGroupEdit.vue b/src/views/users/UserGroupEdit.vue
index 61a4b8fed..c4014730b 100644
--- a/src/views/users/UserGroupEdit.vue
+++ b/src/views/users/UserGroupEdit.vue
@@ -37,7 +37,7 @@
           :rows="3"
         />
       </el-form-item>
-      <el-form-item>
+      <el-form-item class="foot_button">
         <el-button @click="resetForm('usergroup')">重置</el-button>
         <el-button type="primary" @click="submitForm('usergroup')">{{ buttonTitle }}</el-button>
       </el-form-item>
@@ -151,7 +151,9 @@ export default {
   width: 80%;
   margin-left: 10%;
 }
-
+.foot_button{
+  padding-bottom: 18px ;
+}
 //重置El-select宽度
 .el-select{
   width: 100%;
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index 361981f3c..b78c4d739 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -92,7 +92,7 @@ export default {
   },
   methods: {
     handleDetail: function(index, row) {
-      this.$router.push({ name: 'UserDetail', params: { id: row.id }})
+      this.$router.push({ name: 'UserGroupDetail', params: { id: row.id }})
     },
     handleEdit: function(index, row) {
       this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
diff --git a/src/views/users/UserList.vue b/src/views/users/UserList.vue
index c4c36aed8..5e35baaec 100644
--- a/src/views/users/UserList.vue
+++ b/src/views/users/UserList.vue
@@ -5,6 +5,7 @@
       tableroute="UserEdit"
       @SizeChange="handleSizeChange"
       @CurrentChange="handleCurrentChange"
+      @MutiSelectChange="handleMutiSelectChange"
     >
       <el-table
         v-loading="listLoading"
@@ -36,16 +37,14 @@
           align="center"
           sortable
           header-align="center"
-        >
-        </el-table-column>
+        />
         <el-table-column
           :label="this.$t('common.role')"
           prop="role_display"
           sortable
           align="center"
           header-align="center"
-        >
-        </el-table-column>
+        />
         <el-table-column
           :label="this.$t('common.action')"
           align="center"
@@ -93,6 +92,9 @@ export default {
     handleDetail: function(index, row) {
       this.$router.push({ name: 'UserDetail', params: { id: row.id }})
     },
+    handleMutiSelectChange(val) {
+      console.log(val)
+    },
     // 处理页面显示数量更新
     handleSizeChange(val) {
       this.offset = (this.current_page - 1) * val
diff --git a/src/views/users/components/Tab/index.vue b/src/views/users/components/Tab/index.vue
new file mode 100644
index 000000000..37f9e3f74
--- /dev/null
+++ b/src/views/users/components/Tab/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+    <el-tab-pane :label="$t('usergroup.user_group_detail')" name="first">
+      <div class="ibox-title"><el-tag type="info">{{ group.name }}</el-tag></div>
+      <div class="ibox-content">
+        <table class="table">
+          <tbody>
+            <tr class="no-borders-tr">
+              <td style="width: 20%">{{ $t('usergroup.name') }}:</td>
+              <td><b>{{ group.name }}</b></td>
+            </tr>
+            <tr>
+              <td style="width: 20%">{{ $t('usergroup.created_by') }}:</td>
+              <td><b>{{ group.created_by }}</b></td>
+            </tr>
+            <tr>
+              <td style="width: 20%">{{ $t('usergroup.date_created') }}:</td>
+              <td><b>{{ group.date_created }}</b></td>
+            </tr>
+            <tr>
+              <td style="width: 20%">{{ $t('usergroup.comment') }}:</td>
+              <td><b>{{ group.comment }}</b></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane :label="$t('usergroup.asset_granted')" name="second">{{ $t('usergroup.asset_granted') }}</el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  props: {
+    group: {
+      type: Object,
+      default: () => { return {} }
+    }
+  },
+  data() {
+    return {
+      activeName: 'first'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .ibox-content {
+    clear: both;
+    background-color: #ffffff;
+    color: inherit;
+    padding: 15px 20px 20px 20px;
+    border-color: #e7eaec;
+    border-image: none;
+    border-style: solid solid none;
+    border-width: 1px 0;
+    margin-right: 20px;
+  }
+  .table > tbody > tr > td, .table > tfoot > tr > td {
+    border-top: 1px solid #e7eaec;
+    line-height: 1.42857;
+    padding: 8px;
+    vertical-align: top;
+  }
+  .no-borders-tr td {
+    border-top: none !important;
+  }
+  .no-borders {
+    border: none !important;
+  }
+  .ibox-title {
+    -moz-border-bottom-colors: none;
+    -moz-border-left-colors: none;
+    -moz-border-right-colors: none;
+    -moz-border-top-colors: none;
+    background-color: #ffffff;
+    border-color: #e7eaec;
+    border-image: none;
+    color: inherit;
+    margin-bottom: 0;
+    margin-right: 20px;
+    padding: 10px 15px 7px;
+    min-height: 38px;
+  }
+  // ElEMENT 样式重置
+  .el-tabs /deep/ .el-tabs__header{
+    margin:0 !important;
+  }
+  .el-tabs /deep/ .el-tabs__item.is-active{
+    background-color:#ffffff  !important;
+  }
+</style>
diff --git a/src/views/users/components/card/index.vue b/src/views/users/components/card/index.vue
index e69de29bb..f20fc6424 100644
--- a/src/views/users/components/card/index.vue
+++ b/src/views/users/components/card/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <el-row>
+    <el-col :span="4" :offset="16" class="top-btn">
+      <el-button type="text" disabled><i class="fa fa-trash-o" />{{ $t('usergroup.delete') }}</el-button>
+
+    </el-col>
+    <el-col :span="4" class="top-btn">
+      <el-button type="text" disabled><i class="fa fa-edit" />{{ $t('usergroup.update') }}</el-button>
+    </el-col>
+    <el-col :span="24">
+      <div class="panel panel-info">
+        <div class="panel-heading">
+          <i class="fa fa-info-circle" /> {{ $t('usergroup.user') }}
+        </div>
+        <div class="panel-body">
+          <table class="table group_edit">
+            <tbody>
+              <form />
+              <tr>
+                <td>
+                  <el-select v-model="value1" multiple :placeholder="$t('usergroup.add_user')" style="width:100%" size="small">
+                    <el-option
+                      v-for="item in options"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.name"
+                    />
+                  </el-select>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="no-borders">
+                  <button id="btn_join_group" type="button" class="btn-bs btn-info btn-small">{{ $t('usergroup.add') }}</button>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <b class="bdg_group">Default</b>
+                </td>
+                <td>
+                  <button class="btn btn-danger pull-right btn-xs btn_leave_group" data-uid="eb430762-22d3-4cfa-a86c-0d50b4013b8c" type="button"><i class="fa fa-minus" /></button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+ .el-breadcrumb {
+  padding: 20px;
+  background-color: #fff;
+}
+  .side /deep/ .el-icon--right {
+    margin-left: 96px !important;
+}
+  .el-tabs /deep/ .el-tabs__header{
+    margin:0 !important;
+  }
+  .el-tabs /deep/ .el-tabs__item.is-active{
+    background-color:#ffffff  !important;
+  }
+  .table{
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 20px;
+  }
+  .content-main{
+    text-align: start;
+    width: 98%;
+    margin-left:1% !important;
+    margin-top: 1%;
+    margin-bottom: 1%;
+  }
+  .ibox-content {
+    clear: both;
+    background-color: #ffffff;
+    color: inherit;
+    padding: 15px 20px 20px 20px;
+    border-color: #e7eaec;
+    border-image: none;
+    border-style: solid solid none;
+    border-width: 1px 0;
+    margin-right: 20px;
+  }
+  .table > tbody > tr > td, .table > tfoot > tr > td {
+    border-top: 1px solid #e7eaec;
+    line-height: 1.42857;
+    padding: 8px;
+    vertical-align: top;
+  }
+  .no-borders-tr td {
+    border-top: none !important;
+  }
+  .no-borders {
+    border: none !important;
+  }
+  .ibox-title {
+    -moz-border-bottom-colors: none;
+    -moz-border-left-colors: none;
+    -moz-border-right-colors: none;
+    -moz-border-top-colors: none;
+    background-color: #ffffff;
+    border-color: #e7eaec;
+    border-image: none;
+    color: inherit;
+    margin-bottom: 0;
+    margin-right: 20px;
+    padding: 10px 15px 7px;
+    min-height: 38px;
+  }
+  .panel {
+    margin-bottom: 20px;
+    border-color: #1ab394;
+    background-color: #fff;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
+    box-shadow: 0 1px 1px rgba(0,0,0,.05);
+  }
+  .panel-primary > .panel-heading {
+    background-color: #1ab394;
+    border-color: #1ab394;
+  }
+  .panel-primary > .panel-heading {
+    color: #fff;
+  }
+  .panel-heading {
+    padding: 10px 15px;
+    border-bottom: 1px solid transparent;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .panel-info > .panel-heading {
+    background-color: #23c6c8;
+    border-color: #23c6c8;
+    color: #ffffff;
+  }
+  .table > tbody > tr > td, .table > tfoot > tr > td {
+    border-top: 1px solid #e7eaec;
+    line-height: 1.42857;
+    padding: 8px;
+    vertical-align: top;
+  }
+  .btn {
+    border-radius: 3px;
+  }
+  .btn-info {
+    background-color: #23c6c8;
+    border-color: #23c6c8;
+    color: #FFFFFF;
+  }
+  .btn-xs, .btn-group-xs>.btn {
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
+  }
+  .top-btn{
+    text-align: end;
+  }
+  .btn-bs {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+  }
+
+</style>
diff --git a/src/views/users/components/index.js b/src/views/users/components/index.js
index 5025f8bb6..ccbdccb20 100644
--- a/src/views/users/components/index.js
+++ b/src/views/users/components/index.js
@@ -1,6 +1,2 @@
-export { default as Navbar } from './Navbar'
-export { default as Sidebar } from './Sidebar'
-export { default as AppMain } from './AppMain'
-export { default as BackPlayground } from './BackPlayground'
-export { default as ListTables } from './ListTables'
-export { default as Footer } from './Footer'
+export { default as Tab } from './Tab'
+export { default as Card } from './Card'