zc_saas_h5/pages2/bank/questionBankWrongExplain.vue

<template>
  <view class="questionBank">
    <nav-bar title="错题解析"></nav-bar>
    <swiper
      class="swiper"
      :current="current"
      @change="swiperChange"
    >
      <swiper-item v-for="(bank, bankIndex) in questionList" :key="bankIndex">
        <view class="pageContent">
          <view class="pad_8 titBox">
            <view class="firstLetter">
              <view class="leftLetters">
                <view class="btnType">
                  <text v-if="bank.type == 1">单选</text>
                  <text v-if="bank.type == 2">多选</text>
                  <text v-if="bank.type == 3">判断</text>
                  <text v-if="bank.type == 4">案例</text>
                  <text v-if="bank.type == 5">简答</text>
                </view>
                <text>{{ bankIndex + 1 }}/{{ questionList.length }}</text>
              </view>
              <view style="color: #666; font-size: 28rpx"></view>
              <view class="leftLetters"></view>
            </view>
            <view class="titles">
              <rich-text :nodes="bank.content"></rich-text>
            </view>
          </view>
          <template v-if="bank.type == 1">
            <view class="pad_8 titBox no-margin">
              <view v-if="!bank.ques">
                <view
                  v-for="(item, index) in bank.jsonStr"
                  :key="index"
                  class="lisSty"
                >
                  <view class="activeTI">{{ ast[index] }}</view>
                  <view class="flex_auto">
                    {{ item.content }}
                    <view v-if="item.imgUrl">
                      <image
                        style="width: 600rpx"
                        mode="widthFix"
                        :src="$method.splitImgHost(item.imgUrl)"
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
              <view v-if="bank.ques">
                <view
                  v-for="(item, index) in bank.jsonStr"
                  :key="index"
                  class="lisSty"
                >
                  <text
                    :class="{
                      right:
                        item.optionsId == bank.ques ||
                        item.optionsId == bank.ans,
                      wrong:
                        item.optionsId == bank.ques && bank.ques != bank.ans,
                    }"
                    class="activeTI"
                    >{{ ast[index] }}</text
                  >
                  <view class="flex_auto">
                    {{ item.content }}
                    <view v-if="item.imgUrl">
                      <image
                        style="width: 600rpx"
                        mode="widthFix"
                        :src="$method.splitImgHost(item.imgUrl)"
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view>
              <view class="pad_8 answer">
                <view>题目答案：{{ ast[bank.ans - 1] }}</view>
                <view>我的答案：{{ ast[bank.ques - 1] || "" }}</view>
              </view>
              <view class="pad_8 answerInfos">
                <view class="answerTitle">答案解析</view>
                <view class="answerContent">
                  <rich-text :nodes="bank.analysisContent"></rich-text>
                </view>
              </view>
            </view>
          </template>

          <template v-if="bank.type == 2">
            <view class="pad_8 titBox no-margin">
              <view v-if="!bank.ques">
                <view
                  v-for="(item, index) in bank.jsonStr"
                  :key="index"
                  class="lisSty"
                >
                  <view :class="{ checked: item.checked }" class="activeTI">{{
                    ast[index]
                  }}</view>
                  <view class="flex_auto">
                    {{ item.content }}
                    <view v-if="item.imgUrl">
                      <image
                        style="width: 600rpx"
                        mode="widthFix"
                        :src="$method.splitImgHost(item.imgUrl)"
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
              <view v-if="bank.ques">
                <view
                  v-for="(item, index) in bank.jsonStr"
                  :key="index"
                  class="lisSty"
                >
                  <text
                    :class="{
                      right:
                        (bank.ques &&
                          bank.ques.indexOf(item.optionsId) != -1) ||
                        (bank.ans && bank.ans.indexOf(item.optionsId) != -1),
                      wrong:
                        bank.ques &&
                        bank.ques.indexOf(item.optionsId) != -1 &&
                        bank.ans &&
                        bank.ans.indexOf(item.optionsId) == -1,
                    }"
                    class="activeTI"
                    >{{ ast[index] }}</text
                  >
                  <view class="flex_auto">
                    {{ item.content }}
                    <view v-if="item.imgUrl">
                      <image
                        style="width: 600rpx"
                        mode="widthFix"
                        :src="$method.splitImgHost(item.imgUrl)"
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view>
              <view class="pad_8 answer">
                <view
                  >题目答案：
                  <text
                    :key="ansItemIndex"
                    v-for="(ansItem, ansItemIndex) in bank.ans"
                    >{{ ast[ansItem - 1] }}</text
                  >
                </view>
                <view
                  >我的答案：
                  <text
                    :key="quesItemIndex"
                    v-for="(quesItem, quesItemIndex) in bank.ques"
                    >{{ ast[quesItem - 1] }}</text
                  >
                </view>
              </view>
              <view class="pad_8 answerInfos">
                <view class="answerTitle">答案解析</view>
                <view class="answerContent">
                  <rich-text :nodes="bank.analysisContent"></rich-text>
                </view>
              </view>
            </view>
          </template>

          <template v-if="bank.type == 3">
            <view class="pad_8 titBox no-margin">
              <view v-if="!bank.ques">
                <view
                  v-for="(item, index) in judge"
                  :key="index"
                  class="lisSty"
                >
                  <view class="activeTI">{{ ast[index] }}</view>
                  <view class="flex_auto">
                    {{ item }}
                    <view v-if="item.imgUrl">
                      <image
                        style="width: 600rpx"
                        mode="widthFix"
                        :src="$method.splitImgHost(item.imgUrl)"
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
              <view v-if="bank.ques">
                <view
                  v-for="(item, index) in judge"
                  :key="index"
                  class="lisSty"
                >
                  <text
                    :class="{
                      right: index == bank.ques || index == bank.ans,
                      wrong: index == bank.ques && bank.ques != bank.ans,
                    }"
                    class="activeTI"
                    >{{ ast[index] }}</text
                  >
                  <view class="flex_auto">
                    {{ item }}
                    <view v-if="item.imgUrl">
                      <image
                        style="width: 600rpx"
                        mode="widthFix"
                        :src="$method.splitImgHost(item.imgUrl)"
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view>
              <view class="pad_8 answer">
                <view>题目答案：{{ ast[bank.ans] }}</view>
                <view>我的答案：{{ ast[bank.ques] || "" }}</view>
              </view>
              <view class="pad_8 answerInfos">
                <view class="answerTitle">答案解析</view>
                <view class="answerContent">
                  <rich-text :nodes="bank.analysisContent"></rich-text>
                </view>
              </view>
            </view>
          </template>

          <!-- 简答题 -->
          <template v-if="bank.type == 5">
            <view class="pad_8 titBox">
              <view class="ans">
                <view class="ans_submit answerInfos">
                  <view class="answerTitle">我的答案:</view>
                  {{ bank.ques.text || "" }}
                  <view class="imgs">
                    <image
                      class="img"
                      v-for="(ques, quesIndex) in bank.ques.imageList"
                      :key="quesIndex"
                      :src="$method.splitImgHost(ques, true)"
                    ></image>
                  </view>
                </view>
              </view>
            </view>
            <view>
              <view class="pad_8 answerInfos">
                <view class="answerTitle">答案解析:</view>
                <view class="answerContent">
                  <rich-text :nodes="bank.analysisContent"></rich-text>
                </view>
              </view>
            </view>
          </template>

          <!-- 案例题 -->
          <template v-if="bank.type == 4">
            <view class="tabs">
              <view
                class="tab"
                :class="{ current: tabIndex == bank.current }"
                :key="tabIndex"
                v-for="(tab, tabIndex) in bank.jsonStr"
                @click="tabSelect(tabIndex, bankIndex)"
                >问题{{ tabIndex + 1 }}</view
              >
            </view>
            <view
              v-for="(ansItem, ansIndex) in bank.jsonStr"
              v-if="bank.current == ansIndex"
              :key="ansIndex"
            >
              <template v-if="ansItem.type == 1">
                <view class="pad_8 titBox">
                  <view class="leftLetters">
                    <view class="btnType">
                      <text>单选</text>
                    </view>
                  </view>
                  <view class="titles">
                    <rich-text :nodes="ansItem.content"></rich-text>
                  </view>
                  <view v-if="!bank.ques[ansIndex]">
                    <view
                      v-for="(option, childIndex) in ansItem.optionsList"
                      :key="childIndex"
                      class="lisSty"
                    >
                      <view class="activeTI">{{ ast[childIndex] }}</view>
                      <view class="flex_auto">
                        <rich-text
                          class="textChild"
                          :nodes="option.content"
                        ></rich-text>
                        <view v-if="option.imgUrl">
                          <image
                            style="width: 600rpx"
                            mode="widthFix"
                            :src="$method.splitImgHost(option.imgUrl)"
                          ></image>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view v-if="bank.ques[ansIndex]">
                    <view
                      v-for="(option, childIndex) in ansItem.optionsList"
                      :key="childIndex"
                      class="lisSty"
                    >
                      <text
                        :class="{
                          right:
                            option.optionsId == bank.ques[ansIndex] ||
                            option.optionsId == bank.ans[ansIndex],
                          wrong:
                            option.optionsId == bank.ques[ansIndex] &&
                            bank.ques[ansIndex] != bank.ans[ansIndex],
                        }"
                        class="activeTI"
                        >{{ ast[childIndex] }}</text
                      >
                      <view class="flex_auto">
                        <rich-text :nodes="option.content"></rich-text>
                        <view v-if="option.imgUrl">
                          <image
                            style="width: 600rpx"
                            mode="widthFix"
                            :src="$method.splitImgHost(option.imgUrl)"
                          ></image>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="pad_8 answer">
                  <view>题目答案：{{ ast[bank.ans[ansIndex] - 1] }}</view>
                  <view
                    >我的答案：{{ ast[bank.ques[ansIndex] - 1] || "" }}</view
                  >
                </view>
                <view class="pad_8 answerInfos">
                  <view class="answerTitle">答案解析</view>
                  <view class="answerContent">
                    <rich-text :nodes="option.analysisContent"></rich-text>
                  </view>
                </view>
              </template>

              <template v-if="ansItem.type == 2">
                <view class="pad_8 titBox">
                  <view class="leftLetters">
                    <view class="btnType">
                      <text>多选</text>
                    </view>
                  </view>
                  <view class="titles">
                    <rich-text :nodes="ansItem.content"></rich-text>
                  </view>
                  <view v-if="!bank.ques[ansIndex]">
                    <view
                      v-for="(option, childindex) in ansItem.optionsList"
                      :key="childindex"
                      class="lisSty"
                    >
                      <view
                        :class="{ checked: option.checked }"
                        class="activeTI"
                        >{{ ast[childindex] }}</view
                      >
                      <view class="flex_auto">
                        <rich-text :nodes="option.content"></rich-text>
                        <view v-if="option.imgUrl">
                          <image
                            style="width: 600rpx"
                            mode="widthFix"
                            :src="$method.splitImgHost(option.imgUrl)"
                          ></image>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view v-if="bank.ques && bank.ques[ansIndex]">
                    <view
                      v-for="(option, childindex) in ansItem.optionsList"
                      :key="childindex"
                      class="lisSty"
                    >
                      <text
                        :class="{
                          right: right(bankIndex, ansIndex, option),
                          wrong: wrong(bankIndex, ansIndex, option),
                        }"
                        class="activeTI"
                        >{{ ast[childindex] }}</text
                      >
                      <view class="flex_auto">
                        <rich-text :nodes="option.content"></rich-text>
                        <view v-if="option.imgUrl">
                          <image
                            style="width: 600rpx"
                            mode="widthFix"
                            :src="$method.splitImgHost(option.imgUrl)"
                          ></image>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view>
                  <view class="pad_8 answer">
                    <view
                      >题目答案：
                      <text
                        :key="ansItemIndex1"
                        v-for="(ansItem1, ansItemIndex1) in bank.ans[ansIndex]"
                        >{{ ast[ansItem1 - 1] }}</text
                      >
                    </view>
                    <view
                      >我的答案：
                      <text
                        :key="quesItemIndex"
                        v-for="(quesItem, quesItemIndex) in bank.ques[ansIndex]"
                        >{{ ast[quesItem - 1] }}</text
                      >
                    </view>
                  </view>
                  <view class="pad_8 answerInfos">
                    <view class="answerTitle">答案解析</view>
                    <view class="answerContent">
                      <rich-text :nodes="ansItem.analysisContent"></rich-text>
                    </view>
                  </view>
                </view>
              </template>

              <template v-if="ansItem.type == 3">
                <view class="pad_8 titBox">
                  <view class="leftLetters">
                    <view class="btnType">
                      <text>判断</text>
                    </view>
                  </view>
                  <view class="titles">
                    <rich-text :nodes="ansItem.content"></rich-text>
                  </view>
                  <view v-if="!bank.ques[ansIndex]">
                    <view
                      v-for="(option, childindex) in judge"
                      :key="childindex"
                      class="lisSty"
                    >
                      <view class="activeTI">{{ ast[childindex] }}</view>
                      <view class="flex_auto">
                        {{ option }}
                        <view v-if="option.imgUrl">
                          <image
                            style="width: 600rpx"
                            mode="widthFix"
                            :src="$method.splitImgHost(option.imgUrl)"
                          ></image>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view v-if="bank.ques[ansIndex]">
                    <view
                      v-for="(option, childindex) in judge"
                      :key="childindex"
                      class="lisSty"
                    >
                      <text
                        :class="{
                          right:
                            childindex == bank.ques[ansIndex] ||
                            childindex == bank.ans[ansIndex],
                          wrong:
                            childindex == bank.ques[ansIndex] &&
                            bank.ques[ansIndex] != bank.ans[ansIndex],
                        }"
                        class="activeTI"
                        >{{ ast[childindex] }}</text
                      >
                      <view class="flex_auto">
                        {{ option }}
                        <view v-if="option.imgUrl">
                          <image
                            style="width: 600rpx"
                            mode="widthFix"
                            :src="$method.splitImgHost(option.imgUrl)"
                          ></image>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view>
                  <view class="pad_8 answer">
                    <view>题目答案：{{ ast[bank.ans[ansIndex]] }}</view>
                    <view>我的答案：{{ ast[bank.ques[ansIndex]] || "" }}</view>
                  </view>
                  <view class="pad_8 answerInfos">
                    <view class="answerTitle">答案解析</view>
                    <view class="answerContent">
                      <rich-text :nodes="ansItem.analysisContent"></rich-text>
                    </view>
                  </view>
                </view>
              </template>

              <!-- 简答题 -->
              <template v-if="ansItem.type == 5">
                <view class="pad_8 titBox_title">
                  <view class="leftLetters">
                    <view class="btnType">
                      <text>简答</text>
                    </view>
                  </view>
                  <view class="titles">
                    <rich-text :nodes="ansItem.content"></rich-text>
                  </view>
                </view>
                <view class="pad_8 titBox_title">
                  <view class="ans">
                    <view class="ans_submit answerInfos">
                      <view class="answerTitle">我的答案</view>
                      {{ bank.ques[ansIndex].text || "" }}
                      <view
                        class="imgs"
                        v-if="
                          bank.ques[ansIndex] &&
                          bank.ques[ansIndex].imageList.length
                        "
                      >
                        <image
                          class="img"
                          :key="quesIndex"
                          v-for="(ques, quesIndex) in bank.ques[ansIndex]
                            .imageList"
                          :src="$method.splitImgHost(ques, true)"
                        ></image>
                      </view>
                    </view>
                  </view>
                </view>
                <view>
                  <view class="pad_8 answerInfos">
                    <view class="answerTitle">答案解析</view>
                    <view class="answerContent">
                      <rich-text :nodes="ansItem.analysisContent"></rich-text>
                    </view>
                  </view>
                </view>
              </template>
            </view>
          </template>

          <view class="footer_btn">
            <view
              class="collect"
              @click="collect(collectList[bankIndex], bankIndex)"
            >
              <view>
                <image src="/static/icon/collect.png" mode=""></image>
                <view>收藏</view>
              </view>
            </view>
            <view class="flex_center" @click="openFooterTab">
              <view class="up-icon">
                <image src="/static/up.png"></image>
              </view>
              答题卡
            </view>
            <view class="collect" @click="pdsubmit">
              <view>
                <image src="/static/jj.png" mode=""></image>
                <view>交卷</view>
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <u-popup v-model="show" mode="bottom" border-radius="14" height="680rpx">
      <view class="popupView">
        <view class="popupTops">
          <view class="topIcon"></view>
          点击编号即可跳转至对应题目
        </view>
        <view class="popupContent">
          <scroll-view scroll-y="true" style="height: 506rpx">
            <view class="boxSty">
              <view
                v-for="(item, index) in questionList"
                :key="index"
                @click="changeIndex(index)"
                :class="{
                  isRight: isRight(item, index),
                  isWrong: isWrong(item, index),
                  isPart: isPart(item, index),
                }"
                class="liListSty"
                >{{ index + 1 }}</view
              >
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>

    <view class="dialog" v-if="showDialog">
      <view class="text">左右滑动切换上下题</view>
      <view class="btn" @click="hideDialog">我知道了</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      current: 0,
      questionList: [],
      ast: ["A", "B", "C", "D", "E", "F", "G"],
      judge: ["错误", "正确"],
      show: false,
      showDialog: false,
      bankList: [],
      goodsId: "",
      recordId: "",
      chapterId: "",
      moduleId: "",
      courseType: 1, //1题库，2视频 商品类型
    };
  },
  onLoad(option) {
    this.id = option.id || "";
    this.goodsId = option.goodsid || "";
    this.chapterId = option.chapterId || "";
    this.moduleId = option.moduleId || "";
    this.recordId = option.recordId || "";
    this.courseType = option.courseType
    let showDialog = uni.getStorageSync("showDialog");

    if (showDialog) {
      this.showDialog = false;
    } else {
      this.showDialog = true;
      uni.setStorageSync("showDialog", "1");
    }
    this.goodsQuestionList();
  },
  onUnload() {},
  methods: {
    /**
     * 是否有上传图片
     */
    hasImgs(bank) {
      return bank.ansText.imageList.length == 0;
    },

    goodsQuestionList() {
      if (this.courseType == 2) {
        this.$api.bankReportData(this.recordId).then((res) => {
          let questionList = JSON.parse(res.data.data.historyExamJson)
          this.listForEach(questionList)
        })
      } else {
        this.$api.examReport(this.recordId).then((res) => {
          let questionList = JSON.parse(res.data.data.historyExamJson)

          this.listForEach(questionList)
        });
      }
    },
    listForEach(questionList) {
      questionList.forEach((json) => {
          //只获取类型1，2，3 单选，多选，判断 ，主观题灭有对错
          if (json.type == 1 || json.type == 3) {
            //单选判断
            if (json.ans != json.ques) {
              this.questionList.push(json);
            }
          } else if (json.type == 2) {
            //判断是否全对
            let isRight = json.ans.every((quesItem, quesIndex) => {
              if (json.ques) {
                return json.ques[quesIndex] == json.ans[quesIndex];
              } else {
                return false;
              }
            });

            if (!isRight) {
              this.questionList.push(json);
            }
          }
        });

        // console.log(this.questionList);
    },
    openFooterTab() {
      this.show = true;
    },
    hideDialog() {
      this.showDialog = false;
    },
    changeIndex(index) {
      this.current = index;
    },

    swiperChange(e) {
      this.current = e.detail.current;
    },

    isRight(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].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;
      }
    },

    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;
      }
    },

    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;
      }
    },

    tabSelect(index, bankindex) {
      this.$set(this.questionList[bankindex], "current", index);
    },
  },
};
</script>

