ai安防2

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;
+            }
+        }
+    }
+}

src/views/modules/visual/ai/shebei.vue

@@ -1,6 +1,30 @@
 <template>
+  <div>
     <div class="m-design">
-    <img src="@/assets/img/aiaf-design/shebei.png" />
+      <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>
+<style lang="scss" src="@/assets/scss/modules/ai/index.scss" scoped></style>