fe-student/src/views/examination/ExamPage.vue

<template>
  <div class="surveydetail" style="padding: 30px">
    <!-- 面包屑导航 -->
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <div class="crumb">
        <div>{{ pName }}</div>
        <div style="margin-left: 6px; margin-right: 6px">/</div>
        <div>{{ sName }}</div>
        <div style="margin-left: 6px; margin-right: 6px">/</div>
        <div style="font-weight: 700; font-size: 16px">考试详情</div>
      </div>
        <!--
      <div class="prevnext">
        <div class="prev">
          <img
            style="width: 23px; height: 23px"
            src="../../assets/image/prev.png"
          />
          <div style="margin-left: 7px">上一个</div>
        </div>
        <div class="prev" style="margin-left: 31px">
          <div style="margin-right: 7px">下一个</div>
          <img
            style="width: 23px; height: 23px"
            src="../../assets/image/next.png"
          />
        </div>
      </div>-->
      <div class="return">
      <div style="display: flex" @click="returnclick">
                  <img
                    class="img2" style="margin-right:22px;"
                    src="../../assets/image/return.png"
                  />
                  <div class="text">返回</div>
        </div>
    </div>
    </div>
    <!-- 面包屑导航 -->
    <!-- 标题 -->
    <div class="title">【调研】管理者进阶腾飞班 - 培训阶段性考试</div>
    <!-- 标题 -->
    <!-- 详细内容 -->
    <div class="bascinfo">
      <!-- 中间盒子 -->
      <div class="centercontent">
        <div class="righttitle">
          <img
            style="width: 20px; height: 20px"
            src="../../assets/image/yuan.png"
          />

          <div class="text">{{ data.examinationName }}</div>
          <div class="box"></div>
        </div>
        <!-- 考试测试的盒子 -->
        <div class="test clearfix">
          <div class="detail">
            <span style="margin-right: 43px"
              >考试时间：{{ data.examinationDuration }}分钟</span
            >
            <span>及格线：{{ data.passLine || 60 }}</span>
          </div>
          <div class="testtime clearfix">
            <div class="timedetail">
              考试时间：{{ data.examinationStartTime }} 至
              {{ data.examinationEndTime }}
            </div>
          </div>
        </div>
        <!-- 考试测试的盒子 -->

        <!-- 开始考试按钮 -->
        <button class="starttest" style="cursor: pointer">开始考试</button>
        <!-- 开始考试按钮 -->
        <div class="righttitleE">
          <img
            style="width: 20px; height: 20px"
            src="../../assets/image/yuan.png"
          />

          <div class="text">历史纪录</div>
          <div class="box"></div>
        </div>

        <div class="history">
          <div class="historytitle clearfix tongyi">
            <div class="content1">提交时间</div>
            <div class="content2">成绩</div>
            <div class="content3">状态</div>
            <div class="content4">操作</div>
          </div>
          <div class="historytitle2 clearfix tongyi">
            <div class="content1">2022-7-20&nbsp;00:00</div>
            <div class="content2">10分</div>
            <div class="content3" style="left: 505px">已完成</div>
            <button class="contentbtn">查看考卷</button>
          </div>
          <div class="fenge"></div>
          <div class="historytitle2 clearfix tongyi">
            <div class="content1">2022-7-18&nbsp;00:00</div>
            <div class="content2">10分</div>
            <div class="content3" style="left: 505px">已完成</div>
            <button class="contentbtn">查看考卷</button>
          </div>
          <div class="fenge"></div>
          <div
            class="historytitle2 clearfix tongyi"
            style="border-radius: 0px 0px 8px 8px"
          >
            <div class="content1">2022-7-14&nbsp;00:00</div>
            <div class="content2">10分</div>
            <div class="content3" style="left: 505px">已完成</div>
            <button class="contentbtn">查看考卷</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 详细内容 -->
  </div>
  <!--  todo #考试接口 暂时没有-->
</template>

<script setup>
import { useRoute } from "vue-router/dist/vue-router";
import { usePage, useRequest } from "@/api/request";
import { COMMENT_LIST, DISCUSS_DETAIL, EXAMINATION_QUERY } from "@/api/api";

