<template>
  <div class="examinationscore">
    <!-- <TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead> -->
    <div class="notice">
      <div class="noticebox">
        <div class="main">
          <div class="mainbody">
            <div class="scoretitle">阶段性考试</div>
            <div class="scorebox">
              <div class="scoredetail">
                您本次考试分数：
                <div class="score">84</div>
                <div class="grade">分</div>
              </div>
            </div>
          </div>
          <!-- <div class="btnbox">
            <div class="closebtn">关闭</div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { reactive, toRefs } from "vue";
// import TitleHead from "@/components/TitleHead.vue";
export default {
  name: "ExaminationScore",
  // components: {
  //   TitleHead,
  // },
  setup() {},
};
</script>
<style lang="scss" scoped>
.examinationscore {
  width: 100%;
  padding-bottom: 20px;
}

.notice {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .noticebox {
    width: 100%;
    background: #ffffff;
    border-radius: 4px;
    position: relative;
    display: flex;
    justify-content: center;
    .main {
      width: 90%;
      border-radius: 2px;
      .mainbody {
        width: 100%;
        margin: 240px auto;
        background-color: #f2f5f7;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .scoretitle {
          margin: 17.5px auto 15.5px auto;
          font-size: 15px;
          font-weight: 600;
          color: #04243C;
        }
        .scorebox {
          width: 320.5px;
          height: 55.5px;
          border-radius: 2px 6px 2px 6px;
          background-color: #ffffff;
          margin-bottom:11.5px;
          .scoredetail {
            display: flex;
            font-size: 13px;
            font-weight: 500;
            margin: 21.5px auto auto 92.5px;
            .score {
              font-size: 24px;
              font-weight: 600;
              color: #FF9E00;
              margin-top: -7px;
            }
            .grade {
              font-size: 13px;
              color: #FF9E00;
              margin-bottom: 21.5px;
            }
          }
        }
      }
      // .btnbox {
      //   width: 83px;
      //   height: 33px;
      //   background-color: #2478ff;
      //   border-radius: 2px;
      //   box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
      //   font-size: 14px;
      //   margin: 18px auto 218.5px auto;
      //   text-align: center;
      //   line-height: 33px;
      //   .closebtn {
      //     border: none;
      //     background-color: #2478ff;
      //     color: #ffffff;
      //   }
      // }
    }
  }
}
</style>
