<template>
  <div class="examination">
    <!-- <TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead> -->
    <div class="notice">
      <div class="noticebox">
        <div class="main">
          <div class="e_title">管理者进阶腾飞班 - 第一次考试</div>
          <div class="et_detail">
            <div class="et_icon"></div>
            <div class="et_time">2022-7-20 00:00 至 2022-8-29 23:59:59</div>
          </div>
          <div class="et_box">
            <div class="et_length">
              <div class="et_name">考试时长：</div>
              <div class="et_minute">30分钟</div>
              <div class="et_lineicon"></div>
              <div class="et_name">及格分数：</div>
              <div class="et_score">60</div>
            </div>
          </div>
        </div>
      </div>

      <div class="noticebox">
        <div class="main">
          <div class="btnbox">
            <button class="textbtn">开始考试</button>
          </div>
          <div class="e_form">
            <table>
              <tr class="trbox1">
                <th>提交时间</th>
                <th>成绩</th>
                <th>状态</th>
              </tr>
              <tr class="trbox2">
                <td>2022-7-20 00:00</td>
                <td>10分</td>
                <td>已完成</td>
              </tr>
              <tr class="trbox3">
                <td>2022-7-20 00:00</td>
                <td>10分</td>
                <td>已完成</td>
              </tr>
              <tr class="trbox4">
                <td>2022-7-20 00:00</td>
                <td>10分</td>
                <td>已完成</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { reactive, toRefs } from "vue";
// import TitleHead from "@/components/TitleHead.vue";
export default {
  name: "ExamiNation",
  // components: {
  //   TitleHead,
  // },
  setup() {},
};
</script>
<style lang="scss" scoped>
.examination {
  width: 100%;
  background-color: #f2f5f7;
}

.notice {
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
}
.noticebox {
  width: 100%;
  background: #fff;
  margin-bottom: 11.5px;
  .main {
    width: 90%;
    margin: 0 auto;
    padding-top: 18.5px;
    padding-bottom: 27.5px;
  }
}
.e_title {
  margin-bottom: 14.5px;
  font-weight: 600;
}
.et_detail {
  display: flex;
  margin-bottom: 11.5px;
  align-items: center;
  .et_icon {
    width: 15px;
    height: 15px;
    background-image: url("../../assets/image/readyexamination/time.png");
    background-size: 100% 100%;
    margin-right: 6px;
  }
  .et_time {
    color: #6e7b84;
  }
}
.et_box {
  margin-top: 16.5px;
  background-color: #f2f5f7;
  border-radius: 10px;
  padding: 18px 0 17px 22px;
  .et_length {
    display: flex;
    align-items: center;
    .et_name {
      margin-right: 5px;
      color: #6e7b84;
    }
    .et_minute {
      color: #2478ff;
      margin-right: 56px;
    }
    .et_lineicon {
      width: 17.5px;
      height: 17.5px;
      background-image: url(../../assets/image/readyexamination/smile.png);
      margin-right: 8px;
    }
    .et_score {
      color: #ff9e00;
    }
  }
}

.btnbox {
  width: 100%;
  height: 33px;
  background-color: #2478ff;
  border-radius: 6px;
  box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
  font-size: 13.5px;
  // margin: 18.5px auto 43.5px 20px;
  margin-top: 18.5px;
  margin-bottom: 43.5px;
  text-align: center;
  line-height: 33px;
  .textbtn {
    width: 90%;
    border: none;
    background-color: #2478ff;
    border-radius: 6px;
    color: #ffffff;
  }
}
.e_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #333330;
  table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin-bottom: 6.5px;
    .trbox1 {
      width: 342.5px;
      height: 40px;
      border-radius: 4px;
      background-color: #f2f5f7;
    }
    td {
      padding: 14.5px;
    }
    .trbox2,
    .trbox3,
    .trbox4 {
      border-bottom: 0.5px solid #f1f2f3;
    }
  }
}
</style>