const {
  query: { id, discussSubmitId, pName, sName },
} = useRoute();

const { data } = useRequest(EXAMINATION_QUERY(159), {});
</script>

<style scoped lang="scss">
.surveydetail {
  .crumb {
    color: #fff;
    display: flex;
    font-size: 14px;
    line-height: 24px;
  }
  .return{
    position: absolute;
    right: 10%;
    .text{
      text-align: center;
     display: flex;
     flex-direction: row;
     align-items: center;
    }
  }
  .prevnext {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;

    .prev {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }

  .title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    line-height: 24px;
    margin-top: 17px;
    margin-left: -11px;
  }

  .bascinfo {
    min-height: 800px;
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }

    .centercontent {
      position: relative;

      .righttitle {
        display: flex;
        padding-top: 30px;
        position: relative;

        .text {
          margin-left: 8px;
          font-size: 16px;
          color: rgba(51, 51, 51, 1);
          font-weight: 800;
        }

        .box {
          width: 75px;
          height: 10px;
          background-color: rgba(36, 120, 255, 0.15);
          position: absolute;
          left: 23px;
          top: 44px;
        }
      }

      .test {
        margin-top: 16px;
        margin-bottom: 26px;
        width: 842px;
        height: 158px;
        background: #f2f5f7;
        border-radius: 8px;

        .detail {
          margin-top: 29px;
          margin-left: 44px;
          height: 14px;
          font-size: 14px;
          font-weight: 500;
          color: #56a3f9;
        }

        .testtime {
          margin-top: 20px;
          margin-left: 10px;
          width: 823px;
          height: 81px;
          background: #ffffff;
          border-radius: 0px 8px 0px 8px;

          .timedetail {
            font-size: 14px;
            font-weight: 500;
            color: #333330;
            margin-top: 32px;
            margin-left: 34px;
          }
        }
      }

      .starttest {
        position: absolute;
        width: 146px;
        height: 46px;
        background: #2478ff;
        box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
        border-radius: 4px;
        border: 0;
        font-size: 14px;
        font-weight: 800;
        color: #ffffff;
        left: calc(50% - 73px);
        cursor: pointer;
      }

      .righttitleE {
        display: flex;
        margin-top: 110px;
        // padding-top: 30px;
        position: relative;

        .text {
          margin-left: 8px;
          font-size: 16px;
          color: rgba(51, 51, 51, 1);
          font-weight: 800;
        }

        .box {
          width: 75px;
          height: 10px;
          background-color: rgba(36, 120, 255, 0.15);
          position: absolute;
          left: 23px;
          top: 14px;
        }
      }

      .history {
        position: relative;
        margin-top: 32px;
        width: 842px;
        height: 200px;
        border: 1px solid #d7e5fd;
        border-radius: 8px;

        .clearfix:before,
        .clearfix:after {
          content: "";
          display: table;
          clear: both;
        }

        .fenge {
          width: 841px;
          border-top: 1px solid #d7e5fd;
        }

        .tongyi {
          display: flex;
        }

        .content1 {
          margin-top: 14px;
          margin-left: 77px;
        }

        .content2 {
          position: absolute;
          margin-top: 14px;
          left: 328px;
        }

        .content3 {
          position: absolute;
          margin-top: 14px;
          left: 512px;
        }

        .content4 {
          position: absolute;
          margin-top: 14px;
          left: 700px;
        }

        .contentbtn {
          position: absolute;
          margin-top: 14px;
          left: 685px;
          font-size: 15px;
          // line-height: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #2478ff;
          background-color: #fff;
          border: 0;
          cursor: pointer;
        }

        .historycontent {
          width: 59px;
          height: 14px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          // font-weight: 400;
          color: #333330;
          line-height: 38px;
        }

        .historytitle {
          width: 842px;
          height: 50px;
          background: #f2f5f7;
          border-radius: 8px 8px 0px 0px;
        }

        .historytitle2 {
          width: 842px;
          height: 48px;
          background: #fff;
        }
      }
    }
  }
}
</style>