style:修改左侧导航及头部导航栏,创建左侧导航相关页面

src/App.vue

@@ -1,18 +1,39 @@
 <template>
   <div id="container">
-    <main>
-      <router-view />
-    </main>
+    <nav-top />
+    <div style="display: flex">
+      <nav-left />
+      <div style="flex: 1; display: flex; flex-direction: column; width: 0">
+        <open-pages />
+        <bread-crumb />
+        <main>
+          <a-config-provider :locale="zhCN">
+            <router-view />
+          </a-config-provider>
+        </main>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { computed, defineComponent } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import NavLeft from "@/components/NavLeft";
+import NavTop from "@/components/NavTop";
+import OpenPages from "@/components/OpenPages";
+import BreadCrumb from "@/components/BreadCrumb";
+import zhCN from "ant-design-vue/es/locale/zh_CN";
 export default defineComponent({
+  components: {
+    NavLeft,
+    NavTop,
+    OpenPages,
+    BreadCrumb,
+  },
   setup() {
     const router = useRouter();
     const route = useRoute();
-    console.log("router", router.getRoutes(), route);
+    // console.log("router", router.getRoutes(), route);
     const routes = computed(() => {
       return router.getRoutes().filter((e) => e.meta?.isLink);
     });
@@ -22,6 +43,7 @@ export default defineComponent({
     return {
       routes,
       name: currentRouteName,
+      zhCN,
     };
   },
 });
@@ -50,8 +72,12 @@ export default defineComponent({
 
   main {
     flex: 1;
-    width: 100%;
+    width: calc(100% - 40px);
+    // margin-bottom: 20px;
+    margin: 0px 20px 20px 20px;
     box-sizing: border-box;
+    background: #ffffff;
+    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
   }
   // @media screen and (max-width: 1366px) {
   //   .cmMain {