<template>
  <view class="threeExam">
    <topbar>
      <view class="nav">
        <image
          @click="back"
          mode="widthFix"
          class="leftArrow"
          src="https://ndata.zzxcx.net/ctjk/mp-wx/mockExamEnd/arrow-left.png"
        ></image>
        <text class="title">三力测试</text>
      </view>
    </topbar>
    <view class="mid1">
      <view class="mid1-line1">
        <view class="mid1-line1-title">考试类型 </view>
        <view class="mid1-line1-content"
          ><view>小车（C1/C2）</view> <view>摩托车（D/E/F）</view>
          <view>轻型牵引挂车（C6）</view>
        </view>
      </view>
      <view class="mid1-line1">
        <view class="mid1-line1-title">考试标准 </view>
        <view class="mid1-line1-content"><view>20题，20分钟 </view> </view>
      </view>
      <view class="mid1-line1">
        <view class="mid1-line1-title">合格标准 </view>
        <view class="mid1-line1-content"
          ><view>90分及格（满分100分） </view>
        </view>
      </view>
      <view class="mid1-line1">
        <view class="mid1-line1-title">出题规则 </view>
        <view class="mid1-line1-content"
          ><view>根据公安部出题规则组卷</view>
        </view>
      </view>
      <view class="mid1-line2">
        <view class="mid1-line2-content">
          温馨提示：考试模式不能修改答案，每错1题扣5分，错题累计超过2题，考试不能通过，系统自动提醒交卷。
        </view>
      </view>
      <view class="mid1-submit">
        <navigator url="/otherPages/threeExam/index?showSubmit=1">
          <view class="mid1-submit-begin"> 开始考试</view>
        </navigator>
        <navigator url="/otherPages/threeExam/index?showSubmit=0">
          <view class="mid1-submit-continue">继续练习</view>
        </navigator>
      </view>
    </view>
    <view class="mid2">
      <view class="mid2-line1">
        <image
          class="mid2-line1-icon"
          src="https://ndata.zzxcx.net/ctjk/mp-wx/threeExam/%E9%97%AE%E5%8F%B7%402x.png"
          mode="widthFix"
        ></image>
        <text style="color: #498ef5; font-size: 34rpx">什么是三力测试？</text>
      </view>
      <view class="mid2-line2">
        “三力”测试是指70周岁以上的人群申领小型汽车、小型自动档汽车、轻便摩托车的驾照时需要增加记忆力、判断力、反应力的测试,
        只有测试通过的才可报名。“三力”测试内容为驾驶理论,考生将随机抽取20道题（10道判断题、10道选择题）,20分钟完成作答,
        满分100分,90分合格,未通过的可以在三个月内补测两侧。
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    back() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.threeExam {
  background: url("https://ndata.zzxcx.net/ctjk/mp-wx/threeExam/bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .nav {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    .leftArrow {
      width: 18rpx;
      position: absolute;
      left: 30rpx;
    }
    .title {
      position: absolute;
      left: 50%;
    }
  }
  .mid1 {
    width: 690rpx;
    padding-bottom: 60rpx;
    background: #fff;
    margin: 0 auto;
    padding-top: 60rpx;

    box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.1);
    .mid1-line1 {
      display: flex;

      flex-direction: row;
      
      padding: 20rpx 30rpx;
   

      .mid1-line1-title {
        width: 270rpx;
        padding-right: 66rpx;
        text-align: right;
        color: #8a9099;
        font-size: 30rpx;
      }
      .mid1-line1-content {
        width: 412rpx;
        padding-right: 30rpx;
        text-align: left;
        font-size: 30rpx;
        color: #5c6066;
      }
    }
    .mid1-line2 {
      padding: 0 30rpx;
      margin-top: 28rpx;

      .mid1-line2-content {
        background: rgba(255, 77, 83, 0.1);
        color: #ff4d53;
        padding: 15rpx;
        font-size: 26rpx;
      }
    }
    .mid1-submit {
      margin-top: 60rpx;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      .mid1-submit-begin {
        width: 532rpx;
        height: 80rpx;
        background: #498ef5;
        border-radius: 40px 40px 40px 40px;
        opacity: 1;
        color: #fff;
        line-height: 80rpx;
        text-align: center;
      }
      .mid1-submit-continue {
        width: 532rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        opacity: 1;
        border: 2rpx solid #498ef5;
        margin-top: 40rpx;
        color: #498ef5;
        text-align: center;
      }
    }
  }
  .mid2 {
    width: 690rpx;
    background: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
    box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.1);
    padding-top: 40rpx;
    padding-bottom: 40rpx;
    .mid2-line1 {
      display: flex;

      padding-bottom: 30rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
      align-content: center;
      align-items: center;
      .mid2-line1-icon {
        width: 58rpx;
        margin-right: 16rpx;
      }
    }
    .mid2-line2 {
      width: 630rpx;
      margin: 0 auto;
      background: #f2f3f5;
      color: #5c6066;
      padding: 20rpx;
    }
  }
}
</style>