商品专题页

src/pages/course-detail/index.vue

@@ -4812,7 +4812,6 @@ export default {
      * 切换科目
      */
     courseChange() {
-      console.log('切换科目')
       return new Promise((resolve) => {
         this.needOpen = true;
         this.noteParams = {
@@ -6264,8 +6263,6 @@ export default {
      * 刷新父级列表
      */
     refreshParentList(sectionItem, rebuildObj) {
-      console.log(sectionItem, "看完视频==========sectionItem", this.menuList);
-      console.log(rebuildObj, "rebuildObj");
       let self = this;
       if (sectionItem.menuId) {
         //最外层节有menuid
@@ -6974,7 +6971,6 @@ export default {
         this.param.goodsId = this.goodsId;
         this.param.gradeId = this.gradeId;
         this.$request.courseCourseList(this.param).then(async (res) => {
-          console.log(res, "resresresres");
           this.courseList.push(...res.rows);
           this.courseTotal = res.total
           // console.log('courseTotal::', this.courseTotal)

src/pages/goodsTopic/components/catalogue.vue

@@ -0,0 +1,830 @@
+<template>
+    <!-- <div> -->
+        <div class="right_box__body">
+            <div
+                class="item"
+                v-for="(menu, index) in menuList"
+                :key="index"
+            >
+                <template v-if="menu.type == 1">
+                    <div
+                        class="item__title"
+                        @click="openModule(menu)"
+                    >
+                        <i
+                        :class="{
+                            'el-icon-caret-right': !menu.showList,
+                            'el-icon-caret-bottom': menu.showList,
+                        }"
+                        ></i>
+                        {{ menu.menuName }}
+                    </div>
+                    <div class="item__content">
+                        <div
+                        class="bank-chapter"
+                        v-if="menu.showList"
+                        >
+                        <div
+                            class="bank-chapter__item"
+                            v-for="(
+                            chapter, chapterIndex
+                            ) in menu.list"
+                            :key="chapterIndex"
+                        >
+                            <div
+                            class="bank-chapter__item__text"
+                            @click="openChapter(chapter)"
+                            >
+                            <i
+                                :class="{
+                                'el-icon-caret-right':
+                                    !chapter.showList,
+                                'el-icon-caret-bottom':
+                                    chapter.showList,
+                                }"
+                            ></i
+                            >{{ chapter.name }}
+                            </div>
+
+                            <div
+                            class="bank-section"
+                            v-if="chapter.showList"
+                            >
+                            <div
+                                class="bank-section__item"
+                                :class="{
+                                active: isActive(section),
+                                }"
+                                v-for="(
+                                section, sectionIndex
+                                ) in chapter.list"
+                                :key="sectionIndex"
+                                @click="getResource(section)"
+                            >
+                                <template v-if="section.type != 2">
+                                <template>
+                                    <div
+                                    class="note note--blue"
+                                    v-if="
+                                        section.sectionType == 1
+                                    "
+                                    >
+                                    录播
+                                    </div>
+                                    <div
+                                    class="note"
+                                    v-if="
+                                        section.sectionType == 2
+                                    "
+                                    >
+                                    直播
+                                    </div>
+                                    <div
+                                    class="note note--yellow"
+                                    v-if="
+                                        section.sectionType == 3
+                                    "
+                                    >
+                                    回放
+                                    </div>
+                                    <div
+                                    class="
+                                        bank-section__item__text
+                                    "
+                                    >
+                                    {{ section.name }}
+                                    <div
+                                        style="font-size: 12px"
+                                        v-if="
+                                        section.liveStartTime >
+                                        nowTime
+                                        "
+                                    >
+                                        <span>{{
+                                        $tools.timestampToTime(
+                                            section.liveStartTime,
+                                            (isDay = false)
+                                        )
+                                        }}</span
+                                        >-
+                                        <span>{{
+                                        $tools.timestampToTime(
+                                            section.liveEndTime,
+                                            (isDay = false)
+                                        )
+                                        }}</span>
+                                    </div>
+                                    </div>
+                                </template>
+
+                                <template
+                                    v-if="section.durationTime > 0"
+                                >
+                                    <div class="during">
+                                    {{
+                                        $tools.secondToDate(
+                                        section.durationTime
+                                        )
+                                    }}
+                                    </div>
+                                </template>
+                                <template>
+                                    <div
+                                    class="btn"
+                                    v-if="section.rebuild > 0"
+                                    >
+                                    待重修
+                                    </div>
+                                    <template v-else>
+                                    <div
+                                        class="btn btn--green"
+                                        v-if="section.learning == 1"
+                                    >
+                                        已看完
+                                    </div>
+                                    </template>
+                                </template>
+                                <template
+                                    v-if="
+                                    section.liveStartTime &&
+                                    section.sectionType == 2
+                                    "
+                                >
+                                    <div
+                                    class="
+                                        live-btn live-btn--blue
+                                    "
+                                    v-if="
+                                        section.liveStartTime >
+                                        nowTime
+                                    "
+                                    >
+                                    待开播
+                                    </div>
+                                    <div
+                                    class="
+                                        live-btn live-btn--yellow
+                                    "
+                                    v-if="
+                                        section.liveStartTime <=
+                                        nowTime &&
+                                        section.liveEndTime >
+                                        nowTime
+                                    "
+                                    >
+                                    直播中
+                                    </div>
+                                    <div
+                                    class="live-btn"
+                                    v-if="
+                                        section.liveEndTime <
+                                        nowTime
+                                    "
+                                    >
+                                    已结束
+                                    </div>
+                                </template>
+                                </template>
+
+                                <template v-if="section.type == 2">
+                                <template>
+                                    <div
+                                    class="test-btn"
+                                    v-if="section.doType == 1"
+                                    >
+                                    练习
+                                    </div>
+                                    <div
+                                    class="test-btn"
+                                    v-if="section.doType != 1"
+                                    >
+                                    考试
+                                    </div>
+                                </template>
+                                <div
+                                    class="bank-section__item__text"
+                                >
+                                    {{ section.name }}
+                                </div>
+                                <template>
+                                    <div
+                                    class="btn"
+                                    v-if="section.rebuild > 0"
+                                    >
+                                    待重修
+                                    </div>
+                                    <template v-else>
+                                    <div
+                                        class="btn btn--green"
+                                        v-if="section.learning == 1"
+                                    >
+                                        合格
+                                    </div>
+                                    <div
+                                        class="btn btn--red"
+                                        v-if="section.learning == 0"
+                                    >
+                                        不合格
+                                    </div>
+                                    <div
+                                        class="btn btn--green"
+                                        v-if="section.rebuild > 0"
+                                    >
+                                        待重测
+                                    </div>
+                                    </template>
+                                </template>
+                                </template>
+                            </div>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+                </template>
+
+                <template v-if="menu.type == 2">
+                    <div class="item__content">
+                        <div class="bank-chapter">
+                        <div class="bank-chapter__item">
+                            <div
+                            class="bank-chapter__item__text"
+                            @click="openChapter(menu)"
+                            >
+                            <i
+                                :class="{
+                                'el-icon-caret-right':
+                                    !menu.showList,
+                                'el-icon-caret-bottom':
+                                    menu.showList,
+                                }"
+                            ></i
+                            >{{ menu.menuName }}
+                            </div>
+
+                            <div
+                            class="bank-section"
+                            v-if="menu.showList"
+                            >
+                            <div
+                                class="bank-section__item"
+                                :class="{
+                                active: isActive(section),
+                                }"
+                                v-for="(
+                                section, sectionIndex
+                                ) in menu.list"
+                                :key="sectionIndex"
+                                @click="getResource(section)"
+                            >
+                                <template v-if="section.type != 2">
+                                <template>
+                                    <div
+                                    class="note note--blue"
+                                    v-if="
+                                        section.sectionType == 1
+                                    "
+                                    >
+                                    录播
+                                    </div>
+                                    <div
+                                    class="note"
+                                    v-if="
+                                        section.sectionType == 2
+                                    "
+                                    >
+                                    直播
+                                    </div>
+                                    <div
+                                    class="note note--yellow"
+                                    v-if="
+                                        section.sectionType == 3
+                                    "
+                                    >
+                                    回放
+                                    </div>
+                                </template>
+                                <div
+                                    class="bank-section__item__text"
+                                >
+                                    {{ section.name }}
+                                    <div
+                                    style="font-size: 12px"
+                                    v-if="
+                                        section.liveStartTime >
+                                        nowTime
+                                    "
+                                    >
+                                    <span>{{
+                                        $tools.timestampToTime(
+                                        section.liveStartTime,
+                                        (isDay = false)
+                                        )
+                                    }}</span
+                                    >-
+                                    <span>{{
+                                        $tools.timestampToTime(
+                                        section.liveEndTime,
+                                        (isDay = false)
+                                        )
+                                    }}</span>
+                                    </div>
+                                </div>
+
+                                <template
+                                    v-if="section.durationTime > 0"
+                                >
+                                    <div class="during">
+                                    {{
+                                        $tools.secondToDate(
+                                        section.durationTime
+                                        )
+                                    }}
+                                    </div>
+                                </template>
+                                <template>
+                                    <div
+                                    class="btn"
+                                    v-if="section.rebuild > 0"
+                                    >
+                                    待重修
+                                    </div>
+                                    <template v-else>
+                                    <div
+                                        class="btn btn--green"
+                                        v-if="section.learning == 1"
+                                    >
+                                        已看完
+                                    </div>
+                                    </template>
+                                </template>
+                                <template
+                                    v-if="
+                                    section.liveStartTime &&
+                                    section.sectionType == 2
+                                    "
+                                >
+                                    <div
+                                    class="
+                                        live-btn live-btn--blue
+                                    "
+                                    v-if="
+                                        section.liveStartTime >
+                                        nowTime
+                                    "
+                                    >
+                                    待开播
+                                    </div>
+                                    <div
+                                    class="
+                                        live-btn live-btn--yellow
+                                    "
+                                    v-if="
+                                        section.liveStartTime <=
+                                        nowTime &&
+                                        section.liveEndTime >
+                                        nowTime
+                                    "
+                                    >
+                                    直播中
+                                    </div>
+                                    <div
+                                    class="live-btn"
+                                    v-if="
+                                        section.liveEndTime <
+                                        nowTime
+                                    "
+                                    >
+                                    已结束
+                                    </div>
+                                </template>
+                                </template>
+
+                                <template v-if="section.type == 2">
+                                <template>
+                                    <div
+                                    class="test-btn"
+                                    v-if="section.doType == 1"
+                                    >
+                                    练习
+                                    </div>
+                                    <div
+                                    class="test-btn"
+                                    v-if="section.doType != 1"
+                                    >
+                                    考试
+                                    </div>
+                                </template>
+                                <div
+                                    class="bank-section__item__text"
+                                >
+                                    {{ section.name }}
+                                </div>
+                                <template>
+                                    <div
+                                    class="btn"
+                                    v-if="section.rebuild > 0"
+                                    >
+                                    待重修
+                                    </div>
+                                    <template v-else>
+                                    <div
+                                        class="btn btn--green"
+                                        v-if="section.learning == 1"
+                                    >
+                                        合格
+                                    </div>
+                                    <div
+                                        class="btn btn--red"
+                                        v-if="section.learning == 0"
+                                    >
+                                        不合格
+                                    </div>
+                                    <div
+                                        class="btn btn--green"
+                                        v-if="section.rebuild > 0"
+                                    >
+                                        待重测
+                                    </div>
+                                    </template>
+                                </template>
+                                </template>
+                            </div>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+                </template>
+
+                <template v-if="menu.type == 3">
+                    <div class="item__content">
+                        <div class="bank-section">
+                        <div
+                            class="bank-section__item"
+                            :class="{
+                            active: isActive(menu),
+                            }"
+                            @click="getResource(menu)"
+                        >
+                            <template>
+                            <div
+                                class="note note--blue"
+                                v-if="menu.sectionType == 1"
+                            >
+                                录播
+                            </div>
+                            <div
+                                class="note"
+                                v-if="menu.sectionType == 2"
+                            >
+                                直播
+                            </div>
+                            <div
+                                class="note note--yellow"
+                                v-if="menu.sectionType == 3"
+                            >
+                                回放
+                            </div>
+                            <div class="bank-section__item__text">
+                                {{ menu.name }}
+                                <div
+                                style="font-size: 12px"
+                                v-if="
+                                    menu.liveStartTime > nowTime
+                                "
+                                >
+                                <span>{{
+                                    $tools.timestampToTime(
+                                    menu.liveStartTime,
+                                    (isDay = false)
+                                    )
+                                }}</span
+                                >-
+                                <span>{{
+                                    $tools.timestampToTime(
+                                    menu.liveEndTime,
+                                    (isDay = false)
+                                    )
+                                }}</span>
+                                </div>
+                            </div>
+                            </template>
+
+                            <template v-if="menu.durationTime > 0">
+                            <div class="during">
+                                {{
+                                $tools.secondToDate(
+                                    menu.durationTime
+                                )
+                                }}
+                            </div>
+                            </template>
+                            <template>
+                            <div
+                                class="btn"
+                                v-if="menu.rebuild > 0"
+                            >
+                                待重修
+                            </div>
+                            <template v-else>
+                                <div
+                                class="btn btn--green"
+                                v-if="menu.learning == 1"
+                                >
+                                已看完
+                                </div>
+                            </template>
+                            </template>
+                            <template
+                            v-if="
+                                menu.liveStartTime &&
+                                menu.sectionType == 2
+                            "
+                            >
+                            <div
+                                class="live-btn live-btn--blue"
+                                v-if="menu.liveStartTime > nowTime"
+                            >
+                                待开播
+                            </div>
+                            <div
+                                class="live-btn live-btn--yellow"
+                                v-if="
+                                menu.liveStartTime <= nowTime &&
+                                menu.liveEndTime > nowTime
+                                "
+                            >
+                                直播中
+                            </div>
+                            <div
+                                class="live-btn"
+                                v-if="menu.liveEndTime < nowTime"
+                            >
+                                已结束
+                            </div>
+                            </template>
+                        </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    <!-- </div> -->
+</template>
+
+<script>
+export default {
+    name: 'boxs',
+    data() {
+        return {
+            menuList: [],
+            param: {
+                pageNum: 1,
+                pageSize: 100,
+                total: 0,
+            },
+        }
+    },
+
+    methods: {
+        // 目录列表
+        getMenuList() {
+            // /course/menuList
+            this.$request
+                .reMenuList({ courseId: this.courseId, gradeId: this.gradeId })
+                .then(async (res) => {
+                    console.log('--asfsdgshfduofhdug', res.rows, this.menuList)
+                    for (let i = 0; i < res.rows.length; i++) {
+                        let item = res.rows[i];
+                        item.id = item.menuId;
+                        item.name = item.menuName;
+                        item.menuType = item.type;
+                        item.showList = false;
+                        item.list = [];
+                        item.parent = this.menuList;
+                    }
+                    this.menuList = res.rows;
+                    console.log('==============this.menuList===', res.rows, this.menuList)
+                });
+            },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.right_box {
+    width: 420px;
+    height: 528px;
+    background: #3f4449;
+    border-radius: 0px;
+    // &__header {
+        // .tabs {
+            /deep/.el-tabs__nav-wrap::after {
+                background-color: #999;
+            }
+
+            /deep/ .el-tabs__header {
+                margin: 0;
+            }
+
+            .label {
+                color: #fff;
+                height: 40px;
+                line-height: 40px;
+                padding: 0 20px;
+            }
+
+            .item {
+                &__title {
+                    padding-left: 12px;
+                    height: 40px;
+                    line-height: 40px;
+                    cursor: pointer;
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #fff;
+
+                    .el-icon-caret-right,
+                    .el-icon-caret-bottom {
+                    color: #999;
+                    }
+                }
+
+                &__content {
+                    .bank-chapter {
+                        &__item {
+                            color: #fff;
+                            font-size: 14px;
+
+                            &__text {
+                            padding: 8px 8px 8px 24px;
+                            cursor: pointer;
+                            flex: 1;
+
+                            .el-icon-caret-right,
+                            .el-icon-caret-bottom {
+                                color: #999;
+                            }
+                            }
+                        }
+                    }
+
+                    .bank-section {
+                        &__item {
+                            user-select: none;
+                            color: #fff;
+                            font-size: 14px;
+                            display: flex;
+                            align-items: center;
+
+                            &.active {
+                            background: #132b4d;
+                            font-size: 14px;
+                            font-family: Microsoft YaHei;
+                            font-weight: bold;
+                            color: #3f8dfd;
+                            }
+
+                            &__text {
+                            flex: 1;
+                            padding: 8px 8px 8px 12px;
+                            height: 40px;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            cursor: pointer;
+
+                            .el-icon-caret-right,
+                            .el-icon-caret-bottom {
+                                color: #999;
+                            }
+                            }
+
+                            .test-btn {
+                            margin-left: 10px;
+                            width: 32px;
+                            height: 20px;
+                            background: #007aff;
+                            border-radius: 4px;
+                            line-height: 18px;
+                            color: #fff;
+                            text-align: center;
+                            }
+
+                            .note {
+                            margin-left: 10px;
+                            width: 32px;
+                            height: 20px;
+                            border: 1px solid #ff3b30;
+                            border-radius: 4px;
+                            line-height: 18px;
+                            color: #ff3b30;
+                            text-align: center;
+
+                            &--yellow {
+                                border-color: #ff9500;
+                                color: #ff9500;
+                            }
+
+                            &--blue {
+                                border-color: #3f8dfd;
+                                color: #3f8dfd;
+                            }
+                            }
+
+                            .during {
+                            color: #999;
+                            margin-right: 10px;
+                            }
+
+                            .btn {
+                            margin-right: 12px;
+                            width: 48px;
+                            height: 20px;
+                            border: 1px solid #ff3b30;
+                            background: #ff3b30;
+                            border-radius: 4px;
+                            line-height: 18px;
+                            color: #fff;
+                            text-align: center;
+
+                            &--green {
+                                border: 1px solid #34c759;
+                                background: #34c759;
+                            }
+                            }
+
+                            .live-btn {
+                            margin-left: 20px;
+                            width: 60px;
+                            height: 20px;
+                            border-radius: 4px;
+                            background: #eeeeee;
+                            line-height: 18px;
+                            color: #666666;
+                            text-align: center;
+
+                            &--yellow {
+                                background: #fff7eb;
+                                color: #ff9500;
+                            }
+
+                            &--blue {
+                                border-color: #ebf4ff;
+                                color: #007aff;
+                            }
+                            }
+                        }
+                    }
+                }
+            }
+        // }
+
+        .title {
+            height: 40px;
+            border-bottom: 1px solid #999;
+            color: #fff;
+
+            .select {
+                width: 100%;
+            }
+
+            /deep/ .el-input__icon {
+                width: 20px;
+                height: 20px;
+                border: 1px solid #fff;
+                border-radius: 4px;
+                margin-top: 10px;
+                line-height: 20px;
+            }
+
+            /deep/ .el-input__inner {
+                color: #fff;
+                font-size: 16px;
+                background: none;
+                border: 0;
+            }
+        }
+    // }
+    &__body {
+        height: 374px;
+        overflow-y: scroll;
+        &::-webkit-scrollbar {
+            // width: 6px;
+            display: none;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: #060e1a;
+            -webkit-border-radius: 2em;
+            -moz-border-radius: 2em;
+            border-radius: 2em;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: #eeeeee;
+            -webkit-border-radius: 2em;
+            -moz-border-radius: 2em;
+            border-radius: 2em;
+        }
+    }
+}
+</style>

src/pages/goodsTopic/index.vue

@@ -14,9 +14,45 @@
             <div class="mains">
                 <div class="content_up">
                     <div class="banner_one"></div>
-                    <div class="banner_two"></div> 
-                    <!-- <img class="banner_one" src='@assets/topic/banner_one.png' /> -->
-                    <!-- <img class="banner_one" src="@assets/topic/banner_one.png" alt="" /> -->
+                    <div class="banner_two">
+                        <div class="container">
+                            <div class="course_info">
+                                <div
+                                    class="left_box"
+                                    :style="{
+                                        backgroundImage: `url(${$tools.splitImgHost(goodsData.coverUrl,false)})`,
+                                    }"
+                                    >
+                                    <div v-show="vid" id="player"></div>
+                                    <div v-show="vidzb" id="playerzb"></div>
+                                </div>
+                                <div class="right-box">
+                                    <div class="right-box__header">
+                                        <div class="tabs">
+                                            <el-tabs v-model="courseTabIndex">
+                                                <el-tab-pane
+                                                    :name="tab.name"
+                                                    v-for="(tab, index) in menuTab"
+                                                    :key="index"
+                                                >
+                                                    <div slot="label">
+                                                        <span class="label">{{ tab.label }}</span>
+                                                    </div>
+                                                    <!-- 章节目录 -->
+                                                    <template v-if="tab.name == '1'">
+                                                        <catalogue></catalogue>
+                                                    </template>
+                                                </el-tab-pane>
+                                            </el-tabs>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                        </div>
+
+                    </div> 
                 </div>
                 <div class="content_down">
 
@@ -136,26 +172,59 @@ import Header from "@/components/header/index.vue";
 import Footer from "@/components/footer/index.vue";
 import ToolBar from "@/components/toolbar/index.vue";
 import buyDialog from './components/buyDialog.vue'
+import catalogue from './components/catalogue.vue'
 export default {
     name: '',
-    components: { Header, Footer, ToolBar, buyDialog },
+    components: { Header, Footer, ToolBar, buyDialog, catalogue },
     data() {
         return {
             buyModal: false,
             topicId: '',
             subjectType: 0,
             type: 0,
+            goodsInfo: {},
+            goodsData: {},
+            vid: '',
+            vidzb: '',
+            vodPlayerJs: "https://player.polyv.net/script/player.js",
+            playerJs: "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
+            uidzb: "egsxlptzdq",
+            menuTab: [
+                {
+                    name: "1",
+                    label: "章节目录",
+                }
+            ],
+            courseTabIndex: "1",
+            courseId: "",
+            goodsId: "",
+            gradeId: "",
+            orderGoodsId: "",
         }
     },
     created() {
-        this.topicId = this.$route.query.topicId
+        this.topicId = this.$route.query.topicId || 1
+        this.getgoodsInfo()
     },
     methods: {
+        getgoodsInfo() {
+            this.$axios({
+                url: `/app/common/get/goodsInfo/${this.topicId}`,
+                method: 'get',
+                noToken: true
+            }).then((res) => {
+                if (res.code == 200) {
+                    this.goodsInfo = res.data
+                    this.goodsId = res.data.goodsId
+                }
+            })
+        },
         togoBuy(subjectType, type) {
             this.subjectType = subjectType
             this.type = type
             this.buyModal = true
-        }
+        },
+        
     }
 }
 </script>
@@ -188,6 +257,238 @@ export default {
                 height: 528px;
                 background: url('../../assets/topic/banner_bg.png') center center no-repeat;
                 background-size: 100% 100%;
+                .container  {
+
+                }
+                .course_info {
+                    display: flex;
+                    align-items: center;
+                    justify-items: center;
+                }
+                .left_box {
+                    width: 700px;
+                    height: 528px;
+                    .video {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+                .right-box {
+                    width: 420px;
+                    height: 528px;
+                    background: #3f4449;
+                    border-radius: 0px;
+                    &__header {
+                        .tabs {
+                            /deep/.el-tabs__nav-wrap::after {
+                                background-color: #999;
+                            }
+
+                            /deep/ .el-tabs__header {
+                                margin: 0;
+                            }
+
+                            .label {
+                                color: #fff;
+                                height: 40px;
+                                line-height: 40px;
+                                padding: 0 20px;
+                            }
+
+                            .item {
+                                &__title {
+                                    padding-left: 12px;
+                                    height: 40px;
+                                    line-height: 40px;
+                                    cursor: pointer;
+                                    font-size: 14px;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: bold;
+                                    color: #fff;
+
+                                    .el-icon-caret-right,
+                                    .el-icon-caret-bottom {
+                                    color: #999;
+                                    }
+                                }
+
+                                &__content {
+                                    .bank-chapter {
+                                        &__item {
+                                            color: #fff;
+                                            font-size: 14px;
+
+                                            &__text {
+                                            padding: 8px 8px 8px 24px;
+                                            cursor: pointer;
+                                            flex: 1;
+
+                                            .el-icon-caret-right,
+                                            .el-icon-caret-bottom {
+                                                color: #999;
+                                            }
+                                            }
+                                        }
+                                    }
+
+                                    .bank-section {
+                                        &__item {
+                                            user-select: none;
+                                            color: #fff;
+                                            font-size: 14px;
+                                            display: flex;
+                                            align-items: center;
+
+                                            &.active {
+                                            background: #132b4d;
+                                            font-size: 14px;
+                                            font-family: Microsoft YaHei;
+                                            font-weight: bold;
+                                            color: #3f8dfd;
+                                            }
+
+                                            &__text {
+                                            flex: 1;
+                                            padding: 8px 8px 8px 12px;
+                                            height: 40px;
+                                            display: flex;
+                                            flex-direction: column;
+                                            justify-content: center;
+                                            cursor: pointer;
+
+                                            .el-icon-caret-right,
+                                            .el-icon-caret-bottom {
+                                                color: #999;
+                                            }
+                                            }
+
+                                            .test-btn {
+                                            margin-left: 10px;
+                                            width: 32px;
+                                            height: 20px;
+                                            background: #007aff;
+                                            border-radius: 4px;
+                                            line-height: 18px;
+                                            color: #fff;
+                                            text-align: center;
+                                            }
+
+                                            .note {
+                                            margin-left: 10px;
+                                            width: 32px;
+                                            height: 20px;
+                                            border: 1px solid #ff3b30;
+                                            border-radius: 4px;
+                                            line-height: 18px;
+                                            color: #ff3b30;
+                                            text-align: center;
+
+                                            &--yellow {
+                                                border-color: #ff9500;
+                                                color: #ff9500;
+                                            }
+
+                                            &--blue {
+                                                border-color: #3f8dfd;
+                                                color: #3f8dfd;
+                                            }
+                                            }
+
+                                            .during {
+                                            color: #999;
+                                            margin-right: 10px;
+                                            }
+
+                                            .btn {
+                                            margin-right: 12px;
+                                            width: 48px;
+                                            height: 20px;
+                                            border: 1px solid #ff3b30;
+                                            background: #ff3b30;
+                                            border-radius: 4px;
+                                            line-height: 18px;
+                                            color: #fff;
+                                            text-align: center;
+
+                                            &--green {
+                                                border: 1px solid #34c759;
+                                                background: #34c759;
+                                            }
+                                            }
+
+                                            .live-btn {
+                                            margin-left: 20px;
+                                            width: 60px;
+                                            height: 20px;
+                                            border-radius: 4px;
+                                            background: #eeeeee;
+                                            line-height: 18px;
+                                            color: #666666;
+                                            text-align: center;
+
+                                            &--yellow {
+                                                background: #fff7eb;
+                                                color: #ff9500;
+                                            }
+
+                                            &--blue {
+                                                border-color: #ebf4ff;
+                                                color: #007aff;
+                                            }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                        .title {
+                            height: 40px;
+                            border-bottom: 1px solid #999;
+                            color: #fff;
+
+                            .select {
+                            width: 100%;
+                            }
+
+                            /deep/ .el-input__icon {
+                            width: 20px;
+                            height: 20px;
+                            border: 1px solid #fff;
+                            border-radius: 4px;
+                            margin-top: 10px;
+                            line-height: 20px;
+                            }
+
+                            /deep/ .el-input__inner {
+                            color: #fff;
+                            font-size: 16px;
+                            background: none;
+                            border: 0;
+                            }
+                        }
+                    }
+                    &__body {
+                        height: 374px;
+                        overflow-y: scroll;
+                        &::-webkit-scrollbar {
+                            // width: 6px;
+                            display: none;
+                        }
+                        &::-webkit-scrollbar-track {
+                            background-color: #060e1a;
+                            -webkit-border-radius: 2em;
+                            -moz-border-radius: 2em;
+                            border-radius: 2em;
+                        }
+                        &::-webkit-scrollbar-thumb {
+                            background-color: #eeeeee;
+                            -webkit-border-radius: 2em;
+                            -moz-border-radius: 2em;
+                            border-radius: 2em;
+                        }
+                    }
+                }
             }
             
         }