zc_saas_pc/src/pages/person-center/my-course/index.vue

<template>
  <div class="my-course">
    <div>
      <h4 class="headerTitle">
        <span v-if="goodsData.subjectNames" style="font-size: 20px"
          >【{{ goodsData.subjectNames }}】</span
        >{{ goodsData.goodsName
        }}<el-button
          size="mini"
          type="primary"
          plain
          icon="el-icon-sort"
          style="margin-left: 14px"
          @click="changeCourse"
          >切换科目</el-button
        >
      </h4>
      <div v-for="(item, index) in courseList" :key="index">
        <p class="firstTop" @click="changeStatus(item)">
          <span class="iconStyle">课</span
          ><span class="titles">{{ item.courseName }}</span
          ><span class="showHide"
            ><span v-if="item.showStatus">收起∧</span
            ><span v-else>展开∨</span></span
          >
        </p>
        <div
          v-if="item.children && item.children.length > 0 && item.showStatus"
        >
          <template v-for="(items, indexs) in item.children">
            <div v-if="items.type === 1" :key="indexs">
              <p
                class="moduleStyle"
                @click="changeModuleStatus(items, index, indexs)"
              >
                {{ items.menuName }}
                <span class="showHide"
                  ><i v-if="items.showStatus" class="el-icon-arrow-up"></i>
                  <i v-else class="el-icon-arrow-down"></i
                ></span>
              </p>
              <template
                v-if="
                  items.showStatus &&
                  items.children &&
                  items.children.length > 0
                "
              >
                <div
                  v-for="(i, k) in items.children"
                  :key="k"
                  style="padding-left: 20px"
                >
                  <div
                    class="chapterStyle"
                    @click="changeChapterStatus(2, i, index, indexs, k)"
                  >
                    <span class="iconStyle">章</span>
                    {{ i.name }}
                    <span class="showHide"
                      ><i v-if="i.showStatus" class="el-icon-arrow-up"></i>
                      <i v-else class="el-icon-arrow-down"></i
                    ></span>
                  </div>
                  <template v-if="i.showStatus && i.children.length > 0">
                    <div
                      v-for="(is, ks) in i.children"
                      class="sectionStyle"
                      :key="ks"
                      style="padding-left: 20px"
                    >
                      <el-row style="display: flex; align-items: center">
                        <el-col :span="12">
                          <span class="iconStyles">•</span>
                          {{ is.name }}
                          <span v-if="is.recordStatus" class="upStudyStyle"
                            >上次学到</span
                          >
                        </el-col>
                        <el-col :span="4">
                          <span v-show="is.teacherName"
                            >已选讲师：{{ is.teacherName }}</span
                          >
                        </el-col>
                        <el-col :span="3">
                          <el-progress
                            v-if="is.studyDuration && is.durationTime"
                            :show-text="false"
                            :percentage="
                              (is.studyDuration / is.durationTime) * 100
                            "
                          ></el-progress>
                        </el-col>
                        <el-col :span="2">
                          <span v-show="is.studyDuration">
                            {{
                              $tools.secondToDate(is.studyDuration) +
                              "/" +
                              $tools.secondToDate(is.durationTime)
                            }}
                          </span>
                        </el-col>
                        <el-col :span="2" :offset="1">
                          <el-button
                            size="mini"
                            type="text"
                            v-if="
                              is.studyDuration > 0 &&
                              is.durationTime > 0 &&
                              is.studyDuration == is.durationTime
                            "
                            @click="studyFunc(item, is)"
                            >再次学习</el-button
                          >
                          <el-button
                            type="primary"
                            size="mini"
                            v-else-if="
                              is.studyDuration > 0 &&
                              is.durationTime > 0 &&
                              is.studyDuration != is.durationTime
                            "
                            @click="studyFunc(item, is)"
                            >继续学习</el-button
                          >
                          <el-button
                            size="mini"
                            type="primary"
                            plain
                            v-else-if="
                              is.studyDuration == 0 && is.durationTime > 0
                            "
                            @click="studyFunc(item, is)"
                            >未开始</el-button
                          >
                        </el-col>
                      </el-row>
                    </div>
                  </template>
                </div>
              </template>
            </div>
            <div v-if="items.type === 2" :key="indexs">
              <div
                class="chapterStyle"
                @click="changeChapterStatus(1, items, index, indexs)"
              >
                <span class="iconStyle">章</span>
                {{ items.menuName }}
                <span class="showHide"
                  ><i v-if="items.showStatus" class="el-icon-arrow-up"></i>
                  <i v-else class="el-icon-arrow-down"></i
                ></span>
              </div>
              <template v-if="items.showStatus && items.children.length > 0">
                <div
                  v-for="(i, k) in items.children"
                  class="sectionStyle"
                  :key="k"
                  style="padding-left: 20px"
                >
                  <el-row style="display: flex; align-items: center">
                    <el-col :span="12">
                      <span class="iconStyles">•</span>
                      {{ i.name }}
                      <span v-if="i.recordStatus" class="upStudyStyle"
                        >上次学到</span
                      >
                    </el-col>
                    <el-col :span="4">
                      <span v-show="i.teacherName"
                        >已选讲师：{{ i.teacherName }}</span
                      >
                    </el-col>
                    <el-col :span="3">
                      <el-progress
                        v-if="i.studyDuration && i.durationTime"
                        :show-text="false"
                        :percentage="(i.studyDuration / i.durationTime) * 100"
                      ></el-progress>
                    </el-col>
                    <el-col :span="2">
                      <span v-show="i.studyDuration">
                        {{
                          $tools.secondToDate(i.studyDuration) +
                          "/" +
                          $tools.secondToDate(i.durationTime)
                        }}
                      </span>
                    </el-col>
                    <el-col :span="2" :offset="1">
                      <el-button
                        size="mini"
                        type="text"
                        v-if="
                          i.studyDuration > 0 &&
                          i.durationTime > 0 &&
                          i.studyDuration == i.durationTime
                        "
                        @click="studyFunc(item, i)"
                        >再次学习</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        v-else-if="
                          i.studyDuration > 0 &&
                          i.durationTime > 0 &&
                          i.studyDuration != i.durationTime
                        "
                        @click="studyFunc(item, i)"
                        >继续学习</el-button
                      >
                      <el-button
                        size="mini"
                        plain
                        type="primary"
                        v-else-if="i.studyDuration == 0 && i.durationTime > 0"
                        @click="studyFunc(item, i)"
                        >未开始</el-button
                      >
                    </el-col>
                  </el-row>
                </div>
              </template>
            </div>
            <div v-if="items.type === 3" :key="indexs" class="sectionStyle">
              <el-row style="display: flex; align-items: center">
                <el-col :span="12">
                  <span class="iconStyles">•</span>
                  {{ items.menuName }}
                  <span v-if="items.recordStatus" class="upStudyStyle"
                    >上次学到</span
                  >
                </el-col>
                <el-col :span="4">
                  <span v-show="items.teacherName"
                    >已选讲师：{{ items.teacherName }}</span
                  >
                </el-col>
                <el-col :span="3">
                  <el-progress
                    v-if="items.studyDuration && items.durationTime"
                    :show-text="false"
                    :percentage="
                      (items.studyDuration / items.durationTime) * 100
                    "
                  ></el-progress>
                </el-col>
                <el-col :span="2">
                  <span v-show="items.studyDuration">
                    {{
                      $tools.secondToDate(items.studyDuration) +
                      "/" +
                      $tools.secondToDate(items.durationTime)
                    }}
                  </span>
                </el-col>
                <el-col :span="2" :offset="1">
                  <el-button
                    size="mini"
                    type="text"
                    v-if="
                      items.studyDuration > 0 &&
                      items.durationTime > 0 &&
                      items.studyDuration == items.durationTime
                    "
                    @click="studyFunc(item, items)"
                    >再次学习</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    v-else-if="
                      items.studyDuration > 0 &&
                      items.durationTime > 0 &&
                      items.studyDuration != items.durationTime
                    "
                    @click="studyFunc(item, items)"
                    >继续学习</el-button
                  >
                  <el-button
                    plain
                    size="mini"
                    type="primary"
                    v-else-if="
                      items.studyDuration == 0 && items.durationTime > 0
                    "
                    @click="studyFunc(item, items)"
                    >未开始</el-button
                  >
                </el-col>
              </el-row>
            </div>
          </template>
        </div>
      </div>
    </div>
    <courseData ref="courseData" @backData="backData" />
    <el-dialog
      title="实名验证确认"
      :visible.sync="showConfirm"
      width="600px"
      class="showconfirm"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="showconfirm__content">
        <div class="text">
          为避免个人信息不正确导致您的学习时长无效，请认真核对以下信息是否正确，如信息有误请取消当前操作，立刻联系020-38946666
        </div>
        <el-descriptions :column="1">
          <el-descriptions-item label="姓名">{{
            userInfo && userInfo.realname
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{
            userInfo && userInfo.telphone
          }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{
            userInfo && userInfo.idCard
          }}</el-descriptions-item>
        </el-descriptions>

        <div class="">
          <el-checkbox v-model="confirmChecked">确认个人信息无误</el-checkbox>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showConfirm = false">取 消</el-button>
        <el-button
          type="primary"
          @click="confirmUser"
          :disabled="confirmCount > 0"
          :loading="confirmLoading"
          >{{
            confirmCount > 0 ? "确 定(" + confirmCount + ")" : "确 定"
          }}</el-button
        >
      </span>
    </el-dialog>
    <RebuildModal
      ref="rebuildModal"
      @rebuildSubmit="rebuildSubmit($event)"
    ></RebuildModal>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import courseData from "./courseData.vue";
import RebuildModal from "@/components/rebuildModal";
export default {
  name: "MyCourse",
  components: { courseData, RebuildModal },
  data() {
    return {
      goodsData: {},
      courseList: [],
      sysTime: 0,
      showConfirm: false,
      confirmCount: 10,
      confirmChecked: false,
      confirmTimer: null,
      confirmLoading: false,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.getRecord();
    this.sysTime = this.$tools.timest();
  },
  methods: {
    comeStyle(courseItem, item) {
      this.$router.push({
        path: `/my-course-detail/${this.goodsData.goodsId}`,
        query: {
          gradeId: courseItem.gradeId,
          orderGoodsId: this.goodsData.orderGoodsId,
          courseId: courseItem.courseId,
          chapterId: item.chapterId,
          moduleId: item.moduleId,
          sectionId: item.sectionId || item.menuId,
          recordingUrl: item.recordingUrl,
          sectionType: item.sectionType,
        },
      });
    },
    changeCourse() {
      this.$refs.courseData.openBoxs(this.goodsData);
    },
    backData(item) {
      this.goodsData = item;
      this.getGoodsCourseList(item);
    },
    /**
     * 获取课程列表
     */
    getGoodsCourseList(item) {
      return new Promise((resolve, reject) => {
        this.$request
          .courseCourseList({
            goodsId: item.goodsId,
            gradeId: item.gradeId,
          })
          .then((res) => {
            res.rows.forEach((element) => {
              element.showStatus = false;
              element.children = [];
            });
            this.courseList = res.rows;
            resolve();
            // if (res.rows && res.rows.length > 0) {
            //   this.getRecord(res.rows[0]);
            // }
          });
      });
    },
    getGoodsData(res) {
      return new Promise((resolve, reject) => {
        this.$request
          .courseGoodsList({ orderGoodsId: res.data.orderGoodsId })
          .then(async (result) => {
            if(result.rows.length == 0){
              this.resultCourseGoodsList()
            }else{
            let array = result.rows[0];
            array.orderGoodsId = res.data.orderGoodsId;
            this.goodsData = array;
            await this.getGoodsCourseList(array);
            resolve();
            }
          });
      });
    },
    /**
     * 获取学习记录
     */
    getRecord(item) {
      this.$request.studyrecordgetUserWatchLast().then(async (res) => {
        if (res.data && res.data.sectionId) {
          await this.getGoodsData(res);
          var stop = false;
          for (let i = 0; i < this.courseList.length; i++) {
            if (stop) {
              break;
            }
            if (this.courseList[i].courseId == res.data.courseId) {
              await this.changeStatus(this.courseList[i]);
              for (let k = 0; k < this.courseList[i].children.length; k++) {
                if (res.data.moduleId) {
                  console.log(1);
                  if (
                    this.courseList[i].children[k].menuId == res.data.moduleId
                  ) {
                    await this.changeModuleStatus(
                      this.courseList[i].children[k],
                      i,
                      k
                    );
                    for (
                      let j = 0;
                      j < this.courseList[i].children[k].children.length;
                      j++
                    ) {
                      if (
                        this.courseList[i].children[k].children[j].chapterId ==
                        res.data.chapterId
                      ) {
                        await this.changeChapterStatus(
                          2,
                          this.courseList[i].children[k].children[j],
                          i,
                          k,
                          j
                        );

                        for (
                          let m = 0;
                          m <
                          this.courseList[i].children[k].children[j].children
                            .length;
                          m++
                        ) {
                          if (
                            this.courseList[i].children[k].children[j].children[
                              m
                            ].sectionId == res.data.sectionId
                          ) {
                            this.$set(
                              this.courseList[i].children[k].children[j]
                                .children[m],
                              "recordStatus",
                              true
                            );
                            stop = true;
                            break;
                          }
                        }
                      }
                    }
                  }
                } else if (res.data.chapterId) {
                  console.log(2);
                  if (
                    this.courseList[i].children[k].menuId == res.data.chapterId
                  ) {
                    await this.changeChapterStatus(
                      1,
                      this.courseList[i].children[k],
                      i,
                      k
                    );
                    for (
                      let j = 0;
                      j < this.courseList[i].children[k].children.length;
                      j++
                    ) {
                      if (
                        this.courseList[i].children[k].children[j].sectionId ==
                        res.data.sectionId
                      ) {
                        this.$set(
                          this.courseList[i].children[k].children[j],
                          "recordStatus",
                          true
                        );
                        stop = true;
                        break;
                      }
                    }
                  }
                } else {
                  console.log(3);
                  if (
                    this.courseList[i].children[k].menuId == res.data.sectionId
                  ) {
                    this.$set(
                      this.courseList[i].children[k],
                      "recordStatus",
                      true
                    );
                    stop = true;
                    break;
                  }
                }
              }
            }
          }
        } else {
          this.resultCourseGoodsList()
        }
      });
    },
    resultCourseGoodsList(){
      this.$request
            .courseGoodsList({ pageNum: 1, pageSize: 1 })
            .then((res) => {
              if (res.rows && res.rows.length > 0) {
                this.backData(res.rows[0]);
              }
            });
    },
    /**
     * 展开获取课程详情列表
     */
    changeStatus(item) {
      return new Promise((resolve, reject) => {
        console.log(item);
        if (item.children.length > 0) {
          item.showStatus = !item.showStatus;
          return;
        }
        this.$request
          .reMenuList({
            courseId: item.courseId,
            gradeId: item.gradeId,
            orderGoodsId: this.goodsData.orderGoodsId,
          })
          .then((res) => {
            res.rows.forEach((items) => {
              if (items.type != 3) {
                items.showStatus = false;
                items.children = [];
              }
            });
            for (let i = 0; i < this.courseList.length; i++) {
              if (this.courseList[i].courseId == item.courseId) {
                this.$set(this.courseList[i], "children", res.rows);
                this.$set(
                  this.courseList[i],
                  "showStatus",
                  !this.courseList[i].showStatus
                );
                break;
              }
            }
            resolve();
          });
      });
    },
    /**
     * 模块详情列表
     */
    changeModuleStatus(item, index, indexs) {
      return new Promise((resolve, reject) => {
        if (item.children && item.children.length > 0) {
          item.showStatus = !item.showStatus;
          return;
        }
        this.$request
          .reChapterList({
            moduleId: item.menuId,
            gradeId: item.gradeId,
            courseId: item.courseId,
          })
          .then((res) => {
            res.data.forEach((items) => {
              items.children = [];
              items.showStatus = false;
            });
            this.$set(
              this.courseList[index].children[indexs],
              "children",
              res.data
            );
            item.showStatus = !item.showStatus;
            resolve();
          });
      });
    },
    /**
     * 章详情列表 type = 1 父级章 type = 2 父级模块
     */
    changeChapterStatus(type, item, courseIndex, index, indexs) {
      return new Promise((resolve, reject) => {
        console.log("rrr");
        if (item.children && item.children.length > 0) {
          item.showStatus = !item.showStatus;
          return;
        }
        this.$request
          .reSectionList({
            chapterId: type === 1 ? item.menuId : item.chapterId,
            gradeId: item.gradeId,
            courseId: item.courseId,
            moduleId: item.moduleId,
            orderGoodsId: this.goodsData.orderGoodsId,
          })
          .then((res) => {
            if (type === 1) {
              this.$set(
                this.courseList[courseIndex].children[index],
                "children",
                res.data
              );
            }
            if (type === 2) {
              this.$set(
                this.courseList[courseIndex].children[index].children[indexs],
                "children",
                res.data
              );
            }
            item.showStatus = !item.showStatus;
            resolve();
          });
      });
    },
    async studyFunc(courseItem, items) {
      this.sysTime = this.$tools.timest();
      let item = this.goodsData;
      if (item.interfaceAccountId > 0) {
        //学习账号已开通

        if (item.learnStatus == 1) {
          //跳转第三方h5

          this.$router.push({
            path: `/my-course-detail/${item.goodsId}`,
            query: {
              gradeId: item.gradeId,
              orderGoodsId: item.orderGoodsId,
              isOther: 1,
            },
          });
          return;
        } else {
          this.$message({
            type: "warning",
            message:
              "您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！",
          });
          return;
        }
      }
      if (
        (item.serviceStartTime && this.sysTime <= item.serviceStartTime) ||
        (item.serviceEndTime && this.sysTime >= item.serviceEndTime)
      ) {
        this.$message({
          type: "warning",
          message: "不在学习服务期，不能进入学习",
        });
        return;
      }

      if (
        (item.classStartTime && this.sysTime <= item.classStartTime) ||
        (item.classEndTime && this.sysTime >= item.classEndTime)
      ) {
        this.$message({
          type: "warning",
          message: "不在班级有效期，不能进入学习",
        });
        return;
      }

      if (item.learningStatus == 2) {
        this.$message({
          type: "warning",
          message: "开放学习时间待定，不能进入学习",
        });
        return;
      }

      if (item.classStatus == 0) {
        this.$message({
          type: "warning",
          message: "尚未开班，不能进入学习",
        });
        return;
      }
      if (item.learningStatus == 3 && this.sysTime < item.learningTimeStart) {
        this.$message({
          type: "warning",
          message: "不在开放学习时间,不能进入学习",
        });
        return;
      }

      var confirmDetail = true;
      if (item.educationName == "继续教育") {
        if (
          item.officialName &&
          item.businessName == "二级" &&
          item.projectName == "建造师"
        ) {
          confirmDetail = await this.userConfirmInfoDetail();
        }
      }

      // //内部系统
      // if (item.interfacePushId > 0 && item.officialStatus != 1) {
      //   this.$message({
      //     type: "warning",
      //     message: "机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！",
      //   });
      //   return;
      // }

      if (!confirmDetail) {
        return;
      }

      let rebuildStatus = await this.courseGoodsRebuildStatus(
        item.goodsId,
        item.gradeId
      );

      if (rebuildStatus == 0) {
        this.$refs.rebuildModal.showModal(item);
        return;
      }

      // if (item.educationName == "继续教育") {
      this.$request
        .lockLockStatus({
          action: "jxjy",
          uuid: sessionStorage.getItem("uuid"),
        })
        .then((res) => {
          //有其他端在操作，不能学习
          this.$message({
            type: "warning",
            message: res.msg,
          });
        })
        .catch((err) => {
          //可以学习
          this.$request
            .courseCourseList({
              pageNum: 1,
              pageSize: 1,
              goodsId: item.goodsId,
              gradeId: item.gradeId,
            })
            .then((res) => {
              if (res.rows.length) {
                // this.$emit("backData", item);
                // this.dialogVisible = false;
                this.comeStyle(courseItem, items);
                // this.$router.push({
                //   path: `/my-course-detail/${item.goodsId}`,
                //   query: {
                //     gradeId: item.gradeId,
                //     orderGoodsId: item.orderGoodsId,
                //     courseId: res.rows[0].courseId || "",
                //   },
                // });
                // }
              } else {
                this.$message({
                  type: "warning",
                  message: "课程内暂无可以学习的科目",
                });
              }
            });
        });
    },
    userConfirmInfoDetail() {
      return new Promise((resolve) => {
        this.$request
          .userConfirmInfoDetail({
            orderGoodsId: this.goodsData.orderGoodsId,
          })
          .then((res) => {
            if (!res.data) {
              clearInterval(this.confirmTimer);
              this.confirmCount = 10;
              this.showConfirm = true;
              this.confirmTimer = setInterval(() => {
                if (this.confirmCount > 0) {
                  this.confirmCount--;
                } else {
                  clearInterval(this.confirmTimer);
                }
              }, 1000);
            } else {
              if (res.data.pushInfo) {
                resolve(true);
              } else {
                this.$confirm(
                  "开通信息推送不成功，无法进入学习，请联系020-87085982！",
                  "提示",
                  {
                    confirmButtonText: "确定",
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    distinguishCancelAndClose: false,
                    showClose: false,
                    showCancelButton: false,
                  }
                )
                  .then((_) => {})
                  .catch((_) => {});
                resolve(false);
              }
            }
          });
      });
    },

    confirmUser() {
      if (!this.confirmChecked) {
        this.$message.warning("请勾选确认个人信息无误");
        return;
      }
      this.confirmLoading = true;
      let infoJson = {
        realname: this.userInfo.realname,
        idCard: this.userInfo.idCard,
        telphone: this.userInfo.telphone,
      };
      this.$request
        .userConfirminfo({
          infoJson: JSON.stringify(infoJson),
          orderGoodsId: this.goodsData.orderGoodsId,
        })
        .then((res) => {
          if (res.data.pushInfo) {
            this.$message.success("提交成功");
          } else {
            this.$confirm(
              "开通信息推送不成功，无法进入学习，请联系020-87085982！",
              "提示",
              {
                confirmButtonText: "确定",
                closeOnClickModal: false,
                closeOnPressEscape: false,
                distinguishCancelAndClose: false,
                showClose: false,
                showCancelButton: false,
              }
            )
              .then((_) => {})
              .catch((_) => {});
          }
          this.showConfirm = false;
          this.confirmLoading = false;
        });
    },
    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise((resolve) => {
        this.$request
          .courseGoodsRebuildStatus({
            goodsId: goodsId,
            gradeId: gradeId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    rebuildSubmit(item) {
      this.$router.push({
        path: `/my-course-detail/${item.goodsId}`,
        query: {
          gradeId: item.gradeId,
          orderGoodsId: item.orderGoodsId,
          rebuild: 1,
        },
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.headerTitle {
  color: #222;
  font-weight: bold;
  font-size: 24px;
  padding: 28px 0px;
  border-bottom: 1px solid #eee;
}
.firstTop {
  margin: 24px 0px;
  .iconStyle {
    background-color: #3f8dfd;
    color: #fff;
    margin-right: 8px;
    padding: 0px 4px;
    border-radius: 4px;
    font-size: 12px;
    vertical-align: text-top;
  }
  .titles {
    font-weight: bold;
    color: #333;
    font-size: 18px;
  }
  .showHide {
    cursor: pointer;
    user-select: none;
    float: right;
    color: #99a0a7;
  }
}
.moduleStyle {
  padding: 17px;
  background-color: #f8f8f9;
  font-weight: bold;
  color: #222;
  margin-bottom: 16px;
  .showHide {
    cursor: pointer;
    user-select: none;
    float: right;
    color: #99a0a7;
  }
}
.chapterStyle {
  font-weight: 400;
  .iconStyle {
    background-color: #fff;
    color: #3f8dfd;
    margin-right: 8px;
    padding: 0px 2px;
    border-radius: 2px;
    border: 1px solid #3f8dfd;
    font-size: 10px;
    vertical-align: text-top;
  }
  .showHide {
    cursor: pointer;
    user-select: none;
    float: right;
    color: #99a0a7;
  }
  margin-bottom: 16px;
  padding: 17px;
  border-bottom: 1px solid #eee;
}
.sectionStyle {
  color: #99a0a7;
  padding: 10px;
  .iconStyles {
    color: #99a0a7;
    margin-right: 8px;
    padding: 0px 2px;
  }
}
.upStudyStyle {
  background-color: #f2f7ff;
  border: 1px solid #3f8dfd;
  color: #3f8dfd;
  padding: 3px 4px;
  border-radius: 4px;
}
</style>