diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index 4d58c2bb..e65ea519 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -16,3 +16,4 @@
 @import './views/entityExplorer/entityList/entityList';
 @import './views/entityExplorer/entityList/card';
 @import './views/entityExplorer/entityList/row';
+@import './views/entityExplorer/entityList/detailOverview';
diff --git a/src/assets/css/components/views/entityExplorer/entityList/detailOverview.scss b/src/assets/css/components/views/entityExplorer/entityList/detailOverview.scss
new file mode 100644
index 00000000..222a66d0
--- /dev/null
+++ b/src/assets/css/components/views/entityExplorer/entityList/detailOverview.scss
@@ -0,0 +1,115 @@
+.entity-detail-overview {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  padding: 0 30px;
+
+  .overview-item {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 10px;
+
+    .overview__title {
+      color: #333;
+      font-size: 14px;
+    }
+    .overview__content {
+      display: flex;
+      flex-direction: column;
+      padding: 8px 0 0 20px;
+
+      .overview__row {
+        display: flex;
+        flex-direction: row;
+        padding: 2px 0;
+        font-size: 14px;
+
+        &.overview__row--small-font {
+          font-size: 12px;
+        }
+        .show-more {
+          color: #8FA1BE;
+          cursor: pointer;
+        }
+        .row__label {
+          color: #6B717B;
+          padding-right: 20px;
+
+          &.row__label--width130 {
+            flex-basis: 130px;
+            padding-right: unset;
+          }
+          &.row__label--width160 {
+            flex-basis: 160px;
+            padding-right: unset;
+          }
+        }
+        .row__content {
+          display: flex;
+          color: #3976CB;
+
+          .alert-level-tag {
+            display: flex;
+            padding: 1px 4px;
+            margin-right: 6px;
+            border-radius: 2px;
+            color: white;
+
+            &.alert-level-tag--high {
+              background-color: #ED907B;
+            }
+            &.alert-level-tag--middle {
+              background-color: #FFAB66;
+            }
+            &.alert-level-tag--low {
+              background-color: #F6C738;
+            }
+          }
+          &.row__content--width200 {
+            width: 200px;
+          }
+        }
+        .row__contents {
+          display: flex;
+          flex-direction: column;
+
+          .row__content {
+            padding: 2px 0;
+
+            &:first-of-type {
+              padding-top: 0;
+            }
+            &:last-of-type {
+              padding-bottom: 0;
+            }
+          }
+        }
+        .row__desc {
+          color: #666666;
+        }
+      }
+    }
+
+    .overview__tags {
+      display: flex;
+
+      .overview__tag {
+        display: flex;
+        padding: 6px 15px;
+        margin-right: 20px;
+        background-color: #EFF6FE;
+        font-size: 14px;
+        border-radius: 4px;
+
+        .tag__value {
+          padding-right: 5px;
+          color: #3976CB;
+          font-weight: bold;
+        }
+        .tag__desc {
+          color: #3976CB;
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/views/entityExplorer/entityList/row.scss b/src/assets/css/components/views/entityExplorer/entityList/row.scss
index 118eb382..28e1f120 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/row.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/row.scss
@@ -31,6 +31,7 @@
   .cn-entity__case {
     flex: 1;
     display: flex;
+    flex-wrap: wrap;
     padding: 16px 0;
     margin-bottom: 1px;
     background-color: white;
@@ -110,5 +111,13 @@
         }
       }
     }
+    .cn-entity__detail-overview {
+      flex-basis: 100%;
+      padding: 0 10px;
+
+      .el-divider {
+        background-color: #EFF2F5;
+      }
+    }
   }
 }
diff --git a/src/views/entityExplorer/entityList/EntityList.vue b/src/views/entityExplorer/entityList/EntityList.vue
index 9e4a36b4..e4b33fa0 100644
--- a/src/views/entityExplorer/entityList/EntityList.vue
+++ b/src/views/entityExplorer/entityList/EntityList.vue
@@ -7,14 +7,14 @@
       <!-- 列表式 -->
       <template v-if="listMode === 'list'">
         <div class="entity-list--list">
-          <div v-if="isCollapse" @click="cancelCollapse" class="cn-entity__shadow"></div>
+          <div v-if="!isCollapse" @click="collapse" class="cn-entity__shadow"></div>
           <entity-row
               v-for="(data, index) in listData"
               :entity="data"
               :key="index"
               :ref="`entityRow${index}`"
               :index="index"
-              @showCollapse="showCollapse"
+              @switchCollapse="switchCollapse"
           ></entity-row>
         </div>
       </template>
@@ -73,7 +73,7 @@ export default {
       showDetail: false,
       typeName: '',
       entityList: [],
-      isCollapse: false,
+      isCollapse: true,
       collapseIndex: 0
     }
   },
