diff --git a/src/assets/img/aiaf-design/cheliu.png b/src/assets/img/aiaf-design/cheliu.png
new file mode 100644
index 00000000..82b2a0ef
Binary files /dev/null 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
new file mode 100644
index 00000000..f3194a66
Binary files /dev/null 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
new file mode 100644
index 00000000..750bfd70
Binary files /dev/null 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
new file mode 100644
index 00000000..a55cfcd3
Binary files /dev/null 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 00000000..b3f75904
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 00000000..cd0ff822
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 00000000..a3e83839
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 00000000..681086d6
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 00000000..152b3031
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 00000000..3407f24c
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 00000000..19ace841
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 00000000..dbfd8b59
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
new file mode 100644
index 00000000..a139b1df
Binary files /dev/null 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 00000000..f32209f7
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
new file mode 100644
index 00000000..7c6769b3
Binary files /dev/null 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
new file mode 100644
index 00000000..728f9b6d
--- /dev/null
+++ b/src/assets/scss/modules/ai/index.scss
@@ -0,0 +1,42 @@
+@import "../../c/config";
+@import "../../c/function";
+
+.m-design {
+    img {
+        display: block;
+        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/router/index.js b/src/router/index.js
index 809d5ec8..e278ad84 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -282,6 +282,44 @@ router.beforeEach((to, from, next) => {
       url: "visual/heart/index",
       children: [],
     },
+    // {
+    //   icon: "icon-setting",
+    //   id: "44rq22222q2222",
+    //   name: "AI安防",
+    //   // url: "visual/basicinfo/basicInfoMain",
+    //   children: [
+    //     {
+    //       url: "/visual/ai/index",
+    //       name: "AI安防",
+    //       id: "5feawfwa111111efwa57",
+    //     },
+    //     {
+    //       url: "/visual/ai/renliu",
+    //       name: "人流数据",
+    //       id: "5fwaefwae222112fawef58",
+    //     },
+    //     {
+    //       url: "/visual/ai/cheliu",
+    //       name: "车流数据",
+    //       id: "erawerwecsxefwaw",
+    //     },
+    //     {
+    //       url: "/visual/ai/shebei",
+    //       name: "设备数据",
+    //       id: "zfzffewaf",
+    //     },
+    //     {
+    //       url: "/visual/ai/gongdan",
+    //       name: "工单数据",
+    //       id: "fewafwafewaefddd",
+    //     },
+    //     {
+    //       url: "/visual/ai/yujing",
+    //       name: "预警事件",
+    //       id: "545345fdsfs",
+    //     },
+    //   ],
+    // },
   ];
   fnAddDynamicMenuRoutes2(window.SITE_CONFIG["menuShujuList"]);
 
diff --git a/src/views/modules/visual/ai/cheliu.vue b/src/views/modules/visual/ai/cheliu.vue
new file mode 100644
index 00000000..2fb09d89
--- /dev/null
+++ b/src/views/modules/visual/ai/cheliu.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="m-design">
+    <img src="@/assets/img/aiaf-design/cheliu.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  mixins: [],
+  data() {
+    return {};
+  },
+  components: {},
+  methods: {},
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/ai/index.scss"
+  scoped
+></style>
\ No newline at end of file
diff --git a/src/views/modules/visual/ai/gongdan.vue b/src/views/modules/visual/ai/gongdan.vue
new file mode 100644
index 00000000..864149ed
--- /dev/null
+++ b/src/views/modules/visual/ai/gongdan.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="m-design">
+    <img src="@/assets/img/aiaf-design/gongdan.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  mixins: [],
+  data() {
+    return {};
+  },
+  components: {},
+  methods: {},
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/ai/index.scss"
+  scoped
+></style>
\ No newline at end of file
diff --git a/src/views/modules/visual/ai/index.vue b/src/views/modules/visual/ai/index.vue
new file mode 100644
index 00000000..132fac49
--- /dev/null
+++ b/src/views/modules/visual/ai/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="m-design">
+    <img src="@/assets/img/aiaf-design/index.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  mixins: [],
+  data() {
+    return {};
+  },
+  components: {},
+  methods: {},
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/ai/index.scss"
+  scoped
+></style>
\ No newline at end of file
diff --git a/src/views/modules/visual/ai/renliu.vue b/src/views/modules/visual/ai/renliu.vue
new file mode 100644
index 00000000..334c6182
--- /dev/null
+++ b/src/views/modules/visual/ai/renliu.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="m-design">
+    <img src="@/assets/img/aiaf-design/renliu.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  mixins: [],
+  data() {
+    return {};
+  },
+  components: {},
+  methods: {},
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/ai/index.scss"
+  scoped
+></style>
\ No newline at end of file
diff --git a/src/views/modules/visual/ai/shebei.vue b/src/views/modules/visual/ai/shebei.vue
new file mode 100644
index 00000000..3274ff82
--- /dev/null
+++ b/src/views/modules/visual/ai/shebei.vue
@@ -0,0 +1,44 @@
+<template>
+  <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>
+
+<script>
+export default {
+  mixins: [],
+  data() {
+    return {
+      currentNav: 'index'
+    };
+  },
+  components: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/ai/index.scss" scoped></style>
diff --git a/src/views/modules/visual/ai/yujing.vue b/src/views/modules/visual/ai/yujing.vue
new file mode 100644
index 00000000..0238cc5b
--- /dev/null
+++ b/src/views/modules/visual/ai/yujing.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="m-design">
+    <img src="@/assets/img/aiaf-design/yujing.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  mixins: [],
+  data() {
+    return {};
+  },
+  components: {},
+  methods: {},
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/ai/index.scss"
+  scoped
+></style>
\ No newline at end of file