diff --git a/packages/extra/AppOnlineManager/AppOnlineManager.vue b/packages/extra/AppOnlineManager/AppOnlineManager.vue
index e47e2e48..d09446d0 100644
--- a/packages/extra/AppOnlineManager/AppOnlineManager.vue
+++ b/packages/extra/AppOnlineManager/AppOnlineManager.vue
@@ -9,7 +9,13 @@
           </template>
         </ai-search-bar>
         <el-row type="flex" class="fill">
-          <div flex v-for="item in tableData" :key="item.id" class="itemCard">
+          <div flex v-for="item in tableData" :key="item.id" class="itemCard mar-b8 mar-r8">
+            <el-avatar :src="item.avatar"/>
+            <div class="fill mar-l8 mar-r8">
+              <h4 v-text="item.name"/>
+              <div class="dept" v-text="item.dept"/>
+            </div>
+            <i class="el-icon-switch-button"/>
           </div>
         </el-row>
       </template>
@@ -30,7 +36,12 @@ export default {
   },
   data() {
     return {
-      tableData: [],
+      tableData: [{
+        id: 1,
+        name: "艾贤凌阿啊",
+        dept: "研发部",
+        avatar: "http://wework.qpic.cn/wwhead/duc2TvpEgSQO4BpE0WZSZ8ReqnNFtOlpHOHmcRvBiaPO5BUEyszdnocog5MKktUUFq3iaVrsXFhKI/0"
+      }],
       search: {name: ""},
       page: {current: 1, size: 10, total: 0}
     }
@@ -51,9 +62,32 @@ export default {
   height: 100%;
 
   .itemCard {
-    padding: 8px 16px;
+    width: 180px;
+    height: 60px;
+    padding: 8px;
     border: 1px solid #eee;
     box-shadow: 0 4px 6px -2px rgb(15 15 21 / 15%);
+    background-color: #fff;
+    font-size: 16px;
+
+    .el-icon-switch-button {
+      font-weight: bold;
+      font-size: 20px;
+      cursor: pointer;
+      color: rgba(#f46,.6);
+      &:hover{
+        color: #f46;
+      }
+    }
+    h4{
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .dept {
+      color: #999;
+      font-size: 12px;
+    }
   }
 }
 </style>