diff --git a/src/assets/imgs/ic_loading.png b/src/assets/imgs/ic_loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..01a717c648b51f1330b0e528171d6dc6eeceb2dd
Binary files /dev/null and b/src/assets/imgs/ic_loading.png differ
diff --git a/src/assets/imgs/ld_ic_high.png b/src/assets/imgs/ld_ic_high.png
new file mode 100644
index 0000000000000000000000000000000000000000..35853c82a224688a718fe858da7a5e4fec419453
Binary files /dev/null and b/src/assets/imgs/ld_ic_high.png differ
diff --git a/src/assets/imgs/ld_ic_low.png b/src/assets/imgs/ld_ic_low.png
new file mode 100644
index 0000000000000000000000000000000000000000..364aad8c619971b84f83383c1c6323cffbaaebe4
Binary files /dev/null and b/src/assets/imgs/ld_ic_low.png differ
diff --git a/src/assets/imgs/ld_ic_medium.png b/src/assets/imgs/ld_ic_medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..6fc979d1dd1645c39eb875c5bbd0fb62341b260d
Binary files /dev/null and b/src/assets/imgs/ld_ic_medium.png differ
diff --git a/src/assets/imgs/ld_ic_safe.png b/src/assets/imgs/ld_ic_safe.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c660514b865d084fa114b826927832e7db0b448
Binary files /dev/null and b/src/assets/imgs/ld_ic_safe.png differ
diff --git a/src/assets/imgs/ld_ic_spot_blue.png b/src/assets/imgs/ld_ic_spot_blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..907758290eb81fb42254efbf8c3ddab36c7fc626
Binary files /dev/null and b/src/assets/imgs/ld_ic_spot_blue.png differ
diff --git a/src/assets/imgs/ld_ic_spot_grey.png b/src/assets/imgs/ld_ic_spot_grey.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7ee26a045fde839c6b6ffeb249745332ee97a78
Binary files /dev/null and b/src/assets/imgs/ld_ic_spot_grey.png differ
diff --git a/src/assets/imgs/ld_ic_spot_orange.png b/src/assets/imgs/ld_ic_spot_orange.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d729321aefd6d3bdb9d561a25324d42e48d33ea
Binary files /dev/null and b/src/assets/imgs/ld_ic_spot_orange.png differ
diff --git a/src/assets/imgs/ld_ic_spot_red.png b/src/assets/imgs/ld_ic_spot_red.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6722bd39f389e8c82a794bda729528c4fa3aea9
Binary files /dev/null and b/src/assets/imgs/ld_ic_spot_red.png differ
diff --git a/src/assets/imgs/ld_ic_spot_yellow.png b/src/assets/imgs/ld_ic_spot_yellow.png
new file mode 100644
index 0000000000000000000000000000000000000000..159579cf32da8f98ae413ced735b61904dfe266f
Binary files /dev/null and b/src/assets/imgs/ld_ic_spot_yellow.png differ
diff --git a/src/assets/imgs/ld_ic_unknown.png b/src/assets/imgs/ld_ic_unknown.png
new file mode 100644
index 0000000000000000000000000000000000000000..f10eb471dbb4a1b4b2e7ef277059f80c4b327870
Binary files /dev/null and b/src/assets/imgs/ld_ic_unknown.png differ
diff --git a/src/assets/imgs/ld_l_ic_high.png b/src/assets/imgs/ld_l_ic_high.png
new file mode 100644
index 0000000000000000000000000000000000000000..30740f4d563c81d37dbc39bcc8dde26ea510d3cb
Binary files /dev/null and b/src/assets/imgs/ld_l_ic_high.png differ
diff --git a/src/assets/imgs/ld_l_ic_low.png b/src/assets/imgs/ld_l_ic_low.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce55d6b80ee4bbd59e2eab318c911af2ad80bafa
Binary files /dev/null and b/src/assets/imgs/ld_l_ic_low.png differ
diff --git a/src/assets/imgs/ld_l_ic_medium.png b/src/assets/imgs/ld_l_ic_medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..986ec78652262a7eb957665d25aea6b07ee8dded
Binary files /dev/null and b/src/assets/imgs/ld_l_ic_medium.png differ
diff --git a/src/assets/imgs/ld_l_ic_unknown.png b/src/assets/imgs/ld_l_ic_unknown.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc44babc3bfb924c962fd1d5895e564cf25416ac
Binary files /dev/null and b/src/assets/imgs/ld_l_ic_unknown.png differ
diff --git a/src/components/image-bugs.vue b/src/components/image-bugs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b678b5affa600c9312917ccb871771c812d8a035
--- /dev/null
+++ b/src/components/image-bugs.vue
@@ -0,0 +1,362 @@
+<template>
+  <div class="image_bugs" v-if="data">
+    <!-- 安全 -->
+    <span class="image_bug">
+      <el-tooltip placement="right-start" popper-class="image_bug_tooltip">
+        <div slot="content">
+          <div class="lower_title lower_title_01">
+            <span class="lower_title_img lower_title_img_01"></span>
+            漏洞严重程度：没有漏洞
+          </div>
+          <div style="padding:20px;">
+            <div class="bugs_font01">没有发现可识别的漏洞包</div>
+            <div class="bugs_font03">扫描完成时间：{{ time }}</div>
+          </div>
+        </div>
+        <span class="bugs_label security" v-if="severity == 1">安全</span>
+      </el-tooltip>
+    </span>
+    <!-- 未知 -->
+    <span class="image_bug">
+      <el-tooltip placement="right-start" popper-class="image_bug_tooltip">
+        <div slot="content">
+          <div class="lower_title lower_title_02">
+            <span class="lower_title_img lower_title_img_02"></span>
+            漏洞严重程度：未知
+          </div>
+          <div style="padding:20px;">
+            <div class="bugs_font01">
+              {{ components.total }}
+              个组件中
+              {{ components.severity_count }}
+              个含有漏洞
+            </div>
+            <div v-for="(s, index) in components.summary" :key="index">
+              <div class="bugs_font02" v-if="s.severity == 2">
+                <span class="unknown_img"></span>
+                未知 ：{{ s.count }}个
+              </div>
+              <div class="bugs_font02" v-if="s.severity == 1">
+                <span class="wu_img"></span>
+                无：{{ s.count }}个
+              </div>
+            </div>
+            <div class="bugs_font03">扫描完成时间：{{ time }}</div>
+          </div>
+        </div>
+        <span class="bugs_label unknown" v-if="severity == 2">未知</span>
+      </el-tooltip>
+    </span>
+    <!-- 较低 -->
+    <span class="image_bug">
+      <el-tooltip placement="right-start" popper-class="image_bug_tooltip">
+        <div slot="content">
+          <div class="lower_title lower_title_03">
+            <span class="lower_title_img lower_title_img_03"></span>
+            漏洞严重程度：较低
+          </div>
+          <div style="padding:20px;">
+            <div class="bugs_font01">
+              {{ components.total }}
+              个组件中
+              {{ components.severity_count }}
+              个含有漏洞
+            </div>
+            <div v-for="(s, index) in components.summary" :key="index">
+              <div class="bugs_font02" v-if="s.severity == 3">
+                <span class="warning"></span>
+                较低：{{ s.count }}个
+              </div>
+              <div class="bugs_font02" v-if="s.severity == 2">
+                <span class="unknown_img"></span>
+                未知：{{ s.count }}个
+              </div>
+              <div class="bugs_font02" v-if="s.severity == 1">
+                <span class="wu_img"></span>
+                无：{{ s.count }}个
+              </div>
+            </div>
+            <div class="bugs_font03">扫描完成时间：{{ time }}</div>
+          </div>
+        </div>
+        <span class="bugs_label lower" v-if="severity == 3">较低</span>
+      </el-tooltip>
+    </span>
+    <!-- 中等 -->
+    <span class="image_bug">
+      <el-tooltip placement="right-start" popper-class="image_bug_tooltip">
+        <div slot="content">
+          <div class="lower_title lower_title_04">
+            <span class="lower_title_img lower_title_img_04"></span>
+            漏洞严重程度：中等
+          </div>
+          <div style="padding:20px;">
+            <div class="bugs_font01">
+              {{ components.total }}
+              个组件中
+              {{ components.severity_count }}
+              个含有漏洞
+            </div>
+            <div v-for="(s, index) in components.summary" :key="index">
+              <div class="bugs_font02" v-if="s.severity == 4">
+                <span class="medium_img"></span>
+                中等：{{ s.count }}个
+              </div>
+              <div class="bugs_font02" v-if="s.severity == 3">
+                <span class="warning"></span>
+                较低：{{ s.count }}个
+              </div>
+              <div class="bugs_font02" v-if="s.severity == 2">
+                <span class="unknown_img"></span>
+                未知：{{ s.count }}个
+              </div>
+              <div class="bugs_font02" v-if="s.severity == 1">
+                <span class="wu_img"></span>
+                无：{{ s.count }}个
+              </div>
+            </div>
+            <div class="bugs_font03">扫描完成时间：{{ time }}</div>
+          </div>
+        </div>
+        <span class="bugs_label medium" v-if="severity == 4">中等</span>
+      </el-tooltip>
+    </span>
+    <!-- 严重 -->
+    <span class="image_bug">
+      <el-tooltip placement="right-start" popper-class="image_bug_tooltip">
+        <div slot="content">
+          <div class="lower_title lower_title_05">
+            <span class="lower_title_img lower_title_img_05"></span>
+            漏洞严重程度：严重
+          </div>
+          <div style="padding:20px;">
+            <div class="bugs_font01">
+              {{ components.total }}
+              个组件中
+              {{ components.severity_count }}
+              个含有漏洞
+            </div>
+            <div v-for="(s, index) in components.summary" :key="index">
+              <div class="bugs_font02" v-if="s.severity == 5">
+                <span class="seriousness_img"></span>
+                严重：{{ s.count }}个
+              </div>
+              <div class="bugs_font02" v-if="s.severity == 4">
+                <span class="medium_img"></span>
+                中等：{{ s.count }}个
+              </div>
+              <div class="bugs_font02" v-if="s.severity == 3">
+                <span class="warning"></span>
+                较低：{{ s.count }}个
+              </div>
+              <div class="bugs_font02" v-if="s.severity == 2">
+                <span class="unknown_img"></span>
+                未知：{{ s.count }}个
+              </div>
+              <div class="bugs_font02" v-if="s.severity == 1">
+                <span class="wu_img"></span>
+                无：{{ s.count }}个
+              </div>
+            </div>
+            <div class="bugs_font03">扫描完成时间：{{ time }}</div>
+          </div>
+        </div>
+        <span class="bugs_label seriousness" v-if="severity == 5">严重</span>
+      </el-tooltip>
+    </span>
+  </div>
+</template>
+
+<script>
+import helper from "@/services/helper";
+
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    severity: function() {
+      return this.data.severity;
+    },
+    time: function() {
+      return helper.dateFormat("YYYY-mm-dd HH:MM:SS", this.data.update_time);
+    },
+    components: function() {
+      return this.data.components;
+    },
+  },
+};
+</script>
+
+<style>
+.image_bugs {
+  display: inline-block;
+}
+.bugs_label {
+  border-radius: 4px;
+  padding: 2px 10px;
+  font-size: 12px;
+}
+.security {
+  background-color: #dde4ff;
+  border: solid 1px #9cb5f8;
+  color: #315efc;
+}
+.unknown {
+  background-color: #f4f7fc;
+  border: solid 1px #bcc1d0;
+  color: #58617a;
+}
+.lower {
+  background-color: #fff8dd;
+  border: solid 1px #f2d065;
+  color: #e79e00;
+}
+.medium {
+  background-color: #fff2e2;
+  border: solid 1px #ffc29a;
+  color: #ff7200;
+}
+.seriousness {
+  background-color: #ffebeb;
+  border: solid 1px #f2a6a6;
+  color: #da4251;
+}
+.bug_scaning {
+  background-color: #dde4ff;
+  color: #315efc;
+  margin-left: 27px;
+  padding: 3px 5px;
+}
+.image_bug_tooltip {
+  background: #1a2236 !important;
+  color: #f4f7fc !important;
+  border-radius: 10px !important;
+  padding: 0px !important;
+}
+.lower_title {
+  height: 55px;
+  width: 242px;
+  background-color: #242c43;
+  border-radius: 12px 12px 0px 0px;
+  border-bottom: 1px solid #3f4864;
+  text-align: left;
+  line-height: 55px;
+  vertical-align: middle;
+  font-size: 16px;
+  padding: 0px 20px;
+}
+.lower_title_img {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+.bug_scaning_img {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  vertical-align: middle;
+  background: url("../assets/imgs/ic_loading.png") right center no-repeat;
+}
+.lower_title_01 {
+  color: #5c82ff;
+}
+.lower_title_img_01 {
+  background: url("../assets/imgs/ld_ic_spot_blue.png") center center no-repeat;
+}
+.lower_title_02 {
+  color: #bcc1d0;
+}
+.lower_title_img_02 {
+  background: url("../assets/imgs/ld_ic_spot_grey.png") center center no-repeat;
+}
+.lower_title_03 {
+  color: #e79e00;
+}
+.lower_title_img_03 {
+  background: url("../assets/imgs/ld_ic_spot_yellow.png") center center
+    no-repeat;
+}
+.lower_title_04 {
+  color: #ff7200;
+}
+.lower_title_img_04 {
+  background: url("../assets/imgs/ld_ic_spot_orange.png") center center
+    no-repeat;
+}
+.lower_title_05 {
+  color: #da4251;
+}
+.lower_title_img_05 {
+  background: url("../assets/imgs/ld_ic_spot_red.png") center center no-repeat;
+}
+.el-tooltip__popper[x-placement^="right-start"] .popper__arrow {
+  border-right-color: #1a2236;
+  margin-top: 1px;
+}
+.el-tooltip__popper[x-placement^="right-start"] .popper__arrow:after {
+  border-right-color: #1a2236;
+  margin-top: 1px;
+}
+.warning {
+  width: 15px;
+  height: 15px;
+  display: inline-block;
+  background: url("../assets/imgs/ld_l_ic_low.png") center center no-repeat;
+  margin-right: 10px;
+  vertical-align: middle;
+  border-radius: 50%;
+}
+.bugs_font01 {
+  color: #bcc1d0;
+  font-size: 14px;
+  padding-bottom: 10px;
+}
+.bugs_font02 {
+  color: #f4f7fc;
+  font-size: 14px;
+  padding: 5px 0;
+}
+.bugs_font03 {
+  color: #bcc1d0;
+  font-size: 12px;
+  padding: 12px 0 0 0;
+}
+.seriousness_img {
+  width: 15px;
+  height: 15px;
+  display: inline-block;
+  background: url("../assets/imgs/ld_l_ic_high.png") center center no-repeat;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+.medium_img {
+  width: 15px;
+  height: 15px;
+  display: inline-block;
+  background: url("../assets/imgs/ld_l_ic_medium.png") center center no-repeat;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+.wu_img {
+  width: 15px;
+  height: 15px;
+  display: inline-block;
+  background: url("../assets/imgs/ld_ic_safe.png") center center no-repeat;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+.unknown_img {
+  width: 15px;
+  height: 15px;
+  display: inline-block;
+  background: url("../assets/imgs/ld_l_ic_unknown.png") center center no-repeat;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+</style>
diff --git a/src/components/image-detail.vue b/src/components/image-detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9d3e8120721bf3f3ea480765ac66d989e23c37fc
--- /dev/null
+++ b/src/components/image-detail.vue
@@ -0,0 +1,382 @@
+<template>
+  <div class="image_detail">
+    <apass-dialog ref="listdialog" :title="title" width="985px">
+      <template slot="content">
+        <div class="apass_table">
+          <el-table :data="imageData">
+            <el-table-column width="20"></el-table-column>
+            <el-table-column label="版本号" align="left">
+              <template slot-scope="scope">
+                {{ scope.row.name }}
+              </template>
+            </el-table-column>
+            <el-table-column label="作者" align="left">
+              <template slot-scope="scope">
+                {{ scope.row.creator }}
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" width="180" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.created }}
+              </template>
+            </el-table-column>
+            <el-table-column label="大小" align="center">
+              <template slot-scope="scope">
+                {{ getSize(scope.row.size) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="漏洞" width="160" align="center">
+              <template slot-scope="scope">
+                <image-bugs :data="scope.row.scan_overview"></image-bugs>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="160" align="center">
+              <template slot-scope="scope">
+                <div class="row_action">
+                  <a class="btn" @click="downloadAction(scope.row)">下载</a>
+                  <span class="interval_line">|</span>
+                  <a class="btn warn" @click="deleteAction(scope.row)">删除</a>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </apass-dialog>
+
+    <apass-dialog
+      ref="actiondialog"
+      :title="dialogInfo.title"
+      :msg="dialogInfo.msg"
+      :submit="dialogInfo.submit"
+    ></apass-dialog>
+  </div>
+</template>
+
+<script>
+import apassDialog from "./apass-dialog";
+import imageBugs from "./image-bugs";
+
+export default {
+  components: {
+    apassDialog,
+    imageBugs,
+  },
+  props: {
+    image: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  data: () => ({
+    imageData: [
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 2,
+          },
+          severity: 5,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 2,
+          },
+          severity: 4,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 2,
+          },
+          severity: 3,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 2,
+          },
+          severity: 2,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 4,
+          },
+          severity: 1,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 2,
+          },
+          severity: 2,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 2,
+          },
+          severity: 2,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 2,
+          },
+          severity: 2,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 2,
+          },
+          severity: 2,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 2,
+          },
+          severity: 2,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 2,
+          },
+          severity: 2,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+      {
+        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
+        scan_overview: {
+          components: {
+            summary: [
+              { count: 2, severity: 2 },
+              { count: 25, severity: 1 },
+            ],
+            total: 27,
+            severity_count: 2,
+          },
+          severity: 2,
+          creation_time: "2020-05-27T10:17:40.671664Z",
+          update_time: "2020-07-02T22:39:27.97828Z",
+        },
+        size: 20950567,
+        name: "1.0",
+        creator: "RamHsu",
+        created: "1994-03-26 11:10:00",
+      },
+    ],
+    dialogInfo: {
+      title: "",
+      msg: "",
+      submit: null,
+    },
+  }),
+  computed: {
+    title() {
+      return "镜像：" + ((this.image && this.image.name) || "-");
+    },
+  },
+  methods: {
+    showDialog() {
+      this.$refs.listdialog.show();
+    },
+    downloadAction(item) {
+      console.log("download " + item.name);
+    },
+    deleteAction(item) {
+      this.dialogInfo.title = "";
+      this.dialogInfo.msg = "是否删除该镜像？";
+      this.dialogInfo.submit = () => {
+        console.log("delete " + item.name);
+
+        /* this.$http
+          .delete(`/apaas/hubApi/image/del/${item.name}`)
+          .then((response) => {
+            if (response.data.success == 1) {
+              //
+            } else {
+              this.$message({
+                message: `删除失败`,
+                type: "warning",
+              });
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+            this.$message({
+              message: `删除失败`,
+              type: "warning",
+            });
+          }); */
+      };
+      this.$refs.actiondialog.show();
+    },
+    getSize(value = 0) {
+      return (value / 1024 / 1024).toFixed(2) + "MB";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.apass_table {
+  max-height: 433px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+</style>
+
+<style>
+.apass_dialog .image_detail .el-dialog__body {
+  padding: 0 20px 20px;
+}
+.apass_dialog .image_detail .el-dialog__footer {
+  display: none;
+}
+</style>
diff --git a/src/components/menu.vue b/src/components/menu.vue
index 1dc6c4f979336683cc4686ca59841b7796adcc23..0924d71ef06299b8f9249c17f3acd5ef9f86d392 100644
--- a/src/components/menu.vue
+++ b/src/components/menu.vue
@@ -1,26 +1,38 @@
 <template>
   <div class="menu">
     <img src="../assets/imgs/home_img_logo.png" alt class="logo" />
-    <div style="float:right;cursor: pointer;position:relative;" class="user_hover">
+    <div
+      style="float:right;cursor: pointer;position:relative;"
+      class="user_hover"
+    >
       <span
-        v-if="userInfo.user_name && userInfo.user_name !=''"
+        v-if="userInfo.user_name && userInfo.user_name != ''"
         class="user"
-      >{{ userInfo.user_name }}</span>
+        >{{ userInfo.user_name }}</span
+      >
       <span v-else @click="gotopage('login')" class="user">请登录</span>
       <img
-        :class="userInfo.picture_path ? 'user_pic': 'user_default'"
+        :class="userInfo.picture_path ? 'user_pic' : 'user_default'"
         :src="
           userInfo.picture_path || require('../assets/imgs/home_ic_user.png')
         "
       />
-      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="user_menu">
+      <div
+        v-if="userInfo.user_name && userInfo.user_name != ''"
+        class="user_menu"
+      >
         <div
           v-for="(item, index) in user_arr"
           :key="index + 700"
           @click="gotopage(item.path)"
-        >{{ item.name }}</div>
+        >
+          {{ item.name }}
+        </div>
       </div>
-      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="sj"></div>
+      <div
+        v-if="userInfo.user_name && userInfo.user_name != ''"
+        class="sj"
+      ></div>
     </div>
     <div
       style="float:right;cursor: pointer;position:relative;"
@@ -28,10 +40,18 @@
       @click="gotopage('/shop/shopping_cart')"
     >
       <div class="car">
-        <el-badge v-if="menuCartNum != 0" :value="menuCartNum" :max="99" class="number"></el-badge>
+        <el-badge
+          v-if="menuCartNum != 0"
+          :value="menuCartNum"
+          :max="99"
+          class="number"
+        ></el-badge>
         <img src="../assets/imgs/home_ic_shop.png" alt class="car_img" />
       </div>
-      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="shop_menu">
+      <div
+        v-if="userInfo.user_name && userInfo.user_name != ''"
+        class="shop_menu"
+      >
         <div class="shop_list_title">最近加入的服务：</div>
         <div
           v-for="(item, index) in shopping_list"
@@ -42,35 +62,44 @@
           <div class="shop_cell_msgs">
             <p @click="getDetail(item.id)" class="shop_cell_name over_one">
               {{
-              item.service_id == 0
-              ? item.application.app_name
-              : item.service.name
+                item.service_id == 0
+                  ? item.application.app_name
+                  : item.service.name
               }}
             </p>
             <p class="shop_cell_msg bover_one">
               {{
-              item.service_id == 0
-              ? item.application.ywly
-              : item.service.sectors_name
+                item.service_id == 0
+                  ? item.application.ywly
+                  : item.service.sectors_name
               }}
             </p>
             <p class="shop_cell_msg over_one">
               {{
-              item.service_id == 0
-              ? item.application.org
-              : item.service.organization_name
+                item.service_id == 0
+                  ? item.application.org
+                  : item.service.organization_name
               }}
             </p>
           </div>
           <div>
-            <img @click.stop="deleteItem(item.id)" src="../assets/imgs/ic_delete.png" alt />
+            <img
+              @click.stop="deleteItem(item.id)"
+              src="../assets/imgs/ic_delete.png"
+              alt
+            />
           </div>
         </div>
         <div class="shop_footer">
-          <el-button @click="settlement" size="small" class="shop_settlement">去购物车申请结算</el-button>
+          <el-button @click="settlement" size="small" class="shop_settlement"
+            >去购物车申请结算</el-button
+          >
         </div>
       </div>
-      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="shop_sj"></div>
+      <div
+        v-if="userInfo.user_name && userInfo.user_name != ''"
+        class="shop_sj"
+      ></div>
     </div>
 
     <div style="float:right">
@@ -82,14 +111,24 @@
         :style="{ color: now_menu == item.visit_url ? '#fff' : '' }"
       >
         {{ item.menu_name }}
-        <div class="user_menu" v-if="item.Child && item.Child.length" style="left: 30px;">
+        <div
+          class="user_menu"
+          v-if="item.Child && item.Child.length"
+          style="left: 30px;"
+        >
           <div
             v-for="(v, indexs) in item.Child"
             :key="indexs + 700"
             @click.stop="gotoChildPage(v, item.visit_url)"
-          >{{ v.menu_name }}</div>
+          >
+            {{ v.menu_name }}
+          </div>
         </div>
-        <div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></div>
+        <div
+          class="sj"
+          v-if="item.Child && item.Child.length"
+          style="left: 60px;"
+        ></div>
         <div class="bottom_show" v-if="now_menu == item.visit_url"></div>
       </div>
     </div>
@@ -107,10 +146,10 @@ export default {
         { name: "消息通知", path: "/user/message" },
         { name: "收银中心", path: "" },
         { name: "关于BD-aPaaS", path: "" },
-        { name: "退出登录", path: "logout" }
+        { name: "退出登录", path: "logout" },
       ],
       shopping_list: [],
-      menuCartNum: 0
+      menuCartNum: 0,
     };
   },
   mounted() {
@@ -123,12 +162,12 @@ export default {
     },
     userInfo() {
       return this.$store.state.userInfo || {};
-    }
+    },
   },
   watch: {
     getMenuCartState(newVal) {
       this.getList();
-    }
+    },
   },
   methods: {
     gotopage(n) {
@@ -146,7 +185,7 @@ export default {
     },
     deleteItem(id) {
       let query = [id];
-      this.$api.serviceShop.delShoppingCart(query).then(response => {
+      this.$api.serviceShop.delShoppingCart(query).then((response) => {
         this.getList();
       });
     },
@@ -175,7 +214,7 @@ export default {
       }
     },
     getList() {
-      this.$api.serviceShop.getShoppingCart().then(response => {
+      this.$api.serviceShop.getShoppingCart().then((response) => {
         if (response.data.success == "1") {
           this.menuCartNum = response.data.data.valid
             ? response.data.data.valid.length
@@ -194,14 +233,15 @@ export default {
       this.now_menu = visit_url ? visit_url : "/services_shop";
     },
     getNowMenu() {
-      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(response => {
+      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
         if (response.data.success == 1) {
-          this.menu_arr = response.data.data[0].Child;
+          this.menu_arr =
+            (response.data.data[0] && response.data.data[0].Child) || [];
           this.getMenuIndex();
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -415,4 +455,4 @@ export default {
   line-height: 18px;
   padding: 0 7px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/workbench/app_build.vue b/src/pages/workbench/app_build.vue
index d4e11928bc2d5acb95c4e3d7bb10b880fc2cecaa..911ebf5511b68b1be243700702685f69ccbad540 100644
--- a/src/pages/workbench/app_build.vue
+++ b/src/pages/workbench/app_build.vue
@@ -94,6 +94,7 @@
             下一步
           </el-button>
         </div>
+        <image-detail ref="imageDetail" :image="selectedImage"></image-detail>
       </app-build-step>
       <app-build-step
         title="上传部署文件"
@@ -282,6 +283,7 @@ import appBuildStep from "@/components/app-build-steps/app-build-step";
 import apassTable from "@/components/apass-table";
 import uploadFile from "@/components/general/upload_file";
 import apassDialog from "@/components/apass-dialog";
+import imageDetail from "@/components/image-detail";
 
 export default {
   components: {
@@ -290,6 +292,7 @@ export default {
     apassTable,
     uploadFile,
     apassDialog,
+    imageDetail,
   },
   data: () => ({
     step: 0,
@@ -357,6 +360,7 @@ export default {
       msg: "",
       submit: null,
     },
+    selectedImage: null,
   }),
   methods: {
     preStep() {
@@ -570,8 +574,9 @@ export default {
         return "";
       }
     },
-    showDetail(item) {
-      console.log(item);
+    showImageDetail(item) {
+      this.selectedImage = item;
+      this.$refs.imageDetail.showDialog();
     },
   },
   mounted() {
@@ -581,7 +586,7 @@ export default {
         prop: "name",
         align: "left",
         type: "button",
-        callback: this.showDetail,
+        callback: this.showImageDetail,
       },
       {
         label: "版本号",