diff --git a/src/assets/img/aiaf-design/cheliu.png b/src/assets/img/aiaf-design/cheliu.png
index 19a2bee4b..82b2a0ef6 100644
Binary files a/src/assets/img/aiaf-design/cheliu.png and b/src/assets/img/aiaf-design/cheliu.png differ
diff --git a/src/assets/img/aiaf-design/gongdan.png b/src/assets/img/aiaf-design/gongdan.png
index 19a2bee4b..f3194a661 100644
Binary files a/src/assets/img/aiaf-design/gongdan.png and b/src/assets/img/aiaf-design/gongdan.png differ
diff --git a/src/assets/img/aiaf-design/index.png b/src/assets/img/aiaf-design/index.png
index 19a2bee4b..750bfd70b 100644
Binary files a/src/assets/img/aiaf-design/index.png and b/src/assets/img/aiaf-design/index.png differ
diff --git a/src/assets/img/aiaf-design/renliu.png b/src/assets/img/aiaf-design/renliu.png
index 19a2bee4b..a55cfcd3d 100644
Binary files a/src/assets/img/aiaf-design/renliu.png and b/src/assets/img/aiaf-design/renliu.png differ
diff --git a/src/assets/img/aiaf-design/shebei-chongdianzhuang.png b/src/assets/img/aiaf-design/shebei-chongdianzhuang.png
new file mode 100644
index 000000000..b3f759046
Binary files /dev/null and b/src/assets/img/aiaf-design/shebei-chongdianzhuang.png differ
diff --git a/src/assets/img/aiaf-design/shebei-denggan.png b/src/assets/img/aiaf-design/shebei-denggan.png
new file mode 100644
index 000000000..cd0ff822d
Binary files /dev/null and b/src/assets/img/aiaf-design/shebei-denggan.png differ
diff --git a/src/assets/img/aiaf-design/shebei-fabu.png b/src/assets/img/aiaf-design/shebei-fabu.png
new file mode 100644
index 000000000..a3e838399
Binary files /dev/null and b/src/assets/img/aiaf-design/shebei-fabu.png differ
diff --git a/src/assets/img/aiaf-design/shebei-jiankong.png b/src/assets/img/aiaf-design/shebei-jiankong.png
new file mode 100644
index 000000000..681086d6f
Binary files /dev/null and b/src/assets/img/aiaf-design/shebei-jiankong.png differ
diff --git a/src/assets/img/aiaf-design/shebei-jinggai.png b/src/assets/img/aiaf-design/shebei-jinggai.png
new file mode 100644
index 000000000..152b3031a
Binary files /dev/null and b/src/assets/img/aiaf-design/shebei-jinggai.png differ
diff --git a/src/assets/img/aiaf-design/shebei-kakou.png b/src/assets/img/aiaf-design/shebei-kakou.png
new file mode 100644
index 000000000..3407f24cd
Binary files /dev/null and b/src/assets/img/aiaf-design/shebei-kakou.png differ
diff --git a/src/assets/img/aiaf-design/shebei-laoren.png b/src/assets/img/aiaf-design/shebei-laoren.png
new file mode 100644
index 000000000..19ace8418
Binary files /dev/null and b/src/assets/img/aiaf-design/shebei-laoren.png differ
diff --git a/src/assets/img/aiaf-design/shebei-menjin.png b/src/assets/img/aiaf-design/shebei-menjin.png
new file mode 100644
index 000000000..dbfd8b599
Binary files /dev/null and b/src/assets/img/aiaf-design/shebei-menjin.png differ
diff --git a/src/assets/img/aiaf-design/shebei.png b/src/assets/img/aiaf-design/shebei.png
index 19a2bee4b..a139b1df5 100644
Binary files a/src/assets/img/aiaf-design/shebei.png and b/src/assets/img/aiaf-design/shebei.png differ
diff --git a/src/assets/img/aiaf-design/yujing-alert.png b/src/assets/img/aiaf-design/yujing-alert.png
new file mode 100644
index 000000000..f32209f74
Binary files /dev/null and b/src/assets/img/aiaf-design/yujing-alert.png differ
diff --git a/src/assets/img/aiaf-design/yujing.png b/src/assets/img/aiaf-design/yujing.png
index 19a2bee4b..7c6769b39 100644
Binary files a/src/assets/img/aiaf-design/yujing.png and b/src/assets/img/aiaf-design/yujing.png differ
diff --git a/src/assets/scss/modules/ai/index.scss b/src/assets/scss/modules/ai/index.scss
index 8c377ac41..728f9b6d9 100644
--- a/src/assets/scss/modules/ai/index.scss
+++ b/src/assets/scss/modules/ai/index.scss
@@ -7,3 +7,36 @@
         width: 100%;
     }
 }