@@ -103,13 +103,13 @@ export default {
     entityDetail (params) {
       this.$emit('showDetail', { ...params, icon: this.iconClass })
     },
-    showCollapse (isCollapse, index) {
+    switchCollapse (isCollapse, index) {
       this.isCollapse = isCollapse
       this.collapseIndex = index
     },
-    cancelCollapse () {
-      this.isCollapse = false
-      this.$refs[`entityRow${this.collapseIndex}`].cancelCollapse()
+    collapse () {
+      this.isCollapse = true
+      this.$refs[`entityRow${this.collapseIndex}`].collapse()
     }
   }
 }
diff --git a/src/views/entityExplorer/entityList/Row.vue b/src/views/entityExplorer/entityList/Row.vue
index 80065654..a7fbbfff 100644
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="cn-entity--list" :style="{zIndex: isCollapse ? 1 : 'unset'}">
+  <div class="cn-entity--list" :style="{zIndex: !isCollapse ? 1 : 'unset'}">
     <!-- 左侧下拉按钮 -->
     <div class="cn-entity__collapse">
-      <span @click="showCollapse" :class="{'reg-down': isCollapse}"><i class="cn-icon cn-icon-arrow-right"></i></span>
+      <span @click="switchCollapse" :class="{'reg-down': !isCollapse}"><i class="cn-icon cn-icon-arrow-right"></i></span>
     </div>
     <div class="cn-entity__case">
       <div class="cn-entity__icon"><i :class="iconClass"></i></div>
@@ -84,35 +84,48 @@
                 <span>{{entityData.securityCount || '-'}}</span>
               </div>
             </div>
-            <div class="show-detail" :style="{visibility: isCollapse ? 'visible' : 'hidden'}">{{$t('overall.detail')}}>></div>
+            <div class="show-detail" :style="{visibility: !isCollapse ? 'visible' : 'hidden'}">{{$t('overall.detail')}}>></div>
           </div>
-          <div class="body__detail"></div>
         </div>
       </div>
+      <el-collapse-transition>
+        <div class="cn-entity__detail-overview" v-show="!isCollapse">
+          <el-divider></el-divider>
+          <detail-overview
+              :entity="entityData"
+          ></detail-overview>
+        </div>
+      </el-collapse-transition>
     </div>
   </div>
 </template>
 
 <script>
 import entityListMixin from './entityListMixin'
+import DetailOverview from '@/views/entityExplorer/entityList/detailOverview/DetailOverview'
 export default {
   name: 'Row',
   props: {
     index: Number
   },
+  components: {
+    DetailOverview
+  },
   mixins: [entityListMixin],
   data () {
     return {
-      isCollapse: false
+      isCollapse: true // 是否是折叠状态
     }
   },
   methods: {
-    showCollapse () {
+    /* 切换折叠状态 */
+    switchCollapse () {
       this.isCollapse = !this.isCollapse
-      this.$emit('showCollapse', this.isCollapse, this.index)
+      this.$emit('switchCollapse', this.isCollapse, this.index)
     },
-    cancelCollapse () {
-      this.isCollapse = false
+    /* 设为折叠状态 */
+    collapse () {
+      this.isCollapse = true
     }
   }
 }
diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue
new file mode 100644
index 00000000..f706f053
--- /dev/null
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.basicInfo')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label row__label--width130">APP ID</div>
+        <div class="row__content">XXX</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('entities.category')}}</div>
+        <div class="row__content">XXX</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('entities.subcategory')}}</div>
+        <div class="row__content">XXX</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('entities.riskLevel')}}</div>
+        <div class="row__content">XXX</div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.traffic')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
+        <div class="row__content">XXX</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.mean')}}</div>
+        <div class="row__content">XXX</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
+        <div class="row__contents">
+          <div class="row__content">XXX</div>
+          <div class="row__content">XXX</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.relationship')}}</div>
+    <div class="overview__content">
+      <div class="overview__tags">
+        <div class="overview__tag">
+          <span class="tag__value">5</span>
+          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
+        </div>
+        <div class="overview__tag">
+          <span class="tag__value">8</span>
+          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('overall.alert')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.recentAlert')}}</div>
+        <div class="row__content">30</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--high">High</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--middle">Middle</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--low">Low</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="show-more">{{$t('overall.showMore')}}>></div>
+      </div>
+    </div>
+  </div>
+  <div class="overview-item">
+    <div class="overview__title">{{$t('entities.securityEvents')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label">{{$t('entities.recentSecurity')}}</div>
+        <div class="row__content">20</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--high">High</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--middle">Middle</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="row__label row__label--width160">2011-11-15 12:23:34</div>
+        <div class="row__content row__content--width200">
+          <div class="alert-level-tag alert-level-tag--low">Low</div>
+          <div>High RTT Times</div>
+        </div>
+        <div class="row__desc">中位数超出阈值</div>
+      </div>
+      <div class="overview__row overview__row--small-font">
+        <div class="show-more">{{$t('overall.showMore')}}>></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
diff --git a/src/views/entityExplorer/entityList/detailOverview/DetailOverview.vue b/src/views/entityExplorer/entityList/detailOverview/DetailOverview.vue
new file mode 100644
index 00000000..84c2b5cb
--- /dev/null
+++ b/src/views/entityExplorer/entityList/detailOverview/DetailOverview.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="entity-detail-overview">
+    <template v-if="entity.entityType === 'ip'">
+      <ip-overview></ip-overview>
+    </template>
+    <template v-else-if="entity.entityType === 'domain'">
+      <domain-overview></domain-overview>
+    </template>
+    <template v-else-if="entity.entityType === 'app'">
+      <app-overview></app-overview>
+    </template>
+  </div>
+</template>
+
+<script>
+import App from './App'
+import Domain from './Domain'
+import Ip from './Ip'
+export default {
+  /* 详情概览 */
+  name: 'DetailOverview',
+  props: {
+    entity: Object
+  },
+  components: {
+    'domain-overview': Domain,
+    'app-overview': App,
+    'ip-overview': Ip
+  }
+}
+</script>
diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
new file mode 100644
index 00000000..031a0f13
--- /dev/null
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="overview-item">
+    <div class="overview__title"></div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label"></div>
+        <div class="row__content"></div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label"></div>
+        <div class="row__content"></div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label"></div>
+        <div class="row__content"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Domain'
+}
+</script>
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
new file mode 100644
index 00000000..99e7d2f1
--- /dev/null
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="overview-item">
+    <div class="overview__title"></div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label"></div>
+        <div class="row__content"></div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label"></div>
+        <div class="row__content"></div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label"></div>
+        <div class="row__content"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Ip'
+}
+</script>