<style lang="scss" scoped>
.questionBank {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.swiper {
  width: 100%;
  flex: 1;
}
.lisSty {
  margin-bottom: 16rpx;
  display: flex;

  .flex_auto {
    flex: 1;
    word-break: break-all;
  }
}
.activeTI {
  vertical-align: middle;
  display: inline-block;
  border: 1rpx solid #eee;
  border-radius: 50rpx;
  height: 48rpx;
  line-height: 46rpx;
  text-align: center;
  width: 48rpx;
  margin-right: 15rpx;
  color: #666;
  font-size: 30rpx;

  &.right {
    color: #fff;
    background: #36c75a;
  }

  &.wrong {
    color: #fff;
    background: #ff3b30;
  }

  &.checked {
    color: #fff;
    background: #007aff;
  }
}

.submit_checkbox {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 120rpx;
  margin: 20rpx auto;
  width: 526rpx;
  height: 80rpx;
  background: rgba(0, 122, 255, 1);
  color: #fff;
  text-align: center;
  line-height: 80rpx;
  font-size: 30rpx;
  border-radius: 40rpx;
}
.titles {
  overflow: hidden;
  margin-bottom: 24rpx;
}
.titBox {
  padding: 41rpx 25rpx 24rpx 25rpx;
}

.titBox_title {
  padding: 21rpx;
}

.tabs {
  margin: 10rpx;
  display: flex;
  .tab {
    margin: 0 4rpx;
    padding: 10rpx 13rpx;
    text-align: center;
    color: #007aff;
    font-size: 28rpx;
    border-radius: 16rpx;
    background: #fff;

    &.current {
      color: #fff;
      background: #007aff;
    }
  }
}

.ans {
  margin: 8rpx 8rpx 8rpx;

  .ans_input {
    border-radius: 16rpx;
    background: #fff;
    .top {
      border-bottom: 1rpx solid #eeeeee;
      padding: 16rpx;
      display: flex;
      align-items: center;

      .icon {
        margin-right: 20rpx;
        width: 40rpx;
        height: 38rpx;
      }

      .progress {
        flex: 1;
      }

      .submit {
        width: 168rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        color: #fff;
        font-size: 30rpx;
        background: #007aff;
        border-radius: 24rpx;

        &.disabled {
          opacity: 0.6;
        }
      }
    }

    .textarea {
      textarea {
        width: 100%;
        height: 287rpx;
        padding: 10rpx;
      }
    }

    .imgs {
      overflow: hidden;
      display: flex;
      width: 100%;
      .img {
        width: 104rpx;
        height: 104rpx;
        border-radius: 8rpx;
        position: relative;
        margin: 20rpx;

        text {
          position: absolute;
          right: -15rpx;
          top: -15rpx;
          width: 30rpx;
          height: 30rpx;
          text-align: center;
          line-height: 30rpx;
          color: #fff;
          background: #ff3b30;
          border-radius: 50%;
        }

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .ans_submit {
    padding: 16rpx;
    border-radius: 16rpx;
    background: #fff;

    .imgs {
      overflow: hidden;
      display: flex;
      width: 100%;
      .img {
        width: 104rpx;
        height: 104rpx;
        border-radius: 8rpx;
        position: relative;
        margin: 20rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.leftLetters {
  display: flex;
  align-items: center;
  width: 220rpx;
  .btnType {
    padding: 5rpx 10rpx;
    border: 1rpx solid #007aff;
    border-radius: 10rpx;
    background-color: rgba(0, 122, 255, 0.1);
    font-size: 28rpx;
    color: #007aff;
    margin-right: 15rpx;
  }
}
.firstLetter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}
.popupView {
  height: 100%;
  padding-bottom: 100rpx;
  .popupTops {
    height: 77rpx;
    border-bottom: 1rpx solid #eee;
    text-align: center;
    line-height: 77rpx;
    font-size: 24rpx;
    color: #999;
    position: relative;
    .topIcon {
      position: absolute;
      top: 10rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 80rpx;
      height: 8rpx;
      background-color: #999;
      border-radius: 4rpx;
    }
  }
  .popupContent {
  }
}
.pageContent {
  position: relative;
  background-color: #eaeef1;
  height: 100%;
  overflow-y: scroll;
  padding-top: 8rpx;
  padding-bottom: 100rpx;
}
.pad_8 {
  background-color: #fff;
  margin: 0rpx 8rpx 8rpx;
  border-radius: 16rpx;

  &.no-margin {
    margin-top: -16rpx;
    border-radius: 0 0 16rpx 16rpx;
  }
}
.answer {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #666;
  font-size: 30rpx;
}
.footer_btn {
  background-color: #fff;
  z-index: 10078;
  position: fixed;
  bottom: 0rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 98rpx;
  padding: 0rpx 38rpx;
  border-top: 1rpx solid #eee;

  .flex_center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 200rpx;
    font-size: 24rpx;
    color: #999999;

    .up-icon {
      margin-bottom: 18rpx;
      width: 100%;
      display: flex;
      justify-content: center;
      image {
        width: 58rpx;
        height: 21rpx;
      }
    }
  }

  .collect {
    visibility: hidden;
    width: 100rpx;

    &.show {
      visibility: visible;
    }

    > view {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-bottom: 6rpx;
      }

      view {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
.boxSty {
  padding: 44rpx 41rpx 0rpx;
}
.liListSty {
  border: 1rpx solid #eeeeee;
  width: 88rpx;
  height: 88rpx;
  border-radius: 32rpx;
  text-align: center;
  line-height: 88rpx;
  color: #333;
  font-size: 32rpx;
  float: left;
  margin: 20rpx 23rpx;

  &.isRight {
    border: 1rpx solid #eeeeee;
    color: #fff;
    background: #36c75a;
  }

  &.isWrong {
    border: 1rpx solid #eeeeee;
    color: #fff;
    background: #ff3b30;
  }

  &.isPart {
    border: 1rpx solid #eeeeee;
    color: #fff;
    background: #ffc53d;
  }
}
.answerInfos {
  padding: 25rpx 25rpx 25rpx 23rpx;
}
.answerTitle {
  margin-bottom: 28rpx;
  color: #666;
  font-size: 30rpx;
}
.answerContent {
  font-size: 30rpx;
  color: #666;
}

.textChild {
  display: inline-block;
  vertical-align: middle;
}

.dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20000;

  .pointer {
    width: 338rpx;
    height: 240rpx;
  }

  .text {
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
  }

  .btn {
    width: 242rpx;
    height: 82rpx;
    border: 2rpx solid #ffffff;
    border-radius: 16rpx;
    text-align: center;
    line-height: 82rpx;
    margin: 41rpx auto;
    color: #fff;
    font-size: 32rpx;
  }
}
.popboxs {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.classTops {
  flex-shrink: 0;
  padding: 39rpx 0rpx 4rpx;
  font-weight: bold;
  color: #333;
  font-size: 30rpx;
}
.textStys {
  width: 100%;
  flex: 1;
  padding: 36rpx;
}
.classFootsty {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0rpx 40rpx;
  .btnsty {
    width: 200rpx;
    height: 80rpx;
    border-radius: 40rpx;
    font-weight: bold;
    font-size: 30rpx;
    text-align: center;
    line-height: 80rpx;
  }
  .btns1 {
    background-color: #f5f5f5;
    color: #007aff;
  }
  .btns2 {
    margin-left: 40rpx;
    background-color: #007aff;
    color: #ffffff;
  }
}
</style>