<template>
  <div>
    <template v-if="true">
      <div class="title">
        <span>1.</span>将以下5个句子重新排列组合，排列组合最连贯的是（ ）。
      </div>
      <div class="describe">甘露寺正位于北固山，所以移徒这段漕路，势必要紧贴北固山与山根的顽石打交手战，这样的工程自非一日之功。甘露寺正位于北固山，所以移徒这段漕路，势必要紧贴北固山与山根的顽石打交手战，这样的工程自非一日之功。</div>
      <ul class="check-option"> <!-- radio-option check-option -->
        <li class="active">
          <div class="icon"></div>
          <div class="txt">A.⑤④②③①</div>
        </li>
        <li>
          <div class="icon"></div>
          <div class="txt">A.⑤④②③①</div>
        </li>
        <li>
          <div class="icon"></div>
          <div class="txt">A.⑤④②③①</div>
        </li>
        <li>
          <div class="icon"></div>
          <div class="txt">A.⑤④②③①</div>
        </li>
      </ul>
    </template>
    <template v-if="false">
      <div class="case-que">
        <div class="stem">李克强在讲话中首先代表党中央、国务院，向受命名的地方和受表彰的单位与个人
表示热烈祝贺，向人民解放军指战员、武警官兵、民兵预备役人员、部队职工，向烈军
属、伤残军人、转业复员退伍军人和军队离退休干部，向双拥工作战线的同志们致以诚
挚问候，向所有关心支持国防和军队建设的社会各界人士表示衷心感谢。
李克强说，党的十八大以来，在以习近平同志为核心的党中央坚强领导下，各地区
各有关部门积极支持和服务保障军队建设改革，进一步加大优抚安置保障，军队支援经
济社会发展积极有为，在参与重大自然灾害抢险救援和应对突发事件中当先锋，年面对
疫情，人民子弟兵闻令而动、敢打硬仗，广大军民携手同心、共克时艰，取得了抗击疫
情斗争重大战略成果，彰显了军政军民团结的强大力量。</div>
        <ul class="topics" :style="{height: contentHeight - 60 + 'px'}">
          <li>
            <div class="title">
              <span>11.</span>将以下5个句子重新排列组合，排列组合最连贯的是。
            </div>
            <ul class="radio-option"> <!-- radio-option check-option -->
              <li class="active">
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
            </ul>
          </li>
          <li>
            <div class="title">
              <span>11.</span>将以下5个句子重新排列组合，排列组合最连贯的是。
            </div>
            <ul class="check-option"> <!-- radio-option check-option -->
              <li class="active">
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    contentHeight: { type: Number, default: () => {} }
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
.title{
  font-size: 18px;
  font-weight: bold;
  color: #222222;
  line-height: 25px;
  span{
    font-size: 32px;
    font-weight: bold;
    color: #222222;
    line-height: 45px;
  }
}
.describe{
  font-size: 18px;
  color: #222222;
  line-height: 25px;
  margin-top: 20px;
}
.radio-option,.check-option{
  padding: 24px 0 0 0;
  margin: 0;
  list-style: none;
  li{
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .icon{
      width: 18px;
      height: 18px;
      border: 1px solid #999999;
      border-radius: 50%;
    }
    .txt{
      font-size: 18px;
      color: #222222;
      line-height: 18px;
      margin-left: 10px;
    }
    &.active{
      .icon{
        width: 8px;
        height: 8px;
        border: 6px solid #C01540;
      }
    }
  }
}
.check-option{
  .icon{
    border-radius: 3px !important;
  }
}
.case-que{
  display: flex;
  .stem{
    flex: 1;
    font-size: 14px;
    font-weight: bold;
    color: #222222;
    line-height: 28px;
  }
  .topics{
    flex: 1;
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
    overflow-y: scroll;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
    li{
      .title{
        font-size: 18px;
        font-weight: bold;
        color: #222222;
        line-height: 25px;
        span{
          font-size: 32px;
          font-weight: bold;
          color: #222222;
          line-height: 45px;
        }
      }
    }
  }
}
</style>
