修改

src/pages/course/courseinfo.vue

@@ -23,7 +23,7 @@
   }
 
   .nav-content ul {
-    border-bottom: 2px solid #F8F8F8;
+    /* border-bottom: 2px solid #F8F8F8; */
     padding: 12px 0;
   }
 
@@ -60,14 +60,20 @@
   .checkedLi i {
     color: #3B90FF !important;
   }
-
+  .course-menu-box{
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 100%;
+    height: 100%;
+    background: #fff;
+  }
 </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">
+      class="text-subtitle2 courseInfo_Bg">
+      <div class="full-width course-menu-box q-pt-md">
         <q-list style="width:180px;overflow:hidden">
           <div class="classD1">
             <img style="width:100%;height:100%;" alt="">
@@ -75,13 +81,13 @@
           <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')">
+              <li :class="{'checkedLi':commonIndex==1}" @click="gotoPage('question',1)">
                 <i class="iconfont icon-tiku"></i>题库
               </li>
-              <li @click="gotoPage('chapter')">
+              <li :class="{'checkedLi':commonIndex==2}" @click="gotoPage('teachplan',2)">
+                <i style="font-size:20px;" class="iconfont icon-PPT"></i>教案
+              </li>
+              <li :class="{'checkedLi':commonIndex==3}" @click="gotoPage('chapter',3)">
                 <i class="iconfont icon-icon_zhangjielianxi"></i>章节
               </li>
             </ul>
@@ -123,6 +129,7 @@
           opacity: 0.5
         },
         CourseId: 0,
+        commonIndex:1, //选中
       }
     },
     watch: {
@@ -141,7 +148,8 @@
 
     },
     methods: {
-      gotoPage(routename) {
+      gotoPage(routename,type) {
+        this.commonIndex=type;
         var tempStr = '/course/' + routename + '?CourseId=' + this.CourseId;
         console.log("tempStr", tempStr)
         this.$router.push({
@@ -158,15 +166,7 @@
     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');
+  .courseInfo_Bg {
     background-position: bottom;
     background-repeat: no-repeat;
     background-size: 100% auto;
@@ -194,31 +194,24 @@
     color: #636363;
   }
 
-  .left-menu-box {
+  course-menu-box {
     overflow-x: hidden;
     overflow-y: auto;
     max-height: 100%;
     height: 100%;
-    background-color: rgba(255, 255, 255, 0.3);
+    background-color: #fff;
   }
 
-  .left-menu-box::-webkit-scrollbar {
+  course-menu-box::-webkit-scrollbar {
     width: 4px;
     height: 4px;
   }
 
-  .left-menu-box::-webkit-scrollbar-thumb {
+  course-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;