1

src/views/securityCheck/index.vue

@@ -1,5 +1,111 @@
 <template>
-  <div>
-    <router-view />
-  </div>
+  <a-layout id="components-layout-demo-custom-trigger">
+    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
+      <div class="logo" />
+      <a-menu theme="dark" mode="inline">
+        <a-menu-item
+          :key="index"
+          v-for="(item, index) in router"
+          @click="up(item.path)"
+        >
+          <a-icon type="user" />
+          <span>
+            {{ item.name }}
+          </span>
+        </a-menu-item>
+      </a-menu>
+    </a-layout-sider>
+    <a-layout>
+      <!-- <a-layout-header style="background: #fff; padding: 0">
+        <a-icon
+          class="trigger"
+          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
+          @click="() => (collapsed = !collapsed)"
+        />
+      </a-layout-header> -->
+      <a-layout-content
+        :style="{
+          margin: '24px 16px',
+          padding: '24px',
+          background: '#fff',
+          minHeight: '280px',
+        }"
+      >
+        <router-view />
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
 </template>
+<script>
+export default {
+  data() {
+    return {
+      collapsed: false,
+      router: [
+        {
+          path: "/cargoCharts",
+          name: "航空货物关联统计图",
+        },
+        {
+          path: "/cargoRelevanceTable",
+          name: "航空货物关联统计表",
+        },
+        {
+          path: "/cargoStatistics",
+          name: "航空货物综合统计",
+        },
+        {
+          path: "/cargoTable",
+          name: "航空货物综合统计表",
+        },
+        {
+          path: "/agent",
+          name: "代理人信息统计",
+        },
+        {
+          path: "/agentTable",
+          name: "代理人信息统计表",
+        },
+        {
+          path: "/securityChannel",
+          name: "安检通道综合效率",
+        },
+        {
+          path: "/comprehensive",
+          name: "安检通道综合效率日月",
+        },
+        {
+          path: "/waybillTable",
+          name: "运单管理",
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    up(data) {
+      console.log(data);
+      this.$router.push(data);
+    },
+  },
+};
+</script>
+<style>
+#components-layout-demo-custom-trigger .trigger {
+  font-size: 18px;
+  line-height: 64px;
+  padding: 0 24px;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+#components-layout-demo-custom-trigger .trigger:hover {
+  color: #1890ff;
+}
+
+#components-layout-demo-custom-trigger .logo {
+  height: 32px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 16px;
+}
+</style>