mn-h5/src/views/exam/begin.vue

<template>
  <div  class="container">
    <div style="background: #f4f3ef">
      <div class="header-text-left">Sub of a Driver Training System</div>
      <div class="headerImg">
        <img :src="subjectImg" />
        <img v-if="visible" @touchstart="backViewH5" src="@/assets/img/backButton.png" class="backButton" />
      </div>
      <div class="header-text-right">Sub of a Driver Training System</div>
      <div style="background: #fff; width: 100%; overflow: hidden" class="">
        <div class="content">
          <div class="box1">
            <div class="info">考试须知：</div>
            <div>1.遵守考场纪律，服从监考人员指挥。</div>
            <div>2.进入考场、手机关机。禁止抽烟，禁止吃零食。</div>
            <div>3.未经工作人员允许，考生禁止随意出入考场。</div>
            <div>4.考场内禁止大声题哗，禁止随意走动。</div>
            <div>5.考试中认真答题，不准交头接耳。</div>
            <div>6.考试中不准冒名顶替，不准弄虚作假。</div>
            <div>7.注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。</div>
            <div>8.爱护公物及考试设备。</div>
          </div>
          <div class="box2">
            <div class="info">驾考理论考试01号考台：</div>
            <div style="color: #ba2f35" class="box2-id">身份证号：123456789101112131415161718</div>
            <div class="box2-space1"></div>
            <div class="box2-name" style="color: #ba2f35">
              考生姓名：{{ query.username || '张三' }}
            </div>
            <div class="pl124 exam-container">
              <div
                @click="
                  () => {
                    push({
                      name: 'examTest',
                      query: query,
                    });
                  }
                "
                class="exam-button"
              >
                开始考试
              </div>
            </div>
            <div class="mt14" style="color: #ba2f35">点击"确认"按钮开始考试</div>
            <div class="box2-tip" style="color: #666769">
              操作提示：每题考试答案确认后，点击【下一题】，电脑立即判定所选答案，如选择错误，系统将提示正确答案，提示后不允许修改答案。
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
// import Api from '@/api/api';
import Phone from '@/utils/phone';
import subject4Img from '@/assets/img/subject4@2x.png';
import subject1Img from '@/assets/img/subject1@2x.png';
export default defineComponent({
  setup() {
    // window.localStorage.setItem(
    //   'token',
    //   'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjllNTU3NDk1LWQyOGQtNDMyNy1hYTBjLTdjOTk2OTk5NTk1YiJ9.GvGgys5erlFYJMLEhk2S1e7W_9CKDJohfXfW8fZpitkpZ8RWni5u9VvTGjl8dhD1916s-4MTM_7TsNaTNwsuPg',
    // );
    //旋转你的屏幕
    const phone = new Phone();
    const backView = phone.backView.bind(phone);
    const push = useRouter().push;
    const route = useRoute();
    const query = route.query;
    const subjectImg = query.subject == '1' ? subject1Img : subject4Img;
    console.log(query);

    if (query.token) {
      window.localStorage.setItem('token', query.token as string);
    }
    // Api.loginCodeTest().then(res=>{
    //   console.log(res)
    //   window.localStorage.setItem("token",res.data.token)
    // })
    const visible = ref(true)
    const backViewH5 = (e:TouchEvent)=>{
      alert("backViewH5")
      e.preventDefault();
      visible.value =false
      backView()

    }

    return {
      query,
      push,
      subjectImg,
      backViewH5,
      visible
    };
  },
});
</script>

<style lang="scss" scoped>
.font11 {
  font-size: 11px;
}
.mt14 {
  margin-top: 14px;
}
.pl138 {
  padding-left: 138px;
}
.pl124 {
  padding-left: 124px;
}
.pl24 {
  padding-left: 24px;
}
.exam-container {
  margin-top: 18px;
  .exam-button {
    width: 106px;
    height: 27px;
    background: #fff;
    opacity: 1;
    line-height: 27px;
    color: #38393b;
    text-align: center;
    border-radius: 4px;
    font-size: 16px;
    border: 1px solid #a1a2a4;
    border-radius: 0;
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  .backButton {
    position: absolute;
    top: 28px;
    left: 13px;
    width: 22px;
    height: 22px;
    z-index: 999;
    cursor: pointer;
  }
}
.header {
  width: 100%;
  height: 21.8vh;
  background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
  font-size: 26px;
  line-height: 21.8vh;
  color: white;
}
.header-text-left {
  color: #a9a9a1;
  text-align: left;
  height: 13px;
  line-height: 13px;
  font-size: 8px;
}
.header-text-right {
  color: #a9a9a1;
  text-align: right;
  height: 13px;
  font-size: 8px;
  border-bottom: 1px solid #d8d7d3;
  padding-right: 15px;
}
.headerImg {
  width: 100%;
  height: auto;

  > img {
    width: 100%;
    height: auto;
  }
}
.mt15 {
  margin-top: 15px;
}
.content {
  width: 723px;
  height: 67vh;
  padding: 0 0;
  margin: 0 auto;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #eae9e5;
  background: #f5f6f8;
  .box1 {
    width: 50%;
    height: 100%;
    padding-top: 15px;
    padding-left: 20px;
    color: #3d3c38;
    border-right: 1px solid #eae9e5;
    .info {
      font-size: 14px;
      margin-bottom: 7px;
      font-weight: 700;
      font-size: 14px;
    }
    div {
      text-align: left;
      font-size: 13px;
      margin-bottom: 4px;
    }
  }
  .box2 {
    width: 50%;
    height: 100%;
    text-align: left;
    padding-top: 18px;
    padding-left: 17px;
    font-size: 13px;
    .box2-space1 {
      height: 5px;
    }
    .box2-id {
      font-weight: 700;
      font-size: 13px;
    }
    .box2-name {
      font-weight: 700;
      font-size: 13px;
    }
    .box2-tip {
      margin-top: 7px;
      font-size: 11px;
    }
    .info {
      margin-bottom: 7px;
      font-size: 14px;
      font-weight: 700;
    }
  }
}
</style>