update

src/view/student/trainChapter/css/animationEvent.scss

@@ -63,7 +63,7 @@
 .menuLeftOpenEvent {
     
     // 播放动画后停留在最后一帧
-    animation: menuLeftOpen 0.5s;
+    animation: menuLeftOpen 0.45s;
     animation-fill-mode: forwards;
 
 }

src/view/student/trainChapter/css/commonsScrollbarNew.scss

@@ -0,0 +1,144 @@
+
+/* 滚动 */
+.commonsScrollbarNew {
+    overflow-y: scroll;
+    overflow-x: visible;
+}
+
+/* 滚动条整体样式 */
+.commonsScrollbarNew::-webkit-scrollbar {
+    width: 2px;
+    height: 2px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbarNew::scrollbar {
+    width: 2px;
+    height: 2px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbarNew::-moz-scrollbar {
+    width: 2px;
+    height: 2px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbarNew::-ms-scrollbar {
+    width: 2px;
+    height: 2px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbarNew::-o-scrollbar {
+    width: 2px;
+    height: 2px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+/* 滚动条里面小方块 */
+.commonsScrollbarNew::-webkit-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: transparent;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbarNew::scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: transparent;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbarNew::-moz-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: transparent;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbarNew::-ms-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: transparent;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbarNew::-o-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: transparent;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+/* 滚动条里面轨道 */
+.commonsScrollbarNew::-webkit-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: transparent;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbarNew::scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: transparent;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbarNew::-moz-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: transparent;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbarNew::-ms-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: transparent;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbarNew::-o-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: transparent;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+
+
+
+

src/view/student/trainChapter/trainChapter.vue

@@ -44,11 +44,18 @@
                 <div :class="'menuLeft ' + (menuLeftLook == true ? 'menuLeftOpenEvent' : 'menuLeftExitEvent')" >
                     <div class="menuTitle" >
                         <div class="logoLeft"></div>
-                        <div class="txtRight">知识学习知识学习知识学习</div>
+                        <div class="txtRight">知识学习</div>
                     </div>
-                    <div class="menuList" >
+                    <div class="menuList commonsScrollbarNew" >
 
-                        <!-- <div></div> -->
+                        <div class="menuListMain" v-for="(item, index) of state.chapterTree" :key="index" >
+                            <div class="menuListpParent" >
+                                {{ item.name }}
+                            </div>
+                            <div class="menuListpParent" v-if="item.children?.length > 0" v-for="(item_1, index_1) of item.children" :key="index_1" >
+                                {{ item.name }}
+                            </div>
+                        </div>
 
                     </div>
                 </div>
@@ -704,6 +711,7 @@ const callbackProgressQingXiCheAndQv = (json : any) => {
 </script>
 <style lang="scss" scoped>
 @use './css/animationEvent.scss';
+@use './css/commonsScrollbarNew.scss';
 
 .chapter-container {
     position: absolute;
@@ -1047,6 +1055,19 @@ const callbackProgressQingXiCheAndQv = (json : any) => {
                 background-image: url(/src/assets/menuLeft/menuBottom.webp);
                 background-size: 100% 100%;
 
+                .menuListMain {
+                    position: relative;
+                    width: 100%;
+                    height: auto;
+
+                    .menuListpParent, .menuListpParent {
+                        position: relative;
+                        width: 96%;
+                        left: 2%;
+                    }
+                    
+                }
+
             }
             
         }