页面修改

src/pages/course/course.vue

@@ -3,13 +3,12 @@
     <div class="page-search row items-center">
       <div class="col row wrap q-mr-lg q-col-gutter-md">
         <div class="col-3">
-          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.CourseName"
-            label="课程名称" @clear="resetSearch" maxlength="20" />
+          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.CourseName" label="课程名称"
+            @clear="resetSearch" maxlength="20" />
         </div>
         <div class="col-3">
-          <select-tree   :treeData='TreeCategoryList'
-            :defaultArray="returnString" nodeKey="CateId" :multiple="true" labelKey="CateName" childrenKey="ChildList"
-            tipText="课程分类" @getChild="getChild"></select-tree>
+          <select-tree :treeData='TreeCategoryList' :defaultArray="returnString" nodeKey="CateId" :multiple="true"
+            labelKey="CateName" childrenKey="ChildList" tipText="课程分类" @getChild="getChild"></select-tree>
         </div>
         <div class="col-3">
           <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.Status" :options="ShowOpts"
@@ -50,7 +49,7 @@
         </template>
         <template v-slot:body-cell-optioned="props">
           <q-td :props="props">
-                <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="题库"
+            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="题库"
               @click="gotoSub(props.row,'question')"></q-btn>
             <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="教案"
               @click="gotoSub(props.row,'teachplan')"></q-btn>
@@ -59,7 +58,7 @@
             <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
               @click="EditCourse(props.row)" />
             <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="详情"
-              @click="goMycourse()" />
+              @click="goMycourse(props.row)" />
           </q-td>
         </template>
       </q-table>
@@ -242,9 +241,10 @@
         this.isShowCourseForm = false
       },
       //跳转至我的课程
-      goMycourse(){
+      goMycourse(obj) {
+        var tempStr = '/course/courseinfo?CourseId=' + obj.CourseId;
         this.$router.push({
-          path: '/myCourse',
+          path: tempStr
         });
       }
     }

src/pages/course/courseinfo.vue

