<template>
  <Page title="待批改">
    <div class="startexamin_box">
      <div class="left">
        <el-button style="width: 160px; height: 40px"
          >点 击 显 示 客 观 题</el-button
        >
        <div class="exam_info_left" v-for="(item, index) in 5">
          <div class="exam_info_left_title">第一题 单选题(本题分值1分)</div>
          <div class="exam_info_left_content">
            <div class="exam_info_left_content_title">1.这是本题的题目。</div>
            <div
              style="
                font-size: 18px;
                font-weight: 500;
                clear: #31373d;
                margin-bottom: 24px;
              "
            >
              <span>考生答案：</span>
              <span style="color: #215acd">考生答案</span>
            </div>
            <div class="exam_info_left_content_answer">
              <div
                class="exam_info_left_content_answer_title"
                style="color: #38b865"
              >
                这是本题答案
              </div>
              <div class="exam_info_left_content_answer_desc">答案解析：</div>
              <div class="exam_info_left_content_answer_content">
                这是本题的答案解析，解析内容较长，需要占用多行这是本题的答案解析，解析内容较长，这是本题的答案解析，解析内容较长，需要占用多行这是本题的答案解析，解析内容较长，这是本题的答案解析，解析内容较长，需要占用多行这是本题的答案解析，解析内容较长，需要占用多行这是本题的答案解析，解析内容较长，需要占用多行这是本题的答案解析，解析内容较长，需要占用多行这是本题的答案解析，解析内容较长，需要占用多行这是本题的答案解析，解析内容较长，需要占用多行
              </div>
            </div>
            <div class="exam_info_left_content_answer">
              <div class="exam_info_left_content_answer_title">
                本题总分：1分
              </div>
              <div class="exam_info_left_content_answer_desc">阅卷得分：</div>
              <div class="exam_info_left_content_answer_content">
                <el-input placeholder="0" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rigth">
        <div class="exam_info_right_top">
          <div class="exam_info_right_top_title">这里是考试名称</div>
          <div class="exam_info_right_top_content">
            <div>试卷总分：100分</div>
            <div>及格分数：60分</div>
            <div>考生得分：80分</div>
            <div>考试用时：30分钟</div>

            <el-button
              style="
                width: 160px;
                height: 40px;
                background-color: #215acd;
                margin: 0 auto;
              "
              type="primary"
              >批 改 完 成</el-button
            >
          </div>
        </div>
        <div class="exam_info_right_main">
          <div
            class="rigth_main_content"
            v-for="(item, index) in 5"
            :key="index"
          >
            <div class="rigth_main_content_title">
              <text>第一题 单选题</text>
              <text>总10题/共 20 分</text>
            </div>
            <div class="rigth_main_content_item">
              <div
                v-for="(items, indexs) in 10"
                :class="['rigth_main_content_items']"
                :style="{ backgroundColor: indexs == 7 ? '#EB5E12' : '' }"
              >
                {{ indexs + 1 }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Page>
</template>
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { CircleCheckFilled, CircleCloseFilled } from '@element-plus/icons-vue';
</script>
<style lang="scss" scoped>
.startexamin_box {
  width: 100%;
  height: 730px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  .left {
    flex: 1;
    // height: 730px;
    // border: 1px solid red;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    padding: 24px 24px 0 24px;
    background-color: #fff;
    .exam_info_left {
      display: flex;
      flex-direction: column;
      gap: 12px;
      //       border: 1px solid red;
      .exam_info_left_title {
        width: 100%;
        height: 80px;
        background-color: #f7f9fa;
        font-size: 18px;
        font-weight: 500;
        line-height: 80px;
        box-sizing: border-box;
        padding-left: 24px;
        padding-right: 24px;
        color: #31373d;
      }
      .exam_info_left_content {
        box-sizing: border-box;
        padding: 24px 24px 0 24px;
        background-color: #f7f9fa;
        font-size: 20px;
        font-weight: 400;
        color: #31373d;
        .exam_info_left_content_title {
          margin-bottom: 24px;
        }
        .exam_info_left_content_option {
          display: flex;
          flex-direction: column;
          gap: 12px;
          .exam_info_left_content_option_item {
            display: flex;
            gap: 10px;
            align-items: center;
            font-size: 18px;
            font-weight: 400;
            color: #31373d;
          }
        }
        .exam_info_left_content_answer {
          width: 100%;
          border-top: 1px solid #e6e8eb;
          display: flex;
          flex-direction: column;
          gap: 12px;
          box-sizing: border-box;
          padding-top: 24px;
          padding-bottom: 24px;
          //   margin-top: 24px;
          .exam_info_left_content_answer_title,
          .exam_info_left_content_answer_desc {
            font-size: 18px;
            font-weight: 500;
            color: #31373d;
          }
          .exam_info_left_content_answer_content {
            font-size: 16px;
            font-weight: 400;
            color: #4e5969;
          }
        }
      }
    }
  }
  .rigth {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    // border: 1px solid red;

    .exam_info_right_top {
      background-color: #ffffff;
      width: 100%;
      //       height: 332px;
      padding: 24px;
      box-sizing: border-box;
      .exam_info_right_top_title {
        font-size: 18px;
        font-weight: 500;
        color: #31373d;
        margin-bottom: 28px;
      }
      .exam_info_right_top_content {
        display: flex;
        flex-direction: column;
        gap: 24px;
        font-size: 16px;
        font-weight: 500;
        color: #31373d;
      }
    }
    .exam_info_right_main {
      flex: 1;
      background-color: #ffffff;
      box-sizing: border-box;
      padding: 16px 24px;
      display: flex;
      flex-direction: column;
      gap: 28px;
      //   height: 384px;
      //   border: 1px solid red;
      overflow-y: auto;
      .rigth_main_content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        .rigth_main_content_title {
          //   height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          font-weight: 500;
        }
        .rigth_main_content_item {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          .rigth_main_content_items {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            background-color: #38b865;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
            border: 1px solid #d4d6d9;
          }
          .selectedactive {
            background-color: #e2eaf6;
          }
          .answered {
            background-color: #215acd;
            color: white;
          }
          .selectedactive.answered {
            background-color: #215acd;
            color: white;
          }
        }
      }
    }
  }
}
</style>
