update

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

@@ -7,40 +7,40 @@
 
 /* 滚动条整体样式 */
 .commonsScrollbarNew::-webkit-scrollbar {
-    width: 2px;
-    height: 2px;
+    width: 0px;
+    height: 0px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
 }
 
 .commonsScrollbarNew::scrollbar {
-    width: 2px;
-    height: 2px;
+    width: 0px;
+    height: 0px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
 }
 
 .commonsScrollbarNew::-moz-scrollbar {
-    width: 2px;
-    height: 2px;
+    width: 0px;
+    height: 0px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
 }
 
 .commonsScrollbarNew::-ms-scrollbar {
-    width: 2px;
-    height: 2px;
+    width: 0px;
+    height: 0px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
 }
 
 .commonsScrollbarNew::-o-scrollbar {
-    width: 2px;
-    height: 2px;
+    width: 0px;
+    height: 0px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;

src/view/student/trainChapter/trainChapter.vue

@@ -46,37 +46,42 @@
                         <div class="logoLeft"></div>
                         <div class="txtRight">知识学习</div>
                     </div>
-                    <div class="menuList commonsScrollbarNew" >
-
-                        <div class="menuListMain" v-for="(item, index) of state.chapterTree" :key="index" >
-
-                            <div :class="'menuListpParent ' + ( (index < state.currentStep) ? 'menuListpParentYes' : (index == state.currentStep) ? 'menuListpParentSelect' : '' ) "
-                            @click="menuClickNew(item, index)" >
-                                <div class="menuListpParentLeft">
-                                    <div v-if="index == state.currentStep" class="logoTime" ></div>
-                                    <div v-if="index != state.currentStep" :class="'' + ( (index <= state.currentStep) ? 'logoMenu' : 'logoNo' )" ></div>
+                    <div class="menuList" >
+
+                        <div class="menuListBorder commonsScrollbarNew" >
+                            
+                            <div class="menuListMain" v-for="(item, index) of state.chapterTree" :key="index" >
+
+                                <div :class="'menuListpParent ' + ( (index < state.currentStep) ? 'menuListpParentYes' : (index == state.currentStep) ? 'menuListpParentSelect' : '' ) "
+                                @click="menuClickNew(item, index)" >
+                                    <div class="menuListpParentLeft">
+                                        <div v-if="index == state.currentStep" class="logoTime" ></div>
+                                        <div v-if="index != state.currentStep" :class="'' + ( (index <= state.currentStep) ? 'logoMenu' : 'logoNo' )" ></div>
+                                    </div>
+                                    <div class="menuListpParentCenter">{{ item.name }}</div>
+                                    <!-- <div class="menuListpParentRight" v-if="item.children != null && item.children != undefined && item.children.length > 0" >
+                                        +
+                                    </div> -->
                                 </div>
-                                <div class="menuListpParentCenter">{{ item.name }}</div>
-                                <!-- <div class="menuListpParentRight" v-if="item.children != null && item.children != undefined && item.children.length > 0" >
-                                    +
-                                </div> -->
-                            </div>
 
-                            <div :class="'menuListpChildren ' + ( (index < state.currentStep || ( index == state.currentStep && index_1 + 1 < state.currentNode ) ) ? 'menuListpChildrenYes' : (index_1 + 1 == state.currentNode) ? 'menuListpChildrenSelect' : '' ) "
-                            @click="menuClickNew(item_1, index, item_1.id)"
-                            v-if="item.children?.length > 0" v-for="(item_1, index_1) of item.children" :key="index_1" >
-                                <div class="menuListpChildrenKong" ></div>
-                                <div class="menuListpChildrenLeft" >
-                                    <div v-if="(index_1 + 1 == state.currentNode)" class="logoTime" ></div>
-                                    <div v-if="(index_1 + 1 != state.currentNode)" :class="'' + ( (index < state.currentStep || ( index == state.currentStep && index_1 < state.currentNode ) ) ? 'logoMenu' : 'logoNo' )" ></div>
-                                </div>
-                                <div class="menuListpChildrenRight">
-                                    {{ item_1.name }}
+                                <div :class="'menuListpChildren ' + ( (index < state.currentStep || ( index == state.currentStep && index_1 + 1 < state.currentNode ) ) ? 'menuListpChildrenYes' : (index_1 + 1 == state.currentNode) ? 'menuListpChildrenSelect' : '' ) "
+                                @click="menuClickNew(item_1, index, item_1.id)"
+                                v-if="item.children?.length > 0" v-for="(item_1, index_1) of item.children" :key="index_1" >
+                                    <div class="menuListpChildrenKong" ></div>
+                                    <div class="menuListpChildrenLeft" >
+                                        <div v-if="(index_1 + 1 == state.currentNode)" class="logoTime" ></div>
+                                        <div v-if="(index_1 + 1 != state.currentNode)" :class="'' + ( (index < state.currentStep || ( index == state.currentStep && index_1 < state.currentNode ) ) ? 'logoMenu' : 'logoNo' )" ></div>
+                                    </div>
+                                    <div class="menuListpChildrenRight">
+                                        {{ item_1.name }}
+                                    </div>
                                 </div>
+
                             </div>
 
                         </div>
 
+
                     </div>
                 </div>
                 <div :class="'menuLook ' + (menuLeftLook == true ? 'menuLookOpenEvent ' : 'menuLookExit menuLookExitEvent')"
@@ -1115,140 +1120,150 @@ const callbackProgressQingXiCheAndQv = (json : any) => {
                 background-size: 100% 100%;
                 padding: 1rem 0.5rem 1rem 0.5rem;
 
-                .menuListMain {
-                    position: relative;
-                    width: 100%;
-                    height: auto;
+                .menuListBorder {
 
-                    .menuListpParent, .menuListpChildren {
+                    position: absolute;
+                    top: 1rem;
+                    left: 1rem;
+                    bottom: 1rem;
+                    right: 1rem;
+                    
+                    .menuListMain {
                         position: relative;
-                        width: 90%;
-                        left: 5%;
-                        margin: 0.35rem 0rem 0.35rem 0rem;
-                        padding: 0.35rem 0rem 0.35rem 0rem;
-                        // 手势
-                        cursor:pointer;
-                    }
-
-                    .logoMenu {
-                        width: 1rem;
-                        height: 1rem;
-                        background-image: url(/src/assets/menuLeft/yes.webp);
-                        background-size: 100% 100%;
-                    }
-
-                    .logoTime {
-                        width: 1rem;
-                        height: 1rem;
-                        background-image: url(/src/assets/menuLeft/time.webp);
-                        background-size: 100% 100%;
-                    }
-
-                    .logoNo {
-                        width: 1rem;
-                        height: 1rem;
-                        background-image: url(/src/assets/menuLeft/no.webp);
-                        background-size: 100% 100%;
-                    }
-
-                    .menuListpParent {
-                        font-weight: 400;
-                        font-size: 1.28rem;
-                        color: #C8C8C8;
-                        background: #386064;
-                        height: 2.5rem;
-                        
-                        .menuListpParentLeft, .menuListpParentCenter, .menuListpParentRight {
-                            position: absolute;
-                            height: 100%;
-                            top: 0px;
+                        width: 100%;
+                        height: auto;
+
+                        .menuListpParent, .menuListpChildren {
+                            position: relative;
+                            width: 90%;
+                            left: 5%;
+                            margin: 0.35rem 0rem 0.35rem 0rem;
+                            padding: 0.35rem 0rem 0.35rem 0rem;
+                            // 手势
+                            cursor:pointer;
                         }
 
-                        .menuListpParentLeft {
-                            left: 0px;
-                            width: 2.5rem;
+                        .logoMenu {
+                            width: 1rem;
+                            height: 1rem;
+                            background-image: url(/src/assets/menuLeft/yes.webp);
+                            background-size: 100% 100%;
+                        }
 
-                            /* 水平垂直居中,支持文字自动换行 */
-                            display: flex;
-                            flex-direction: column;
-                            justify-content: center;
-                            align-items: center;
+                        .logoTime {
+                            width: 1rem;
+                            height: 1rem;
+                            background-image: url(/src/assets/menuLeft/time.webp);
+                            background-size: 100% 100%;
+                        }
 
+                        .logoNo {
+                            width: 1rem;
+                            height: 1rem;
+                            background-image: url(/src/assets/menuLeft/no.webp);
+                            background-size: 100% 100%;
                         }
 
-                        .menuListpParentCenter {
-                            left: 2.5rem;
-                            right: 2.5rem;
-                            line-height: 2.5rem;
+                        .menuListpParent {
+                            font-weight: 400;
+                            font-size: 1.28rem;
+                            color: #C8C8C8;
+                            background: #386064;
+                            height: 2.5rem;
+                            
+                            .menuListpParentLeft, .menuListpParentCenter, .menuListpParentRight {
+                                position: absolute;
+                                height: 100%;
+                                top: 0px;
+                            }
 
-                            white-space: nowrap; /* 不换行 */
-                            overflow: hidden; /* 隐藏超出部分 */
-                            text-overflow: ellipsis; /* 显示省略号 */
+                            .menuListpParentLeft {
+                                left: 0px;
+                                width: 2.5rem;
 
-                        }
+                                /* 水平垂直居中,支持文字自动换行 */
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: center;
+                                align-items: center;
 
-                        .menuListpParentRight {
-                            width: 2.5rem;
-                            right: 0px;
+                            }
 
-                            background: #2BA987;
-                            color: #FFFFFF;
-                            font-size: 2rem;
+                            .menuListpParentCenter {
+                                left: 2.5rem;
+                                right: 2.5rem;
+                                line-height: 2.5rem;
 
-                            /* 水平垂直居中,支持文字自动换行 */
-                            display: flex;
-                            flex-direction: column;
-                            justify-content: center;
-                            align-items: center;
+                                white-space: nowrap; /* 不换行 */
+                                overflow: hidden; /* 隐藏超出部分 */
+                                text-overflow: ellipsis; /* 显示省略号 */
 
-                        }
-                        
-                    }
+                            }
 
-                    .menuListpParentYes {
-                        color: #ffffff;
-                    }
+                            .menuListpParentRight {
+                                width: 2.5rem;
+                                right: 0px;
 
-                    .menuListpParentSelect {
-                        color: #ffffff;
-                    }
+                                background: #2BA987;
+                                color: #FFFFFF;
+                                font-size: 2rem;
 
-                    .menuListpChildren {
-                        font-weight: 400;
-                        font-size: 1.14rem;
-                        color: #C8C8C8;
-                        
-                        .menuListpChildrenKong, .menuListpChildrenLeft, .menuListpChildrenRight {
-                            display: inline-flex;
+                                /* 水平垂直居中,支持文字自动换行 */
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: center;
+                                align-items: center;
+
+                            }
+                            
                         }
 
-                        .menuListpChildrenKong {
-                            width: 1%;
+                        .menuListpParentYes {
+                            color: #ffffff;
                         }
 
-                        .menuListpChildrenLeft {
-                            width: 16%;
-                            /* 水平垂直居中,支持文字自动换行 */
-                            flex-direction: column;
-                            justify-content: center;
-                            align-items: center;
+                        .menuListpParentSelect {
+                            color: #ffffff;
                         }
 
-                        .menuListpChildrenRight {
-                            width: 83%;
+                        .menuListpChildren {
+                            font-weight: 400;
+                            font-size: 1.14rem;
+                            color: #C8C8C8;
+                            
+                            .menuListpChildrenKong, .menuListpChildrenLeft, .menuListpChildrenRight {
+                                display: inline-flex;
+                            }
+
+                            .menuListpChildrenKong {
+                                width: 1%;
+                            }
+
+                            .menuListpChildrenLeft {
+                                width: 16%;
+                                /* 水平垂直居中,支持文字自动换行 */
+                                flex-direction: column;
+                                justify-content: center;
+                                align-items: center;
+                            }
+
+                            .menuListpChildrenRight {
+                                width: 83%;
+                            }
+
                         }
 
-                    }
+                        .menuListpChildrenYes {
+                            color: #2CD36B;
+                        }
 
-                    .menuListpChildrenYes {
-                        color: #2CD36B;
+                        .menuListpChildrenSelect {
+                            color: #FFFFFF;
+                            background: linear-gradient( 90deg, rgba(39,171,151,0.6) 0%, rgba(39,171,151,0.2) 100%);
+                        }
+                        
                     }
 
-                    .menuListpChildrenSelect {
-                        color: #FFFFFF;
-                        background: linear-gradient( 90deg, rgba(39,171,151,0.6) 0%, rgba(39,171,151,0.2) 100%);
-                    }
-                    
                 }
 
             }