<template>
  <div class="bg-gray w-full min-h-screen">
    <div class="pt30 pr30 pl30 pb30">
      <div class="w-full gray-border">
        <div class="pt30 pl30 text-left font26 pb50 bg-white">
          <span
            >2.避让特种车辆使其顺利通过后，车辆应该有序回到原车道继续行驶，</span
          >
          <div>B.错误</div>
          <div>A.正确</div>
          <div class="inline-block pl15 pr5 mt15" style="background-color: #d9ffeb">
            <img
              class="inline-block w42 h42"
              src="@/assets/img/studySkill/smile_express.png"
            />
            <span style="color: #21a65f" class="lh60"> 恭喜！回答正确！</span>
          </div>
          <div>
            <div
              class="mt30 w88 items-center bottom-button flex h40 justify-center"
            >
              <img
                class="w18 h18 inline-block mr10"
                src="@/assets/img/studySkill/voice_icon.png"
              />
              <span class="font16">读题</span>
            </div>
          </div>
          <div class="flex mt15">
            <div class="w57 lh46 bottom-button mr15">√</div>
            <div class="w57 lh46 bottom-button">×</div>
          </div>
        </div>
      </div>
      <div class="w-full pt30">
        <div class="w1200 flex justify-between mr-auto ml-auto">
          <div class="w120 lh46 bottom-button lh46">上一题</div>
          <div class="w120 lh46 bottom-button lh46">下一题</div>
          <div class="w120 lh46 bottom-button lh46">本题解析</div>
          <div class="w120 lh46 bottom-button lh46">语音播报</div>
          <div class="w120 lh46 bottom-button lh46">不设为错题</div>
          <div class="w120 lh46 bottom-button lh46">交卷</div>
        </div>
      </div>
      <div class="w-full mt20">
        <div
          class="flex w1200 mr-auto ml-auto h30 items-center content-center justify-around"
        >
          <div class="flex items-center">
            <div class="pr2 pl2">转到</div>
            <input class="outline-none input-border w35 h30 text-center" type="text" />
            <div class="pr2 pl2">题</div>
          </div>

          <div>共 <span class="font-semibold">48</span> 题</div>
          <div class="align-baseline">
            <input class="" type="checkbox" />
            <span>答对自动跳转到下一题</span>
          </div>
          <div>
            <div class="mr15 inline-block">
              答对<span style="color: #21a65f">2</span>题
            </div>
            <div class="inline-block">
              答错<span style="color: #ef3629">2</span>题
            </div>
          </div>
          <div class=""><span class="text-black font16">正确率100%</span></div>
          <div class=""><span class="text-black font16">进度 42%</span></div>
          <div class="flex items-center content-center">
            <div class="mr15"><input class="" type="checkbox" /> <span>自动播放</span></div>
            <div><input class="" type="checkbox" /> <span>提示红字</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import api from '@/api'
export default defineComponent({
  setup() {
    api.open.questionInfoSelectFreeQuestionInfo({
      subject:4
    }).then(res=>{
      console.log(res)

    })
    return {};
  },
});
</script>

<style scoped>
input[type="checkbox"] {
  margin-right: 5px;

  cursor: pointer;

  font-size: 14px;

  width: 15px;

  height: 12px;

  position: relative;
}

input[type="checkbox"]:after {
  position: absolute;

  width: 16px;

  height: 16px;

  top: 0;
  left: 0px;

  content: " ";

  background-color: #f9de5b;

  color: #fff;

  display: inline-block;

  visibility: visible;

  border-radius: 3px;
}

input[type="checkbox"]:checked:after {
  width: 16px;
  height: 16px;
  background-size: 100%;
  background-image: url("./../../assets/img/login/checked_icon.png");
}
.input-border {
  border: 1px solid #707070;
}
.bg-gray {
  background: #f5f5f5;
}
.gray-border {
  border: 1px solid #d8d8d8;
}
.bg-primary-yellow {
  background: #f9de5b;
}
.bottom-button {
  text-align: center;
  border: 1px solid #f9de5b;
  cursor: pointer;
}
.bottom-button:hover {
  background: #fff7cc;
}
.w1200 {
  width: 1200px;
}
</style>