style:增加左侧导航及头部导航栏

src/App.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="container">
+    <main>
+      <router-view />
+    </main>
+  </div>
+</template>
+<script>
+import { computed, defineComponent } from "vue";
+import { useRouter, useRoute } from "vue-router";
+export default defineComponent({
+  setup() {
+    const router = useRouter();
+    const route = useRoute();
+    console.log("router", router.getRoutes(), route);
+    const routes = computed(() => {
+      return router.getRoutes().filter((e) => e.meta?.isLink);
+    });
+
+    const currentRouteName = computed(() => route.name);
+
+    return {
+      routes,
+      name: currentRouteName,
+    };
+  },
+});
+</script>
+<style lang="scss">
+#app {
+  // font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
+  // sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  height: 100%;
+}
+
+#container {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  min-width: 1000px;
+  min-height: 100%;
+  background-color: rgba(245, 247, 250, 1);
+
+  main {
+    flex: 1;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  // @media screen and (max-width: 1366px) {
+  //   .cmMain {
+  //     width: 750px;
+  //   }
+  // }
+  // @media screen and (min-width: 1367px) and (max-width: 1680px) {
+  //   .cmMain {
+  //     width: 1010px;
+  //   }
+  // }
+  // @media screen and (min-width: 1681px) and (max-width: 1920px) {
+  //   .cmMain {
+  //     width: 1270px;
+  //   }
+  // }
+  // @media screen and (min-width: 1921px) {
+  //   .cmMain {
+  //     width: 1270px;
+  //   }
+  // }
+}
+</style>

src/assets/scss/common.scss

@@ -0,0 +1,7 @@
+html,
+body {
+		height: 100vh;
+		margin: 0;
+	 padding: 0;
+    // overflow-y: auto;
+}

src/components/BreadCrumb.vue

