|
|
@@ -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%);
|
|
|
- }
|
|
|
-
|
|
|
}
|
|
|
|
|
|
}
|