+<style>
+  .classD1 {
+    width: 138px;
+    height: 78px;
+    border-radius: 6px;
+    margin: 0 auto;
+    margin-top: 15px;
+    overflow: hidden;
+  }
+
+  .text_Degree {
+    font-size: 16px;
+    text-align: center;
+    width: 100%;
+    line-height: 21px;
+    margin-top: 12px;
+    color: #181E33;
+  }
+
+  .nav-content {
+    margin-top: 8px;
+    padding-bottom: 30px;
+  }
+
+  .nav-content ul {
+    border-bottom: 2px solid #F8F8F8;
+    padding: 12px 0;
+  }
+
+  .nav-content ul li {
+    width: 100%;
+    height: 54px;
+    position: relative;
+    padding-left: 47px;
+    height: 54px;
+    line-height: 54px;
+    font-size: 14px;
+    color: #737886;
+    cursor: pointer;
+  }
+
+  .nav-content ul li i {
+    display: inline-block;
+    font-size: 18px;
+    color: #737886;
+    margin-right: 6px;
+    position: relative;
+    top: 1px;
+  }
+
+  .nav-content ul li:hover {
+    background: #f6f9fd;
+  }
+
+  .checkedLi {
+    background-color: #f6f9fd;
+    color: #3B90FF !important;
+  }
+
+  .checkedLi i {
+    color: #3B90FF !important;
+  }
+
+</style>
+<template>
+
+  <div class="row items-stretch full-height">
+    <div style="box-shadow: 2px 0 10px 0 rgba(237,238,240,0.50);font-family:perfectFont;"
+      class="text-subtitle2 second-menu-bg">
+      <div class="full-width left-menu-box q-pt-md">
+        <q-list style="width:180px;overflow:hidden">
+          <div class="classD1">
+            <img style="width:100%;height:100%;" alt="">
+          </div>
+          <div class="text_Degree">0-N3直通车</div>
+          <div class="nav-content">
+            <ul>
+              <li class="checkedLi" @click="gotoPage('teachplan')">
+                <i style="font-size:20px;" class="iconfont icon-PPT"></i>教案
+              </li>
+              <li @click="gotoPage('question')">
+                <i class="iconfont icon-tiku"></i>题库
+              </li>
+              <li @click="gotoPage('chapter')">
+                <i class="iconfont icon-icon_zhangjielianxi"></i>章节
+              </li>
+            </ul>
+          </div>
+        </q-list>
+      </div>
+    </div>
+    <div class="col" style="background: #f2f4f7;">
+      <q-scroll-area class="fit" :thumb-style="thumbStyle" :bar-style="barStyle" visible style="">
+        <router-view style="margin:20px" />
+      </q-scroll-area>
+    </div>
+  </div>
+</template>
+<script>
+  import {
+    mapGetters
+  } from 'vuex'
+  export default {
+    name: 'courseinfo',
+    components: {
+
+    },
+    data() {
+      return {
+        currentPath: "/course/courseinfo",
+        thumbStyle: {
+          right: '0px',
+          borderRadius: '0px',
+          backgroundColor: '#1d1d1d',
+          width: '6px',
+          opacity: 1
+        },
+        barStyle: {
+          right: '0px',
+          borderRadius: '0px',
+          backgroundColor: '#999',
+          width: '6px',
+          opacity: 0.5
+        },
+        CourseId: 0,
+      }
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+      if (this.$route.query) {
+        this.CourseId = this.$route.query.CourseId
+      }
+    },
+    mounted() {
+
+
+    },
+    methods: {
+      gotoPage(routename) {
+        var tempStr = '/course/' + routename + '?CourseId=' + this.CourseId;
+        console.log("tempStr", tempStr)
+        this.$router.push({
+          path: tempStr
+        });
+      }
+    },
+  }
+
+</script>
+
+<style>
+  .full-width {
+    height: 100%;
+  }
+
+  .head-bg {
+    background-image: url('~assets/images/page/top.png');
+    background-position: right;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+  }
+
+  .second-menu-bg {
+    background-image: url('~assets/images/page/left.png');
+    background-position: bottom;
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    height: 100%;
+
+  }
+
+  .hide-scrollbar {
+    scrollbar-width: 5px !important;
+    -ms-overflow-style: marquee, panner !important;
+  }
+
+  .suojin {
+    height: 40px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, .5);
+
+  }
+
+  .suojin i {
+    font-size: 24px;
+    color: #636363;
+  }
+
+  .left-menu-box {
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+
+  .left-menu-box::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  .left-menu-box::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #bbb;
+  }
+
+  /* .left-menu-box::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #EDEDED;
+
+} */
+  @keyframes shouqidonghua {
+    from {
+      width: 180px;
+    }
+
+    to {
+      width: 60px;
+    }
+  }
+
+  .changeShowqidonghua {
+    animation: shouqidonghua 0.5s linear;
+    width: 60px !important;
+    overflow-x: hidden;
+  }
+
+  @keyframes shouqidonghua {
+    from {
+      width: 180px;
+    }
+
+    to {
+      width: 60px;
+    }
+  }
+
+  .changeShowqidonghua {
+    animation: shouqidonghua 0.5s linear;
+    width: 60px !important;
+    overflow-x: hidden;
+  }
+
+</style>

src/router/routes.js

@@ -122,21 +122,7 @@ const routes = [{
         component: () =>
           import("pages/course/classorder.vue")
       },
-      {
-        path: "/course/teachplan", //教案管理
-        component: () =>
-          import("pages/course/teachplan.vue")
-      },
-      {
-        path: "/course/chapter", //章节管理
-        component: () =>
-          import("pages/course/chapter.vue")
-      },
-      {
-        path: "/course/question", //题库列表
-        component: () =>
-          import("pages/course/question.vue")
-      },
+
       {
         path: "/course/socialclass", //教学奖励-社会班设置
         component: () =>
@@ -445,6 +431,27 @@ const routes = [{
         component: () =>
           import("pages/user/backbill.vue")
       },
+      {
+        path: "/course/courseinfo",
+        component: () => import("pages/course/courseinfo.vue"),
+        children: [{
+            path: "/course/teachplan", //教案管理
+            component: () =>
+              import("pages/course/teachplan.vue")
+          },
+          {
+            path: "/course/chapter", //章节管理
+            component: () =>
+              import("pages/course/chapter.vue")
+          },
+          {
+            path: "/course/question", //题库列表
+            component: () =>
+              import("pages/course/question.vue")
+          },
+        ]
+      },
+
       {
         path: "/test", //API测试
         component: () =>
@@ -452,15 +459,6 @@ const routes = [{
       },
     ]
   },
-  {
-    path:"/myCourse",
-    component: () =>
-      import("layouts/myCourse.vue"),
-      children:[
-
-      ]
-  },
-
   // Always leave this as last one,
   // but you can also remove it
   {