nbjk-xcx/src/otherPages/threeExam/index.vue

<template>
  <view class="threeExam">
    <view class="topad">
      <ad
        class="wxad"
        :ad-intervals="100"
        unit-id="adunit-f9ac1a546be5b3f0"
      ></ad>
    </view>
    <view class="problem">
      <text class="problem-type"> 判断题 </text>
      <text class="problem-issue"
        >{{ problemListIndex + 1 }}、{{
          problemList[problemListIndex].question
        }}</text
      >
      <view class="problem-radio">
        <van-radio-group :value="problemList[problemListIndex].answer">
          <van-radio
            label-class="pl0"
            custom-class="mt40"
            use-icon-slot
            name="1"
          >
            <view class="problem-radio-flex">
              <view class="problem-radio-icon">
                <view class="problem-radio-letter">{{
                  numberToLetter(0)
                }}</view>
              </view>
              <text
                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
                >正确</text
              >
            </view>
          </van-radio>
          <van-radio
            label-class="pl0"
            custom-class="mt40"
            use-icon-slot
            name="1"
          >
            <view class="problem-radio-flex">
              <view class="problem-radio-icon">
                <view class="problem-radio-letter">{{
                  numberToLetter(1)
                }}</view>
              </view>
              <text
                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
                >错误</text
              >
            </view>
          </van-radio>
        </van-radio-group>
      </view>
    </view>
    <view class="bottom">
      <view class="switch">
        <view class="pre"> 上一题</view>
        <view class="next"> 下一题</view>
      </view>
      <view class="submit">
        <view class="submit-button"> 交卷&nbsp;19:57 </view>
        <view class="count">
          <view class="col">
            <icon type="success" size="26rpx" color="#33CDA4"></icon>
            <text style="font-size: 24rpx; color: #8a9099; margin-left: 8rpx"
              >180</text
            >
          </view>
          <view class="col">
            <icon type="clear" size="26rpx" color="#FF4D53"></icon>
            <text style="font-size: 24rpx; color: #8a9099; margin-left: 8rpx"
              >20</text
            >
          </view>
          <view class="col">
            <van-icon name="description" />
            <text style="font-size: 24rpx; color: #8a9099; margin-left: 8rpx"
              >100/180</text
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api";
export default {
  data() {
    return {
      problemList: [
        {
          an1: "红色",
          an2: "黄色",
          an3: "紫色",
          an4: "绿色",
          an5: "",
          an6: "",
          an7: "",
          answertrue: "1",
          bestExplainNew: "图中信号灯亮的是红灯。",
          bestanswerid: "1351372021270892544",
          chapterid: 0,
          cityid: 0,
          diffDegree: 3,
          errorRate: 0,
          explain: "图中信号灯亮的是红灯。",
          gs: "test",
          id: 26852,
          intnumber: "",
          jieshiFrom: "",
          kemu: 1,
          keyword: "",
          licensetype: "",
          mediaUrl:
            "https://t1-1305573081.file.myqcloud.com/yd/app/media/26852-1606813820528.webp",
          moretypes: "",
          question: "下图中指示灯的颜色是什么？",
          questionSource: 3,
          showOptionType: 0,
          sinaimg: "26852-1606813820528.webp",
          strtppe: "87",
          strtypeL: "8701",
          type: 2,
          videoUrl: "",
        },
      ],
      problemListIndex: 0,
    };
  },
  onLoad() {
    api.exam
      .studentThreeForceList({
        pageNum: 1,
        pageSize: 20,
      })
      .then((res) => {
        console.log(res);
      });
  },
  methods: {
    numberToLetter(index) {
      index = Number(index);
      return String.fromCharCode(index + 65);
    },
  },
};
</script>

<style lang="scss" scoped>
.topad {
  padding: 0 30rpx;
}
.threeExam {
  background: #fff;
  width: 100%;
  height: 100vh;
}
.wxad {
  border: none;
}
.problem {
  padding: 0 30rpx;

  .problem-type {
    font-size: 22rpx;
    color: #fff;
    background: #2878ff;
    width: 94rpx;
    height: 40rpx;
    padding: 6rpx 20rpx;
    border-radius: 8rpx;
    margin-right: 10rpx;
    vertical-align: middle;
  }
  .problem-issue {
    font-size: 42rpx;
    vertical-align: middle;
    font-weight: bold;
    color: #0a1a33;
  }
  .problem-radio {
    .problem-radio-flex {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      align-items: center;
    }
    .problem-radio-icon {
      width: 70rpx;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .problem-radio-letter {
        width: 60rpx;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 42rpx;
        color: #333;

        box-shadow: 0px 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.26);
        text-align: center;
        border-radius: 50%;
      }
    }
  }
}
.bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .switch {
    bottom: 48rpx;
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .pre {
      width: 156rpx;
      height: 76rpx;
      line-height: 76rpx;
      background: #ffffff;
      color: #8a9099;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      opacity: 1;
      border: 2rpx solid #707070;
      text-align: center;
    }
    .next {
      width: 156rpx;
      height: 76rpx;
      line-height: 76rpx;
      color: #8a9099;
      background: #ffffff;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      opacity: 1;
      border: 2rpx solid #707070;
      text-align: center;
    }
  }
  .submit {
    margin-top: 50rpx;
    width: 100%;
    height: 98rpx;
    box-shadow: 2rpx -2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 0 30rpx;
    .submit-button {
      width: 180rpx;
      line-height: 68rpx;
      background: #498ef5;
      border-radius: 34rpx 34rpx 34rpx 34rpx;
      opacity: 1;
      color: #fff;
      text-align: center;

      font-size: 24rpx;
    }
  }
  .count {
    width: 390rpx;
    display: flex;
    justify-content: space-between;
    .col {
      display: flex;
    }
  }
}
</style>