+
+.m-sidebar {
+    position: fixed;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100px;
+    .wrap {
+        background-color: rgba(#037, 0.6);
+        transform: translateX(50px);
+        transition: all ease 0.3s;
+        cursor: pointer;
+        border-radius: 4px;
+        box-shadow: 0 0 10px 1px #fff;
+        &:hover {
+            transform: translateX(0);
+            background-color: rgba(#037, 0.9);
+        }
+        .nav {
+            color: rgba(#fff, 0.8);
+            text-align: center;
+            font-size: 14px;
+            line-height: 40px;
+            &:hover {
+                color: #fff;
+            }
+            &.z-on {
+                color: #ffa;
+                font-weight: bold;
+            }
+        }
+    }
+}
diff --git a/src/views/modules/visual/ai/shebei.vue b/src/views/modules/visual/ai/shebei.vue
index 4f88c4bc9..3274ff823 100644
--- a/src/views/modules/visual/ai/shebei.vue
+++ b/src/views/modules/visual/ai/shebei.vue
@@ -1,6 +1,30 @@
 <template>
-  <div class="m-design">
-    <img src="@/assets/img/aiaf-design/shebei.png" />
+  <div>
+    <div class="m-design">
+      <img v-show="currentNav=='index'" src="@/assets/img/aiaf-design/shebei.png" />
+      <img v-show="currentNav=='jiankong'" src="@/assets/img/aiaf-design/shebei-jiankong.png" />
+      <img v-show="currentNav=='kakou'" src="@/assets/img/aiaf-design/shebei-kakou.png" />
+      <img v-show="currentNav=='menjin'" src="@/assets/img/aiaf-design/shebei-menjin.png" />
+      <img v-show="currentNav=='chongdianzhuang'" src="@/assets/img/aiaf-design/shebei-chongdianzhuang.png" />
+      <img v-show="currentNav=='denggan'" src="@/assets/img/aiaf-design/shebei-denggan.png" />
+      <img v-show="currentNav=='jinggai'" src="@/assets/img/aiaf-design/shebei-jinggai.png" />
+      <img v-show="currentNav=='fabu'" src="@/assets/img/aiaf-design/shebei-fabu.png" />
+      <img v-show="currentNav=='laoren'" src="@/assets/img/aiaf-design/shebei-laoren.png" />
+    </div>
+
+    <div class="m-sidebar">
+      <div class="wrap">
+        <div class="nav" @click="currentNav='index'" :class="{'z-on': currentNav=='index'}">设备</div>
+        <div class="nav" @click="currentNav='jiankong'" :class="{'z-on': currentNav=='jiankong'}">监控</div>
+        <div class="nav" @click="currentNav='kakou'" :class="{'z-on': currentNav=='kakou'}">卡口</div>
+        <div class="nav" @click="currentNav='menjin'" :class="{'z-on': currentNav=='menjin'}">门禁</div>
+        <div class="nav" @click="currentNav='chongdianzhuang'" :class="{'z-on': currentNav=='chongdianzhuang'}">充电桩</div>
+        <div class="nav" @click="currentNav='denggan'" :class="{'z-on': currentNav=='denggan'}">智能灯杆</div>
+        <div class="nav" @click="currentNav='jinggai'" :class="{'z-on': currentNav=='jinggai'}">智能井盖</div>
+        <div class="nav" @click="currentNav='fabu'" :class="{'z-on': currentNav=='fabu'}">信息发布</div>
+        <div class="nav" @click="currentNav='laoren'" :class="{'z-on': currentNav=='laoren'}">老人关怀</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,15 +32,13 @@
 export default {
   mixins: [],
   data() {
-    return {};
+    return {
+      currentNav: 'index'
+    };
   },
   components: {},
   methods: {},
 };
 </script>
 
-<style
-  lang="scss"
-  src="@/assets/scss/modules/ai/index.scss"
-  scoped
-></style>
\ No newline at end of file
+<style lang="scss" src="@/assets/scss/modules/ai/index.scss" scoped></style>