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

src/components/BreadCrumb.vue

@@ -1,36 +1,130 @@
 <template>
   <div class="breadcrumb">
     <div style="margin-left: 21px">
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
-        <el-breadcrumb-item
-          ><a href="/">promotion management</a></el-breadcrumb-item
-        >
-        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
-        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
-      </el-breadcrumb>
+      <a-breadcrumb>
+        <a-breadcrumb-item v-for="(value, index) in list" :key="index">
+          <router-link
+            :to="value.href ? value.href : ''"
+            :style="{ display: value.href ? 'inline-block' : 'none' }"
+            >{{ value.name }}</router-link
+          >
+          <span :style="{ display: value.href ? 'none' : 'inline-block' }">{{
+            value.name
+          }}</span>
+        </a-breadcrumb-item>
+      </a-breadcrumb>
     </div>
   </div>
 </template>
 <script>
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, watch } from "vue";
+import { useRoute } from "vue-router";
 export default {
   name: "BreadCrumb",
   setup() {
-    const state = reactive({});
+    const state = reactive({
+      list: [],
+    });
+
+    const route = useRoute();
+    watch(
+      () => route.fullPath,
+      (n, o) => {
+        // console.log("监听路由");
+        console.log("new:" + n + ",old:" + o);
+
+        if (n === "/learningpath" || n === "/LearningPath") {
+          state.list = [
+            {
+              name: "学习路径",
+              href: "",
+              // href: "#/coursewaremanage",
+            },
+          ];
+        }
+        if (n === "/projectmanage" || n === "/ProjectManage") {
+          state.list = [
+            {
+              name: "项目中心",
+              href: "",
+              // href: "#/coursewaremanage",
+            },
+            {
+              name: "项目",
+              href: "",
+            },
+          ];
+        }
+        if (n === "/projectadd" || n === "/ProjectAdd") {
+          state.list = [
+            {
+              name: "项目",
+              href: "/projectmanage",
+            },
+            {
+              name: "创建项目",
+            },
+          ];
+        }
+        if (n === "/templatelibrary" || n === "/TemplateLibrary") {
+          state.list = [
+            {
+              name: "项目中心",
+            },
+            {
+              name: "模板库",
+            },
+          ];
+        }
+        if (n === "/coursemanage" || n === "/CourseManage") {
+          state.list = [
+            {
+              name: "课程库",
+              href: "",
+              // href: "#/coursewaremanage",
+            },
+            {
+              name: "课件管理",
+              href: "",
+            },
+          ];
+        }
+        if (n === "/coursewaremanage" || n === "/CoursewareManage") {
+          state.list = [
+            {
+              name: "课程库",
+            },
+            {
+              name: "课程管理",
+            },
+          ];
+        }
+      }
+    );
+
     return {
       ...toRefs(state),
     };
   },
 };
 </script>
-<style scoped lang="scss">
+<style lang="scss">
 .breadcrumb {
   width: 100%;
   height: 60px;
   display: flex;
   align-items: center;
-
-  // background-color: rgba(255, 255, 255, 0.5);
+  .el-breadcrumb__inner.is-link {
+    font-size: 14px;
+    font-weight: 400;
+    color: #878b92 !important;
+    line-height: 36px;
+  }
+  .el-breadcrumb__inner {
+    font-size: 14px;
+    font-weight: 400;
+    color: #363636 !important;
+    line-height: 36px;
+  }
 }
 </style>