diff --git a/web/src/router/index.js b/web/src/router/index.js
index c7df93a..7be7c65 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -49,6 +49,13 @@ const routes = [
         component: () =>
           import(/* webpackChunkName: "scan-data" */ '@/views/scan-data.vue'),
       },
+      {
+        path: '/scan-data/:id',
+        name: 'ScanDataDetails',
+        props: true,
+        component: () =>
+          import(/* webpackChunkName: "scan-data-details" */ '@/views/scan-data-details.vue'),
+      },
       {
         path: '/labeling',
         name: 'Labeling',
diff --git a/web/src/views/scan-data-details.vue b/web/src/views/scan-data-details.vue
new file mode 100644
index 0000000..a98d907
--- /dev/null
+++ b/web/src/views/scan-data-details.vue
@@ -0,0 +1,132 @@
+<template>
+  <div v-if="loading" class="loading">
+    <CSpinner />
+    读取中...
+  </div>
+  <div v-else>
+    <h1>Scan Data Details</h1>
+    <div class="frame" v-if="image_url">
+      <a :href="image_url" target="_blank">
+        <img :src="image_url"/>
+      </a>
+    </div>
+    <div v-else>
+      <p></p>
+    </div>
+    <table v-if="details">
+      <tbody>
+        <tr>
+          <td class="field-col">ID</td>
+          <td class="value-col">{{ details.id }}</td>
+        </tr>
+        <tr>
+          <td class="field-col">Datetime</td>
+          <td class="value-col">{{ format_timestamp(details.datetime) }}</td>
+        </tr>
+        <tr>
+          <td class="field-col">Code</td>
+          <td class="value-col">{{ details.code }}</td>
+        </tr>
+        <tr>
+          <td class="field-col">Product</td>
+          <td class="value-col">{{ details.product__name }}</td>
+        </tr>
+        <tr>
+          <td class="field-col">Phone Model</td>
+          <td class="value-col">{{ details.phone_model }}</td>
+        </tr>
+        <tr>
+          <td class="field-col">Succeeded</td>
+          <td class="value-col">{{ details.succeeded ? '成功' : '失败' }}</td>
+        </tr>
+        <tr>
+          <td class="field-col">IP</td>
+          <td class="value-col">{{ details.ip }}</td>
+        </tr>
+        <tr>
+          <td class="field-col">Location</td>
+          <td class="value-col">{{ details.location }}</td>
+        </tr>
+        <tr>
+          <td class="field-col">Labels</td>
+          <td class="value-col">{{ details.labels }}</td>
+        </tr>
+        <tr>
+          <td class="field-col">Message</td>
+          <td class="value-col"><pre>{{ details.message }}</pre></td>
+        </tr>
+        <tr>
+          <td class="field-col">Client log</td>
+          <td class="value-col"><pre>{{ details.client_log }}</pre></td>
+        </tr>
+      </tbody>
+    </table>
+    <pre>{{ details }}</pre>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScanDataDetails',
+  props: ['id'],
+  components: {
+  },
+  data: function () {
+    return {
+      details: null,
+    };
+  },
+  computed: {
+    resource_uri: function() {
+      return "/api/v1/scan-data/" + this.id + "/";
+    },
+    image_url: function() {
+      if (!this.details) {
+        return null;
+      }
+      return '/api/v1/oss-image/?token=' + this.$root.token + "&name=" + this.details.image;
+    },
+  },
+  methods: {
+    async reload() {
+      this.loading = true;
+      var r = await this.$root.api_get(this.resource_uri);
+      this.details = r.data;
+      this.loading = false;
+    },
+  },
+  mounted() {
+    this.reload();
+  },
+}
+</script>
+
+<style scoped>
+.field-col {
+  min-width: 200px;
+  font-weight: bold;
+}
+.value-col {
+  width: 100%;
+}
+table {
+  margin: 20px 0;
+  width: 100%;
+}
+tr {
+  height: 3rem;
+  border-bottom: 1px solid #ccc;
+}
+pre {
+  border: 1px solid #ccc;
+  font-family: monospace;
+  padding: 20px;
+  background-color: #000;
+  color: #999;
+  white-space: pre-wrap;
+}
+div.frame img {
+  max-width: 500px;
+}
+</style>
+