@@ -0,0 +1,36 @@
+<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>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "BreadCrumb",
+  setup() {
+    const state = reactive({});
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.breadcrumb {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+
+  // background-color: rgba(255, 255, 255, 0.5);
+}
+</style>

src/components/NavLeft.vue

@@ -0,0 +1,325 @@
+<template>
+  <div
+    class="navLeft"
+    :style="{
+      width: packup ? '100px' : '208px',
+      'min-height': screenHeight - 80 + 'px',
+    }"
+  >
+    <div style="display: flex; justify-content: flex-end">
+      <img
+        class="packup"
+        src="../assets/images/navleft/packup.png"
+        @click="packUp"
+        :style="{ 'margin-right': packup ? '36px' : '14px' }"
+      />
+    </div>
+    <div
+      style="width: 100%; margin-top: 26px"
+      :style="{ display: packup ? 'none' : 'block' }"
+    >
+      <el-row class="tac">
+        <el-col :span="12">
+          <el-menu
+            default-active="1"
+            class="el-menu-vertical-demo"
+            @open="handleOpen"
+            @close="handleClose"
+          >
+            <el-menu-item index="1">
+              <div class="imgBox">
+                <img
+                  style="width: 20px; height: 18px"
+                  src="../assets/images/navleft/studyPath.png"
+                />
+              </div>
+              <span class="title">学习路径</span>
+            </el-menu-item>
+            <el-sub-menu index="2">
+              <template #title>
+                <div class="imgBox">
+                  <img
+                    style="width: 15px; height: 15px"
+                    src="../assets/images/navleft/project.png"
+                  />
+                </div>
+                <span class="title">项目中心</span>
+              </template>
+              <el-menu-item index="2-1">
+                <div class="circle"></div>
+                <span>项目</span>
+              </el-menu-item>
+              <el-menu-item index="2-2">
+                <div class="circleActive"></div>
+                <span>模板库</span>
+              </el-menu-item>
+            </el-sub-menu>
+
+            <el-sub-menu index="3">
+              <template #title>
+                <div class="imgBox">
+                  <img
+                    style="width: 18px; height: 15px"
+                    src="../assets/images/navleft/course.png"
+                  />
+                </div>
+                <span class="title">课程库</span>
+              </template>
+              <el-menu-item index="3-1">
+                <div class="circle"></div>
+                <span>课件管理</span>
+              </el-menu-item>
+              <el-menu-item index="3-2">
+                <div class="circleActive"></div>
+                <span>课程管理</span>
+              </el-menu-item>
+            </el-sub-menu>
+
+            <el-menu-item index="4">
+              <div class="imgBox">
+                <img
+                  style="width: 19px; height: 19px"
+                  src="../assets/images/navleft/exam.png"
+                />
+              </div>
+              <span class="title">考试中心</span>
+            </el-menu-item>
+
+            <el-menu-item index="5">
+              <div class="imgBox">
+                <img
+                  style="width: 16px; height: 16px"
+                  src="../assets/images/navleft/survey.png"
+                />
+              </div>
+              <span class="title">调研管理</span>
+            </el-menu-item>
+
+            <el-menu-item index="6">
+              <div class="imgBox">
+                <img
+                  style="width: 17px; height: 15px"
+                  src="../assets/images/navleft/report.png"
+                />
+              </div>
+              <span class="title">报表中心</span>
+            </el-menu-item>
+            <el-menu-item index="7">
+              <div class="imgBox">
+                <img
+                  style="width: 17px; height: 18px"
+                  src="../assets/images/navleft/teacher.png"
+                />
+              </div>
+              <span class="title">教师管理</span>
+            </el-menu-item>
+            <el-menu-item index="8">
+              <div class="imgBox">
+                <img
+                  style="width: 20px; height: 20px"
+                  src="../assets/images/navleft/certificate.png"
+                />
+              </div>
+              <span class="title">证书中心</span>
+            </el-menu-item>
+            <el-menu-item index="9">
+              <div class="imgBox">
+                <img
+                  style="width: 19px; height: 18px"
+                  src="../assets/images/navleft/system.png"
+                />
+              </div>
+              <span class="title">系统管理</span>
+            </el-menu-item>
+          </el-menu>
+        </el-col>
+      </el-row>
+    </div>
+    <div
+      style="width: 100%; margin-top: 26px"
+      :style="{ display: packup ? 'block' : 'none' }"
+    >
+      <el-row class="tac">
+        <el-col :span="12">
+          <el-menu
+            default-active="1"
+            class="el-menu-vertical-demo"
+            @open="handleOpen"
+            @close="handleClose"
+          >
+            <el-menu-item index="1">
+              <span class="title">学习</span>
+            </el-menu-item>
+            <el-menu-item index="2">
+              <span class="title">项目</span>
+            </el-menu-item>
+            <el-menu-item index="3">
+              <span class="title">课程</span>
+            </el-menu-item>
+
+            <el-menu-item index="4">
+              <span class="title">考试</span>
+            </el-menu-item>
+
+            <el-menu-item index="5">
+              <span class="title">调研</span>
+            </el-menu-item>
+
+            <el-menu-item index="6">
+              <span class="title">报表</span>
+            </el-menu-item>
+            <el-menu-item index="7">
+              <span class="title">教师</span>
+            </el-menu-item>
+            <el-menu-item index="8">
+              <span class="title">证书</span>
+            </el-menu-item>
+            <el-menu-item index="9">
+              <span class="title">系统</span>
+            </el-menu-item>
+          </el-menu>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs, onMounted, onUnmounted } from "vue";
+export default {
+  name: "NavLeft",
+  setup() {
+    const state = reactive({
+      packup: false,
+      screenHeight: document.body.clientHeight, // 屏幕高度
+    });
+    const handleOpen = (key, keyPath) => {
+      console.log(key, keyPath);
+    };
+    const handleClose = (key, keyPath) => {
+      console.log(key, keyPath);
+    };
+    const packUp = () => {
+      state.packup = !state.packup;
+    };
+    const getMousePosition = () => {
+      state.screenHeight = document.body.clientHeight;
+    };
+    onMounted(() => {
+      window.addEventListener("resize", getMousePosition, false);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", getMousePosition, false);
+    });
+    return {
+      ...toRefs(state),
+      handleOpen,
+      handleClose,
+      packUp,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.navLeft {
+  width: 208px;
+  min-height: 100%;
+  background: linear-gradient(0deg, #a9e9f7 0%, #388be1 73%);
+  box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+  // margin-top: -50px;
+  .packup {
+    width: 19px;
+    height: 15px;
+    margin-top: 23px;
+    margin-right: 14px;
+    cursor: pointer;
+  }
+  //修改导航栏大小
+  .el-row {
+    width: 100%;
+  }
+  .el-col-12 {
+    width: 100%;
+    max-width: 100%;
+    flex: 1;
+  }
+  //修改导航栏背景颜色
+  .el-menu {
+    background-color: rgba(56, 139, 225, 0);
+
+    border: none;
+  }
+  //左侧图标
+  .imgBox {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .title {
+    margin-left: 12px;
+    margin-top: 1px;
+  }
+  //修改一级导航文字颜色
+  .el-sub-menu__title {
+    padding: 0px !important;
+    padding-left: 27px !important;
+    font-size: 16px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 36px;
+    border-right: 3px solid rgba(255, 255, 255, 0);
+  }
+  //修改箭头图标位置
+  .el-sub-menu .el-sub-menu__icon-arrow {
+    right: 14px;
+  }
+  //修改箭头图标大小
+  .el-icon svg {
+    font-weight: 800;
+    font-size: 16px;
+  }
+  // 鼠标划上背景颜色
+  .el-sub-menu__title:hover {
+    background: rgba(236, 245, 255, 0.43) !important;
+    border-right: 3px solid rgba(255, 255, 255, 1);
+  }
+  // 鼠标划上背景颜色
+  .el-menu-item:hover {
+    background: rgba(236, 245, 255, 0.43) !important;
+    border-right: 3px solid rgba(255, 255, 255, 1);
+  }
+  // 点击选中背景色
+  .el-menu-item.is-active {
+    background: rgba(236, 245, 255, 0.43) !important;
+    border-right: 3px solid rgba(255, 255, 255, 1);
+  }
+  .el-menu-item {
+    height: 49px;
+    padding: 0px !important;
+    padding-left: 27px !important;
+    font-size: 16px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 36px;
+    border-right: 3px solid rgba(255, 255, 255, 0);
+  }
+  .circle {
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 1);
+    margin-left: 24px;
+    margin-right: 18px;
+  }
+  .circleActive {
+    width: 6px;
+    height: 6px;
+    border-radius: 5px;
+    border: 2px solid rgba(255, 255, 255, 1);
+    margin-left: 24px;
+    margin-right: 18px;
+  }
+}
+</style>

src/components/NavTop.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="navTop">
+    <div class="navTopMain">
+      <img
+        style="width: 205px; height: 29px; margin-left: 37px; margin-top: 22px"
+        src="../assets/images/navtop/logo.png"
+      />
+      <div class="navTopRight">
+        <div class="role">
+          <div>管理员</div>
+          <img
+            style="width: 13px; height: 7px; margin-left: 8px"
+            src="../assets/images/navtop/down.png"
+          />
+        </div>
+        <div class="user">
+          <img
+            style="
+              width: 30px;
+              height: 31px;
+              margin-left: 8px;
+              border-radius: 15px;
+              margin-right: 10px;
+            "
+            src="../assets/images/img.jpg"
+          />
+          <div>李玉冰</div>
+        </div>
+        <img
+          style="
+            width: 27px;
+            height: 26px;
+            margin: 27px 29px 0px 31px;
+            cursor: pointer;
+          "
+          src="../assets/images/navtop/signout.png"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "NavTop",
+  setup() {
+    const state = reactive({});
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.navTop {
+  width: 100%;
+  height: 80px;
+  // display: flex;
+  background-color: rgba(255, 255, 255, 1);
+  // box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+  .navTopMain {
+    width: 100%;
+    height: 80px;
+    display: flex;
+    justify-content: space-between;
+    background-color: rgba(255, 255, 255, 1);
+    .navTopRight {
+      display: flex;
+    }
+    .role {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 400;
+      color: #333330;
+      line-height: 36px;
+      cursor: pointer;
+    }
+    .user {
+      margin-left: 37px;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 400;
+      color: #b3bdc4;
+      line-height: 36px;
+    }
+  }
+}
+</style>

src/components/OpenPages.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="openPages">12345</div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "OpenPages",
+  setup() {
+    const state = reactive({});
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.openPages {
+  width: 100%;
+  height: 50px;
+  // display: flex;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
+}
+</style>

src/main.js

@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import "@/assets/scss/common.scss"
+const app = createApp(App)
+app.use(store).use(router).mount('#app')
+app.use(ElementPlus, {
+	locale: zhCn,
+})

src/router/config.js

@@ -0,0 +1,16 @@
+const routes = [];
+const context = require.context('@/views', true, /\.vue$/, 'lazy');
+context.keys().forEach(path => {
+	// console.log('path', path)
+	const componentName = path.replace(/.*\/([^\\.\\/]*)\.vue$/, '$1');
+	routes.push({
+		path: `/${componentName.toLowerCase()}`,
+		name: componentName,
+		component: () => context(path),
+		meta: {
+			isLink: true
+		}
+	});
+});
+
+export default routes;

src/router/index.js

@@ -0,0 +1,19 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import routesConfig from './config';
+// console.log('routesConfig', routesConfig)
+
+const routes = [
+	{
+		path: '/',
+		name: '首页',
+		redirect: routesConfig[0].path
+	},
+	...routesConfig
+]
+
+const router = createRouter({
+	history: createWebHashHistory(),
+	routes
+})
+
+export default router

src/store/index.js

@@ -0,0 +1,14 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/views/courselibrary/CourseManage.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="courseManage">
+    <nav-top />
+    <div style="display: flex">
+      <nav-left />
+      <div style="flex: 1; display: flex; flex-direction: column">
+        <open-pages />
+        <bread-crumb />
+        <div class="cmMain">
+          <div
+            style="
+              width: 100%;
+              height: 100%;
+              background-color: #fff;
+              box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
+            "
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+import NavLeft from "@/components/NavLeft";
+import NavTop from "@/components/NavTop";
+import OpenPages from "@/components/OpenPages";
+import BreadCrumb from "@/components/BreadCrumb";
+export default {
+  name: "CourseManage",
+  components: {
+    NavLeft,
+    NavTop,
+    OpenPages,
+    BreadCrumb,
+  },
+  setup() {
+    const state = reactive({});
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.courseManage {
+  .cmMain {
+    flex: 1;
+    padding: 0px 20px 20px 20px;
+  }
+}
+</style>

src/views/courselibrary/CoursewareManage.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="coursewareManage"></div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "CoursewareManage",
+  setup() {
+    const state = reactive({});
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+<style scoped lang="scss"></style>