saas_pc/src/pages/goods-detail/bank-detail.vue

<template>
  <div class="goods-detail">
    <Header></Header>
    <section class="section">
      <div class="container">
        <div class="section__header">
          <div class="container">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/index' }"
                >首页</el-breadcrumb-item
              >
              <el-breadcrumb-item>商品详情</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <div class="section__body">
          <div class="container">
            <div class="goods-info">
              <div class="goods-info__header">
                <div class="img">
                  <img
                    :src="$tools.splitImgHost(goodsDetail.coverUrl, false)"
                    alt=""
                  />
                </div>
                <div class="text">
                  <div class="title">
                    {{ goodsDetail.goodsName }}
                  </div>
                  <div class="price" v-if="goodsDetail.standPrice === 0">
                    免费
                  </div>
                  <div class="price" v-else>
                    ￥{{ goodsDetail.standPrice | toFixed }}
                  </div>
                  <div class="btns">
                    <el-button
                      type="primary"
                      round
                      class="buynow"
                      @click="buyNow"
                      >立即购买</el-button
                    >
                    <el-button
                      type="primary"
                      round
                      plain
                      class="add"
                      @click="addCart()"
                      >加入购物车</el-button
                    >
                  </div>
                </div>
              </div>
              <div class="goods-info__body">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="课程详情" name="1">
                    <div class="detail" v-html="goodsDetail.pcDetailHtml"></div>
                  </el-tab-pane>
                  <el-tab-pane label="章节目录" name="2">
                    <div slot="label" style="position: relative">
                      <span class="label">章节目录</span>
                      <span v-if="goodsExamConfig.length" class="view-note"
                        >试做</span
                      >
                    </div>

                    <div class="goods-menu clearfix">
                      <div class="left-box">
                        <div class="left-box__body">
                          <div
                            class="item"
                            v-for="(item, index) in bankList"
                            :key="index"
                          >
                            <template v-if="item.type == 1">
                              <div
                                class="item__title"
                                @click="moduleExam(item)"
                              >
                                <i
                                  :class="{
                                    'el-icon-caret-right': !item.showList,
                                    'el-icon-caret-bottom': item.showList,
                                  }"
                                ></i>
                                {{ item.name }}
                              </div>
                              <div class="item__content">
                                <div class="bank-chapter" v-if="item.showList">
                                  <div
                                    class="bank-chapter__item"
                                    v-for="(chapter, chapterIndex) in item.list"
                                    :key="chapterIndex"
                                  >
                                    <div
                                      class="bank-chapter__item__text"
                                      @click="chapterExam(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"
                                        v-for="(
                                          section, sectionIndex
                                        ) in chapter.list"
                                        :key="sectionIndex"
                                      >
                                        <div class="bank-section__item__text">
                                          {{ section.examName }}
                                        </div>
                                        <div
                                          @click="toDo(section)"
                                          class="btn"
                                          v-if="isTest(section.examId)"
                                        >
                                          试做
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </template>

                            <template v-if="item.type == 2">
                              <div class="item__content">
                                <div class="bank-chapter">
                                  <div class="bank-chapter__item">
                                    <div
                                      class="bank-chapter__item__text"
                                      @click="chapterExam(item)"
                                    >
                                      <i
                                        :class="{
                                          'el-icon-caret-right': !item.showList,
                                          'el-icon-caret-bottom': item.showList,
                                        }"
                                      ></i
                                      >{{ item.name }}
                                    </div>

                                    <div
                                      class="bank-section"
                                      v-if="item.showList"
                                    >
                                      <div
                                        class="bank-section__item"
                                        v-for="(
                                          section, sectionIndex
                                        ) in item.list"
                                        :key="sectionIndex"
                                      >
                                        <div class="bank-section__item__text">
                                          {{ section.examName }}
                                        </div>
                                        <div
                                          @click="toDo(section)"
                                          class="btn"
                                          v-if="isTest(section.examId)"
                                        >
                                          试做
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </template>

                            <template v-if="item.type == 3">
                              <div class="item__content">
                                <div class="bank-section">
                                  <div class="bank-section__item">
                                    <div class="bank-section__item__text">
                                      {{ item.name }}
                                    </div>
                                    <div
                                      @click="toDo(item)"
                                      class="btn"
                                      v-if="isTest(item.majorId)"
                                    >
                                      试做
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </template>
                          </div>
                        </div>
                      </div>
                      <div class="right-box">
                        <div class="title">
                          推荐题库
                          <a class="more" @click="comeMoreList">更多></a>
                        </div>
                        <ul class="list">
                          <li
                            class="course-item"
                            v-for="(itemy, index) in compyRecommend(
                              recommendList.goodsList
                            )"
                            :key="index"
                          >
                            <GoodsItem :item="itemy"></GoodsItem>
                            <!-- <div
                              class="course-item__img"
                              :style="`background-image:url(${$tools.splitImgHost(
                                itemy.coverUrl,
                                true
                              )})`"
                              @click="toGoodsDetail(itemy)"
                            >
                              <div class="note" v-if="itemy.year">
                                {{ itemy.year }}
                              </div>
                            </div>
                            <div class="course-item__title">
                              {{ itemy.goodsName }}
                            </div>
                            <div class="course-item__desc">
                              <div class="price">￥{{ itemy.standPrice }}</div>
                              <a
                                class="add"
                                @click="addCart(true, itemy.goodsId)"
                                >加购物车</a
                              >
                            </div> -->
                          </li>
                        </ul>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="学员须知" name="3">
                    {{ goodsDetail.buyNote }}</el-tab-pane
                  >
                </el-tabs>
              </div>
            </div>
          </div>
        </div>

        <div
          class="section__footer"
          v-if="
            recommendList.goodsList &&
            recommendList.goodsList.length &&
            activeName == 1
          "
        >
          <div class="recommend">
            <div class="recommend__header">
              <div class="title">相关推荐</div>
            </div>
            <div class="recommend__body">
              <ul class="list clearfix">
                <li
                  class="recommend-item"
                  v-for="(itemy, index) in compyRecommend(
                    recommendList.goodsList
                  )"
                  :key="index"
                >
                  <GoodsItem :item="itemy"></GoodsItem>
                  <!-- <div
                    class="recommend-item__img"
                    :style="`background-image:url(${$tools.splitImgHost(
                      itemy.coverUrl,
                      true
                    )})`"
                    @click="toGoodsDetail(itemy)"
                  >
                    <div class="note" v-if="itemy.year">{{ itemy.year }}</div>
                  </div>
                  <div class="recommend-item__title">
                    {{ itemy.goodsName }}
                  </div>
                  <div class="recommend-item__desc">
                    <div class="price">￥{{ itemy.standPrice }}</div>
                    <a class="add" @click="addCart(true, itemy.goodsId)"
                      >加购物车</a
                    >
                  </div> -->
                </li>
              </ul>
            </div>

            <div class="recommend__footer">
              <div class="btn" @click="comeMoreList">查看更多</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <el-dialog
      width="800px"
      class="question-modal"
      :visible.sync="questionModalShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="question-modal__content">
        <a class="question-modal__close" @click="questionModalShow = false"
          >X</a
        >
        <div class="left-box">
          <div class="left-box__header">
            <el-progress
              class="progress"
              :text-inside="true"
              :stroke-width="26"
              :percentage="70"
            ></el-progress>
            <div class="text">
              已完成<span>{{ questionOverNum(true) }}</span
              >/{{ questionList.length }}道题
            </div>
          </div>
          <div class="left-box__body">
            <template v-for="(question, questionIndex) in questionList">
              <div
                class="question"
                v-if="
                  question.type == 1 &&
                  questionModalData.current == questionIndex
                "
                :key="questionIndex"
              >
                <div class="question__title">
                  {{ questionIndex + 1 }}、单选题
                </div>
                <div class="question__desc" v-html="question.content"></div>
                <div class="question__content">
                  <div class="question-list" v-if="!question.ques">
                    <div
                      class="radio"
                      v-for="(item, index) in question.jsonStr"
                      :key="index"
                      @click="
                        radioSelect(question, questionIndex, item.optionsId)
                      "
                    >
                      <div>{{ ast[index] }}. {{ item.content }}</div>
                    </div>
                  </div>
                  <div class="question-list" v-if="question.ques">
                    <div
                      class="radio"
                      :class="{
                        right:
                          item.optionsId == question.ques ||
                          item.optionsId == question.ans,
                        wrong:
                          item.optionsId == question.ques &&
                          question.ques != question.ans,
                      }"
                      v-for="(item, index) in question.jsonStr"
                      :key="index"
                    >
                      <div>{{ ast[index] }}. {{ item.content }}</div>
                    </div>
                  </div>
                  <div class="answer-list" v-if="question.ques">
                    <div class="answer-list__left">
                      正确答案：{{ ast[question.ans - 1] }}
                    </div>
                    <div class="answer-list__left">
                      我的答案：{{ ast[question.ques - 1] }}
                    </div>
                  </div>
                  <div class="explain-list" v-if="question.ques">
                    <div class="explain-list__header">答案解析：</div>
                    <div
                      class="explain-list__body"
                      v-html="question.analysisContent"
                    ></div>
                  </div>
                </div>
                <div class="question__btns">
                  <div class="collect" @click="collect">收藏本题</div>
                </div>
              </div>
              <div
                class="question"
                v-if="
                  question.type == 2 &&
                  questionModalData.current == questionIndex
                "
                :key="questionIndex"
              >
                <div class="question__title">
                  {{ questionIndex + 1 }}、多选题
                </div>
                <div class="question__desc" v-html="question.content"></div>
                <div class="question__content">
                  <div class="question-list" v-if="!question.ques">
                    <el-checkbox
                      class="checkbox"
                      v-for="(item, index) in question.jsonStr"
                      :key="index"
                      :label="item.optionsId"
                      v-model="item.checked"
                    >
                      <div>{{ ast[index] }}. {{ item.content }}</div>
                    </el-checkbox>
                  </div>
                  <div class="question-list" v-if="question.ques">
                    <el-checkbox
                      disabled
                      class="checkbox"
                      :class="{
                        right:
                          question.ques.indexOf(item.optionsId) != -1 ||
                          question.ans.indexOf(item.optionsId) != -1,
                        wrong:
                          question.ques.indexOf(item.optionsId) != -1 &&
                          question.ans.indexOf(item.optionsId) == -1,
                      }"
                      v-for="(item, index) in question.jsonStr"
                      :key="index"
                      :label="item.optionsId"
                      v-model="item.checked"
                    >
                      <div>{{ ast[index] }}. {{ item.content }}</div>
                    </el-checkbox>
                  </div>
                  <div class="answer-list" v-if="question.ques">
                    <div class="answer-list__left">
                      正确答案：
                      <template v-for="ansItem in question.ans">{{
                        ast[ansItem - 1]
                      }}</template>
                    </div>
                    <div class="answer-list__left">
                      我的答案：
                      <template v-for="quesItem in question.ques">{{
                        ast[quesItem - 1]
                      }}</template>
                    </div>
                  </div>
                  <div class="explain-list" v-if="question.ques">
                    <div class="explain-list__header">答案解析：</div>
                    <div
                      class="explain-list__body"
                      v-html="question.analysisContent"
                    ></div>
                  </div>
                </div>
                <div class="question__btns">
                  <div
                    v-if="!question.ques"
                    class="submit"
                    @click="checkboxSubmit(question, questionIndex)"
                  >
                    确认答案
                  </div>
                  <div class="collect" @click="collect">收藏本题</div>
                </div>
              </div>
              <div
                class="question"
                v-if="
                  question.type == 3 &&
                  questionModalData.current == questionIndex
                "
                :key="questionIndex"
              >
                <div class="question__title">
                  {{ questionIndex + 1 }}、判断题
                </div>
                <div class="question__desc" v-html="question.content"></div>
                <div class="question__content">
                  <div class="question-list" v-if="!question.ques">
                    <div
                      class="radio"
                      v-for="(item, index) in judge"
                      :key="index"
                      @click="judgeSelect(question, questionIndex, index)"
                    >
                      <div>{{ ast[index] }}. {{ item }}</div>
                    </div>
                  </div>
                  <div class="question-list" v-if="question.ques">
                    <div
                      class="radio"
                      :class="{
                        right: index == (question.ques == 1 ? 0 : 1) || index != question.ans,
                        wrong: index == (question.ques == 1 ? 0 : 1) && question.ques != question.ans
                      }"
                      v-for="(item, index) in judge"
                      :key="index"
                    >
                      <div>{{ ast[index] }}. {{ item }}</div>
                    </div>
                  </div>
                  <div class="answer-list" v-if="question.ques">
                    <div class="answer-list__left">
                      正确答案：{{ ast[question.ans == 1 ? 0 : 1] }}
                    </div>
                    <div class="answer-list__left">
                      我的答案：{{ ast[question.ques == 1 ? 0 : 1] }}
                    </div>
                  </div>
                  <div class="explain-list" v-if="question.ques">
                    <div class="explain-list__header">答案解析：</div>
                    <div
                      class="explain-list__body"
                      v-html="question.analysisContent"
                    ></div>
                  </div>
                </div>
                <div class="question__btns">
                  <div class="collect" @click="collect">收藏本题</div>
                </div>
              </div>
              <div
                class="question"
                v-if="
                  question.type == 4 &&
                  questionModalData.current == questionIndex
                "
                :key="questionIndex"
              >
                <div class="question__title">
                  {{ questionIndex + 1 }}、案例题
                </div>
                <div class="question__content">
                  <el-tabs v-model="question.tabIndex">
                    <el-tab-pane
                      v-for="(json, jsonIndex) in question.jsonStr"
                      :label="'问题' + (jsonIndex + 1)"
                      :name="jsonIndex + ''"
                      :key="jsonIndex"
                    >
                      <div
                        class="question"
                        v-if="json.type == 1"
                        :key="questionIndex"
                      >
                        <div class="question__title">
                          {{ jsonIndex + 1 }}、单选题
                        </div>
                        <div class="question__desc" v-html="json.content"></div>
                        <div class="question__content">
                          <div
                            class="question-list"
                            v-if="!question.ques[jsonIndex]"
                          >
                            <div
                              class="radio"
                              v-for="(item, index) in json.optionsList"
                              :key="index"
                              @click="
                                radioSelectChild(
                                  questionIndex,
                                  jsonIndex,
                                  item.optionsId
                                )
                              "
                            >
                              <div>{{ ast[index] }}. {{ item.content }}</div>
                            </div>
                          </div>
                          <div
                            class="question-list"
                            v-if="question.ques[jsonIndex]"
                          >
                            <div
                              class="radio"
                              :class="{
                                right:
                                  item.optionsId == question.ques[jsonIndex] ||
                                  item.optionsId == question.ans[jsonIndex],
                                wrong:
                                  item.optionsId == question.ques[jsonIndex] &&
                                  question.ques[jsonIndex] !=
                                    question.ans[jsonIndex],
                              }"
                              v-for="(item, index) in json.optionsList"
                              :key="index"
                            >
                              <div>{{ ast[index] }}. {{ item.content }}</div>
                            </div>
                          </div>
                          <div
                            class="answer-list"
                            v-if="question.ques[jsonIndex]"
                          >
                            <div class="answer-list__left">
                              正确答案：{{ ast[question.ans[jsonIndex] - 1] }}
                            </div>
                            <div class="answer-list__left">
                              我的答案：{{ ast[question.ques[jsonIndex] - 1] }}
                            </div>
                          </div>
                          <div
                            class="explain-list"
                            v-if="question.ques[jsonIndex]"
                          >
                            <div class="explain-list__header">答案解析：</div>
                            <div
                              class="explain-list__body"
                              v-html="json.analysisContent"
                            ></div>
                          </div>
                        </div>
                        <div class="question__btns"></div>
                      </div>
                      <div
                        class="question"
                        v-if="json.type == 2"
                        :key="jsonIndex"
                      >
                        <div class="question__title">
                          {{ jsonIndex + 1 }}、多选题
                        </div>
                        <div class="question__desc" v-html="json.content"></div>
                        <div class="question__content">
                          <div
                            class="question-list"
                            v-if="!question.ques[jsonIndex]"
                          >
                            <el-checkbox
                              class="checkbox"
                              v-for="(item, index) in json.optionsList"
                              :key="index"
                              :label="item.optionsId"
                              v-model="item.checked"
                            >
                              <div>{{ ast[index] }}. {{ item.content }}</div>
                            </el-checkbox>
                          </div>
                          <div
                            class="question-list"
                            v-if="question.ques[jsonIndex]"
                          >
                            <el-checkbox
                              disabled
                              class="checkbox"
                              :class="{
                                right:
                                  question.ques[jsonIndex].indexOf(
                                    item.optionsId
                                  ) != -1 ||
                                  question.ans[jsonIndex].indexOf(
                                    item.optionsId
                                  ) != -1,
                                wrong:
                                  question.ques[jsonIndex].indexOf(
                                    item.optionsId
                                  ) != -1 &&
                                  question.ans[jsonIndex].indexOf(
                                    item.optionsId
                                  ) == -1,
                              }"
                              v-for="(item, index) in json.optionsList"
                              :key="index"
                              :label="item.optionsId"
                              v-model="item.checked"
                            >
                              <div>{{ ast[index] }}. {{ item.content }}</div>
                            </el-checkbox>
                          </div>
                          <div
                            class="answer-list"
                            v-if="question.ques[jsonIndex]"
                          >
                            <div class="answer-list__left">
                              正确答案：
                              <template
                                v-for="ansItem in question.ans[jsonIndex]"
                                >{{ ast[ansItem - 1] }}</template
                              >
                            </div>
                            <div class="answer-list__left">
                              我的答案：
                              <template
                                v-for="quesItem in question.ques[jsonIndex]"
                                >{{ ast[quesItem - 1] }}</template
                              >
                            </div>
                          </div>
                          <div
                            class="explain-list"
                            v-if="question.ques[jsonIndex]"
                          >
                            <div class="explain-list__header">答案解析：</div>
                            <div
                              class="explain-list__body"
                              v-html="json.analysisContent"
                            ></div>
                          </div>
                        </div>
                        <div class="question__btns">
                          <div
                            v-if="!question.ques[jsonIndex]"
                            class="submit"
                            @click="
                              checkboxSubmitChild(questionIndex, jsonIndex)
                            "
                          >
                            确认答案
                          </div>
                        </div>
                      </div>
                      <div
                        class="question"
                        v-if="json.type == 3"
                        :key="jsonIndex"
                      >
                        <div class="question__title">
                          {{ jsonIndex + 1 }}、判断题
                        </div>
                        <div class="question__desc" v-html="json.content"></div>
                        <div class="question__content">
                          <div
                            class="question-list"
                            v-if="!question.ques[jsonIndex]"
                          >
                            <div
                              class="radio"
                              v-for="(item, index) in judge"
                              :key="index"
                              @click="
                                judgeSelectChild(
                                  questionIndex,
                                  jsonIndex,
                                  index
                                )
                              "
                            >
                              <div>{{ ast[index] }}. {{ item }}</div>
                            </div>
                          </div>
                          <div
                            class="question-list"
                            v-if="question.ques[jsonIndex]"
                          >
                            <div
                              class="radio"
                              :class="{
                                right:
                                  index == (question.ques[jsonIndex] == 1 ? 0 : 1) ||
                                  index != question.ans[jsonIndex],
                                wrong:
                                  index == (question.ques[jsonIndex] == 1 ? 0 : 1) &&
                                  question.ques[jsonIndex] != question.ans[jsonIndex],
                              }"
                              v-for="(item, index) in judge"
                              :key="index"
                            >
                              <div>{{ ast[index] }}. {{ item }}</div>
                            </div>
                          </div>
                          <div
                            class="answer-list"
                            v-if="question.ques[jsonIndex]"
                          >
                            <div class="answer-list__left">
                              正确答案：{{ ast[question.ans[jsonIndex] == 1 ? 0 : 1] }}
                            </div>
                            <div class="answer-list__left">
                              我的答案：{{ ast[question.ques[jsonIndex] == 1 ? 0 : 1] }}
                            </div>
                          </div>
                          <div
                            class="explain-list"
                            v-if="question.ques[jsonIndex]"
                          >
                            <div class="explain-list__header">答案解析：</div>
                            <div
                              class="explain-list__body"
                              v-html="json.analysisContent"
                            ></div>
                          </div>
                        </div>
                        <div class="question__btns"></div>
                      </div>

                      <div
                        class="question"
                        v-if="json.type == 5"
                        :key="jsonIndex"
                      >
                        <div class="question__title">
                          {{ jsonIndex + 1 }}、简答题
                        </div>
                        <div class="question__desc" v-html="json.content"></div>
                        <div class="question__content">
                          <div
                            class="question-list textarea"
                            v-if="
                              !(
                                question.ques[jsonIndex] &&
                                (question.ques[jsonIndex].imageList.length ||
                                  question.ques[jsonIndex].text)
                              )
                            "
                          >
                            <el-input
                              type="textarea"
                              rows="5"
                              v-model="json.ansText.text"
                              resize="none"
                            ></el-input>
                            <div class="upload clearfix">
                              <div
                                class="upload__imgs"
                                v-for="(img, imgIndex) in json.ansText
                                  .imageList"
                                :key="imgIndex"
                              >
                                <img
                                  :src="$tools.splitImgHost(img, true)"
                                  alt=""
                                />
                              </div>
                              <div class="upload__btn">
                                <i class="el-icon-plus icon"></i>
                                <p>上传图片</p>
                                <input
                                  @change="
                                    uploadImgChild(
                                      $event,
                                      questionIndex,
                                      jsonIndex
                                    )
                                  "
                                  type="file"
                                />
                              </div>
                            </div>
                          </div>
                          <div
                            class="explain-list"
                            v-if="
                              question.ques[jsonIndex] &&
                              (question.ques[jsonIndex].imageList.length ||
                                question.ques[jsonIndex].text)
                            "
                          >
                            <div class="explain-list__header">我的答案:</div>
                            <div class="explain-list__body">
                              <div>{{ question.ques[jsonIndex].text }}</div>
                              <div class="upload clearfix">
                                <div
                                  class="upload__imgs"
                                  v-for="(img, imgIndex) in question.ques[
                                    jsonIndex
                                  ].imageList"
                                  :key="imgIndex"
                                >
                                  <img
                                    :src="$tools.splitImgHost(img, true)"
                                    alt=""
                                  />
                                </div>
                              </div>
                            </div>
                            <div class="explain-list__header">答案解析：</div>
                            <div
                              class="explain-list__body"
                              v-html="question.analysisContent"
                            ></div>
                          </div>
                        </div>
                        <div class="question__btns">
                          <div
                            v-if="
                              !(
                                question.ques[jsonIndex] &&
                                (question.ques[jsonIndex].imageList.length ||
                                  question.ques[jsonIndex].text)
                              )
                            "
                            class="submit"
                            @click="
                              ansSubmitChild(question, questionIndex, jsonIndex)
                            "
                          >
                            确认答案
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
                <div class="question__btns">
                  <div class="collect" @click="collect">收藏本题</div>
                </div>
              </div>
              <div
                class="question"
                v-if="
                  question.type == 5 &&
                  questionModalData.current == questionIndex
                "
                :key="questionIndex"
              >
                <div class="question__title">
                  {{ questionIndex + 1 }}、简答题
                </div>
                <div class="question__desc" v-html="question.content"></div>
                <div class="question__content">
                  <div
                    class="question-list textarea"
                    v-if="
                      !question.ques.imageList.length && !question.ques.text
                    "
                  >
                    <el-input
                      type="textarea"
                      rows="5"
                      v-model="question.ansText.text"
                      resize="none"
                    ></el-input>
                    <div class="upload clearfix">
                      <div
                        class="upload__imgs"
                        v-for="(img, imgIndex) in question.ansText.imageList"
                        :key="imgIndex"
                      >
                        <img :src="$tools.splitImgHost(img, true)" alt="" />
                      </div>
                      <div class="upload__btn">
                        <i class="el-icon-plus icon"></i>
                        <p>上传图片</p>
                        <input
                          @change="uploadImg($event, question, questionIndex)"
                          type="file"
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    class="explain-list"
                    v-if="question.ques.imageList.length || question.ques.text"
                  >
                    <div class="explain-list__header">我的答案:</div>
                    <div class="explain-list__body">
                      <div>{{ question.ques.text }}</div>
                      <div class="upload clearfix">
                        <div
                          class="upload__imgs"
                          v-for="(img, imgIndex) in question.ques.imageList"
                          :key="imgIndex"
                        >
                          <img :src="$tools.splitImgHost(img, true)" alt="" />
                        </div>
                      </div>
                    </div>
                    <div class="explain-list__header">答案解析：</div>
                    <div
                      class="explain-list__body"
                      v-html="question.analysisContent"
                    ></div>
                  </div>
                </div>
                <div class="question__btns">
                  <div
                    v-if="
                      !question.ques.imageList.length && !question.ques.text
                    "
                    class="submit"
                    @click="ansSubmit(question, questionIndex)"
                  >
                    确认答案
                  </div>
                  <div class="collect" @click="collect">收藏本题</div>
                </div>
              </div>
            </template>
          </div>

          <div class="left-box__footer">
            <div class="btn" @click="prevQuestion">上一题</div>
            <div class="btn" @click="nextQuestion">下一题</div>
          </div>
        </div>
        <div class="right-box">
          <div class="right-box__header">答题卡</div>
          <div class="right-box__body">
            <div class="card">
              <div class="card__note">
                <div class="item">
                  <div class="box green"></div>
                  正确
                </div>
                <div class="item">
                  <div class="box red"></div>
                  错误
                </div>
                <div class="item">
                  <div class="box blue"></div>
                  已做未评改
                </div>
                <div class="item">
                  <div class="box white"></div>
                  未做
                </div>
              </div>
              <div class="card__content">
                <ul class="list">
                  <li
                    class="item white"
                    v-for="(item, index) in questionList"
                    :key="index"
                    :class="{
                      green: isRight(item, index),
                      red: isWrong(item, index),
                      disabled: index >= questionModalData.num,
                      blue: isOver(item, index),
                    }"
                    @click="changeIndex(index)"
                  >
                    {{ index + 1 }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="right-box__footer">
            <div class="submit" @click="examSubmit">交卷</div>
          </div>
        </div>
      </div>
    </el-dialog>

    <ToolBar></ToolBar>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import GoodsItem from "@/components/goodsItem/index";
import { mapMutations } from "vuex";
export default {
  name: "GoodsDetail",
  components: {
    Footer,
    Header,
    ToolBar,
    GoodsItem,
  },
  data() {
    return {
      questionList: [],
      goodsExamConfig: [],
      goodsDetail: {},
      bankList: [],
      goodsId: "",
      checked: false,
      textarea: "",
      questionModalShow: false,
      activeName: "1",
      questionModalData: {
        activeName: "0",
        num: 0, //试做题数
        current: 0,
      },
      judge: ["正确", "错误"],
      ast: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      recommendList: [],
    };
  },
  computed: {
    compyRecommend: function () {
      return function (array) {
        let ary = [];
        if (array) {
          for (let i = 0; i < array.length; i++) {
            if (i >= 5) {
              break;
            } else {
              ary.push(array[i]);
            }
          }
        }
        return ary;
      };
    },
  },
  mounted() {
    this.goodsId = this.$route.params.goodsId;
    this.getGoodsDetail();
    this.getGoodsBankList();
  },
  methods: {
    ...mapMutations(["setCurrentRouter", "getCartCount"]),
    toGoodsDetail(item) {
      this.$router.push({
        path: "/bank-detail/" + item.goodsId,
      });
      location.reload();
    },
    /**
     * 查看更多
     */
    comeMoreList() {
      this.$router.push({
        path: "/bank-list",
        query: {
          educationId: this.goodsDetail.educationTypeId,
          projectId: this.goodsDetail.projectId,
          businessId: this.goodsDetail.businessId,
        },
      });
    },
    /**
     * 
     获取推荐列表
     */
    getRecommend() {
      this.$request
        .appCommonActivityRecommendList({
          businessId: this.goodsDetail.businessId,
          type: 2,
        })
        .then((res) => {
          if (res.rows.length) {
            this.recommendList = res.rows[0];
          }
        });
    },
    /**
     * @param {Object}
     * 单选点击确认
     */
    radioSelect(question, questionIndex, optionsId) {
      if (this.questionList[questionIndex].ques) return;
      this.$set(this.questionList[questionIndex], "ques", optionsId);
    },

    /**
     * @param {Object}
     * 案例单选点击
     */
    radioSelectChild(questionIndex, jsonIndex, optionsId) {
      if (this.questionList[questionIndex].ques[jsonIndex]) return;
      this.$set(this.questionList[questionIndex].ques, jsonIndex, optionsId);
    },
    /**
     * 多选点击确认
     */
    checkboxSubmit(question, questionIndex) {
      if (this.questionList[questionIndex].ques) return;
      let arr = [];
      this.questionList[questionIndex].jsonStr.forEach((item) => {
        if (item.checked) {
          arr.push(item.optionsId);
        }
      });
      if (!arr.length) {
        this.$message({
          type: "warning",
          message: "请选择答案",
        });
        return;
      }
      this.$set(this.questionList[questionIndex], "ques", arr);
    },
    /**
     * @param {Object}
     * 案例多选确认
     */
    checkboxSubmitChild(questionIndex, ansIndex) {
      if (this.questionList[questionIndex].ques[ansIndex]) return;
      let arr = [];
      this.questionList[questionIndex].jsonStr[ansIndex].optionsList.forEach(
        (item) => {
          if (item.checked) {
            arr.push(item.optionsId);
          }
        }
      );

      if (!arr.length) {
        this.$message({
          type: "warning",
          message: "请选择答案",
        });
        return;
      }

      this.$set(this.questionList[questionIndex].ques, ansIndex, arr);
    },
    /**
     * 判断点击确认
     */
    judgeSelect(question, questionIndex, index) {
      if (question.ques) return;
      this.$set(this.questionList[questionIndex], "ques", index == 0 ? '1' : '0');
    },
    judgeSelectChild(questionIndex, jsonIndex, index) {
      if (this.questionList[questionIndex].ques[jsonIndex]) return;
      this.$set(this.questionList[questionIndex].ques, jsonIndex, index == 0 ? '1' : '0');
    },

    /**
     * 上传图片
     */
    uploadImg(e, question, questionIndex) {
      var file = e.target.files[0];
      if (file.size > 2 * 1024 * 1024) {
        this.$message.warn("图片不得大于2000kb");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        e.target.value = "";
        return;
      }

      this.$upload.upload(file, 0).then((res) => {
        question.ansText.imageList.push(res);
      });
    },

    /**
     * 案例上传图片
     */
    uploadImgChild(e, questionIndex, jsonIndex) {
      var file = e.target.files[0];
      if (file.size > 2 * 1024 * 1024) {
        this.$message.warn("图片不得大于2000kb");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        e.target.value = "";
        return;
      }

      this.$upload.upload(file, 0).then((res) => {
        this.questionList[questionIndex].jsonStr[
          jsonIndex
        ].ansText.imageList.push(res);
      });
    },
    isOver(item, index) {
      if (this.questionList[index].ques) {
        if (item.type == 4) {
          //案例题
          let isOver = item.jsonStr.every((jsonItem, indexs) => {
            if (
              jsonItem.type == 1 ||
              jsonItem.type == 2 ||
              jsonItem.type == 3
            ) {
              if (item.ques[indexs]) {
                return true;
              } else {
                return false;
              }
            } else if (jsonItem.type == 5) {
              if (
                item.ques[indexs] &&
                (item.ques[indexs].text || item.ques[indexs].imageList.length)
              ) {
                console.log("chil");
                return true;
              } else {
                return false;
              }
            }
          });

          if (isOver) {
            return true;
          } else {
            return false;
          }
        } else if (item.type == 5) {
          //简答题
          //每一项都相等
          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
            return true;
          }
          //判断
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    ansSubmit(question, questionIndex) {
      if (!question.ansText.text && !question.ansText.imageList.length) {
        this.$message({
          type: "warning",
          message: "请输入内容或上传图片",
        });
        return;
      }

      question.ques.imageList = question.ansText.imageList;
      question.ques.text = question.ansText.text;

      console.log(question.ques);
    },
    ansSubmitChild(question, questionIndex, jsonIndex) {
      if (
        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text &&
        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.imageList
          .length
      ) {
        this.$message({
          type: "warning",
          message: "请输入内容或上传图片",
        });
        return;
      }

      this.$set(this.questionList[questionIndex].ques, jsonIndex, {
        imageList:
          this.questionList[questionIndex].jsonStr[jsonIndex].ansText
            .imageList || [],
        text:
          this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text ||
          "",
      });
    },
    /**
     * 试做
     */
    toDo(item) {
      this.$request
        .goodsQuestionList({
          examId: item.majorId || item.examId,
        })
        .then((res) => {
          this.questionModalData.num = this.isTest(
            item.majorId || item.examId
          ).num;
          res.data.forEach((item, index) => {
            if (typeof item.jsonStr == "string") {
              item.jsonStr = JSON.parse(item.jsonStr);

              if (item.type == 2) {
                //多选
                item.jsonStr.forEach((str) => {
                  str.optionsId = "" + str.optionsId;
                });
                let arr = item.answerQuestion.split(",");
                arr.forEach((a, i) => {
                  arr[i] = "" + a;
                });
                item.ans = arr;
                item.quesSelect = [];
                item.analysisContent &&
                  (item.analysisContent = item.analysisContent.replace(
                    /<img/gi,
                    '<img style="max-width:100%;"'
                  ));
                item.content &&
                  (item.content = item.content.replace(
                    /<img/gi,
                    '<img style="max-width:100%;"'
                  ));
                return;
              } else if (item.type == 5) {
                //简答题
                item.ansText = {
                  text: "",
                  imageList: [],
                };
                item.ques = {
                  text: "",
                  imageList: [],
                };
                item.analysisContent &&
                  (item.analysisContent = item.analysisContent.replace(
                    /<img/gi,
                    '<img style="max-width:100%;"'
                  ));
                item.content &&
                  (item.content = item.content.replace(
                    /<img/gi,
                    '<img style="max-width:100%;"'
                  ));

                return;
              } else if (item.type == 4) {
                //案例题
                console.log(item.jsonStr);
                item.ques = [];
                item.tabIndex = "0";
                let ansArr = [];
                item.jsonStr.forEach((json, index) => {
                  if (json.type == 1) {
                    ansArr[index] = json.answerQuestion;
                    json.content &&
                      (json.content = json.content.replace(
                        /<img/gi,
                        '<img style="max-width:100%;"'
                      ));
                  } else if (json.type == 2) {
                    json.optionsList.forEach((str) => {
                      str.optionsId = "" + str.optionsId;
                    });
                    let arr = json.answerQuestion.split(",");
                    arr.forEach((a, i) => {
                      arr[i] = "" + a;
                    });
                    ansArr[index] = arr;
                    json.content &&
                      (json.content = json.content.replace(
                        /<img/gi,
                        '<img style="max-width:100%;"'
                      ));
                  } else if (json.type == 3) {
                    ansArr[index] = json.answerQuestion;
                    json.content &&
                      (json.content = json.content.replace(
                        /<img/gi,
                        '<img style="max-width:100%;"'
                      ));
                  } else if (json.type == 5) {
                    ansArr[index] = {
                      text: "",
                      imageList: [],
                    };
                    json.ansText = {
                      text: "",
                      imageList: [],
                    };
                    json.ques = {
                      text: "",
                      imageList: [],
                    };
                    json.content &&
                      (json.content = json.content.replace(
                        /<img/gi,
                        '<img style="max-width:100%;"'
                      ));
                  }
                });

                item.ans = ansArr;
                return;
              }
              item.analysisContent &&
                (item.analysisContent = item.analysisContent.replace(
                  /<img/gi,
                  '<img style="max-width:100%;"'
                ));
              item.content &&
                (item.content = item.content.replace(
                  /<img/gi,
                  '<img style="max-width:100%;"'
                ));
              item.ques = "";
              item.ans = item.answerQuestion;
            }
          });
          this.questionList = res.data;
          this.questionModalShow = true;

          console.log(this.questionList);
        });
    },
    changeIndex(index) {
      if (index <= this.questionModalData.num - 1) {
        this.questionModalData.current = index;
      } else {
        this.$message({
          type: "warning",
          message: "试做题目已经结束~",
        });
      }
    },
    nextQuestion() {
      if (this.questionModalData.current >= this.questionModalData.num - 1) {
        this.$message({
          type: "warning",
          message: "试做题目已经结束~",
        });
        return;
      } else {
        this.questionModalData.current++;
      }
    },
    prevQuestion() {
      if (this.questionModalData.current == 0) {
        return;
      } else {
        this.questionModalData.current--;
      }
    },
    isRight(item, index) {
      //单选
      if (this.questionList[index].ques) {
        if (item.type == 1) {
          console.log(
            this.questionList[index].ques == this.questionList[index].ans
          );
          return this.questionList[index].ques == this.questionList[index].ans;
          //多选
        } else if (item.type == 2) {
          //每一项都相等
          return this.questionList[index].ans.every((item, i) => {
            return item == this.questionList[index].ques[i];
          });
          //判断
        } else if (item.type == 3) {
          return this.questionList[index].ques == this.questionList[index].ans;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    isWrong(item, index) {
      if (this.questionList[index].ques) {
        //单选
        if (item.type == 1) {
          return this.questionList[index].ques != this.questionList[index].ans;
          //多选
        } else if (item.type == 2) {
          //每一项都相等
          return this.questionList[index].ques.some((item, i) => {
            return this.questionList[index].ans.indexOf(item) == -1;
          });
          //判断
        } else if (item.type == 3) {
          return this.questionList[index].ques != this.questionList[index].ans;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    isPart(item, index) {
      if (this.questionList[index].ques) {
        if (item.type == 2) {
          let isWrong = this.questionList[index].ques.some((item, i) => {
            return this.questionList[index].ans.indexOf(item) == -1;
          });

          let isRight = this.questionList[index].ans.every((item, i) => {
            return item == this.questionList[index].ques[i];
          });

          if (!isRight && !isWrong) {
            return true;
          }
        }
      } else {
        return false;
      }
    },
    right(bankIndex, ansIndex, option) {
      if (
        this.questionList[bankIndex].ques[ansIndex] &&
        this.questionList[bankIndex].ans[ansIndex]
      ) {
        if (
          this.questionList[bankIndex].ques[ansIndex].indexOf(
            option.optionsId
          ) != -1 ||
          this.questionList[bankIndex].ans[ansIndex].indexOf(
            option.optionsId
          ) != -1
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    wrong(bankIndex, ansIndex, option) {
      if (
        this.questionList[bankIndex].ques[ansIndex] &&
        this.questionList[bankIndex].ans[ansIndex]
      ) {
        if (
          this.questionList[bankIndex].ques[ansIndex].indexOf(
            option.optionsId
          ) != -1 &&
          this.questionList[bankIndex].ans[ansIndex].indexOf(
            option.optionsId
          ) == -1
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    /**
     * 获取已经回答的题目数
     * hasSpecail (是否包含简答和案例)
     */
    questionOverNum(hasSpecail) {
      let count = 0;
      this.questionList.forEach((item) => {
        if (item.type == 1 || item.type == 2 || item.type == 3) {
          if (item.ques) {
            count++;
          }
        } else if (item.type == 4) {
          //案例题
          if (hasSpecail) {
            let isOver = item.jsonStr.every((jsonItem, index) => {
              if (
                jsonItem.type == 1 ||
                jsonItem.type == 2 ||
                jsonItem.type == 3
              ) {
                if (item.ques[index]) {
                  return true;
                } else {
                  return false;
                }
              } else if (jsonItem.type == 5) {
                if (
                  item.ques[index] &&
                  (item.ques[index].text || item.ques[index].imageList.length)
                ) {
                  return true;
                } else {
                  return false;
                }
              }
            });

            if (isOver) {
              count++;
            }
          }
        } else if (item.type == 5) {
          //简答题
          if (hasSpecail) {
            if (item.ques && (item.ques.text || item.ques.imageList.length)) {
              count++;
            }
          }
        }
      });

      return count;
    },
    /**
     * 展开模块卷
     */
    moduleExam(Module) {
      if (Module.list.length) {
        Module.showList = !Module.showList;
        return;
      }
      this.$request
        .goodsChapterList({
          moduleExamId: Module.majorId,
          goodsId: this.goodsId,
        })
        .then((res) => {
          res.data.forEach((item) => {
            item.showList = false;
            item.list = [];
          });

          this.$set(Module, "showList", !Module.showList);
          Module.list = res.data;
        });
    },
    /**
     * 展开章卷
     */
    chapterExam(chapter) {
      if (chapter.list.length) {
        chapter.showList = !chapter.showList;
        return;
      }
      this.$request
        .goodsExamList({
          chapterExamId: chapter.chapterExamId || chapter.majorId,
          goodsId: this.goodsId,
        })
        .then((res) => {
          this.$set(chapter, "showList", !chapter.showList);
          chapter.list = res.data;
        });
    },
    buyNow() {
      if (!this.$tools.isLogin()) {
        this.setCurrentRouter(this.$route);
        this.$router.push({
          path: "/login",
        });
        return;
      }
      let selectGoodsList = JSON.parse(JSON.stringify([this.goodsDetail]));
      localStorage.setItem("checkGoodsList", JSON.stringify(selectGoodsList));
      this.$router.push({
        path: "/payment",
      });
    },
    addCart() {
      if (!this.$tools.isLogin()) {
        this.setCurrentRouter(this.$route);
        this.$router.push({
          path: "/login",
        });
        return;
      }
      this.$request
        .addCart({ goodsId: this.goodsId })
        .then((res) => {
          this.getCartCount();
          this.$message({
            message: "加入购物车成功",
            type: "success",
          });
        })
        .catch((err) => {
          if (err.code == 500) {
            this.$message({
              message: err.msg,
              type: "warning",
            });
          }
        });
    },
    /**
     * 获取商品详情
     */
    getGoodsDetail() {
      this.$request.commonGoodsDetail(this.goodsId).then((res) => {
        this.goodsDetail = res.data;
        this.goodsExamConfig = JSON.parse(res.data.goodsExamConfig);
        this.getRecommend();
      });
    },
    /**
     * 是否是试做
     */
    isTest(id) {
      return this.goodsExamConfig.find((item) => item.examId == id);
    },
    /**
     * 获取课程列表
     */
    getGoodsBankList() {
      this.$request.goodsBankList({ goodsId: this.goodsId }).then((res) => {
        res.data.forEach((item) => {
          if (item.type == 2 || item.type == 1) {
            item.showList = false;
            item.list = [];
          }
        });
        this.bankList = res.data;
        this.showAllCharpter();
      });
    },

    /**
     * 展示第一个章下的节内容
     */
    showAllCharpter() {
      for (let i = 0; i < this.bankList.length; i++) {
        if (this.bankList[i].type == 1) {
          //第一个是模块直接展开，再展开章下面的节
          this.$request
            .goodsChapterList({
              moduleExamId: this.bankList[i].majorId,
            })
            .then((res) => {
              res.data.forEach((re) => {
                re.list = [];
              });
              this.$set(this.bankList[i], "showList", true);
              this.$set(this.bankList[i], "list", res.data);
              this.chapterExam(this.bankList[i].list[0]);
            });
          break;
        } else if (this.bankList[i].type == 2) {
          //第一个章展开下面的节
          this.chapterExam(this.bankList[i]);
          break;
        }
      }
    },
    collect() {
      this.$message({
        message: "试做题目，不支持收藏~",
        type: "warning",
      });
      return;
    },
    examSubmit() {
      this.$confirm("当前为试用做题不可交卷，购买题卷后方可交卷", "提示", {
        confirmButtonText: "继续作答",
        cancelButtonText: "返回详情",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        distinguishCancelAndClose: false,
        showClose: false,
      })
        .then((_) => {})
        .catch((_) => {
          this.questionModalShow = false;
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.goods-detail {
  .section {
    &__header {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    &__body {
      .goods-info {
        &__header {
          width: 100%;
          height: 288px;
          background: #f5f7fa;
          border-radius: 10px;
          padding: 20px;
          display: flex;

          .img {
            width: 442px;
            height: 248px;
            border-radius: 10px;
            overflow: hidden;

            img {
              max-width: 100%;
              max-height: 100%;
              width: 100%;
              height: 100%;
            }
          }

          .text {
            flex: 1;
            margin-left: 24px;
            .title {
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              line-height: 24px;
            }

            .price {
              margin-top: 10px;
              font-size: 24px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #ff2d55;
              line-height: 24px;
            }

            .btns {
              margin-top: 154px;
              display: flex;

              .buynow {
                margin-right: 16px;
                width: 160px;
                height: 40px;
                padding: 0;
                border-radius: 20px;
                text-align: center;
                line-height: 40px;
              }

              .add {
                padding: 0;
                width: 128px;
                height: 40px;
                border-radius: 20px;
                text-align: center;
                line-height: 40px;
              }
            }
          }
        }

        &__body {
          /deep/ .el-tabs__item {
            padding: 0 20px !important;
            height: 80px;
            line-height: 80px;
            font-size: 18px;
          }

          .detail {
            img {
              max-width: 100% !important;
            }
          }

          .label {
            font-size: 18px;
          }

          .view-note {
            width: 40px;
            height: 24px;
            background: #ff3b30;
            border-radius: 4px 4px 0px 4px;
            border: 1px solid #ff3b30;
            text-align: center;
            line-height: 22px;
            color: #fff;
            position: absolute;
            right: -10px;
            top: 5px;
          }

          .goods-img {
            width: 100%;
          }

          .goods-menu {
            margin-top: 15px;
            .left-box {
              width: 948px;
              float: left;

              &__body {
                .item {
                  margin-top: 24px;
                  padding: 16px;
                  background: #f5f7fa;
                  border-radius: 10px;

                  &__title {
                    cursor: pointer;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #333333;

                    .note {
                      display: inline-block;
                      margin-left: 20px;
                      width: 40px;
                      height: 24px;
                      border: 1px solid #ff3b30;
                      border-radius: 8px;
                      line-height: 22px;
                      color: #ff3b30;
                      text-align: center;
                    }
                  }

                  &__content {
                    margin-top: 12px;
                    background: #fff;

                    .bank-chapter {
                      margin-left: 4px;

                      &__item {
                        padding-top: 20px;
                        padding-bottom: 20px;
                        border-bottom: 1px solid #eeeeee;
                        font-size: 16px;

                        &__text {
                          cursor: pointer;
                          flex: 1;
                        }
                      }
                    }

                    .bank-section {
                      margin-left: 40px;

                      &__item {
                        padding-top: 20px;
                        padding-bottom: 20px;
                        border-bottom: 1px solid #eeeeee;
                        font-size: 16px;
                        display: flex;

                        &__text {
                          flex: 1;
                        }

                        .btn {
                          margin-right: 20px;
                          width: 40px;
                          height: 24px;
                          border: 1px solid #ff3b30;
                          border-radius: 8px;
                          line-height: 22px;
                          color: #ff3b30;
                          text-align: center;
                          cursor: pointer;
                        }
                      }
                    }
                  }
                }
              }
            }

            .right-box {
              width: 255px;
              float: right;
              .title {
                margin-left: 10px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                text-shadow: 0px 6px 6px rgba(85, 158, 255, 0.08);
                position: relative;

                .more {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #999999;
                  position: absolute;
                  right: 10px;
                  top: 0;
                }
              }

              .list {
                .course-item {
                  // margin: 110px 9px 0;
                  // width: 300px;
                  // height: 178px;
                  // background: #ffffff;
                  // box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
                  // border-radius: 10px;
                  // position: relative;
                  // background: #fff;
                  // padding-top: 100px;

                  // &__img {
                  //   width: 280px;
                  //   height: 178px;
                  //   background: #ffffff;
                  //   box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
                  //   border-radius: 10px;
                  //   position: absolute;
                  //   left: 10px;
                  //   top: -78px;
                  //   background: rgba(122, 136, 246, 1);
                  //   overflow: hidden;

                  //   background: no-repeat center center;
                  //   background-size: 280px 178px;
                  //   .note {
                  //     width: 80px;
                  //     height: 24px;
                  //     background: #d94404;
                  //     box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
                  //     border-radius: 10px 0px 20px 0px;
                  //     text-align: center;
                  //     line-height: 24px;
                  //     color: #fff;
                  //   }
                  // }

                  // &__title {
                  //   margin: 0 8px;
                  //   font-size: 14px;
                  //   font-family: Microsoft YaHei;
                  //   font-weight: 400;
                  //   color: #333333;
                  //   line-height: 24px;
                  // }

                  // &__desc {
                  //   height: 32px;
                  //   position: absolute;
                  //   left: 0;
                  //   right: 0;
                  //   bottom: 0;
                  //   margin-left: 8px;
                  //   display: flex;
                  //   justify-content: space-between;

                  //   .price {
                  //     font-size: 18px;
                  //     font-family: Microsoft YaHei;
                  //     font-weight: bold;
                  //     color: #ff2d55;
                  //     line-height: 32px;
                  //   }

                  //   .add {
                  //     display: block;
                  //     width: 118px;
                  //     height: 32px;
                  //     line-height: 30px;
                  //     background: #f2f4f7;
                  //     border-radius: 10px 0px 10px 0px;
                  //     font-size: 16px;
                  //     color: #3f8dfd;
                  //     text-align: center;

                  //     &:hover {
                  //       background: #3f8dfd;
                  //       color: #f2f4f7;
                  //     }
                  //   }
                  // }
                }
              }
            }
          }
        }
      }
    }

    &__footer {
      .recommend {
        padding-top: 40px;

        &__header {
          display: flex;
          align-items: center;

          .title {
            font-size: 24px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #333333;
            text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
          }
        }

        &__body {
          .list {
            width: 100%;

            .recommend-item {
              float: left;
              // margin: 100px 9px 0;
              // width: 300px;
              // height: 178px;
              // background: #ffffff;
              // box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
              // border-radius: 10px;
              // position: relative;
              // background: #fff;
              // padding-top: 100px;

              // &__img {
              //   width: 280px;
              //   height: 178px;
              //   background: #ffffff;
              //   box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
              //   border-radius: 10px;
              //   position: absolute;
              //   left: 10px;
              //   top: -78px;
              //   background: rgba(122, 136, 246, 1);
              //   overflow: hidden;
              //   background: no-repeat center center;
              //   background-size: 280px 178px;

              //   .note {
              //     width: 80px;
              //     height: 24px;
              //     background: #d94404;
              //     box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
              //     border-radius: 10px 0px 20px 0px;
              //     text-align: center;
              //     line-height: 24px;
              //     color: #fff;
              //   }
              // }

              // &__title {
              //   margin: 0 8px;
              //   font-size: 14px;
              //   font-family: Microsoft YaHei;
              //   font-weight: 400;
              //   color: #333333;
              //   line-height: 24px;
              // }

              // &__desc {
              //   height: 32px;
              //   position: absolute;
              //   left: 0;
              //   right: 0;
              //   bottom: 0;
              //   margin-left: 8px;
              //   display: flex;
              //   justify-content: space-between;

              //   .price {
              //     font-size: 18px;
              //     font-family: Microsoft YaHei;
              //     font-weight: bold;
              //     color: #ff2d55;
              //     line-height: 32px;
              //   }

              //   .add {
              //     display: block;
              //     width: 118px;
              //     height: 32px;
              //     line-height: 30px;
              //     background: #f2f4f7;
              //     border-radius: 10px 0px 10px 0px;
              //     font-size: 16px;
              //     color: #3f8dfd;
              //     text-align: center;

              //     &:hover {
              //       background: #3f8dfd;
              //       color: #f2f4f7;
              //     }
              //   }
              // }
            }
          }
        }

        &__footer {
          overflow: hidden;
          .btn {
            cursor: pointer;
            width: 146px;
            height: 40px;
            background: #e3eaf7;
            border-radius: 8px;
            margin: 20px auto 40px;
            color: #3f8dfd;
            text-align: center;
            line-height: 40px;

            &:hover {
              color: #fff;
              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
              background: #3f8dfd;
            }
          }
        }
      }
    }
  }

  .question-modal {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__close {
      position: absolute;
      right: 0;
      top: -28px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #eee;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &__content {
      width: 800px;
      height: 530px;
      position: relative;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
      border-radius: 8px;

      .left-box {
        float: left;
        width: 500px;
        border-right: 1px solid #eee;

        &__header {
          height: 40px;
          padding-left: 12px;
          border-bottom: 1px solid #eeeeee;
          display: flex;
          align-items: center;

          .progress {
            width: 200px;
          }

          .text {
            margin-left: 15px;
            font-size: 16px;
            span {
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #3f8dfd;
              line-height: 24px;
            }
          }
        }

        &__body {
          height: 450px;
          border-bottom: 1px solid #eee;

          .question {
            padding: 12px 0 0 12px;
            display: flex;
            flex-direction: column;
            height: 100%;

            &__title {
              padding-left: 12px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              line-height: 24px;
            }

            &__desc {
              padding-left: 12px;
              margin-top: 20px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #666666;
              line-height: 24px;
            }

            &__content {
              flex: 1;
              overflow-y: scroll;

              &::-webkit-scrollbar {
                width: 6px;
              }
              &::-webkit-scrollbar-track {
                background-color: #fff;
                -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;
              }

              /deep/ .el-tabs__item {
                padding: 0 20px !important;
                height: 40px;
                line-height: 40px;
              }

              .question__content {
                height: auto;
                overflow: auto;
              }

              .question-list {
                padding: 24px 0 0 24px;
                .checkbox,
                .radio {
                  cursor: pointer;
                  margin-right: 24px;
                  padding: 0 24px;
                  display: flex;
                  align-items: center;
                  margin-top: 2px;
                  min-height: 40px;
                  padding-top: 10px;
                  padding-bottom: 10px;
                  background: #f5f9ff;
                  border-radius: 8px;
                  box-sizing: border-box;

                  &.right {
                    background: #37c65b;
                  }
                  &.wrong {
                    background: #ff3a30;
                  }
                }
                &.textarea {
                  margin-right: 12px;

                  .upload {
                    margin-top: 10px;

                    &__imgs {
                      margin-right: 10px;
                      width: 80px;
                      height: 80px;
                      background: #ffffff;
                      border: 1px solid #eeeeee;
                      border-radius: 4px;
                      position: relative;
                      display: flex;
                      float: left;
                      align-items: center;
                      justify-content: center;

                      img {
                        max-width: 100%;
                        max-height: 100%;
                      }
                    }
                    &__btn {
                      margin-right: 10px;
                      width: 80px;
                      height: 80px;
                      background: #ffffff;
                      border: 1px solid #eeeeee;
                      border-radius: 4px;
                      position: relative;
                      display: flex;
                      float: left;
                      align-items: center;
                      justify-content: center;
                      flex-direction: column;

                      .icon {
                        font-size: 20px;
                        color: #3f8dfd;
                      }

                      p {
                        font-size: 12px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #999999;
                        line-height: 24px;
                      }

                      input {
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: block;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                      }
                    }
                  }
                }

                /deep/ .el-checkbox {
                  white-space: pre-wrap;
                }
              }

              .answer-list {
                height: 40px;
                border-top: 1px solid #eee;
                border-bottom: 1px solid #eee;
                margin-top: 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 24px;

                &__left {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  line-height: 24px;
                }

                &__right {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  line-height: 24px;
                }
              }

              .explain-list {
                padding: 12px 24px;

                &__header {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #666666;
                  line-height: 24px;
                }

                &__body {
                  margin-top: 12px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #666666;
                  line-height: 24px;
                }

                .upload {
                  margin-top: 10px;

                  &__imgs {
                    margin-right: 10px;
                    width: 80px;
                    height: 80px;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                    border-radius: 4px;
                    position: relative;
                    display: flex;
                    float: left;
                    align-items: center;
                    justify-content: center;

                    img {
                      max-width: 100%;
                      max-height: 100%;
                    }
                  }
                }
              }
            }

            &__btns {
              position: relative;
              height: 32px;
              .submit {
                cursor: pointer;
                margin: 0 auto;
                width: 140px;
                height: 32px;
                background: #3f8dfd;
                box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
                border-radius: 16px;
                text-align: center;
                line-height: 32px;
                color: #fff;
                font-size: 16px;
              }

              .collect {
                cursor: pointer;
                position: absolute;
                right: 0;
                top: 5px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #3f8dfd;
                line-height: 24px;
              }
            }
          }
        }

        &__footer {
          height: 40px;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .btn {
            cursor: pointer;
            width: 140px;
            height: 32px;
            background: #ffffff;
            border: 1px solid #3f8dfd;
            border-radius: 16px;
            line-height: 32px;
            text-align: center;
            color: #3f8dfd;
          }
        }
      }

      .right-box {
        float: right;
        width: 300px;

        &__header {
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
          text-align: center;
          border-bottom: 1px solid #eeeeee;
        }

        &__body {
          height: 450px;
          border-bottom: 1px solid #eee;

          .card {
            &__note {
              display: flex;
              height: 40px;
              align-items: center;
              border-bottom: 1px solid #eee;

              .item {
                display: flex;
                align-items: center;
                margin-left: 10px;

                .box {
                  margin-right: 5px;
                  width: 16px;
                  height: 16px;
                  border-radius: 4px;

                  &.white {
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                  }

                  &.green {
                    background: #37c65b;
                  }

                  &.red {
                    background: #ff3a30;
                  }

                  &.blue {
                    background: #3f8dfd;
                  }
                }
              }
            }

            &__content {
              height: 410px;
              overflow-y: scroll;

              &::-webkit-scrollbar {
                width: 6px;
              }
              &::-webkit-scrollbar-track {
                background-color: #fff;
                -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;
              }
              .list {
                display: flex;
                flex-wrap: wrap;

                .item {
                  width: 40px;
                  height: 40px;
                  border-radius: 10px;
                  text-align: center;
                  line-height: 40px;
                  margin-left: 16px;
                  margin-top: 16px;
                  cursor: pointer;

                  &.white {
                    line-height: 38px;
                    color: #333333;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                  }

                  &.green {
                    color: #fff;
                    background: #37c65b;
                  }

                  &.red {
                    color: #fff;
                    background: #ff3a30;
                  }

                  &.blue {
                    border: 1rpx solid #eeeeee;
                    color: #fff;
                    background: #3f8dfd;
                  }

                  &.disabled {
                    cursor: not-allowed;
                    line-height: 38px;
                    color: #eeeeee;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                  }
                }
              }
            }
          }
        }

        &__footer {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;

          .submit {
            cursor: pointer;
            width: 140px;
            height: 32px;
            background: #3f8dfd;
            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
            border-radius: 16px;
            line-height: 32px;
            text-align: center;
            color: #fff;
            font-size: 16px;
          }
        }
      }
    }
  }

  .video-modal {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__close {
      position: absolute;
      right: 0;
      top: -28px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #eee;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &__header {
      height: 40px;
      border-bottom: 1px solid #eee;
      line-height: 40px;
      color: #ff3b30;
      padding-left: 24px;
    }

    &__body {
      width: 100%;
      position: relative;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
      border-radius: 8px;
      .video {
        &__title {
          padding-left: 24px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }

        &__wrap {
          height: 450px;
          video {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>